Validate input form with Javascript - javascript

Is there something I'm doing wrong that stops the form validating? I can't seem to get it to validate when the checkbox is not clicked.
Your help will be appreciated.
<html>
<head>
<script type="text/javascript">
function validateTerms(){
valid = true;
if ( document.application-form.terms.checked == false ){
alert ( "Please accept the terms" );
valid = false;
}
return valid;
}
</script>
</head>
<body>
<form id="application-form" name="application-form" method="post" action=""><br />
<p><input type="checkbox" name="terms" value="terms" /><b> I have read the Terms *</b>. </p>
<input type="submit" value="Submit Application" onsubmit="return validateTerms()">
<input type="reset" value ="Clear Form" onClick="return confirm('Are you sure you want to reset the form?')">
</form>
</body>
</html>

Input button doesn't have onsubmit event, use onclick instead. There were also other problems such as bad selection etc. , which are solved. See below
See a working demo here http://jsfiddle.net/ZHfX7/
<html>
<head>
</head>
<body>
<form id="application-form" name="application-form" method="post" action=""><br />
<p><input type="checkbox" id="terms" name="terms" value="terms" /><b> I have read the Terms *</b>. </p>
<input type="submit" value="Submit Application" onclick="return validateTerms()">
<input type="reset" value ="Clear Form" onClick="return confirm('Are you sure you want to reset the form?')">
</form>
</body>
<script type="text/javascript">
function validateTerms(){
valid = true;
if ( !document.getElementById('terms').checked){
alert ( "Please accept the terms" );
valid = false;
}
return valid;
}
</script>
</html>

The onsubmit should be part of the <form> tag, not <input>.
<form id="application-form" name="application-form" method="post" action="" onsubmit="return validateTerms();">

