We Keep Coding

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>

javascript function call for single form

I have multiple forms in my php file for different buttons. So, if I click on Back button, ramesh.php script should be called and so on. This is the code.
<form action="ramesh.php">
<input type="submit" value="Back" />
</form>
<form action="process.php" method="post">
<input name="rep_skyline" type="text" />
<input type="submit" />
</form>
<form action="update.php" method="post" >
<button type="submit">Update</button>
</form>
However, I need to pass some data to server from my client side on form submit just for the update button. I have a javascript function to send the data to server side as below.
<script type="text/javascript">
$(document).ready(function() {
$('form').submit(function(e) {
var mydata = 3;
if ($(this).is(':not([data-submit="true"])'))
{
$('form').append('<input type="hidden" name="foo" value="'+mydata+'">');
$('form').data('submit', 'true').submit();
e.preventDefault();
return false;
}
})
})
</script>
If I click on the update button, the javascript function is working fine. However, if I click on Back or Submit button, I should not be calling the javascript function. Is there someway to do this?

Give your form an id:
<form action="update.php" method="post" id="update-form">
Then use a more specific selector:
$("#update-form").submit(function() {
// Code
});
I'm not quite sure why you need JavaScript to dynamically add data to your form, however. You should just use an <input type="hidden" /> directly.

type=submit will always load the form's action. Try to specify wich form to submit.
<form name="backForm" id="backForm" action="ramesh.php">
<input type="submit" value="Back" />
</form>
<form name="form2" id="form2" action="process.php" method="post">
<input name="rep_skyline" type="text" />
<input type="submit" />
</form>
Now you can access the form via document.backForm or document.getElementById("backForm") and than use submit(); like document.getElementById("backForm").submit();

Form submitting using Javascript not working

I am using multiple form in a page here is my HTML code:
<form name="myform" id="myform" method="post" action="test.php">
<a href="javascript: submitform();" >submit</a>
<input type="hidden" name="encKey" value="12" />
</form>
<form name="myform" id="myform" method="post" action="test.php">
<a href="javascript: submitform();" >submit</a>
<input type="hidden" name="encKey" value="12" />
</form>
<form name="myform" id="myform" method="post" action="test.php">
<a href="javascript: submitform();" >submit</a>
<input type="hidden" name="encKey" value="12" />
</form>
And here is my javascript code:
<script type="text/javascript">
function submitform()
{
document.myform.submit();
}
</script>
When i click on submit link, form is not submitting and gererate error in backend:
TypeError: document.myform.submit is not a function.
What may be issue?
Thanks

I think you should use unique ids for all the forms. Then you can have a function that takes as a parameter the id of the form that you want to submit and then submit it. So you can have something like <script type="text/javascript">
function submitform(formid)
{
document.getElementById(formid).submit();
}
</script>

You may try this
<script type="text/javascript">
function submitform()
{
document.getElementById('myform').submit();
}
</script>

You can also use document.forms["myForm"].submit();.
In this case "myForm" is the name of each form and it has to be unique as well as id.

First of all you've got 3 id which are the same (myform), an id has to be unique.

the id of a form must be unique, try to change the form id to only name.
you can try to use document.getElementById('formId').submit() to submit the information of a form.

Validate input form with 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>

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. =)