I am using the following solution (How to best implement Save | Save and Close | Cancel form actions in ASP.NET MVC 3 RC) of multiple submit buttons to allow cancel and save from my MVC form:
<form action="Xxxx" method="post" onsubmit="return validatePost()">
...
<input type="submit" name="actionType" value="Save" />
<input type="submit" name="actionType" value="Cancel" />
</form>
With javascript called onsubmit:
function validatePost() {
if(Blah blah){
return true;
}
}
I only want to do this javascript validation if 'Save' is clicked, but cannot tell which button was clicked from the javascript.
I tried getting the actionType value using document.forms[0].elements["actionType"].value but could not, as there is more than one item named actionType on the form.
Can anyone help?
Thanks
You can use id (http://jsfiddle.net/7p5N5/)
<form method="post">
<input id="save" type="submit" name="actionType" value="Save" />
<input type="submit" name="actionType" value="Cancel" />
</form>
function validate() {
alert('Validate');
return false; // cancel click, true will submit
}
$("#save").click(function () {
return validate();
});
If you don't want to use id, you can use $('input[name="actionType"][value="Save"]') to select the Save button
Are you able to listen to the onclick event of only the 'Save' input and have it use your validatePost function.
Then you could have a different function for the onclick of 'Cancel' to do appropriate action.
Related
I created a form name="form" and and included a submit button
<button type="submit" id="create" onclick=" go();" name="create">Create</button>
This is my function go()
function go() {
$("#create").prop("disabled", true);
document.forms["form"].submit();
}
The function did disable the button, however, it did not submit the form. Help.
I know you said you wrapped it in the form however you need to give the button the type Submit and the form the go() function like so:
<form name="form" onSubmit="go()">
<input type="submit" id="create" value="Create" />
</form>
function next() {
return confirm('Are you sure you want to Foo');
}
<form method="GET" action="/foo" onsubmit="next()">
<input type="hidden" name="delete" value={{$foo} />
<button class="btn btn-warning" type="submit"> Foo</button>
</form>
I am trying to give the user the option to verify that they want to submit the form. Currently the above code shows the popup confirm box, but the form will submit regardless if 'ok' or 'cancel' is clicked.
My understanding of 'confirm()' was that if 'cancel' was clicked the form submission would be stopped.
How does Confirm() work, and how is it best implemented?
You need to precede the next() with a return in your HTML:
function next() {
return confirm('Are you sure you want to Foo');
}
<form method="GET" action="/foo" onsubmit="return next()">
<input type="hidden" name="delete" value={{$foo} />
<button class="btn btn-warning" type="submit"> Foo</button>
</form>
To stop submission, the onsubmit handler needs to return false, which you missed. confirm() returns false when the modal is dismissed.
I have a button submit inside a form and just a normal button outside of it. I want to validate a form:
function myButtonHandler(evt) {
if (myForm.checkValidity()) {
alert("yes");
} else {
alert("no");
}
}
This doesn't show the standard error tips inside of input elements when they're invalid when I click on a button -- ones shown by a browser when I click the submit button. How can I get these validation message to pop up when I click on my normal button when the form is invalid?
<form id="my_form">
<input type="text" placeholder="Name" required="true"/>
<input type="submit" id="submit" value="go" />
</form>
No jquery.
You'll need to add the code you've shown to a function that is set up as the click event callback for the normal button:
var myForm = document.querySelector("form"); // reference to form
var btn = document.querySelector("[type='button']"); // reference to normal button
// Set up click event handling function for normal button
btn.addEventListener("click", function(){
if (myForm.checkValidity()) {
alert("yes");
} else {
alert("no");
}
});
<form>
<input type="text" required>
<button type="submit">submit</button>
</form>
<button type="button">Check Validity</button>
If you just want to show the normal browser's validation errors, you can make the second button also a submit button. It's OK for the button to be outside of the form as long as you tie it back to the form with the form attribute.
<form id="theForm">
<input type="text" required>
<button type="submit">submit</button>
</form>
<button type="submit" form="theForm">Check Validity</button>
I am trying to get a function to print out whatever the user inputs into the text-box. I am using onClick as an attribute on my submit button. I know I set it up properly because it flickers the answer, but only for a split second. How can I get the input to stay on the page? Here's the code: HTML: Type what you want to post to the website!
HTML:
<div id="main_div">
<section id="leftbox">
<form name="mybox">
Type what you want to post to the website!:
<br />
<input type="textbox" size="15" maxlength="15" name="text" id="text">
<br />
<input type="submit" value="Submit!" onClick="doFirst()">
</form>
</section>
</div>
<div id="insert"></div>
Javascript:
function doFirst(){
text = document.getElementById('text');
insert = document.getElementById('insert');
if(text.value == "")
{
insert.innerHTML = "Please input something!";
return false;
}
else
{
insert.innerHTML = text.value;
}
}
try this:
Using type=button
<input type="button" value="Submit!" onClick="doFirst()">
OR using type=submit
<form name="mybox" onsubmit="doFirst(); return false;">
<input type="submit" value="Submit!">
</form>
Explain:
The action for onclick in submit button DO executed. You keep see the page does not have any changes, because of there are a FORM. And the key point: the form handle the submit action after the JS function doFirst() immediately. Adding the onsubmit in the form with return false to stop default action, means:
<form name="mybox" onsubmit="return false;">
<input type="button" value="Submit!" onClick="doFirst()">
</form>
To simplify the changes, use button instead of submit type, or using onsubmit instead of onclick in form trigger.
onClick="doFirst()"
gets converted into an anonymous function:
function(){ doFirst() }
and whatever that function returns determines if the submit should be completed or aborted, so you should use:
onClick="return doFirst();"
In other words, it's not enough that doFirst return something, whatever doFirst returns should be returned again inside the onClick.
I have a form with GET method with some inputs like this:
<input type="text" name="something">
<input type="submit" name="submit" value="Click here to submit form">
I don't want the url to become
mypage.php?something=value&submit=Click+here+to+submit+form
I want to suppress the submit parameter in the url (should be like this: mypage.php?something=value).
I need only GET method please don't mention POST method.
Also you may mention to remove name="submit" but i need it also to identify this submit.
Also if there is a input from which is empty i don't want to show
<input type="text" name="input1">
<input type="text" name="input2">
<input type="submit" name="submit" value="Click here to submit form">
input1 gets value but if input2 doesn't have value the i want url like
mypage.php?input1=value
Thanks
If you don't want the submit parameter to show up in your GET request URL, don't give it a name, and instead use id or class to identify it uniquely:
<input type="submit" id="submit" value="Click here to submit form">
I would remove form submit the and just turn it into a button. Then I would use jquery to submit the form and do any logic processing.
<input type="test" id="favoriteCheese" value="nacho" />
<button id="submit" value="Click here to submit form">Click here to submit form</button>
$("#submit").on('click', function () {
var data = {};
var favCheese = $("#favCheese").val();
if(favCheese.length > 0) {
data.favCheese = favCheese
}
$.ajax({
url : ".../mypage.php",
data : data,
type : 'GET',
...
})
})