I have applied ParsleyJS validation to a form that has multiple submit buttons that perform various tasks. I only want the validation to occur for one of the submit buttons, is this possible? if so, how?
For a pared down example:
<form name="aspnetForm" method="post" action="page.aspx" id="aspnetForm" data-validate="parsley">
<input type="text" id="text_for_example" data-required="true"/>
<input type="text" id="text_for_example2" data-required="true"/>
<input type="text" id="text_for_example3" />
<input type="submit" id="ClearsTheTextBoxes"/>
<input type="submit" id="SavesData" />
</form>
Ideally I want it to validate only on the "SavesData" submit, not on the "ClearsTheTextsBoxes". is this possible using ParsleyJS?
Thanks!
Note:
I cannot change the type any of the submit buttons to function differently; please do not suggest this. The "ClearsTheTextsBoxes" must remain a submit button.
to do so, you'll have to remove data-validate="parsley" from your form tag, and add a custom js function on click on the desired button. Then in this function, simply to a $('aspenetForm').parsley('validate');
Best
Related
I want use document.getElementById('YourElementId') to pick up the Textfield value and then send it to another page called request.php as URL parameter.
Example, if i type (3) on the Textfiled and click submit, the Link will pick up the form variable as url parameter just like the folowing (.../requst.php?=id=3) Onsubmit.
Bellow is my textfield and the submit link/button but it doesnt work. Someone please help me.
<input name="consigno" type="text" id="YourElementId" value="3">
ENTER
Actually you can do this by using html form. This will do same thing.
<form method="GET" action="remote.php">
<input name="nav" id="YourElementId" type="text" value="3">
<input type="submit" value="ENTER">
</form>
Sometimes I just want to submit a "normal" form, but have the input fields in React (of styling reasons).
But the form doesn't seem to "see" the values of the input fields when submitting.
<form action="comments" method="post">
<label>
Name:
<input
className={styles.input}
defaultValue="Bob"
type="text"
ref={this.input} />
</label>
<input type="submit" value="Submit" />
</form>
Is there a way to accomplish something like the above, i.e. posting a form without having to create an onSubmit event handler that referes to every single field in the form?
Ps. I'm aware that the default React way is to include state, but that increases the boilerplate code even more.
use name tag in your input
e.g.
<input name="comment" type="text" defaultValue="Bob"/>
I have a form which generates a email using Google Apps Mail, and all I want really its to do is to not go to the different page after pressing Submit, although I want it to still generate the email.
Any ideas what is the best way to do it? I learn jQuery now, so solutions in it are more than welcome.
<form class="flex-form" id="gform" method="POST" action="https://script.google.com/macros/..../exec" onsubmit="return confirm('Do you really want to submit the form?');">
<input id="formName" type="text" placeholder="Full Name" name="name" value="" required autocomplete="off">
<br>
<input id="formNumber" type="tel" pattern="[0-9]*" placeholder="(0034) 606248059" name="phone-number" required autocomplete="off">
<br>
<input id="formGeo" type="text" placeholder="Tap to share location" name="coordinates" required autocomplete="off">
<br>
<input type="submit" name="submit" value="Send Us Request">
</form>
Thanks.
You can intercept the form's "submit" event with Javascript.
$('gform').on('submit', function(event){
event.preventDefault();
if ( ! confirm('Do you really want to submit the form?'))
return false;
// ....
});
That will catch the "submit" event and prevent the event's default action, which would be to POST the form to the URL given in the action attribute. Remove the onsubmit attribute from the form, better handle it all in one place.
Next, you need to send the data yourself. Easiest way is to use either jQuery's $.post() or $.ajax() functions, together with $('gform').serialize() to transform the form's data fields into a string, ready to be POSTed.
When I submit form by using below function it is submitting but values are not passed through this function. I use all functions but nothing found:
document.getElementById("postad").submit();
Form is given below.
<form action="register.php" id="postad" method="post">
<input class="textfield2" type="text" id="post_title" style="width:640px;" placeholder="Ad Title" onBlur="check('post_title')" />
<input class="button" type="button" name="save" value="Publish" onclick="send();" />
</form>
Your form contains two form controls. Neither will be a successful control (i.e. one that appears in the submitted data), but for different reasons.
Only form controls with name attributes can be successful. Your text input doesn't have a name. (It also doesn't have a default value, so you need to type in it first).
Buttons can only be successful if they are the submit button used to submit the form. Your button isn't a submit button and you use JavaScript to submit the form.
There is no name attribute in your input text fields
<input name="post_title" class="textfield2" type="text" id="post_title" style="width:640px;" placeholder="Ad Title" onBlur="check('post_title')" />
.........^
I have an html form that I want to only submit from a button located outside my form. I am using javascript to perform some verification and do not want the form to submit unless my javascript functions succeed. I found that if I have the button inside the form it will always submit regardless of the javascript, but if I have it outside the form when a user presses enter it simply submits the form. How can I force enter to perform the button javascript instead of submitting?
<form name="form1" action=<?$_SERVER["PHP_SELF"].'?'.$_SERVER["QUERY_STRING"]?> method="post">
<input type="text" maxlength="5" size="5" name="frmZip" value="">
<input type="hidden" name="frmLat" value="200">
<input type="hidden" name="frmLng" value="200">
<input type="submit" disabled="disabled" style="display:none" />
</form>
<button type="button" id="GetCoordinates" onclick="doClick();">Find Stores</button>
EDIT:
Found my solution.
I changed from
</form>
<button type="button" id="GetCoordinates" onclick="doClick();">Find Stores</button>
to
<input type="button" name="frmSubmit" onclick="doClick();" value="Submit">
</form>
This prevented the button from submitting the form so I submitted it in my doClick() via javascript.
EDIT 2:
While this seemed to work for a time, it has stopped catching the enter keystroke. I updated my button to:
<input type="submit" name="frmSubmit" onclick="return doClick();" value="Find Stores">
And always returned false in doClick(). This allowed me to submit the form via javascript once everything had executed.
While this doesn't answer your direct question, you can actually keep the button and simply use your validation on the form submit:
<form onsubmit="return validateForm()">
Then, in your validateForm method, return true or false indicating whether or not the validation has passed.
However to answer your direct question, you can also use the same approach on the submit button which will prevent the form from being submitted.
Update
As pointed out in the comments, an unontrusive solution is often desirable so here's that:
document.getElementById('theForm').onsubmit = function() { return validateForm(); };
Your button inside the form will not submit the form on enter if you add preventDefault...
$("form").submit(function(e) {e.preventDefault();});