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
}
Related
I'm new in java script.
i want to validate input with type of check box.
i used below code for validation.
<form onsubmit="return checkForm(this);">
<input type="checkbox" name="terms" value="accept" id="accept" />
</form>
function checkForm(form) {
alert('hello');
if (form.terms!=check) {
alert("Please indicate that you accept the Terms and Conditions");
form.terms.focus();
return false;
}
return true;
}
<form name="form1" id="form1" runat="server" onsubmit="return checkForm(this);">
<input class="farsi-font" type="checkbox" name="terms" value="accept" id="accept" style="color: #000" runat="server" />
</form>
however i get alert("Please indicate that you accept the Terms and Conditions");" the form will post to database.and validation just alert to user and didn't prevent form post.any body can help me ?
thank
Not sure where that code came from, but here's how I'd do it:
<input type="checkbox" name="terms" value="accept" id="accept" required />
Note the addition of the required attribute.
document.querySelector('#accept').setCustomValidity('Please accept the terms and conditions');
Now when the user submits the form it will display your message if the box is not checked, the form will not submit. You can test this by placing a console.log or debugger statement in your submit handler:
// Note that as I said in the comments, attaching the handler
// this way is preferable to using the onsubmit HTML attribute.
document.querySelector('#form1').addEventListener('submit', function(evt) {
console.log('stop the presses!');
});
Try this:
HTML
<form onsubmit="return checkForm(event, this);">
<input type="checkbox" name="terms" id="accept" />
</form>
JS
function checkForm(event, form) {
event.preventDefault();
if (!form.terms.checked) {
alert("Please indicate that you accept the Terms and Conditions");
return false;
}
return true;
}
EDIT:
To submit the form using only html, you can have the following approaches.
With an input inside the form
<form onsubmit="return checkForm(event, this);">
<input type="checkbox" name="terms" id="accept" />
<input type="submit" value="Submit the form" />
</form>
With a button outside it. (Now the form must have an id)
<form id="myForm" onsubmit="return checkForm(event, this);">
<input type="checkbox" name="terms" id="accept" />
</form>
<button type="submit" form="myForm">Submit the form</button>
This question already has an answer here:
Onsubmit function called submit
(1 answer)
Closed 4 years ago.
Why can you still submit a form even though the function returns false?
function submit() {
return false;
}
<form action="#" onsubmit="return submit()">
account : <input name="name" type="text" id="name"> <br>
<input type="submit" value="login">
</form>
I believe your function name conflicts with the native submit action.
I've renamed it below.
function submitter() {
return false;
}
<form action="#" onsubmit="return submitter()">
account : <input name="name" type="text" id="name"> <br>
<input type="submit" value="login">
</form>
Also see Reserved words in JavaScript.
preventDefault() work great to prevent default action like clics or submits..
$('form').submit((ev) => {
ev.preventDefault();
})
I think you should use a unique identifier on the form and use it to add an event listener in your javascript as below.
Also use event.preventDefault() to stop the default form submission action which works as in the code below. Hope this solves your problem :-)
document.querySelector("#my-form").addEventListener("submit", function(e){
e.preventDefault(); //stop form from submitting
});
<form action="#" id="my-form" method="post">
account : <input name="name" type="text" id="name"> <br>
<input type="submit" value="login">
</form>
I have two buttons on page:
<div class="bottons">
<button class="wiz_button wizard_prev_step" type="button" style="margin-top: 27px;
display: none"><span><span>Previous</span></span></button>
<form id="orderForm" method="POST">
<input type="hidden" name="Signed_Order_B64" value="">
<input type="hidden" name="email" size="50" maxlength="50" value="">
<input type="hidden" name="Language" value="rus">
<input type="hidden" name="firstname" value="">
<input type="hidden" name="surname" value="">
<input type="hidden" name="appendix" value="">
<button class="wiz_button wizard_next_step disabled long" type="button" style="margin-top: 27px;">
<span><span>Next</span></span></button>
</form>
</div>
This buttons from my custom wizard. Also, I have a click event handler for Next button:
$('.wizard_next_step').click(function () {
// load next step and other stuff
})
I want when user locate on the last step the post form:
if (currentStep === '3') {
// here I want set onsubmit function for the form *
}
How can I do this?
Thanks.
PS. The solution must works in IE 7 and above.
Just do:
$('#orderForm').submit()
Your are using jQuery. so simply use
if (currentStep === '3') {
// here I want set onsubmit function for the form and submit it *
$('#orderForm').submit();
}
Since the button is in the form, and within the attached listener this will reference the button, you can assign to the onsubmit property using:
this.form.onsubmit = someFn;
and submit the form using:
this.form.submit();
I'm currently working on a basic form. When you hit the submit button, it should first change the value of a field, and then submit the form as usual. It all looks a bit like this:
<form name="myform" id="myform" action="action.php">
<input type="hidden" name="myinput" value="0" />
<input type="text" name="message" value="" />
<input type="submit" name="submit" onclick="DoSubmit()" />
</form>
And this is how far I've come with the JavaScript code. It changes "myinput"'s value to 1, but it does not submit the form.
function DoSubmit(){
document.myform.myinput.value = '1';
document.getElementById("myform").submit();
}
You could do something like this instead:
<form name="myform" action="action.php" onsubmit="DoSubmit();">
<input type="hidden" name="myinput" value="0" />
<input type="text" name="message" value="" />
<input type="submit" name="submit" />
</form>
And then modify your DoSubmit function to just return true, indicating that "it's OK, now you can submit the form" to the browser:
function DoSubmit(){
document.myform.myinput.value = '1';
return true;
}
I'd also be wary of using onclick events on a submit button; the order of events isn't immediately obvious, and your callback won't get called if the user submits by, for example, hitting return in a textbox.
document.getElementById("myform").submit();
This won't work as your form tag doesn't have an id.
Change it like this and it should work:
<form name="myform" id="myform" action="action.php">
Here is simple code. You must set an id for your input. Here call it 'myInput':
var myform = document.getElementById('myform');
myform.onsubmit = function(){
document.getElementById('myInput').value = '1';
myform.submit();
};
No. When your input type is submit, you should have an onsubmit event declared in the markup and then do the changes you want. Meaning, have an onsubmit defined in your form tag.
Otherwise change the input type to a button and then define an onclick event for that button.
You're trying to access an element based on the name attribute which works for postbacks to the server, but JavaScript responds to the id attribute. Add an id with the same value as name and all should work fine.
<form name="myform" id="myform" action="action.php">
<input type="hidden" name="myinput" id="myinput" value="0" />
<input type="text" name="message" id="message" value="" />
<input type="submit" name="submit" id="submit" onclick="DoSubmit()" />
</form>
function DoSubmit(){
document.getElementById("myinput").value = '1';
return true;
}
My problem turned out to be that I was assigning as document.getElementById("myinput").Value = '1';
Notice the capital V in Value? Once I changed it to small case, i.e., value, the data started posting. Odd as it was not giving any JavaScript errors either.
I have done this and it works for me.
At first you must add a script such as my SetHolderParent() and call in the html code like below.
function SetHolderParent(value) {
alert(value);
}
<input type="submit" value="Submit" onclick="SetHolderParent(222);" />
You can use the onchange event:
<form name="myform" id="myform" action="action.php">
<input type="hidden" name="myinput" value="0" onchange="this.form.submit()"/>
<input type="text" name="message" value="" />
<input type="submit" name="submit" onclick="DoSubmit()" />
</form>
This might help you.
Your HTML
<form id="myform" action="action.php">
<input type="hidden" name="myinput" value="0" />
<input type="text" name="message" value="" />
<input type="submit" name="submit" onclick="save()" />
</form>
Your Script
<script>
function save(){
$('#myinput').val('1');
$('#form').submit();
}
</script>
hi
i want two check two fields
if the value of two fields is same then its shows a message two me i have a code but
its not working can you tell me what worng with this code
<script type="text/javascript">
function checkForm(form1){
if(form1.field1.value == form1.field2.value ){
alert(" values are identical");
form1.field1.focus();
return true;
}else{
return false;
}
}
</script>
<form name="form1" method="POST" action="" >
<input type="text" name="field1">
<input type="text" name="field2">
<input type="submit" onClick="return checkform1(this);" >
</form>
Change your if condition like this
if(document.form1.field1.value==document.form1.field2.value)
You're calling checkform(), but that's not defined anywhere. Also, checkform1(this) uses the button as the element form1, which screws everything up. Use this.parentNode, which passes the form as the argument.
Here's some working code:
<script>
function checkForm(form1) {
if (form1.field1.value == form1.field2.value) {
alert(" values are identical");
form1.field1.focus();
return true;
} else {
return false;
}
}
</script>
<form name="form1" method="POST" action="" >
<input type="text" name="field1">
<input type="text" name="field2">
<input type="submit" onClick="return checkForm(this.parentNode);" >
</form>
You need to add document. in front of your form selections. And your method name is wrong from the method you are calling from your click event.
I've fixed it and included an example here : http://jsfiddle.net/jomanlk/Fu2wJ/1/
function checkForm(form1) {
if (document.form1.field1.value == document.form1.field2.value) {
alert(" values are identical");
document.form1.field1.focus();
return false;
}
else {
return true;
}
}
<form name="form1" method="POST" action="" >
<input type="text" name="field1">
<input type="text" name="field2">
<input type="submit" onClick="return checkForm();" >
</form>
Apart from the fact that checkForm1 function does not exist , the main problem lies in
<input type="submit" onClick="return checkform1(this);" >
Here the this refers to the input and not the form.
To make your code working change the function name to checkForm and
<input type="submit" onClick="return checkform1(this.form);" >