I'm trying to get this form to execute this function on submit but for some reason, it pops the alert up, but then refreshes the entire page. I've tried other online solutions like: Prevent form redirect OR refresh on submit?
But that did not work.
function addFood() {
alert("123");
return false;
}
<form onsubmit="return addFood()" data-ajax="false">
<input type="text" name="" id="name" value="" placeholder="name" data-clear-btn="true"/>
<input type="text" name="" id="brand" value="" placeholder="brand" data-clear-btn="true"/>
<input type="text" name="" id="extra" value="" placeholder="extra" data-clear-btn="true"/>
<input type="number" name="" id="amount" value="" placeholder="amount" data-clear-btn="true"/>
<input type="number" name="" id="calories" value="" placeholder="calories" data-clear-btn="true"/>
<input type="number" name="" id="fat" value="" placeholder="fat" data-clear-btn="true"/>
<input type="number" name="" id="carbohydrate" value="" placeholder="carbohydrate" data-clear-btn="true"/>
<input type="number" name="" id="fibre" value="" placeholder="fibre" data-clear-btn="true"/>
<input type="number" name="" id="sugar" value="" placeholder="sugar" data-clear-btn="true"/>
<input type="number" name="" id="protein" value="" placeholder="protein" data-clear-btn="true"/>
<input type="submit" value="submit"/>
<form>
Remove onsubmit and set your <form>'s action attribute to # (I would also add an id)
<form id="myForm" action="#" data-ajax="false">
If you need something to happen when your <form> is submitted, use:
$("#myForm").submit(function(){
// do stuff that will fire off when my form is submitted
});
Related
I have two forms. form1's field data is sending to form2. form2 have 1 set 3 inline inputboxs and 1 reset button.when i clicked the reset button form1's go back to default state with out refresh the page.how can I do that?
**form1 **
<form id="formDrink" onclick="submit1(this.drinkname,this.drinkprice,this.drinkquantity)" >
<input type="text" id="drinkname" name="drinkname" value="{{$drink->product_name}}">
<input type="hidden" id="drinkquantity" value="0" >
<input type="text" id="drinkprice" name="drinkprice" value="{{$drink->selling_bottle}}">
</form>
form2
<form class="form-inline" id="kot">
<input type="text" id="drinkName" name="drinkname" value="" readonly="">
<input type="text" id="drinkQuantity" name="drinkquantity" value="" readonly="">
<input type="text" id="drinkPrice" name="drinkprice" value="" readonly="">
<input type="button" id="resetForm" onclick="drinkRemover()" value="reset" />
</form>
javascript
function drinkRemover(){
$("#formDrink")[0].reset();
}
I dont know why my javascript do not work.I tryed every posible ways but i cant reset the form1's fields to its default values.
This is what the reset input type is for:
<form class="form-inline" id="kot">
<input type="text" id="drinkName" name="drinkname" value="drinkname">
<input type="text" id="drinkQuantity" name="drinkquantity" value="drinkquantity">
<input type="text" id="drinkPrice" name="drinkprice" value="drinkprice">
<input type="reset" id="resetForm" value="reset" />
</form>
I am trying to make it so that when the user clicks the Submit button, they are redirected to another page. Addittionally, if they try submitting without entering their first name, last name, or email, it will return an error saying "This is a required field". For some reason, neither of this are working. Nothing happens when submit is clicked. I am sure it is something simple but I have never worked with these scripts before so I don't know what I am looking for.
Here is the code:
<form method="post" enctype="multipart/form-data">
<button><input type="submit" value="Submit" onclick="submit();"/></button><br>
<label for="fname">First Name:</label>
<input type="text" required/><br>
<label for="lname">Last Name:</label>
<input class="lname" type="text" required/><br>
<label for="email">Email:</label>
<input class="email" type="text" required/><br>
<input type="radio" name="file" value="yes" id="yes" />
<label for="Yes">Yes</label>
<input type="radio" name="file" value="no" id="no" />
<label for="No">No</label><br>
<p><input type="file" size="30" required></p>
</form>
<script>
function submit() {
window.location= "http://stackoverflow.com"
}
</script>
Any help would be greatly appreciated!
Try this:
<form method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
<input type="submit" value="Submit" /><br>
<label for="fname">First Name:</label>
<input type="text" required /><br>
<label for="lname">Last Name:</label>
<input class="lname" type="text" required/><br>
<label for="email">Email:</label>
<input class="email" type="text" required/><br>
<input type="radio" name="file" value="yes" id="yes" />
<label for="Yes">Yes</label>
<input type="radio" name="file" value="no" id="no" />
<label for="No">No</label><br>
<p><input type="file" size="30" required></p>
</form>
<script>
function validateForm() {
window.open("https://www.stackoverflow.com");
}
</script>
Quick way as it looks like your not using ajax.
Remove the onclick from the submit button (require tag is being ignored because of this) along with the JavaScript and return a 302 redirect with the url from the server if it's successful.
Hi I have a little problem
I have 3 forms that send different parameters via GET to another page and i have 3 inputs outside all forms that I want to send with form that user chooses to submit.
Inputs with names one, two and three must be send with 1 of that forms.
This is my code:
<input type="text" name="one">
<input type="text" name="two">
<input type="text" name="three">
<form action="process.php" method="get">
<input type="text" name="name">
<input type="submit" value"Process by name">
</form>
<form action="process.php" method="get">
<input type="text" name="adress">
<input type="submit" value"Process by address">
</form>
<form action="process.php" method="get">
<input type="text" name="number">
<input type="submit" value"Process by number">
</form>
All I want to is, when someone submit any form, that three inputs name="(one,two,three)" are send with rest param of form.
EDIT: Just 1 form is submitted!
If you put everything into one form, and use a hidden type value, you can ensure that all values are passed on submit.
<form action="process.php" method="get" id="form1">
<input type="text" name="one">
<input type="text" name="two">
<input type="text" name="three">
<input type="text" name="name">
<input type="submit" name="btnName" value="Process by name">
<input type="text" name="adress">
<input type="submit" name="btnAddress" value="Process by address">
<input type="text" name="number">
<input type="submit" name="btnNumber" value="Process by number">
</form>
Since you are submitting to a PHP page, you can check which of the buttons was pressed with the following code...
if (isset($_POST['btnName'])) {
//do something with name
} else if (isset($_POST['btnAddress'])) {
//do something with adress
} else if (isset($_POST['btnNumber'])) {
//do something with number
}
For some reason I can't retrieve value from text inputs with the serialize() form inputs function in jquery.
If i the inputs are type="text" console.log returns:
position_id=229&step=1&name=&email=
If the inputs are type="hidden" and a value="test" is added console.log returns:
position_id=229&step=1&name=test&email=test#test.com
This is my form:
<form id="referral-form" action="#" method="post">
<input type="hidden" name="position_id" value="{{$position->id}}" />
<input type="hidden" name="step" value="1" />
<input name="name" class="form-control" type="text" value="" id="name" required/>
<input name="email" class="form-control" type="text" value="" id="email" required />
<div class="button submit"></div>
</form>
and here is my javascript event:
onRefer: function(e) {
e.preventDefault();
var $form = $("#referral-form");
console.log($form.serialize());
}
How do i add some form of JQuery solution to the below code so that users are using the redirect but instead have a nice response back saying 'Thanks for subscribing'?
Also, is this the best way - The JQuery solution? Or should i try JS
<form method="post" class="af-form-wrapper" action="http://www.aweber.com/scripts/addlead.pl" >
<div style="display: none;">
<input type="hidden" name="meta_web_form_id" value="1337" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="blah" />
<input type="hidden" name="redirect" value="http://www.aweber.com/thankyou-coi.htm?m=text" id="1237" />
<input type="hidden" name="meta_adtracking" value="blah" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="name,email" />
<input type="hidden" name="meta_tooltip" value="" />
</div>
<input type="text" name="name" autocomplete="off" required placeholder="First name">
<input type="text" type="email" name="email" required placeholder="Your Email">
<input type="submit" name="submit" value="Subscribe">
</form>
Edit - But have it be presentable, i.e. I want to put the text within a DIV, not Alert the user with a pop up or redirect them to my page.
$("form").submit(function(){
alert("Thanks for subscribing");
});
edit ##
Stack overflow jQueryUI Modal confirmation dialog on form submission