I want to have a top menu with New, Save, Cancel buttons and below, 3 different entry forms, similar to a "desktop application". When form1 is filled up, Save button would submit the form. Also, if form2 or form3 are filled up, the same Save button can submit the form, taking into account that is in a different form.
Is it possible to do this, a submit button outside form tags ?
If not, any suggestion how to fake submit?
Thanks for your help
You just have to trigger the submit event with .submit in jQuery by example.
Here is the doc : http://api.jquery.com/submit/
Instead of an <input type="submit"> button or jQuery call you could use the new HTML5 <button> element and its form attribute to specify which form(s) the button belongs to. Then just set its formaction attribute to the required destination. Documentation
Example:
<form id="form1">
...
</form>
<form id="form2">
...
</form>
<form id="form3">
...
</form>
<button form="form1 form2 form3" formaction="processForm.php" formmethod="POST">
Submit
</button>
You can use
$("#formId").submit(function() { /*your stuff*/ });
Related
I have a form in my ASP .NET project that takes the users input, and appends it to a URL to search a wiki. The form works perfectly when you enter in a search term, and click the 'search' button, however when you type into the input box and hit enter, the page refreshes and the box clears.
my html
<form>
<label id="sideBarLabel"> Services
<input type="text" placeholder="Search Wiki: e.g. E911" name="queryString" id="query-string" />
</label>
Search Wiki
</form>
my js
function searchWiki(){
var siteQuery = $('#query-string').val();
window.location.href = "/dosearchsite.action?queryString=" + siteQuery;
}
Can anyone help ?
Your searchWiki() js method is only called when the evenement onclick is raised on your button, but not when your form is submitted.
There is several ways to achieve what you want:
Add a js method to catch the onsubmit event of your form:
$("form").on("submit", searchWiki());
Or add a tag on your form:
<form onsubmit="searchWiki()">
Or specify the action attribute on your form:
<form action="/dosearchsite.action">
Note that in ASP.NET, the ModelBinder will link your form inputs to your controller action parameters, using the name attribute of the inputs. That means that you should not specify them in the url yourself.
You should also declare your form using Html.BeginForm or Ajax.BeginForm if you want your form to be submitted by ajax.
#Html.BeginForm("ActionName", "ControllerName")
{
<label id="sideBarLabel">Services
<input type="text" placeholder="Search Wiki: e.g. E911" name="queryString" id="query-string" />
</label>
<input type="submit" class="button" value="Search Wiki"/>
}
This will call searchWiki when you press enter.
$('#query-string').keypress(function(event) {
if (event.keyCode == 13) {
searchWiki();
event.preventDefault();}});
I have the following code that i would like to execute when the user loads the page. The code is currently for a update button that the user clicks and updates some values on the webpage. The user would like to do this without having to click on the update button.
using (Html.BeginForm("UpdateProductionData", "Home", FormMethod.Post))
{
<h3>Date :</h3> <input type="text" id="dp" name="dp" />
<input type="submit" value="Update"/>
}
I have tried looking at jquery. I am wondering if this is possible inside razor.
I am working on an ASP website. I want to disable a button after the user clicks the button.
If the users click the button twice by mistake, the DetailsPage.ASP is executed twice and duplicate entries are inserted into Database.
How to disable a button in ASP code to prevent the users from clicking twice?
Page1: Mainpage.asp page
<form action="DetailsPage.asp" method="POST">
<input type="Submit" name="Submitbutton" value="Update Details">
How to prevent the users from clicking the button twice or alert them if they try to click second time?
Another other suggestions to handle this type of scenario will be helpful.
Thanks in advance.
Thanks
Ashok
<% dim disabled
If request.form("Submitbutton") <> "" Then
disabled = " disabled"
End If %>
Then code your button like this
<input type="Submit" name="Submitbutton" value="Update Details" <%=disabled%>>
Add a handler for the form in JavaScript;
function submitForm(form)
{
form["Submitbutton"].disabled = true;
return true;
}
Attach it:
<form action="DetailsPage.asp" method="POST" onsubmit="submitForm(this);">
I am working on a Spring WebFlow project that is using Dojo (dijit) for the forms and if the user does now fill in a textfield that is required the field does turn red on the click of the submit button. But radio buttons and checkboxes dont..
1) How can I make a radio button and checkbox act like text fields and turn red?
2) How can I change the following code popup a messages that the user has to fix some text fields.
<input type="submit" name="_eventId_submit" id="submit" value="Submit" tabindex="11" />
<script type="text/javascript">
Spring.addDecoration(new Spring.ValidateAllDecoration({
elementId : 'submit',
event : 'onclick'
}));
</script>
for 2) you can use Spring.validateAll() instead of the ValidateAllDecoration. (you have to remove the ValidateAllDecoration)
the function Spring.validateAll() return true or false depending on the validation results.
something like that on the onClick:
onclick="if(!Spring.validateAll()){alert('errors')}else{Spring.submitForm(...)}"
should work
I am new to jQuery, trying to populate a GridView or Telerik RadGrid using jQuery. Not sure how to go about it and unable to find any examples. Any help is appreciated. Thanks.
Essentially I am trying to display a modal window with a textbox and button. The user enters a search criteria presses the button and a gridview in the same modal window is populated with the results.
The user than selects records in the grid presses another button and the selected users are inserted into the database table, modal window is closed and a grid on the parent page is refreshed showing the new added users.
<input type="button" id="btnAddNewUserj" value="Add New User" />
$(document).ready(function() {
$("#btnAddNewUserj")
.click(function() { ShowNewUserDialog(); return false });
$("#btnSearch")
.click(function() { FindUsers(); return false });
});
function ShowNewUserDialog() {
$("#newuserDialog").dialog({ modal: true, bgiframe: true }).dialog("open");
}
function FindUsers() {
// HOW TO DO THIS?
// Show selectable list of users from the database in grid.
}
<div id="newuserDialog" title="Add New User" style="display:none;">
<div>
<input id="txtSearchFor" type="text" />
<input id="btnSearch" type="button" value="Search" class="Button" /></div>
<p> DISPLAY RESULTS HERE </p>
<div style="margin:10px 6px;">
<input type="button" id="btnjAdd" value="Add" class="Button" />
<input type="button" id="btnjCancel" value="Cancel" class="Button" />
</div>
</div>
A couple of thoughts here. You cannot populate a GridView or Telerik Grid using jQuery. jQuery is a client side technology and those two grids are server side.
You can use jQuery to hit a web service and build out and HTML table with the results (which is basically what a GridView does).
I'm guessing however, that you would be better served just using native GridView databinding. You can use a .Net UpdatePanel around the grid if you want to prevent full post backs.
I think telerik is not the answer.
Use telerik radgrid's client side binding, see this for an example: http://demos.telerik.com/aspnet-ajax/grid/examples/clientbinding/defaultcs.aspx
Note that sample shows how to bind to a WCF Web Service and an ADO.NET Data Service. There are other samples around.
Other variations of binding: http://demos.telerik.com/aspnet-ajax/grid/examples/client/declarativedatabinding/defaultcs.aspx
More on client side binding: http://demos.telerik.com/aspnet-ajax/grid/examples/client/databinding/defaultcs.aspx