jQuery disabled form is submitted on enter - javascript

I have one jQuery form in which I am disabling the submit of form till the jQuery is initialized.
Code looks something like this
<form id="loginForm" role="form" class="form-horizontal col-md-8" action="">
<input type="email"/>
<input type="password"/>
<input type="submit" class="disabled">
</form>
(code is bit simplified.)
Notice class 'disabled'
On jQuery side, I'm doing this
$().ready(function() {
$("#loginBtn").removeClass("disabled"); // This ensures that javascript was loaded before button is pushable
});
The problem is when the page is loading button is disabled and user is not allowed to click on it. But when button is disabled and user fills up the form and press enter. The form is getting submitted.
I want to stall submission of form (via any means) till the jQuery is properly loaded.
How can I achieve this?

You know that setting class="disabled" on a button, doesn't actually disable it, right? ;-)
I think that you need something like this:
<form id="loginForm" role="form" class="form-horizontal col-md-8" action="">
<input type="email"/>
<input type="password"/>
<input type="submit" disabled>
</form>
$(function() {
$("#loginForm input[type=submit]").attr("disabled", null);
});
See JSFiddle here

Try this :
modify your login form submit button as below
$("#loginForm").submit(function() {
if($("#loginBtn").hasClass("disabled")) return false;
//rest of your code as it is
.....
}
NOTE - as per your html, submit button don't have id="loginBtn", please add it.

Just added onsubmit="return false"And it worked.
<form id="loginForm" role="form" class="form-horizontal col-md-8" action="" onsubmit="return false">

Related

Even after clicking cancel the form gets submitted

I am doing a form submission, and I am displaying a confirmation box asking the user that if they really want to continue. But even if the user clicks on cancel, the form is still getting submitted.
<form onsubmit="return confirm('If you enter the incorrect number, the search will still be conducted and charge you for the cost of the search. do you want to continue?.')" action="http:example.com/" id="customersearch" name="customersearch" role="form" method="post" accept-charset="utf-8" novalidate="novalidate">
How can I avoid this? Can anyone kindly tell me how to stop the form from getting submitted when the user clicks cancel?
#Akshay Vasu, try with below solution, you need to call onsubmit event of form
function validateForm() {
if(confirm('If you enter the incorrect number, the search will still be conducted and charge you for the cost of the search. do you want to continue?.'))
{
$("myform").submit();
}
else{
alert("Invalid");
return false;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform" name="myForm" action="/action_page.php"
onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
Here is working code snippet your code is also working fine:
<form onsubmit="return confirm('If you enter the incorrect number, the search will still be conducted and charge you for the cost of the search. do you want to continue?.')" action="http:example.com/" id="customersearch" name="customersearch" role="form" method="post" accept-charset="utf-8" novalidate="novalidate">
<input type="submit" value="submit">
</form>
just put
<button type="button">Cancel</button>
for cancel and it will work.

how to disable form submit button and upload the form data

Hello I have managed to disable the submit input when clicked but the problem i am having when the PHP ifisset runs it does not store the parameters in the database after disabling the input submit, however after my research and test it does not upload the data inputted to the form but disables the button but when i remove the Jquery code no action is taken and the picture uploads it this is my code
//input submit works if not disabled but does not run if disabled after onclick which i feel when the button is disabled the form submit has no name valid
<script>
$(function() {
$('#theform').submit(function() {
$("input[type='submit']", this)
.val("Please Wait...")
.attr('disabled', 'disabled');
return true;
});
});
</script>
//My form
<form action="" method="post" role="form" id="theform" enctype="multipart/form-data">
<input type="file" name="file">
<input type="submit" name="sub" value="UPLOAD">
</form>
All i want is to not allow the user to not submit values twice thats all
In that case, I would divorce the button from the submit event and the form data itself by using type="button" for the "submit" button and using a hidden input for the sub value like this:
$(function() {
$('.submit').click(function(){
$(this).prop("disabled",true).val("Please Wait...").closest('form').submit();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" role="form" id="theform" enctype="multipart/form-data">
<input type="file" name="file">
<input type="hidden" name="sub" value="UPLOAD">
<input type="button" class="submit" value="UPLOAD">
</form>

Form Submit Button Do not work

I have a form with a submit button. Unfortunately my javascript function does not work. Where is my mistake? It works by pressing enter but not by clicking on the submit button
<div id="form" class="contact-us-form">
<form id="myform" target="_self" onsubmit="" action="javascript: postContactToGoogle()">
<div>
<input spellcheck="false" autocomplete="off" id="email" type="text" name="email" value="deine eMail" onfocus="this.value=''" onblur="this.value='deine eMail'">
</div>
<br>
<div>
<button onclick="submits()" id="send" type="submit">EINTRAGEN</button>
</div>
</form>
<script type="text/javascript">
function submits() {
document.getElementById("myform").submit();
}
</script>
</div>
What you're doing is strange. You are trying to do the submission very "manually". The submit button (i.e. the type="submit" part) is already going to submit this form, so there is no need for your function submits().
Afterwards, in javascript, simply refer to your form's submit event. You can get the form by id like your doing already.
Add 'name' attribute in your form
<form id="myform" name="myform">
<!-- Form content -->
</form>
change your script function
<script type="text/javascript">
function submits() {
document.myform.submit();
}
</script>
I found the mistake by myself:
onblur="this.value='deine eMail'"
Do not use onblur in your submit button. It will kill the submit function and it will not work

i want to check form validation by input type button, not by submit, could any one help in this?

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>

Input value from different form

I have two forms on my page...
<form method="post" action="">
<input type="text" name="name" id="name"/>
<input type="submit" name="form1_submit_pushed"/>
</form>
<form method="post" action="">
<input type="submit" name="form2_submit_pushed/>
</form>
On my php side I want to be able to know the value of the text input "name" when I push the submit button of the second form. Kind of like....
if(isset($_POST['form2_submit_pushed']))
{
echo $_POST['name']; //or something else?
}
The reason behind is that first form has a bunch of data that I don't want in the second form submission.
You could do something like this...this code uses jQuery:
<form id="form1" method="post" action="">
<input type="text" name="name" id="name"/>
<input type="submit" name="form1_submit_pushed"/>
<input type="hidden" name="form2_submit_pushed" id="form2_submit_pushed">
</form>
<form id="form2" method="post" action="">
<input type="submit" name="form2_submit_pushed"/>
</form>
<script>
$('#form2').submit(function(event) {
//prevent form2 from submitting and submit form1 instead...
event.preventDefault();
//before submitting, indicate that the "form2_submit_pushed" button was pushed
$('#form2_submit_pushed').val(true);
//submit form1
$('#form1').submit();
});
</script>
...but why you would want to I don't know. Why not make all the controls part of the same form? HTML is designed to send info from only one form (at a time) to the server...
UPDATE: Sorry, I didn't notice your line where you explain your reason for wanting to do this. If you want more explicit control over what gets sent to the server I recommend using AJAX to submit the form. Look at https://api.jquery.com/serializeArray/ and https://api.jquery.com/jQuery.ajax/
Correct me if I am wrong here, but I beleive normal HTML will only post the inputs from the form you are posting from. One option would be to have a hidden input on the second form which gets updated via javascript during the input's change event.
So, you could do something like this (I don't recommend inline javascript but it should get you in the right direction):
<form method="post" action="">
<input type="text" name="name" id="name" onchange="document.getElementById('hiddenname').value=this.value"/>
<input type="submit" name="form1_submit_pushed"/>
</form>
<form method="post" action="">
<input type="hidden" name="hiddenname" id="hiddenname"/>
<input type="submit" name="form2_submit_pushed/>
</form>
Then you just need to get it using
$_POST['hiddenname'];

Categories

Resources