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
Related
formValidation() function return false but not preventing form submission
<body>
<script>
function formValidation(){
return false;
}
</script>
<form onsubmit="formValidation()" method="POST" action="<?php echo $_SERVER['PHP_SELF'] ?>">
<label for="email">Email:</label><br>
<input type="email" name="email" id="email"><br><br>
<input type="submit" name="submit" value="submit">
</form>
</body>
When i have used return front of formValidation() function it is working
<body>
<script>
function formValidation(){
return false;
}
</script>
<form onsubmit="return formValidation()" method="POST" action="<?php echo $_SERVER['PHP_SELF'] ?>">
<label for="email">Email:</label><br>
<input type="email" name="email" id="email"><br><br>
<input type="submit" name="submit" value="submit">
</form>
</body>
Inline handlers like these essentially turn into a function body. Said function is executed when the event is fired.
function theHandler() {
// Attribute string goes here
}
If the function returns false, the event's default action (such as submitting the form) is prevented.
<form onsubmit="formValidation()"
doesn't work because then the constructed function that gets executed doesn't return anything:
function theHandler() {
formValidation()
}
But
<form onsubmit="return formValidation()"
works because then the constructed function is like
function theHandler() {
return formValidation()
}
It's somewhat confusing - and is one of the (many) reasons why you should never use inline handlers. Attach the event listener properly using JavaScript instead.
document.querySelector('form').addEventListener('submit', formValidation);
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.
When I try printing a js variable in a h1 tag it's just printing for 2 milliseconds and disappears afterwards.
function validateForm() {
// alert("hello");
var name = document.myform.name.value;
document.getElementById("a1").innerHTML = name;
// document.myform.write.value= name;
}
<html>
<head>
<title>
js 1
</title>
</head>
<body>
<form name="myform" onSubmit="return validateForm();">
Name<input type="text" name="name"><br> Password <input type="text" name="password"><br><br>
<h1 id="a1"></h1>
<input type="submit" value="submit"><br>
</form>
</body>
</html>
I want the output to print the name the user enters and it should be visible until the second time the user enters another name.
In your validateForm function you can return false to prevent form from submitting and page from reloading.
function validateForm() {
document.getElementById("a1").innerHTML = document.myform.name.value;
return false;
}
<form name="myform" onsubmit="return validateForm();">
Name<input type="text" name="name"><br>
Password <input type="text" name="password"><br><br>
<h1 id="a1"></h1>
<input type="submit" value="submit"><br>
</form>
This is because the button type is being submit your from is submitted immediately. If you want to stay in the same page,you can either change the type of the button from submit to input.
<input type="button" value="submit"><br>
OR: Use event.preventDefault(); to neutralize the event.
<script type="text/javascript">
function validateForm(){
// alert("hello");
var name=document.myform.name.value;
document.getElementById("a1").innerHTML = name ;
// document.myform.write.value= name;
event.preventDefault();
}
</script>
<form name="myform" onSubmit="return validateForm();">
Name<input type="text" name="name"><br>
Password <input type="text" name="password"><br><br>
<h1 id="a1"></h1>
<input type="submit" value="submit"><br>
</form>
Your form is being submitted immediately, so the page reloads.
Return false from your event handler to prevent that from happening.
function validateForm() {
var name = document.myform.name.value;
document.getElementById("a1").innerHTML = name;
return false;
}
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);" >