Parsley: How to prevent validation when pressing buttons other than submit? - javascript

Thank you for any help.
I am trying to use Parsley for Form Validation. My form has one submit button and some other buttons to dynamically add inputs to the form. But when I press these other buttons, form validation is carried out. But I am not submitting any form.
How to prevent form validation from happening when I press other buttons than submit button?
Sorry, I dont know how to JS Fiddle. My code is like the following:
<form method="post" action="confirm" data-parsley-validate>
<input id="brand" data-parsley-trigger="submit" required />
<button id="addQuantity">Add</button>
<input type="number" required data-parsley-trigger="submit" />
<input type="submit" value="Submit">
</form>
When I press Add, the form is validated. How should I prevent this?
Thank you very much.

The tag button which was introduced in HTML5 is equivalent to input type="submit" hence when you press add it will automatically fire submit action. What you can do is replace the tag to input type="button" or you can prevent the default action in jquery like this
<script>
$('#addQuantity').click(function(event)
{
event.preventDefault();
//do your action goes below
});
</script>

I found adding formnovalidate to the button skipped form validation for the form only when clicking that button.

Related

HTML form submit POSTS input button/submit values; JavaScript form submit does not

So this has been bugging me for some time. I discovered a page that was intermittently submitting form contents twice. For simplification, the inputs are a text field and a button. Upon further inspection, I noticed one form submission included the text and button inputs and the other submission only sent the text input.
I set up a test page to troubleshoot. I put it up on jsfiddle, but I don't think it'll be much help, since I cannot see the values passed using an HTTP Proxy tool such as Fiddler.
https://jsfiddle.net/9xL5w9t2/
<form method="post" action="www.google.com" onsubmit="alert('form submitted');" id="form1" name="form1name">
<input type="submit" value="submit form" id="submitbtn1" name="submitbtn1name" />
<input type="text" id="text1" value="123" name="text1name" />
</form>
<form method="post" action="www.google.com" onsubmit="alert('form submitted');" id="form2" name="form2name">
<input type="button" value="submit form" onclick="alert('button clicked to submit form'); document.form2name.submit();" id="submitbtn2" name="submitbtn2name" />
<input type="text" id="text2" value="123" name="text2name" />
</form>
<form method="post" action="www.google.com" id="form3" name="form3name">
<input type="button" value="submit form" onclick="alert('button clicked to submit form'); document.form3name.submit();" id="submitbtn3" name="submitbtn3name" />
<input type="text" id="text3" value="123" name="text3name" />
</form>
<form method="post" action="www.google.com" onsubmit="alert('form submitted'); this.submit();" id="form4" name="form4name">
<input type="submit" value="submit form" id="submitbtn4" name="submitbtn4name" />
<input type="text" id="text4" value="123" name="text4name" />
</form>
Form 1: Submits text and button
Form 2: Submits text
Form 3: Submits text
Form 4: Submits twice. 1) Submits text 2) Submits text and button
From the looks of it, submitting using HTML Form submit sends over text and button inputs. But submitting the form using JavaScript sends over just the text input. No button.
What is the explanation for this behavior? Why does a JavaScript form submit send over text input only, yet HTML form submit sends over both text and button inputs?
Is this by design? If so, what would be the reason(s)? Seems inconsistent to have your HTML parser send the button value, yet your JS engine does not.
Thank you for any help.
Form 1: Submits text and button
.. default behavior, using a input type submit
Both input controls get submitted because you've clicked the submit button.
Add another submit-button. You will see that only the button dispatching the submit is included in the post data.
So.. what's the reason for that: This way you can add two buttongs, e.g. "cancel" and "save" to a form using the same name
Form 2: Submits text
Form 3: Submits text
.. both solutions look exactly the same to me, the input type button is not handled as an "submit input field" here.. you submit using js.
There is no action on the button and that's why it's not included. (Like described above).
Form 4: Submits twice. 1) Submits text 2) Submits text and button
You're using a input type submit like in the Form 1.. so this form gets submitted exactly the same way. But: there is also a onsubmit handler on the form that calls the submit again using js- that's the reason for the second submit.
The handler is called first, because a submit will trigger a page-reload and the script executing the event will not be "present" anymove after the submit.
The other behaviour is just like described for Fomr 2 & 3
.
Just let me know if you need some further explainations.

Form Button Submit IE Issue

I have a form that is submitted by a button like this:
<input type="submit" form="billing-form" value="xyz" name="abc">
That submits a form like this:
<form method="POST" id="billing-form" action="something.php">
//bunch of fields here
</form>
The button submits the form fine in most browsers except IE.
Any ideas how to make this work in IE?! The button unfortunately has to be outside of the form itself which is why I'm using the billing-form name to reference.
Thanks,
NCoder
Well if using simple script is not a problem then you can simply use an input button and submit the from using js
<input type="button" form="billing-form" value="xyz" name="abc" onclick="submitForm();">
function submitForm()
{
document.getElementById('billing-form').submit();
}
Not going to work with the submit button outside the form without using javascript. See This question and answer.

