Develop Reference

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

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.

Nothing happens with JavaScript form submission

Can anybody tell me Why I click on button to submit form -> it works, but when I use javascript to auto submit -> it failed ?
I have this form on aaa.com, it submit to bbb.com/result.jsp (another domain)
<form id="myForm" name="myForm " method="post" action="www.bbb.com/result.jsp">
<input name="var01" value="var01 ">
<input name="var02" value="var02 ">
<input type="submit" name="searchButton" value="Search">
</form>
Manually click on Search button, result.jsp works fine.
When I added following script, result.jsp page doesn’t work
<script>
document.getElementById("myForm").submit();
</script>

Your form has id="myForm" but your JavaScript is looking for myform. IDs are case-sensitive.
Changing that makes it work.

As I remember, the HTML id attribute is case-sensitive. You are calling the .submit() method on myform while your form id is myForm.

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();
});
}

Submit form to another page (which is different from the page used in ACTION)

I have a form like this:
index.php
<form method="post" action="send.php">
<textarea name="msg" id="msg"></textarea>
<input type="submit" value="Send" />
</form>
So, if I enter something in textarea and clicked on "Send", it is submitted to "send.php" page. But I want to include another button for previewing it. That is, when this button is clicked, the above form is submitted to "preview.php" which will be opened in a new blank window/tab (original page ie. index.php will be there intact). This is to display a preview of the message, that the user is going to send.
I do not know how to do this.

Use Javascript to temporarily change the action and target:
<form method="post" action="send.php" id="idOfForm">
<textarea name="msg" id="msg"></textarea>
<input type="submit" value="Send" />
</form>
<button onclick="doPreview();">Preview</button>
<script type="text/javascript">
function doPreview()
{
form=document.getElementById('idOfForm');
form.target='_blank';
form.action='preview.php';
form.submit();
form.action='send.php';
form.target='';
}
</script>

There is now an attribute for the submit input that handles this:
<input type="submit" formaction=”differentThanNormalAction.php”>

Give your form an ID (form1). The action of the current form can be controlled like this:
function setPreview() {
$('#form1').attr('target','_blank')
$('#form1').attr('action','http://yourpreviewurl.php')
$('#form1').submit()
}
function setSubmit() {
$('#form1').attr('target','')
$('#form1').attr('action','http://yourposturl.php')
$('#form1').submit()
}
Have two buttons, both type="button", one to call setPreview and another to call setSubmit

You can use JavaScript to change the action of the form when the button is clicked and then submit it.
Or simply submit the form via AJAX and then redirect after you get a response.

<form onreturn="someJavascriptFunction()" action="" method="">
creating a js function able to open this preview page

html button v.s. html submit?

I have an input text box and a search submit button, and when user clicks the Search submit button, I want to redirect user to url http://testsearch/results.aspx?k=<value of text box k>, for example, if user put "StackOverflow" into text box and then clicks the search button, I want to redirect user to the following page,
http://testsearch/results.aspx?k=StackOverflow
I find when I use button for Search button, it works (see below source codes),
<input type="text" id="k" name="k" />
<input type="button" id="Go" value="Search" onclick="location.href = 'http://somemachine/Search/results.aspx?k='+document.getElementById('k').value;"/>
but when I use submit for Search button, it does not works (see below source codes), why?
<input type="text" id="k" name="k" />
<input type="submit" id="Go" value="Search" onclick="location.href = 'http://somemachine/Search/results.aspx?k='+document.getElementById('k').value;"/>
thanks in advance,
George

You can even use the submit button this way:
<input type="submit" id="Go" value="Search" onclick="document.location='http://testsearch/results.aspx?k=StackOverflow'; return false;" />
Semantically submit button is used to submit forms not redirect pages. You should use normal button type for this. However as i showed you can use the submit button too but that is not semantic i think.
The below line prevents the form from being submitted.
return false;
That is what you are missing in your code :)
Thanks

<button>-elements and <input type="button"/> don't do anything by default, unless you tell them to do something with Javascript.
<input type="submit"/> will submit the form it is in.
So, if <input type="submit"/> won't work, you got it probably not in the <form/>-element itself.

If that's the only field in your form, simply set the form's method to "get" and it'll work.
<html>
<body>
<form action="http://localhost/mytest" method="get" >
<input type="text" id="k" name="k" />
<input type="submit" id="Go" value="Search" />
</form>
</body>
</html>

<button> means "put a button in the page and do whatever the onclick event says". So if you don't write an onclick handler the page doesn't do nothing.
If you use submit is ok, because you want to redirect to another page.
If you want to use button anyway you can do this way:
<script>
function doTheSearch() {
// do the submit mannually
document.getElementById('myForm').submit();
}
</script>
<form id="myForm" action="results.aspx">
<input type="text" id="k" name="k" />
<input type="button" id="Go" value="Search" onclick="doTheSearch();" />
</form>
Warning: submit button with onclick
If you have a submit button (inside a form, it is, a working submit button) with an onclick event, some browsers will:
1) execute onclick
2) execute submit
your onclick tries to redirect but the submit button wins.
If you want to avoid it you have some options:
a) change submit button to normal button
b) avoid the submit thing (add onsubmit="return false;" to form element)
c) use the submit procedure (form action="..." method="get", no onclick event), the browser will be happy and you can control the submit in the onsubmit event (you can cancel it or not).

make sure you got the input's in a form tag with a GET method:
<form action='http://testsearch/results.aspx' method='GET'>
... inputs
</form>

If I'm understanding correctly, it is not working because it is not in a form tag. If you put it in a form tag with method="get" it should work. The button works because it does not have to be in a form.