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>
Related
If I have a simple html form with two submit buttons:
<form method="POST" class="submit_form main_form" action="myaction">
<input type="submit" name="goback" value="Go Back" />
<input type="submit" name="confirm" value="Confirm">
<input type="hidden" name="secret" value="hello"/>
</form>
It is possible to only post the hidden input if the "confirm" submit is clicked?
If the "goback" submit is clicked the hidden input should be ignored. I know how to accomplish this with JavaScript but was wondering if it can be done with just html.
For anyone wondering, this is how you do this in JavaScript:
<script>
var elements = document.getElementsByClassName('submit_form');
elements[0].addEventListener(
'submit',
function(event) {
if(event.explicitOriginalTarget.name === 'goback'){
var hiddenInput = document.querySelector("input[name='step']");
hiddenInput.setAttribute("disabled", "disabled");
}
}
);
</script>
You could put the buttons in 2 separate forms:
<form method="POST" class="submit_form main_form" action="myaction">
<input type="submit" name="goback" value="Go Back" />
</form>
<form method="POST" class="submit_form main_form" action="myaction">
<input type="submit" name="confirm" value="Confirm">
<input type="hidden" name="secret" value="hello"/>
</form>
That way the secret field will only be posted if the confirm button is clicked.
If you want to do it in the php code you can leave your form as is
and check if isset($_POST["confirm"]) to check if the confirm button was the one clicked.
In the HTML page, I have a form that will return false when submit, like:
<form id="form1" action="${formURL}" onsubmit="return false;" method="post" class="formdemotarget">
<input id="text_name" name="text_name" value="text_name" type="text" />
<input type="submit" value="submit">
</form>
Now is it possible to have javascript function to change the form onsubmit function to let the form submit?
You can overwrite the onsubmit property with a new function.
document.querySelector("form").onsubmit = function (event) {
alert("Replaced submit handler");
return true;
};
<form id="form1" action="${formURL}" onsubmit="return false;" method="post" class="formdemotarget">
<input id="text_name" name="text_name" value="text_name" type="text" />
<input type="submit" value="submit">
</form>
It is better not to get into this situation in the first place though. Design your event handlers to handle different situations in the first place.
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
}
I have a form which the submit button wont execute the function being called onclick.
<form method="get" name="myform" onsubmit="return Validate()" style="margin: 100px">
<input type="radio" id="Yes" name="Authorise" onclick="Clear_Message(Authorise_Message)"/>
Yes
<input type="radio" id="No" name="Authorise" onclick="Clear_Message(Authorise_Message)" />
No
<div class="Output" id="Authorise_Message"> </div>
<input type="submit" id="SUBMIT" name="SUBMIT" onclick="Validator()"/>
</form>
The Validator code:
function Validator()
{
//display an error message if radio button groups have no value, if it does have a value then clear the error message
Title_Radio();
Gender_Radio();
Partnership_Radio();
Communication_Radio();
Authorise_Radio();
Advice_Radio();
CC_Radio();
Switch();
alert("This function was called");
}
The radio methods check if the radio has a value, if not then it changes the Authorise_Method div to show a message next to the radios,
But the method wont seem to execute. When i had this in an <input type="button" onclick="Validator"/> it seemed to work but i needed it to submit so i changed it to a submit type button...
You should assign id to the form and then run your code at the submit event before the form being submitted, and prevent the form submission if the validation failed.
So the html should be:
<form id="theForm" method="get" name="myform" style="margin: 100px">
<input type="radio" id="Yes" name="Authorise" onclick="Clear_Message('Authorise_Message')"/> Yes
<input type="radio" id="No" name="Authorise" onclick="Clear_Message('Authorise_Message')" /> No
<div class="Output" id="Authorise_Message"></div>
<input type="submit" id="SUBMIT" name="SUBMIT"/>
</form>
And you should add the following code to your JavaScript code:
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("theForm").addEventListener("submit", function(event) {
Validator();
//if the validation fails, prevent the form submission by calling the following function:
//event.preventDefault();
});
});
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>