Develop Reference

Button of 2nd form submits 1st form that doesn't have a submit button

I have 2 forms on one page.
Form 1
<form id="form1" method="get" action="action1.php">
<input type="text" id="input1">
</form>
This form is submitted by:
$('#input1').on('keydown', function(e) {
if (e.keyCode == 13) {
$('#form1').submit();
}
});
as I don't want a submit button on this form.
The 2nd form:
<form id="form2" method="post" action="action2.php">
<input type="text" id="input2">
<button type="submit">Save</button>
</form>
Now if I press the button on the 2nd form, it submits the 1st form. Not sure why that happens as the submit button is inside the second <form> tag.
Also; as form 1 will be on many pages (it's a search bar in a navigation bar) I'd like to 'future proof' this so that I don't run into problems in the future when I place multiple forms on a page. Ideally that would mean that this issue is fixed by changing form 1.
Update
Stupid mistake...! I had $('form:first').submit(); on the <button type="submit">Save</button> somewhere else in my code, so the first form got submitted...

make this change in form 2
<form id="form1" method="get" action="action1.php">
<input type="text" id="input1">
</form>
<form id="form2" method="post" action="action2.php">
<input type="text" id="input2">
<button type="submit" form="form2">Save</button>
</form>
read this to know more about form attribute

Something else is going on.
try hitting enter in these two fields - you will see there is no need for script
$("form").on("submit",function(e) {
e.preventDefault();
console.log(this.id + " submitted");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form1" method="get" action="action1.php">
<input type="text" id="input1"> Submits on enter
</form>
<hr/>
<form id="form2" method="post" action="action2.php">
<input type="text" id="input2"> Submits on enter or on click
<button type="submit">Save</button>
</form>

How to use both onsubmit for validation and onclick for any operation if onsubmit return true in javascript

I have created form in html now i try to using onsubmit for validation as well as onclick for another operation if onsubmit return true. i cant find the correct way of doing this.
<form role="form" onsubmit='return formValidation()'>
<div class="form-group">
<p id="bookiderror" style="color: red"></p>
<label >ಪುಸ್ತಕದ ಐಡಿ:</label>
<input type="text" id="bookid" class="form-control">
</div>
<div class="form-group">
<p id="booknameerror" style="color: red"></p>
<label>ಪುಸ್ತಕದ ಹೆಸರು:</label>
<input type="text" id="bookname" class="form-control">
</div>
<div class="form-group">
<p id="rupeeserror" style="color: red"></p>
<label >ರೂಪಾಯಿ:</label>
<input type="text"id="rupees" class="form-control">
</div>
<div class="form-group">
<p id="bookpubishererror" style="color: red"></p>
<label >ಪುಸ್ತಕದ ಪ್ರಕಾಶಕರು:</label>
<input type="text" id="bookpublisher" class="form-control">
</div>
<div class="form-group">
<p id="bookeditionerror" style="color: red"></p>
<label >ಪುಸ್ತಕದ ಆವೃತ್ತಿ:</label>
<input type="text" id="bookedition" class="form-control">
</div>
<div class="form-group">
<p id="bookyearerror" style="color: red"></p>
<label >ಪುಸ್ತಕದ ವರ್ಷ:</label>
<input type="text" id="bookyear" class="form-control">
</div>
<input type="submit" value="AddBook" class="btn btn-primary" onclick="addbook()" id="submit"/>
</form>

You can do so like this. The formValidation method should return false otherwise page will refresh.
function formValidation(){
//write your formValidation logic here
if(form.isValid){
//call your add book here
addbook();
}
return false;
}

function formValidation(){
//Enter your validation logic here.
if (false) return false;
return true; //default
}
function addBook() {
if (formValidation()){
//Your insertion code here.
}
else
{
alert('Error message.');
}
}
Now, just remove the onClick function then put the addBook() function to your onSubmit.

You can't.
The click event fires first. Only after it is resolved with the default behaviour of the submit button activate and trigger the submission.
Consequently it isn't possible to run the submit handler before the click handler.
You need to either:
Do all the tests your submit handler does at the top of each click handler.
Let the click handler just record which submit button was activated, and then use that to determine what to do at the end of the submit handler.

Change form submit button text after submition

How do i change my submit button text after submit?? i have a form with a button . i would like to change the button text from click to Next after submit the form.
<form>
<div class="form-group">
<div class="rightbox"> <label for='phone'>phone</label></div>
<div class="leftbox">
<div class="col-sm-12">
<input class="text-box single-line" data-val="true" name="phone" type="tel" value="" />
</div></div>
</div>
<div class="form-group">
<div class="rightbox"> <label for='phone'>mobile</label></div>
<div class="leftbox">
<div class="col-sm-12">
<input class="text-box single-line" data-val="true" name="phone" type="tel" value="" required />
</div></div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<div class="btnok">
<br/>
<button type="submit" class="btn-primary" >
click
</button>
</div>
</div>
</div>
</form>

$("#save").on('click',function(){
var $btnElm = $(this);
$("form").submit(function() {
return $btnElm.text('Next');
});
})
<button type="submit" class="btn-primary" id="save" >
i think this is how you can change.
else you want to more specific with the only after form is submitted then you can go with the ajax method to submit the form and change the text the of button to next after only submitting the form
$("#save").on('click',function(){
var $btnElm = $(this);
$("form").submit(function() {
$.ajax({
url: $(this).attr('action'),
method: "POST",
data : $(this).serialize(),
success : function (data){
$btnElm.text('Next');
}
});
});
});

You can try with the below link.
fiddle link
$(document).ready(function(e) {
$('#theForm').submit(function() {
var txt = $('#btnSubmit');
txt.val("Next");
return confirm("Do you want to save the information?");
});
});
Updated link: Fiddle

Try with this.
First off all, add id to your form and button.
<form id="myform">
....
<button id="mybutton" type="submit" class="btn-primary" >
click
</button>
...
</form>
Then, using JQuery you can do a Jquery Callback after form submit.
$("#myform").bind('ajax:complete', function() {
document.getElementById("mybutton").value="New Button Text";
});
It works for me. I Hope it helps.
Edit
If you dont want to use JQuery you can use onSubmit event to call a function after form submit.
<form onsubmit="changeButton()">
....
<button id="mybutton" type="submit" class="btn-primary" >
click
</button>
...
</form>
This is the function to change button text.
function changeButton(){
document.getElementById("mybutton").value="New Button Text";
}

JavaScript sweetAlert popup closes itself after a quick second

I have a SweetAlert popup, but it is closing itself automatically. Normally it should stay until user clicks 'OK'. (I have included and tested all SweetAlert files.)
<button class="btn btn-success" type="submit" name="submit" onclick="myFunction()">Submit</button>
<script>
function myFunction() {
swal("Submitted!", "Your Issue has been submitted!", "success");
}
</script>

Looks like it's a form submit, So when you click the button the page refreshes.That's why you see the alert for a second and it hides.
<button class="btn btn-success" type="submit" name="submit" onclick="myFunction()">Submit</button>
You must change the button type to be button.
<button class="btn btn-success" type="button" onclick="myFunction()">Submit</button>

Note that if your button is part of a form submit, then issue 284 suggests it's not currently supported. You can change your button to a regular button (rather than a submit button) and programmatically submit the form from the callback in a sweetalert callback.

I have a similar problem..
when click outside of the popup, the popup window closes automatically and change the page very fast...
I tried this code for stop close sweetalert itself, and refresh the page when the user click "OK" of sweetalert window.
HTML:
<form method="post" action="contact.php" name="myform" onsubmit="return myFunction()">
<input type="text" class="form-control" name="full" placeholder="* Full Name" required="" >
<input type="text" class="form-control" name="last" placeholder="* Last Name" required="">
<input type="submit" value="send" name="sends" class="btn btn-lg">
</form>
javascript
<script type="text/javascript">
function myFunction() {
var full=document.myform.full.value;
var last=document.myform.last.value;
if (full==null || last==null){
swal("Error...!!!!!!");
return false;
}else{
swal("Congrats!", ", Your account is created!", "success");
return true;}
}
</script>

Change form action based on submit button

I have many forms like the following on the page. Now I want change the form action based on which submit button the user clicked (and of course submit the form)
<form action="/shop/products.php" data-ajax="false" method="post">
<div data-role="fieldcontain">
<input name="submit" class="obutn" type="submit" value="Order" />
<input name="submit" class="oEbutn" type="submit" value="Extras" />
</div>
</form>
I tried with
$(".obtn").click(function() {
$(this).parent().parent().attr("action", "/shop/products.php");
});
$(".oEbtn").click(function() {
$(this).parent().parent().attr("action", "/shop/extras.php");
});
but the form is always submited to products.php. Can you tell me what's wrong?

Instead of setting the action attribute on the form itself, consider setting formaction attribute on each individual input element.
Docs: http://www.w3.org/TR/html-markup/input.submit.html#input.submit.attrs.formaction
<form data-ajax="false" method="post">
<div data-role="fieldcontain">
<input formaction="/shop/products.php"
name="submit" class="obutn" type="submit" value="Order" />
<input formaction="/shop/extras.php"
name="submit" class="oEbutn" type="submit" value="Extras" />
</div>
</form>

There are two typos:
obtn instead of obutn
oEbtn instead of oEbutn
Another suggestion is to use closest("form") to get the form that contains the clicked button.
$(".obutn").click(function() {
$(this).closest("form").attr("action", "/shop/products.php");
});
$(".oEbutn").click(function() {
$(this).closest("form").attr("action", "/shop/extras.php");
});
$("form").on("submit", function () {
alert($(this).attr("action"));
});
JSFIDDLE

Capture the submit event and determine which button was clicked. From that, you can change the action of the form.
Here's a link on how to do that.
How can I get the button that caused the submit from the form submit event?

Also, don't give the form the action until the click happens at all, it is superfluous.
<form data-ajax="false" method="post">
<div data-role="fieldcontain">
<input name="submit" class="obutn" type="submit" value="Order" />
<input name="submit" class="oEbutn" type="submit" value="Extras" />
</div>
</form>

What if you try it out with a switch instead? Something like:
<input name="submit" id = "1" class="obutn" type="submit" value="Order" />
<input name="submit" id = "2" class="oEbutn" type="submit" value="Extras" />
And then in JavaScript we have:
//param: The Id attr of the button that was clicked
function postTo(id){
switch(id){
case 1: postProducts();
break;
case 2: postExtras();
break;
default: //Do something else
}
}
Just an idea. Haven´t tested that yet, but maybe it could be helpful. I hope so.