I'm trying to get the save button and go back button to appear on the same row: I've truncated the code a bit for clarity:
I think i'm running into issues because one button is part of a form and the other is not. Initially i tried making them a part of the same <div class="row"></div> but to no avail.
#using (Html.BeginForm())
{ ...
<div class="row">
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" id="savebtn" />
</div>
</div>
</div>
}
#Html.ActionLink("Go Back", "Create", null, new { #class = "gobackbtnedit"})
</div>
It may be worth tagging your question with CSS, as it is a basic layout issue, really.
If you picture your form taking up a rectangular space, then having the link displayed within it is usually going to involve either:
Doing absolute positioning for your link to force its position.
Placing the link inside the form.
Placing the link beside the form, aligned so it is next to the button (which would have to be on the edge of the form).
I personally would just place the link inside the form, as if it needs to be placed next to the button, then there must be a logical connection between the link and the form.
<div class="col-md-offset-2 col-md-5">
<input type="submit" value="Save" class="btn btn-default" id="savebtn" />
</div>
<div class="col-md-5">
#Html.ActionLink("Go Back", "Create", null, new { #class = "gobackbtnedit"})
</div>
An ActionLink really is just a <a> HTML element, which is fine in the form. What's the reason for needing it outside?
Related
I am trying to introduce a dynamic search function in my project. I have created a search form in my view which submits on keyup but the issue that I'm not facing is that when the view reloads, the text box is no longer in focus and so the user needs to click back onto it which obviously isn't ideal.
My view is set up as follows:
<form id="searchForm" asp-action="Index" method="get">
<div class="row">
<div class="col-9">
<input type="text" id="fooSearch" name="searchString" value="#ViewData["currentFilter"]" class="form-control" />
</div>
<div class="col-3">
<div class="row">
<div class="col-6">
<input type="submit" value="Search" class="btn btn-outline-secondary form-control" />
</div>
<div class="col-6">
<a asp-action="Index" asp-route-recent="true" class="btn btn-outline-secondary form-control">Recent</a>
</div>
</div>
</div>
</div>
</form>
with the following JQuery script to submit on keyup
$(function () {
$('#fooSearch').keyup(function () {
$('#searchForm').submit();
});
});
</script>
Can anyone help me to retain focus on the search textbox when the DOM is loaded?
To give the focus back to the searchbar, you can use jQuery's focus(), e.g.:
$("#fooSearch").focus();
Now, where you place this depends on whether your form submit is synchronous (and makes the page reload) or asynchronous.
If the submit is asynchronous, then you can place this in your keyup event handler, right after the code that submits:
$('#fooSearch').keyup(function () {
$('#searchForm').submit();
$("#fooSearch").focus(); //focus back on the search bar
});
Otherwise, you will need to call focus() from an onload event:
$(document).ready(function() {
$("#fooSearch").focus();
});
In all cases, first load or reload (submit), the focus should be on the search textbox so I think that you can just focus the textbox on load.
$(function() { $("#fooSearch").focus();});
The problem you may encouter is that the cursor will not be in the end of the keywords. So I think that the best option here is to use Ajax to the update the results each time the user change the keywords. Maybe waiting a few seconds before each update is a good idea also.
If you are using html5 you can just add autofocus to your html tag something like:
<input type="text" id="fooSearch" autofocus ="autofocus" name="searchString" value="#ViewData["currentFilter"]" class="form-control" />
I'd want to ask why after clicking on my custom button that just appends text to div that's inside form, then it activates asp validation of that form?
<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Name" class="control-label"></label>
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
<div id="append_area">
</div>
<button id="appendChild" onclick="addText()">add new thing</button>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</form>
<script>
function addText()
{
var div = document.getElementById('append_area');
div.innerHTML += `test`;
}
</script>
Set your button type as button
<button type="button" id="appendChild" onclick="addText()">add new thing</button>
As described in W3C documentation, default type of the <button> element can vary across different browsers, so it is a good practice to always specify it explicitly.
In this case, the default value is submit, so by clicking the button you are inadvertently causing the submit action and hence also validation to be performed as well.
To fix this, just specify the button type explicitly as button:
<button type="button" />
You can also do this:
<script>
function addText()
{
var div = document.getElementById('append_area');
div.innerHTML += `test`;
return false;
}
</script>
then you can call in code onclick="return addText()"
When you submit a form to a CGI program that resides on the server, it is usually programmed to do its own check for errors. If it finds any it sends the page back to the reader who then has to re-enter some data, before submitting again. A JavaScript check is useful because it stops the form from being submitted if there is a problem, saving lots of time for your readers.
<button type="button" id="ChildForm" onclick="add()">add new </button>
The CGI script is still more reliable, as it always works regardless of whether JavaScript is enabled on the client-side or not; but having this extra safety barrier is a nice thing to have in place. It makes your page much more user-friendly and takes out the frustration of having to fill out the same form repeatedly. It's also very precise, as you can point out the exact field where there's a problem.
First, I want to explain I do not know any Razor or C#. I have a client that I build out high-fidelity prototyping for. Some of the elements are getting kind of advanced where JavaScript is not working for me anymore.
The Ask:
I have a modal that I trigger (using bootstrap), this modal has some checkboxes in a form. Each checkbox will trigger to turn on or turn off a session that will turn certain elements on or off on a series of 5-6 pages. Here I am just working with one of those sessions. I can duplicate once I figure this out. Any help will be greatly appreciated.
Code:
#{
if (Request.Form["fitscorechecked"] != null && Request.Form["fitscorechecked"] == "on") {
Session["fitscore"] = "on";
} else {
Session["fitscore"] = "off";
}
}
My Form:
<form method="post">
<div class="row">
<div class="col-sm-12 bottom5"><input type="checkbox" id="fitscorechecked" name="fitscorechecked" value="true"/> Show fit score during adjustment</div>
<div class="col-sm-12 bottom5"><input type="checkbox" id="Anonymous" name="Anonymous" value="true" /> Make contributors anonymous</div>
<div class="col-sm-12 bottom5" data-toggle="tooltip" data-html="true" title="<h5>Advanced Options</h5><h6>Will allow you to view related tasks, manually adjust patterns (power users only), and the ability to download responses.</h6>">
<input type="checkbox" id="Advanced" name="Advanced" value="true" /> Show advanced options</div>
</div>
<div class="prototype-btngroup-center">
<a class="btn btn-default prototype-btn-spacersm" data-dismiss="modal">Cancel</a>
<a class="btn btn-primary" type="submit" value="submit" href="#stepAlign6" data-toggle="tab" data-step="5" data-dismiss="modal">Begin Alignment</a>
</div>
</form>
<form>
I have never built a form in .net so I am really lost. I just need something very simple that does not use controllers. Much of this code is show and then redone based on the updates from the product team, so something that is simple and easy to adjust.
I read the other questions that were similar but my issue is more basic. I'm rather new to bootstrap but I'm testing it out to see if this will work for a simple form that I need to be opened by phones, tablets, and any other device.
I'm trying to get my textbox on the same line as the text that describes it. Instead, the textbox is under the text.
Here is what is happening:
Here is the cshtml page of the above:
#model MvcBootstrap.Models.HomeModels.VisitingCustomer
#{
ViewBag.Title = "Home Page";
}
<div class="">
<p class="lead">Please enter your branch number, account number, and at least the first three characters of your last name or at least the first three characters of your company name below so we can locate your account.</p>
</div>
<div class="container">
#using (Html.BeginForm("TypeOfPayment", "Home", FormMethod.Post))
{
<div class="row">
<h2>Account Lookup</h2>
<div class=".col-md-4">
Branch Number
</div>
<div class=".col-md-8">
#Html.TextBoxFor(m => m.Branch, new {#class = "", #maxlength = "2"})
</div>
</div>
<div class="row">
<input id="submitpayment" class="typicalbutton" type="submit" value="Continue" />
</div>
}
</div>
I have no additional css code nor have I modified any of the existing css.
This should be pretty straight forward but I'm just not grasping the concept I guess. What am I doing wrong?
You could group the Branch Number and the text box in one column like so
<div class="col-md-4">
<label for="branch-number">Branch Number</label>
# add text box here and give it an id="branch-number"
</div>
Also, you don't need to have a . before the class name in your classes.
You can try this format. form-inline class makes the form inline. you don't need to use the responsive column classes. also you should use class="col-md-*" not class=".col-md-*"
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form class="form-inline">
<div class="form-group">
<label for="branch"> Branch Number</label>
<input type="text" class="form-control" id="branch no">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
You can specify the class for different screen
i.e
col-lg-1 to col-lg-12 for large screen
col-md-1 to col-md-12 for desktop / laptop screen
col-sm-1 to col-sm-12 for tablet screen
col-xs-1 to col-xs-12 for mobile screen
Example
<input type="text" class="col-lg-6 col-md-6 col-sm-6 col-xs-12" >
What you are looking for is an inline form.
#using (Html.BeginForm("TypeOfPayment", "Home", FormMethod.Post, new { #class="form-inline" }))
{
<div class="row">
<div class="col-md-12">
<h2>Account Lookup</h2>
<div class="form-group">
#Html.LabelFor(m => m.Branch)
#Html.TextBoxFor(m => m.Branch, new {#class = "form-control", #maxlength = "2"})
</div>
<input id="submitpayment" class="typicalbutton" type="submit" value="Continue" />
</div>
</div>
}
In your model for this form you will want to add a [DisplayName] attribute for your Branch property so that you can use the Html.LabelFor() helper I included above:
[DisplayName("Branch Number")]
public string Branch { get; set; }
You will also want to read more about the grid system. Your original code did not use the proper classes for the columns.
Like #Asif Raza said, you should specify what size of screen are targeting. Keep in mind that the sizing will work for the size you specify and UP. So if you specify a medium size screen, it will affect medium size screens and larger, not smaller.
I dont think thats your issue though, I think whats happening with you is there are extra margins you are not seeing that is causing the textbox to be placed below. The max width of the container is going to be 12 columns, which you are using, but if there are any other margins in between it's going to cause the textbox to fall below. I recommend inspecting the element with F12 to zone in and see if there is anything extra being added.
Here is the button to open the modal box (which works):
<button data-toggle="modal" data-target="#modal-addItem-#sectionCount-#rowCount" class="btn btn-success">Add New List Item</button>
Here is the modal:
<div id="modal-addItem-#sectionCount-#rowCount" role="dialog" aria-hidden="true" aria-labelledby="modal-addItem-#sectionCount-#rowCount" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Added List Item</h4>
</div>
#Html.Partial("_SelectItemType", new ListItemsViewModel { listID = theLists.listID })
</div>
</div>
</div>
Here is that partial view Updated:
#using (Html.BeginForm("SelectItemType", "ListItems", null, FormMethod.Post, new { enctype = "multipart/form-data" }))
{
#Html.AntiForgeryToken()
#Html.HiddenFor(model => model.listID)
<div class="modal-body">
<div class="form-group">
<b class="control-label col-md-4">Select List Item Type:</b>
<div class="col-md-8">
#Html.DropDownListFor(model => model.ItemTypes.itemTypeName, DropDown.GeneralListCreator(get.getItemTypes(true), get.getItemTypes(false))) //This gets a list of item types
</div>
</div>
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Close</a>
<input type="submit" value="Next Step »" class="btn btn-primary" />
</div>
}
So when I click on the button, it opens up the modal as it should. When I click on the "Next Step >>" button which is the submit button on the form. No post back, no form submit...nothing happens.
I'm not sure why this wont work...can anyone please point out what I'm doing wrong? Please let me know if you need more information.
Thanks in advance.
UPDATE: I tried removing the Section script (because it's already in the view), as Chris pointed out but it is still not submitting.
So the answer was simple, of course. I found this page: ASP .NET MVC Disable Client Side Validation at Per-Field Level
It lead me right to the answer that Vsevolod kindly pointed out. Validation being enabled on the client side. I wasn't outputting a message before so I didn't know. When I added:
#Html.ValidationMessageFor(model => model.ItemTypes.itemTypeName)
to the form I was able to see the message:
The Item Type Name must be at least 2 characters long and no longer than 250 characters.
My drop down list was being populated by this method: get.getItemTypes(false) which returned Names if true and Numbers(ids) if false. The id's were 1-9 and were only a SINGLE digit. I required 2 characters to validate. Therefore it was not submitting.
My solution as proposed by the link at the top:
#{ Html.EnableClientValidation(false); }
#Html.DropDownListFor(model => model.ItemTypes.itemTypeName, DropDown.GeneralListCreator(get.getItemTypes(true), get.getItemTypes(true)))
#Html.ValidationMessageFor(model => model.ItemTypes.itemTypeName)
#{ Html.EnableClientValidation(true); }
For some reason, even once I changed the method get.getItemTypes(false) to return the names (send in true), the validation was still not working properly so I had to turn it off and back on.
Thank you everyone for the help.
This is what helped me:
Try adding
data-toggle="modal" data-target="#modal-addItem-#sectionCount-#rowCount"
to your submit. That should close it and allow your data to submit.
Look at this .modal('toggle') in bootstraps documentation.