I am trying to write this, but it doesn't seem to work. Please help me.
<form name="myForm" action="/action_page.php" onsubmit="" method="post">
Name: <input type="text" name="fname">
<script>
function myFunction(){
alert("Hello there!");
}
document.forms[0].setAttribute("onsubmit", "return myFunction();");
</script>
<input type="submit" value="Submit">
</form>
Move the script tag with your JavaScript code outside your form tags, and actually return something from the submit handler function, then it works:
<form name="myForm" action="/action_page.php" onsubmit="" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
<script>
function myFunction(){
alert("Hello there!");
return true;
}
document.forms[0].setAttribute("onsubmit", "return myFunction()");
</script>
Related
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 have a submit event that use native POST (non-ajax).
<form method="post">
<button type="submit" value="submit"></button>
</form>
How can I prompt the user when the user clicked on the submit button? if the user clicked confirm, then only it will continue.. I know I can do this with ajax, but is it possible to do it with the native post too?
You can add a confirm() to the submit event of the form, and return its value to the anonymous function as follows (using jQuery):
$('form').on('submit', function() {
return confirm('Are you sure?');
});
jsFiddle Demo
Just do it
<form onsubmit="return confirm('Are you sure?')" />
Although this is not the recommended way but it will do what you want
<form method="post" onsubmit="return confirm('Do you really want to submit');">
<button type="submit" value="submit">Submit</button>
</form>
function submitForm() {
var r = confirm("Do you want to submit the form?");
if (r == true) {
document.getElementById("mainForm").submit();
} else {
return false;
}
}
<html>
<body>
<form id="mainForm" method="post" onsubmit="submitForm()">
Enter name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>
Yes, it's possible.
<form id="f" action="demo_form.asp" onsubmit="return false">
Enter name: <input type="text" name="fname">
<input type="submit" onclick="t()" value="Submit">
</form>
<script>
function t() {
if(confirm("Yo")){
var form = document.getElementById("f")
form.submit()
}
}
</script>
Javascript validation is not working! Form is submitting even if function returns false. Where i should make changes? Here is the part of the code i wrote.
<html>
<head>
<script>
function check()
{
temp=document.getElementById("name").value;
if(temp=="")
{
document.getElementById("err").innerHTML="error found";
document.getElementById("name").focus();
return false;
}
}
</script>
</head>
<body>
<form>
<input type="text" id="name">
<div id="err"></div>
<input type="submit" onClick="check()">
</form>
</body>
</html>
I would suggest you to use onSubmit event of form instead of onClick event of button.
You also need to use return with HTML onevent attributes
HTML
<form onSubmit="return check()">
<input type="text" id="name"/>
<div id="err"></div>
<input type="submit" />
</form>
DEMO
I have basic example of submitting a value to a hidden. But its seems not to want to take my value in my function. Maybe there us something am missing.
<script language="JavaScript">
function submitForm() {
document.statusform.do.value = "checkstatus";
document.statusform.submit();
}
</script>
<form action="" method="GET" enctype="multipart/form-data" id="statusform">
<input type="hidden" name="do" id="do" value="">
<input type="submit" class="button" name="submit" value="Resume Request" onClick="submitForm();" /></form>
First, You're wrong in this part:
document.statusform.do.value = "checkstatus";
document.statusform.submit();
In firefox error console it will be show an error:
Error: TypeError: document.statusform is undefined
Change that code to:
document.forms['statusform'].do.value = "checkstatus";
document.forms['statusform'].submit();
Second, remove name attribute from submit button.
Change this part:
<input type="submit" class="button" name="submit" value="Resume Request" onClick="submitForm();" /></form>
to:
<input type="submit" class="button" value="Resume Request" onClick="submitForm();" /></form>
change
<form action="" method="GET" enctype="multipart/form-data" id="statusform">
to
<form action="" method="GET" enctype="multipart/form-data" name="statusform">