prevent button submit form onclick

I have a problem on html button tag
This my html code
<form name="data_kirim" action="confirm_order.php" method="POST">
..... order input field ....
<button class="back_button" onclick="window.location.href='keranjang.php'">Back</button>
<input class="next_button" type="submit" name="submit_data_kirim" value="Next"/>
</form>
How to prevent button to submit this form, because button is using the href to back page,
Can someone help me?
change
type='submit'
to
type='button'
<button class="back_button" onclick="window.location.href='keranjang.php'">Back</button>
<form name="data_kirim" action="confirm_order.php" method="POST">
<input class="next_button" type="submit" name="submit_data_kirim" value="Next"/>
</form>
A quick solution would be to move the back button outside the form since It's not using the form inputs anyway.
you can call a function in javascript when click your button, redirect to your link and return false or use preventDefault() function with jquery
<form onsubmit="return false;">
If you want to just make it link to another page and not submit the form then simply make it a normal button like so :
Next
This will not submit the form though.

Best way to form submission without using form action in JavaScript

I am building a PhoneGap application using JavaScript, HTML and jQuery Mobile.
All the HTML is in the same file, separated into <div data-role="page"> as pages.
Several pages have a form including one or more text/selection input and a submit button.
The submit is not a traditional form submit button but a button which using onClick runs a JavaScript function which can do many things.
I want the form to have this features:
When pressing the button and after running the function, clear the form.
In some cases the function should change the page.
The enter button on one of the inputs should submit the form (Activate the function).
Should I use the form HTML tag? If so what should I use for action? How to clear the form?
etc.
If you are trying to bind onClick to an input type="submit" then you're gonna have a bad time.
Unfortunately even if you return false or e.preventDefault when clicking that button, the form still sends the submit trigger so once your onClick code is finished then it will submit.
Example:
<form action="woot.php" method="POST">
<input type="submit" value="submit" onClick="alert('You clicked me! How could you?! It's cool the form will still go to woot.php. return FALSE wont help you either.'); return FALSE;">
</form>
What you probably want to do:
<form action="woot.php" method="POST">
<input type="submit" value="Submit" onSubmit="alert('You aint goin nowhere!'); return FALSE;">
</form>
What you should do:
<form action="woot.php" method="POST">
<input type="button" value="Button" onClick="alert('Away with you!'); window.location = 'http://www.google.com/';">
<input type="button" value="Button" onClick="someCoolFunction();">
</form>
I wouldn't use type="button", especially if you want to have the best chance of the form submitting when the user presses enter.
Use your regular form <input type="submit"> and then your JavaScript:
$('form').submit(function(e) {
// all your form handling here;
if (your_form_was_validated_and_handled) {
$('input[type!="submit"]').val('');
}
e.preventDefault();
});
Generic fiddle: http://jsfiddle.net/
You can still use the form tag, as it's useful for markup.
Just make sure that your buttons have attribute
type="button"
otherwise the button will submit the form by default.
To reset the form:
function resetForm() {
$('#form').each(function(){
this.reset();
});
}

Input field with onchange fails to trigger when user click button in another form

I have a page with multiple small forms on it. Each form has one input field that has an onchange function which will submit it's form to a url that returns a no data status.
Things work fine, submitting form after form, until the user clicks on a small form that has ONLY a submit button in it. This click works, but abandons the change in the previous field resulting in its onchange not firing the click at the bottom of the changed function fails (still trying to understand the firebug trace).
What's going on? is there a fix for my structure?
UPDATE:
First I tried simply delaying the action of the submit, but no luck.
I have hidden the and added an <input button> to the chain of "events" so that the focus has a place to come to rest before the real submit tries to happen -- the code below has been updated. So the question now becomes:
Is this as simple as it can be?
Script:
$(function() {
$('input,select').change(changed);
});
function changed(){
...
$(this).parents('form').find(':submit').click();
}
function doSubmit(elt, id)
{
$(elt).focus();
setTimeout(function(){
$(id).click();
}, 400);
}
One of may small forms:
<form class="clean" method="POST" action="QuoteProApp.php">
<input type="submit" value="field" name="btn_update" style="display: none;">
<input type="hidden" value="000242" name="quote_id">
<input type="text" maxlength="15" size="3" value="" name="q[cost][4][1][unit]">
</form>
The offending click goes into this form:
<form class="clean" method="POST" action="QuoteProApp.php">
<input type="hidden" value="000242" name="quote_id">
<input type='button' name='btn_close' value='Close' onclick='doSubmit(this,"#CLOSE");'>
<input id='CLOSE' type='submit' name='btn_close' value='Close' style='display:none;'>
</form>
Might be totally irrelevant, but your selector for the change event includes your submit input too. Can you change it to:
$('input[type="text"],select').change(changed);
to see if anything changes?
The solution turned out to be to create a button tag, set the focus explicitly to a it, and then set a timeout to click the real, but hidden, submit input tag. This allows the change in focus to run the submit associated with it and then continue with the explicit submit of the page.
The question has been updated to show this solution.

Categories

Resources