I am trying to write a very simple jQuery function which will have two main properties. The first one will be to check if the field is empty or not. The second one will be if the field is not empty to execute a form which will lead to a PHP coded page. I am very new to jQuery and I will be very grateful if someone can point where exactly is my mistake. Thank you in advance.
function Captcha() {
$('#Button').click(function() {
if ($("#Field").val().length == 0) {
alert("Please fill the box");
return false;
} else {
alert("Your code is saved");
return true;
}
});
}
$(document).ready(function() {
Captcha();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="success.php" id="Alpha" method="post" onsubmit="return Captcha();">
<input id="Field" type="text" placeholder="Enter key here">
<button id="Button" type="submit" form="Alpha">Confirm</button>
</form>
Don't work with the button's click event, work with the form's submit event because a form can be submitted via the keyboard and therefore the button can be circumvented.
You can see a working version here (Stack Overflow prevents submit code from working in the snippet environment below.)
$(function() {
$('#Alpha').on("submit", function() {
if ($("#Field").val().length == 0) {
alert("Please fill the box");
return false;
} else {
alert("Your code is saved");
return true;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="success.php" id="Alpha" method="post" onsubmit="return Captcha();">
<input id="Field" type="text" placeholder="Enter key here">
<button id="Button" type="submit" form="Alpha">Confirm</button>
</form>
You would want to validate the form fields when you actually submit the form. When you click on the button you are still in the process of triggering the submit.
Try changing this:
$('#Button').click(function() {
Into this:
$('#Alpha').on('submit', function() {
See if that helps.
Related
Whenever I press the submit button it just submits the form and doesn't seem to run the checkSubmit function. Everything I've looked at in other examples suggests my code is correct. Is there something missing or wrong with the way I'm calling it?
<script language="javascript" type="text/javascript">
function checkSubmit() {
alert("This is an alert!");
if (document.getElementById("userID").value.length <1) {
alert("Please enter a User ID.");
return false;
}
else {
alert(document.getElementById("userID").value.length)
return true;
}
</script>
<form name="submitform1" method="POST" action="http://127.0.0.1/MyFile.php" onsubmit="return checkSubmit();">
Enter User ID: <input id="userID" name="userID" type=text size="25"/><br />
<input type="submit" name="submit" onclick="this.form.onsubmit();" value="Submit" >
</form>
<br />
Your code is missing the closing curly bracket for the checkSubmit() function for one.
In your HTML change the remove the onsubmit handler from the form element and change the onclick attribute on the submit button to call the function:
onclick="checkSubmit(event);"
Then, in your function, prevent the form from submitting, do your checks, then submit the form.
function checkSubmit(e) {
e.preventDefault();
// do checks
document.submitform1.submit();
}
I have a form
onclick confirm , i need to direct it to a particular url
function submitdata() {
if(confirm("Are You Sure You Want To Proceed?")) {
location.replace("http://www.w3schools.com");
} else {
alert("Cancelling");
}
}
</script>
After submitting this form submitdata() is called.
then i am getting an alert.
BUT MY FORM is not getting redirected
<form id="registration_form" action="" method="post" onsubmit="return submitdata();">
<div id="state"></div>
<div class="reg-id">
<label>
<input placeholder="State:" type="text" tabindex="3" name="user_state" id="reg_state" value="">
</label>
</div>
<div class="reg-id">
<label>
<input placeholder="City:" type="text" tabindex="3" name="user_city" id="reg_city" value="">
</label>
</div>
<div class="reg-id-last">
<label>
<input placeholder="Zip/Postal:" type="text" tabindex="3" name="user_zip" id="reg_zip" value="">
</label>
</div>
<input type="submit" value="Response" tabindex="3" name="reg_btn" id="id-submit">
</div>
</form>
if(confirm("Are You Sure You Want To Proceed?")) {
return true;
location.replace("http://www.w3schools.com");
}
return returns from the surrounding function. Nothing after it will be executed. You need to swap the two lines.
I got it
<script>
function submitdata() {
var r = confirm('Are you sure?');
if (r == true) {
window.open('http://www.google.com');
} else {
alert('it didnt work');
}
return false;
}
</script>
If you want the form to actually submit to that location, then the form data won't get sent with that redirect. You can submit the data by setting the action attribute of your form tag to the URL you want, and changing the form submit event to something like this:
function submitData(event) {
if(confirm('Are you sure you want to proceed?') == false){
event.preventDefault();
return false;
}
}
So instead of redirecting when the user clicks 'ok', you basically just cancel the form submit if the user doesn't click 'ok'.
If you didn't want to submit the data, then you just need to move your return statement, like melpomene suggested.
Note: I always write both event.preventDefault() and return false; but I think usually only return false; would work as well. But, better safe than sorry :)
I've got a JS problem. My validation seems to be working, checking that the user inputs a valid number which isn't zero, but the form is still submitting. I have seen this question asked many times but I can't find a solution that works for me. Any ideas would be great.
My Javascript
function checkNotZero()
{
var theNumber = document.getElementById("theNumber").value;
var str = /^\+?[1-9]\d*$/.test(theNumber);
if ( str == false ) {
alert('You have not entered a valid number');
return false;
} else {
document.getElementById('numberCheck').submit();
}
}
My HTML
<form action="/next.php" method="post" id="numberCheck">
<input type="text" id="theNumber" value="0">
<button id="submitButton" OnClick="checkNotZero();">Add to Basket</button>
</form>
Use an <input type="submit"> for the submit button.
Validate on the form's submit event rather than some onclick. Forms can get submitted in other ways than just clicking a button (for instance, pressing "enter", or procedurally through code).
Prefer .addEventListener to attributes for attaching events to elements. Use preventDefault() to prevent form submission.
Hi for the above requirement of 'validating form' java script validation should be done
when the form gets submitted. follow the below approach, form will not get submitted
until and unless the validation is correct.
<html>
<head>
<script type="text/javascript">
function checkNotZero()
{
var theNumber = document.getElementById("theNumber").value;
var str = /^\+?[1-9]\d*$/.test(theNumber);
if ( str == false ) {
alert('in');
alert('You have not entered a valid number');
return false;
} else {
document.getElementById('numberCheck').submit();
}
}
</script>
</head>
<body>
<form action="/next.php" method="post" id="numberCheck" onsubmit="return
checkNotZero()">
<input type="text" id="theNumber" value="0">
<button id="submitButton">Add to Basket</button>
</form>
</body>
</html>
the only change is <form action="/next.php" method="post" id="numberCheck"
onsubmit="return checkNotZero()">
do not use onclick event in submit button.
I have the following form and javascript:
<script type="text/javascript">
function toggleButton(ref,bttnID){
document.getElementById(bttnID).disabled= ((ref.value !== ref.defaultValue) ? false : true);
}
</script>
<form action="" method="post" id="subscribe" name="subscribe">
<label>NAME:</label>
<input type="text" name="name" class="subName" onkeyup="toggleButton(this,'bttnsubmit');">
<label>EMAIL:</label>
<input type="text" name="email" class="subEmail" id="sub_email">
<input type="button" name="button" value="Subscribe" disabled='disabled' id='bttnsubmit'/>
</form>
When I first load my site the SUBMIT button is disabled, as I wanted, since the text field has no text in it. Now I would like to enable the button once some text has been placed within the text field.
Any help please?
The existing code in the question worked fine, but gets disabled when the text is removed. This may be desired by others but you could make a small change to have it permanently removed without needing jquery (jquery wasn't in the tags)
function toggleButton(ref,bttnID){
document.getElementById(bttnID).removeAttribute("disabled");
}
and add onkeyup="toggleButton(this,'bttnsubmit') to any fields that need to enable the button
Using jQuery:
$(document).ready(function() {
$('#bttnsubmit').attr('disabled','disabled');
$('input[type="text"]').keyup(function() {
if($(this).val() != '') {
$('input[type="submit"]').removeAttr('disabled');
}
});
});
source: jQuery disable/enable submit button
Adding the final code that did the trick:
<script type="text/javascript">
$(document).ready(function() {
$('#bttnsubmit').attr('disabled','disabled');
$('#subEmail').keyup(function() {
if($(this).val() != '') {
$('#bttnsubmit').removeAttr('disabled');
}
else {
$('#bttnsubmit').attr('disabled','disabled');
}
});
});
</script>
I want make validation jquery without using from plugin, problem is here that after click on button and get alert(if field is empty) it go to url # that there is in <form action="#"....
I want if get alert(mean if field is empty) 'input is empty' not go to url that there is in ...action="#"..., if filed has value it go to url. i can not use from ajax call or preventDefault or window.location(Because one from field is input:file).
Example: http://jsfiddle.net/gb7nh/1/
How can fix it?
<form action="#" method="POST">
<input type="text" name="name">
<button id="cli">Submit</button>
</form>
$('#cli').live('click',function(e){
//e.preventDefault();
if($('input[type="text"]').val()=='')alert('input is empty')
})
Bind to form submittal instead, and return false to prevent the form from submitting.
<form action="#" method="POST" id="myform">
<input type="text" name="name">
<button id="cli">Submit</button>
</form>
$('#myform').submit(function() {
var valid = true;
$('input[type="text"]').each(function() {
if ($(this).val().length == 0) {
alert('A field is empty!');
valid = false;
return false;
}
});
if (!valid) {
return false;
}
});
This should do the trick for you:
<button id="cli" onclick="return clickButton();">Submit</button>
And it's corresponding JavaScript
function clickButton(){
if($('input[type="text"]').val()==''){
alert('input is empty');
return false;
}
}
Probably you need to return false in case when you show alert woth errors:
$('#cli').live('click',function(e){
//e.preventDefault();
if($('input[type="text"]').val()=='')
{
alert('input is empty');
return false;
}
});
Code: http://jsfiddle.net/gb7nh/2/
I wolud do it like Elliot. Only i would have used:
<form action="#" method="POST" id="myform">
<input type="text" name="name">
<button id="cli">Submit</button>
</form>
$('#myform').submit(function() {
if (!$('input[type="text"]').val()) {
alert('input is empty');
return false;
}
});
This.
if (!$('input[type="text"]').val())
Instead of:
if ($('input[type="text"]').val()=='')