Develop Reference

How to fix html form from submitting with onsubmit method? [duplicate]

This question already has answers here:
Javascript object is not a function
(2 answers)
Closed 4 years ago.
I'm creating an HTML form that need to be first reviewed by javascript and then if a checkbox is selected it process PHP code.
<form class="form" method="POST" action="index.php" onsubmit="return
gdpr(e)">
<input class="form-check-input" type="checkbox" value="" name="gdpr"
id="gdpr_privacy">
<input class="btn btn-primary btn-block" type="submit" name="submit"
placeholder="Send" id="submit"></input>
</form>
Javascript:
function gdpr(e){
e.preventDefault();
e.stopPropagation();
let privacy = document.getElementById('gdpr_privacy').checked;
if(privacy == false){
window.alert("false");
return false;
}
else{
window.alert("true");
return true;
}
}
Right now the pages refresh too if the checkbox is selected or not selected, it should execute index.php only when return is true.

You have a simple syntax error in the listener:
<form ... onsubmit="return gdpr(e)">
There is no global e variable, so the handler throws an error, the code doesn't return false and submission isn't stopped. If you want to pass the associated event object, you have to use event.
<form ... onsubmit="return gdpr(event)">
But you really don't care about the event anyway, returning false does the job.
You also have a form control with a name of gdpr. It is a legacy feature that names and ids of elements are made global properties (a very bad idea but it stuck), so the control with name gdpr masks the same-named function in browsers that support the legacy feature, so change its name. Matching the ID is the typical strategy (but IDs on form controls are not really necessary).
function gdpr(e) {
console.log(`I'm a ${e.type} event`);
return false;
}
<form onsubmit="return gdpr(event)">
<input type="checkbox" value="" name="gdpr_privacy" id="gdpr_privacy">
<input class="btn btn-primary btn-block" type="submit">
</form>

Rename your gdpr function to gdpr1 and also there is no need of object e, so remove it.
Checkout the following code:
function gdpr1(){
let privacy = document.getElementById('gdpr_privacy').checked;
if(privacy == false){
window.alert("false");
return false;
}
else{
window.alert("true");
return true;
}
}
<form class="form" method="POST" action="index.php" onsubmit="return gdpr1()">
<input class="form-check-input" type="checkbox" value="" name="gdpr" id="gdpr_privacy">
<input class="btn btn-primary btn-block" type="submit" name="submit" placeholder="Send" id="submit" />
</form>

Just use different function name and remove e.preventDefault(); and e.stopPropagation(); , as it is conflicting with other attributes inside your form.
function checkval(event) {
var privacy = document.getElementById('gdpr_privacy').checked;
if (privacy == false) {
window.alert("false");
return false;
} else {
window.alert("true");
return true;
}
}
<form class="form" method="POST" action="index.php" onsubmit="return checkval(event);">
<input class="form-check-input" type="checkbox" value="" name="gdpr" id="gdpr_privacy">
<input class="btn btn-primary btn-block" type="submit" name="submit" placeholder="Send" id="submit"></input>
</form>

I guess you are doing something wrong by calling you validation function in onsubmit event. You can try by making the function call onClick event of submit button. Change the button type to button instead of submit and submit it from JavaScript code from where you are returning it true.
try changing you code to following:
HTML:
<form name="form1" class="form" method="POST" action="index.php">
<input class="form-check-input" type="checkbox" value="" name="gdpr"
id="gdpr_privacy">
<input class="btn btn-primary btn-block" type="button" name="submit"
placeholder="Send" id="submit" onclick="gdpr(e)></input>
</form>
JavaScript:
function gdpr(e){
e.preventDefault();
e.stopPropagation();
let privacy = document.getElementById('gdpr_privacy').checked;
if(privacy == false){
window.alert("false");
return false;
}
else{
document.forms["form1"].submit();
window.alert("true");
return true;
}
}

Remove onsubmit from form tag .
Add onclick=""gdpr(e)" on submit button.

