Javascript form validation onSubmit not triggering - javascript

please can someone help. this form validation is not triggering.. It's really frustrating me. I'm a PHP developer rather than JS so i'm struggling a bit with this even though it's clearly something very simple. I'm just trying to validate the form based on the delete box being ticked.
Nothing appears when I click submit. It just submits the form so it must be returning true.
function deleteVal(chk) {
var chk;
// If the checkbox has been set to delete
if (chk.checked == "delete") {
var ok=confirm("You are about to delete the selected images below.\nAre you sure you want to do this?");
if (ok) {
// Submit
return true;
} else {
// Don't submit
return false;
}
}
// Delete box was not ticked so return true and submit form
return true;
}
</script>
<form action="" method="POST" onSubmit="return deleteVal(delete)">
<label>Delete images?</label><input type="checkbox" name="delete" value="delete" />
<input type="submit" name="submit" value="Submit" />
</form>

You need to get the checked value properly like so and see if it is true or false.
var chk = document.getElementById('delete');
// If the checkbox is checked
if (chk.checked == true) {
Then you do not need to pass a variable to the function, however, you do need to give you checkbox an id.
<form action="" method="POST" onSubmit="return deleteVal();">
<input type="checkbox" name="delete" id="delete"/>
<input type="submit" name="submit" value="Submit" />
</form>
Tested code - http://pastebin.com/FdWdeSCN

Related

if checkbox not checked don't send form with submit input type=image

I need to disable submission of this form (and ideally send an alert message with javascript when clicked) when the checkbox is not checked.
I found many solutions for classical submit buttons, but none of them works with an image submit. All the time I'm able to display error messages but still the form is being sent.
Do you have any idea how can I solve this? Thank you
<form method="POST" name="paypal" action="">
<input type="checkbox" name="checkbox" id="checkbox"/>
<label for="checkbox" class="agree">I accept the</label> conditions
<input type="image" name="submit" src="http://www.example.com/paypal.png">
</form>
<form method="POST" name="paypal" action="" onsubmit="return (function() { if (!document.getElementById('checkbox').checked) { alert('You must accept the conditions');return false; }})()">
<input type="checkbox" name="checkbox" id="checkbox"/>
<label for="checkbox" class="agree">I accept the</label> conditions
<input type="image" name="submit" src="http://www.example.com/paypal.png">
</form>
I added an onsubmit event handler which runs a function that determines if the checkbox is checked and if it is not we show an alert and return false preventing the form from being submitted.
Just listen to submit event on the form, check all you have to and return true if the form is correct and false if it's not. If you return false the form should not be submitted.
$('form[name="paypal"]').submit(function () {
if (invalid) {
alert("Some of the fields are not valid.");
return false;
}
return true;
});
when the image is clicked, check if the checkbox is checked.
jQuery('input[name="submit"]').on('click', function(){
var accept = jQuery('input[name="checkbox"]').is(":checked");
if(accept == false){
alert("you did not accept the terms");
return false;
}
if(accept == true){
//submit form
}
});

is('checked') filtering method not working correctly

I am trying to see if a checkbox got checked with is() method, but it is giving an unexpected result. Either way if I check the checkbox or not, the method is returning false.
HTML
<form action="" method="post" id="place_order">
<input type="checkbox" name="tos" class="required check-condition" />
<span class="error error-tos" style="display:none">* This field is required</span><br>
<input type="submit" name="place_order" value="Submit Order" class="order-sb-btn" />
</form>
Jquery
$("#place_order").submit(function () {
var is_tos_checked = $(".check-condition").is('checked');
console.log(is_tos_checked);
if (is_tos_checked) {
$(".error-tos").hide();
return true;
} else {
$(".error-tos").show();
return false;
}
});
Jsfiddle
http://jsfiddle.net/yogc5ypb/1/
You need to express checked as a pseudo-selector, i.e. prefixed with :
.is(':checked');
I usually use .prop('checked')
So in your code you would change your line to:
var is_tos_checked = $(".check-condition").prop('checked');
If you want to submit form if user checked check box then you can use following method also-
1.write following statement in html file
<form action="" method="post" id="place_order">
<input type="checkbox" name="tos" class="required check-condition" />
<span class="error error-tos" style="display:none">* This field is required</span><br>
<input type="submit" name="place_order" value="Submit Order" class="order-sb-btn" />
</form>
2.Write following statement in js file.
jQuery('.order-sb-btn').click(function(){
var checkedValue = $('.required:checked').val();
if(checkedValue == undefined)
{
alert('not checked');
return false;
}
else
{
alert('checked');
}
})
By using above code form will be submit if user check the checkbox.
To check example please refer following link-
http://jsfiddle.net/1eygh774/1/

my jquery form validation is not working as i hope it should

I have some javascipt code here that validates a user form. When the user inputs the correct answer it tells them and gives them the link to the next question. At least, that's what it is supposed to do. When i click the form it reloads the page but it should not because i added return false.
the div tra holds 35
and the div usermsg is the user inputted value.
<script>
$("#submit").click(function(){
var clientmsg6 = $("#usermsg").val();
var rightanswer = $("#tra").val();
if (clientmsg6<>rightanswer)
{
$("#confirm").html("<h2>Sorry, wrong answer.</h2>");
}
else
{
$("#confirm").html("<a href='#' onclick='play();' style='font-size:20px;' id='new1'>Click here for Question 2</a>");
}
return false;
});
</script>
Any ideas why this is not working?
It should be
if (clientmsg6 != rightanswer)
not
if (clientmsg6<>rightanswer)
To prevent a form submission, you need to return false on the form itself instead of on the submit button. Your code should become:
HTML
<form action="page.php" method="post">
<input id="usermsg" type="text" name="answer" />
<input id="submit" type="submit" value="Submit" />
</form>
JS (please note the line where you have clientmsg6, you have a syntax error)
$("#myform").on('submit', function(){
var clientmsg6 = $("#usermsg").val();
var rightanswer = $("#tra").val();
if (clientmsg6 != rightanswer) { //This line was also wrong, should be != instead of <>
$("#confirm").html("<h2>Sorry, wrong answer.</h2>");
}
else {
$("#confirm").html("<a href='#' onclick='play();' style='font-size:20px;' id='new1'>Click here for Question 2</a>");
}
return false;
});
Alternatively, you can keep your existing code by changing your submit button to be just a plain old button, but you will lose the extra functionality of the user being able to hit the enter key and performing the same action.
<form action="page.php" method="post">
<input id="usermsg" type="text" name="answer" />
<input id="submit" type="button" value="Submit" />
</form>
Instead of using .html(), try using .text()
if #submit is a link tag otherwise use the form ID and the submit event
$("#submit").click(function(e){
e.preventDefault()
...
...
...
});
You need to attach handlers once the document has finished loading.
Wrap your script in the following
<script>
$(function() {
// script
});
</script>

JavaScript Form Submit - Confirm or Cancel Submission Dialog Box

For a simple form with an alert that asks if fields were filled out correctly, I need a function that does this:
Shows an alert box when button is clicked with two options:
If "OK" is clicked, the form is submitted
If cancel is clicked, the alert box closes and the form can be adjusted and resubmitted
I think a JavaScript confirm would work but I can't seem to figure out how.
The code I have now is:
function show_alert() {
alert("xxxxxx");
}
<form>
<input type="image" src="xxx" border="0" name="submit" onclick="show_alert();" alt="PayPal - The safer, easier way to pay online!" value="Submit">
</form>
A simple inline JavaScript confirm would suffice:
<form onsubmit="return confirm('Do you really want to submit the form?');">
No need for an external function unless you are doing validation, which you can do something like this:
<script>
function validate(form) {
// validation code here ...
if(!valid) {
alert('Please correct the errors in the form!');
return false;
}
else {
return confirm('Do you really want to submit the form?');
}
}
</script>
<form onsubmit="return validate(this);">
You could use the JS confirm function.
<form onSubmit="if(!confirm('Is the form filled out correctly?')){return false;}">
<input type="submit" />
</form>
http://jsfiddle.net/jasongennaro/DBHEz/
function show_alert() {
if(!confirm("Do you really want to do this?")) {
return false;
}
this.form.submit();
}
Simple and easy :
<form onSubmit="return confirm('Do you want to submit?') ">
<input type="submit" />
</form>
OK, just change your code to something like this:
<script>
function submit() {
return confirm('Do you really want to submit the form?');
}
</script>
<form onsubmit="return submit(this);">
<input type="image" src="xxx" border="0" name="submit" onclick="show_alert();"
alt="PayPal - The safer, easier way to pay online!" value="Submit">
</form>
Also this is the code in run, just I make it easier to see how it works, just run the code below to see the result:
function submitForm() {
return confirm('Do you really want to submit the form?');
}
<form onsubmit="return submitForm(this);">
<input type="text" border="0" name="submit" />
<button value="submit">submit</button>
</form>
If you want to apply some condition on form submit then you can use this method
<form onsubmit="return checkEmpData();" method="post" action="process.html">
<input type="text" border="0" name="submit" />
<button value="submit">submit</button>
</form>
One thing always keep in mind that method and action attribute write after onsubmit attributes
javascript code
function checkEmpData()
{
var a = 0;
if(a != 0)
{
return confirm("Do you want to generate attendance?");
}
else
{
alert('Please Select Employee First');
return false;
}
}

disabling send button

I just a got a requirement to disable the send button in the form until the users enter his data.Can any one guide me?
thanks
Have the button initially disabled by having such HTML
<input type="submit" id="btnSubmit" disabled="disabled" value="Send" />
Then in the blur event of your form elements check if user entered all required data and when this happens, enable the button using such code:
document.getElementById("btnSubmit").disabled = false;
form action="javascript:aNameForAnAjaxSendPostFunction"
function aNameForAnAjaxSendPostFunction()
{
if ((document.getElementById('your field').value.strlen>0))
{
<< SEND REQUEST >>
}
}
Normally, I would code it for you, but I'm in a hurry, and you do have to learn how to search for yourself, so here's a hint:
addEventListener(), and you can check the length of the data within an input by calling document.body.getElementById('yourInput').length, and then you can change the button.disabled property to either true (make the default value false in the source code). All you need to do for yourself is find out how to use addEventListener
A simple way of doing what you want using JQuery:
(this works if you have only input texts)
HTML:
<form method='POST' action=''>
<input type='text' name='name' />
<input type='text' name='phone' />
<input type='text' name='email' />
<button type='submit' disabled='disabled'>Send</button>
</form>
Javascript:
$(function() {
$("input").change(function() {
if($("input[value='']").length == 0) {
$("button").removeAttr("disabled");
} else {
//disable again if a field is cleared
$("button").attr("disabled",true);
alert("Please fill all fields");
$("input[value='']").eq(0).focus();
}
});
});

Categories

Resources