You cannot use application-form inline in your document.application-form.terms. as its not a legal js identifier due to the hyphen.
Either give the checkbox an ID;
<input type="checkbox" name="terms" value="terms" id="terms" />
then reference it with
if (document.getElementById("terms").checked = ....
or use [] notation;
document.forms['application-form'].terms ...

application-form is not a valid name
onsubmit is not valid on input, moved to form
try -
<html>
<head>
<script type="text/javascript">
function validateTerms(){
if (document.application.terms.checked){
alert ( "Please accept the terms" );
return false;
}
return true;
}
</script>
</head>
<body>
<form id="application" name="application" method="post" action="" onsubmit="return validateTerms()"><br />
<p><input type="checkbox" name="terms" value="terms" /><b> I have read the Terms *</b>. </p>
<input type="submit" value="Submit Application" >
<input type="reset" value ="Clear Form" onClick="return confirm('Are you sure you want to reset the form?')">
</form>
</body>
</html>

Related

JS setCustomValidity not work at first time

I want to make a custom validity message to my form, and there are some problem.
The validity message will show after click two times.
and if I don't input correct word "text" first time, then it will not submit anymore.
what's the problem in my code.
JS:
function a(){
jQuery("#text")[0].setCustomValidity("");
if (jQuery("#text").val() == "text"){
return confirm('sure?');
}
jQuery("#text")[0].setCustomValidity("Incorrect");
return false;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/" method="post" onsubmit="return a();">
<input type='text' id="text"/>
<input type="submit" value="submit"/>
</form>
Please try to check below solution:
$(document).on('click',"#submit_btn", function()
{
if($("#text").val() === "text")
return confirm('sure?');
else
$("#text")[0].setCustomValidity("Incorrect");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/" method="post">
<input type='text' id="text"/>
<input type="submit" value="submit" id="submit_btn"/>
</form>

onsubmit return false does not work, form still submits?

This is the code
<html>
<head>
<script>
function test() {
return false;
}
</script>
</head>
<body>
<form method="post" action="../test.php">
<input type="submit" onsubmit="return test()">
</form>
</body>
</html>
how is the form still submitting, it makes no sense to me??
You need to stop form submission, when user submits it by clicking the submit button in the form.
Change onsubmit of the submit button to onclick
<input type = "submit" onsubmit= "return test()">
Should be
<input type="submit" onclick="return test()">
<!-- ^^^^^^^^^^^^^^^^^^^^^^^ -->
If you want to use onsubmit, you can use it on form element.
<form method="post" action="../test.php" onsubmit="return test()">
<!-- ^^^^^^^^^^^^^^^^^^^^^^^^ -->
<input type="submit" />
</form>
<html>
<head>
<script>
function test(e) {
e.preventDefault();
return false;
}
</script>
</head>
<body>
<form method="post" action="../test.php" onsubmit="return test(event);">
<input type="submit">
</form>
</body>

Posting a javascript variable to PHP.

I have a javascript function to count the number of clicks. I wish to post the variable storing the count to PHP. I'm unsure why when I submit the form, the count is not echoed out. Below is the HTML file.
<html>
<head>
<title> js php </title>
<script>
var cnt=0;
function CountFun(){
cnt=parseInt(cnt)+parseInt(1);
var divData=document.getElementById("showCount");
divData.innerHTML="Number of Downloads: ("+cnt +")";//this part has been edited
}
</script>
</head>
<body>
<div id="showCount"></div>
<form action "submitClicks.php"id="form">
<input type="hidden" name="numberOfClicks" />
<input type="button" id="btnClick" value="Click me" onclick="CountFun()"/>
<input type="submit" value="Submit Clicks" />
</form>
</body>
</html>
Then this is my submit clicks page:
<?php
$number_of_clicks = $_POST["cnt"];
echo $number_of_clicks;
?>
Does this implementation look correct to you as when I click submit clicks, nothing happens. I'm expecting the number of clicks to be echoed.
<form action "submitClicks.php"id="form">
Should be:
<form action="submitClicks.php" id="form" method="post">
And shouldn't you have something like:
In HTML:
<input id="count" type="hidden" name="cnt" value="">
In your Javascript CountFun function:
document.getElementById('count').value = cnt;
Try this code:
<html>
<head>
<title> js php </title>
<script>
var cnt=0;
function CountFun(){
cnt=parseInt(cnt)+parseInt(1);
var divData=document.getElementById("showCount");
divData.value=cnt;//this part has been edited
document.getElementById("JustShow").innerHTML= cnt;
}
</script>
</head>
<body>
<div id="JustShow"></div>
<form action="submitClicks.php" id="form" method="post">
<input type="hidden" id="showCount" name="cnt" value="0" />
<input type="button" id="btnClick" value="Click me" onclick="CountFun()"/>
<input type="submit" value="Submit Clicks" />
</form>
</body>
</html>

Please use POST request

While running the following script i am getting error "Please use POST request". I am just a beginner to html and javascript. Can any one help what is wrong here.
javascript
function submitform(){
if (!document.getElementById('reschedule').onclick) {
alert("reschedule")
}
if (!document.getElementById('home').onclick) {
alert("home")
}
if (!document.getElementById('cancel').onclick) {
alert("cancel")
}
}
and html is
<html>
<form name="myform" method="post,get" onsubmit="return submitform();">
<input type="submit" id="reschedule" value="reschedule" />
<input type="submit" id="home" value="home" />
<input type="submit" id="cancel" value="cancel" />
</form>
<form name="myform" method="post" onsubmit="return submitform();">
change this:
method="post,get"
to this:
method="post"
In the <form> tag attributes

return js value in HTML

First tentative steps into client side. I'm having trouble finishing the following. My question is how do I return the value of a function in a HTML statement ...
<script language="Javascript">
function checkjava()
{
return 1
}
</script>
</head>
<body>
<form action="enabled_catch.php" method="get" name="your_form">
<input type="HIDDEN" name="answer" value="RETURN checkjava() HERE")>
<input type="submit" value="click me">
</form>
</body>
I'd appreciate your help
Thanks in advance
G
<head>
<script language="Javascript">
function checkjava() {
return 1
}
</script>
</head>
<body>
<form action="enabled_catch.php"
method="get"
name="your_form"
onsubmit="this.answer.value=checkjava();">
<input type="hidden" name="answer">
<input type="submit" value="click me">
</form>
</body>
No need for the id attribute.
<form action="enabled_catch.php" method="get" name="your_form" >
<input type="HIDDEN" name="answer" value="RETURN checkjava() HERE")>
<input type="submit" onclick="document.getElementById('answer').value=checkjava();" value="click me">
You would do something like that:
<script language="Javascript">
function checkjava()
{
return 1
}
</script>
</head>
<body>
<form action="enabled_catch.php" method="get" name="your_form" onsubmit="document.getElementById('answer').value=checkjava();">
<input type="HIDDEN" id="answer" >
<input type="submit" value="click me">
</form>
</body>
Basically on form submit you would set the value of the answer input to the result of the function call.
EDIT: placed onsubmit on the wrong element before (embarrassing).
I would have an id on the answer tag and then do it in the form onsubmit event.
Something like:
<form onsubmit="document.getElementById("answerId").value = checkJava()" action="enabled_catch.php" method="get" name="your_form">
<input type="HIDDEN" name="answer" id="answerId" value="RETURN checkjava() HERE")>
<input type="submit" value="click me">
</form>
Browser-side scripting is event driven. Unless an event is triggered, nothing happens.
You could listen to the click event on your submit button, and then manipulate the value of your hidden field:
<input type="hidden" id="answer" name="answer" value="")>
<input type="submit" value="click me"
onclick="document.getElementById('answer').value = checkjava();">
Note how we had to give an id to the hidden field, in order to be able to reference it with getElementById().
Also note that JavaScript is case sensitive: checkjava() and checkJava() are not the same.
<script>
document.your_form.answer.value = checkjava();
</script>
Unless you want to use a fancy JS library. =)

Categories