change name attribute of input
<input class="form-check-input" type="checkbox" value="" name="gdpr" id="gdpr_privacy">
to something other than gdpr that's a weird bug, which fixes this issue.

Why not use jquery to get the gdpr_privacy value? Or, you can write an onsubmit function
func onsubmit(){
let gdpr_privacy = $('#gdpr_privacy').val();
$.post('api/',gdpr_privacy)
// todo
}

Javascript onSubmit basic form validation

Hi I am just curious why the onsubmit function won't respond if the validation function is enclosed inside: (function(){ })();
<form id="testform" name="entform" onsubmit="return promptChar()" method="post">
<input id="input-text" name="entchar" type="text" placeholder="Enter Text" />
<input type="submit" value="Send" />
</form>
<script>
(function(){
function promptChar(){
var field = document.getElementById('input-text').value;
if(field == "a"){
alert('hey');
return false
}
}
})();
</script>
https://jsfiddle.net/aqqn5u5v/
please also try to test it locally and copy the code

Inline event listeners expects handler function to be under global-scope but in your script, handler is in the local scope of IIFE
(function(){})();(IIFE), executes immediately after it’s created.[Ref]
function promptChar() {
var field = document.getElementById('input-text').value;
if (field == "a") {
alert('hey');
return false
}
}
<form id="testform" name="entform" onsubmit="return promptChar()" method="post">
<input id="input-text" name="entchar" type="text" placeholder="Enter Text" />
<input type="submit" value="Send" />
</form>
Updated Fiddle

javascript radio button multiple value do same validation check

When radio button value is 1 or 2 or 3, I would like to run validation for first and last name.
<form action="index.php" method="post" name="index">
<input type="radio" name="hello" value="abc">
<input type="radio" name="hello" value="def">
<input type="radio" name="hello" value="ghi">
<input type="radio" name="hello" value="jkl">
<input type="radio" name="hello" value="mno">
<input type="text" id="first-name" name="first-name">
<input type="text" id="last-name" name="last-name">
</form>
<script>
if ( $('input:radio[name=hello]:checked').val() == "abc" || $('input:radio[name=hello]:checked').val() == "def" || $('input:radio[name=hello]:checked').val() == "ghi" )
{
if( ($('input[name=first-name]').val().length<1 ))
{
$('#first-name').focus();
return false;
}
if( ($('input[name=last-name]').val().length<1 ))
{
$('#last-name').focus();
return false;
}
}
</script>
I wrote something like this but it doesn't work.
Even I choose value for "mno", the first-name validation work.
Also this function won't validate the last-name.
any idea what i did wrong?

You are using javascript for validation but you should use this javascript in a function and call that function from your form, until it will not work because you are not calling this javascript that mean it is not working.
Here is the simple code for validation by which you can see how to validate a form. hope this code will help you.
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>

HTML button onClick listener calling HTML form onSubmit javascript function

I am a novice in web development, I have created a simple html page. The page has two buttons, Submit and Display Data. The Submit button is supposed to post form data to a particular page after validating the form. This button is working fine. I am facing a problem with the Display Data button. The button is supposed to open a separate page and there should not be any kind of form validation. The page is getting open but the form is also getting validated.
The html page:
<html>
<head>
<script>
function validateForm()
{
var name=document.forms["myForm"]["name"].value;
var email=document.forms["myForm"]["email"].value;
var mobile=document.forms["myForm"]["mobile"].value;
var address=document.forms["myForm"]["address"].value;
var atpos=email.indexOf("#");
var dotpos=email.lastIndexOf(".");
if (name==null || name=="")
{
alert("Name must be filled out");
return false;
}
else if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length)
{
alert("Not a valid e-mail address");
return false;
}
else if(isNaN(mobile)||mobile.indexOf(" ")!=-1)
{
alert("Enter numeric value")
return false;
}
else if (mobile.length != 10)
{
alert("Enter 10 digit mobile");
return false;
}
else if (mobile.charAt(0)=="0")
{
alert("Mobile no should not start with 0");
return false;
}
else if (address==null || address=="")
{
alert("Address must be filled out");
return false;
}
}
</script>
</head>
<body>
<h2>Employee Details Entry</h2>
<form name="myForm" action="insertDisplay.php" onSubmit="return validateForm()" method="post">
Name: <input type="text" name="name"><br/>
Email: <input type="text" name="email"><br/>
Mobile: <input type="text" name="mobile"><br/>
Address: <input type="text" name="address"><br/>
<input type="submit" value="Submit"> <button onClick="location.href = 'insertDisplay.php'">Display Data</button>
</form>
</body>
</html>
Where am I going wrong? Why is the form validation function getting called?

