i have one form with some input text with the name = "user_name" , "mob" , "email" and inside this form i have a link for example Plans and end with submit button. Now if user click the link then i want to have all the values of the input text of the same form send to another page to pks.php and if the user click on the submit button then it will work on action confirm.php. For example Check this code
<form action="confirm.php" method ="post">
<input type ="text" name="user_name">
<input type="number" name="mob">
<input type="text" name="email">
PLANS
<input type="submit">
</form>
Can you help me out?? How can i achieve this. Thanks in advance
The simplest way is to change the link to a second submit button. You can then use the formaction attribute to change the URL the form submits to when you use this button.
<form action="confirm.php" method ="post">
<input type ="text" name="user_name">
<input type="number" name="mob">
<input type="text" name="email">
<input type="submit" formaction="pks.php" value="PLANS">
<input type="submit">
</form>
If you can't do that, you need to run Javascript when they click on the link. You can have this code change the action of the form, and then submit it.
document.getElementById('plans').addEventListener('click', function(e) {
e.preventDefault();
var form = document.getElementById('myform');
form.action = this.href;
form.submit();
});
<form id="myform" action="confirm.php" method="post">
<input type="text" name="user_name">
<input type="number" name="mob">
<input type="text" name="email">
<a id="plans" href="pks.php">PLANS</a>
<input type="submit">
</form>
You will probably want to use JavaScript to control the form if you want the action attribute to change. By default, submitting the form will cause it to post to confirm.php.
Using JQuery you can do this:
$('form').on('submit', function(e) {
// Stop the form from submitting
e.preventDefault();
// Do logic to determine what action you should do
var myAction = 'pks.php';
// assign the action to the form
$(this).attr('action', myAction);
// submit the form
$(this).submit();
});
I haven't run this script so it may not work out of the box but you should be able to adapt and fix it without too much difficulty.
Related
So I have this html form:
<form>
<input type="text" placeholder="Equation" id="equation_input" onsubmit="return button_click()"/>
<input class = "search_button" type="submit" id="search" onclick="button_click()" value="Search"/>
</form>
And I need to take the value the user entered in the equation input, add it to the beginning of a url, and then redirect the user to that newly formed url.
I tried this in my script tags:
function button_click() {
var url = `https://exampleurl.com?q=${document.getElementById('equation_input').value}`;
window.location.replace(url);
}
I've tried a couple things, but I'm not sure what's causing the problem so I don't know exactly what to try.
No need for any js to do this. It can be done by default form submit by naming the input and setting action and method attributes of the form.
Note that an <input> has no submit event, only a <form> does
<form method="GET" action="https://exampleurl.com">
<input type="text" placeholder="Equation" id="equation_input" name="q" required/>
<input class="search_button" type="submit" id="search" value="Search" />
</form>
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.
I have a form on page. I want to submit a form when user click on submit button which is outside of form tag. When I am using $('#theform').submit() then submit method work perfectly but when I am doing this document.getElementById('theform').submit() then it is only refreshing my page.
Fiddle
JavaScript
$(function() {
$('input[type="submit"]').click(function() {
//$('#theform').submit()
document.getElementById('theform').submit()
})
$('#theform').submit(function(e) {
alert(0)
e.preventDefault()
})
})
html
<form id="theform">
<input type="text" id="fname" />
<input type="text" id="lname" />
<input type="text" id="country" />
</form>
<input type="submit" />
The DOM submit() method does not trigger submit events where as jQuery's does.that is the reason your form in javascript document.getElementById('theform').submit() will submit the FORM.
you can see a post here :Jquery submit vs. javascript submit
use document.forms["theform"].submit();
and define action in your form
<form id="theform" action="submit-form.php">
i want to only validate the form and don't want to submit it, so that i can use the form values in modifying other part of the same html page by calling a function "myfunction()" after form validation. for this i want to use a button suggest me required code.my code is following :-
<form name="form1">
<input type="text" name="name1" required></input>
<button onclick="myfunction()" ></button> // i want to validation of form by this button
</form>
You can try this by setting onsubmit event of form to return false; as follows:
<form name="form1" onsubmit="return false;">
<input type="text" name="name1" required></input>
<button onclick="myfunction();" ></button>
</form>
This will not submit the form on clicking the button but will execute myfunction() instead.
If you know jQuery, then you can do this as follows:
$('form[name="form1"]').submit(function (event) {
// This will prevent form being submitted.
event.preventDefault();
// Call your function.
myfunction();
});
For maintainability consider adding an event listener to the button by selection instead of inline. When the button is clicked an event object is passed to the callback. Event objects have a number of properties and methods. In this case you're looking for the method "preventDefault" which prevents the default action of the event which in this case is a form submit. An example:
<form name="form1">
<input type="text" name="name1" required />
<button id="my-button"></button>
</form>
document.getElementById('my-button').addEventListener('click', function(e){
e.preventDefault();
var form = document.forms['form1']; //or this.parentNode
//do stuff
}, false);
i have achived this goal by modifying code as follow:-
<form name="form1" onsubmit="myfunction();return false;">
<input type="text" name="name1" required></input>
<button >check form and call function</button>
</form>
by this i am able to check form and call my function and form is also not submitted in this case.
now i want to reset the form without clicking any button. suggest javascript code for this.
HTML form validation by input type button, not by submit.
Try this
<form name="form1" onsubmit="myfunction(); return false;">
<input type="text" name="name1" required></input>
<button type="submit">Submit</button>
</form>
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();});