place
<button onClick="location.href = 'insertDisplay.php'">Display Data</button> this line out of the form...

give this button the type you want to behave it.
<button type="button" onClick="location.href = 'insertDisplay.php'">Display Data</button>

You can take the values out of the form, or you can use, <input type="button"/> tag. It will not submit your form and will work as you intended.
<input type="button" value="display data" onClick="location.href = 'a.php'">

I suppose you also want your datas to be passed to your PHP file after clicking your button ?
If you push the out of the form will not be sended and you'll have no datas.
In fact, you want both buttons to submit your form, but only the first one should validate it ?
If this is it you can do this :
<form name="myForm" action="insert.php" method="post">
Name: <input type="text" name="name"><br/>
Email: <input type="text" name="email"><br/>
Mobile: <input type="text" name="mobile"><br/>
Address: <input type="text" name="address"><br/>
<input type="submit" name="typesubmit" value="Submit" onclick="return validateForm();" />
<input type="submit" name="typesubmit" value="Display Data" />
</form>
You'll be abled on your insert.php file to make difference between display and submit by checking $_POST['typesubmit'] value.
And if you want your "display" button to post your form on another php file, you can do this :
<form name="myForm" action="insert.php" method="post">
Name: <input type="text" name="name"><br/>
Email: <input type="text" name="email"><br/>
Mobile: <input type="text" name="mobile"><br/>
Address: <input type="text" name="address"><br/>
<input type="submit" value="Submit" onclick="return validateForm();" />
<input type="submit" value="Display Data" onclick="document.myForm.action='display.php';" />
</form>

Validate multiple form with one javascript

I have a page that has 6 forms that all have a value with the same name 'audit_id_upload'. Currently I have one of them being validated (I'm just looking for empty values) with...
function validateForm()
{
var x=document.forms["audit_upload"]["audit_id_upload"].value;
if (x==null || x=="")
{
alert("Please Select an Audit");
return false;
}
}
</script>
Can I adapt this to validate the other forms as well without having to repeat it 5 more times?
Thanks

Since you have a input element with audit_id_upload in every form, you could pass the name of your form to this function and use it to validate the item.
function validateForm(fName)
{
var x=document.forms[fName]["audit_id_upload"].value;
if (x==null || x=="")
{
alert("Please Select an Audit");
return false;
}
return true;
}
and call it on the for onSubmit event.
<form name='f1' onsubmit="return validateForm('f1')">
</form>
<form name='f2' onsubmit="return validateForm('f2')">
</form>
<form name='f3' onsubmit="return validateForm('f3')">
</form>

Try this:
<html>
<script type="text/javascript">
function test(theform)
{
if (theform.thefield.value == "foo") return true;
else return false;
}
</script>
<body>
<form action="" onsubmit="return test(this);">
<input type="text" value="" name="thefield" />
<input type="submit" />
</form>
<form action="" onsubmit="return test(this);">
<input type="text" value="" name="thefield" />
<input type="submit" />
</form>
<form action="" onsubmit="return test(this);">
<input type="text" value="" name="thefield" />
<input type="submit" />
</form>
</body>
</html>