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>
Related
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>
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.
I have a webpage test.php with:
a form
a "Submit" button to send the answers to the form;
a "Leave" button to allow the user to leave the page (and go to 'leave.php') without filling the form;
a Controller which controls the data when the user clicks on Submit, and redirects elsewhere when everything is correct.
I would like the user to confirm that (s)he wants to leave before redirecting. Here is my code so far:
function confirmation(){
var result = confirm("Do you really want to leave this page?");
if(result){
window.location = 'leave.php';
}
else{
return FALSE;
}
}
<form method="post" action="test.php">
<input type="text" name="answer" id="answer" placeholder="Type your answer here">
<input type="submit" name="submit_answer" value="Submit your answer">
<input type="submit" name="leave" value="Leave this page" onClick="return confirmation();">
</form>
I have two problems:
The code does not redirect to leave.php when the user confirms that (s)he wants to leave, but it refreshes the current page. How can I fix that?
When the user selects Cancel in the confirmation box, the page test.php is reloaded and the data is lost: that is, the textbox is empty even if the user wrote something before clicking on Leave. Is there a way to avoid that?
You can submit the form using JavaScript. First, change both buttons to type="button". Using type="submit" submits your button causing your errors. Then write a simple function to submit the form.
function confirmation(){
var result = confirm("Do you really want to leave this page?");
if(result){
window.location = 'leave.php';
}
else{
return FALSE;
}
}
function submitForm(){
var form = document.getElementById('form');
form.submit();
}
<form id="form" method="post" action="test.php">
<input type="text" name="answer" id="answer" placeholder="Type your answer here">
<input type="button" name="submit_answer" value="Submit your answer" onClick="submitForm()">
<input type="button" name="leave" value="Leave this page" onClick="return confirmation();">
</form>
Here is a working version. I believe the issue was with the return statement, "return confirmation()":
<form method="post" action="test.php">
<input type="text" name="answer" id="answer" placeholder="Type your answer here">
<input type="submit" name="submit_answer" value="Submit your answer">
<input type="submit" name="leave" value="Leave this page" onClick="confirmation(); return false;">
</form>
<script>
function confirmation(e){
var result = confirm("Do you really want to leave this page?");
if (result) {
window.location = '/leave.php';
} else {
return FALSE;
}
}
</script>
If you have to Submit-Buttons each of them will submit your form. So you've got a conflict between the redirection to "test.php" and "leave.php". In this case, the action from the form comes always first.
function confirmation(){
var result = confirm("Do you really want to leave this page?");
if(result){
window.location = 'leave.php';
}
else{
return FALSE;
}
}
<form method="post" action="test.php">
<input type="text" name="answer" id="answer" placeholder="Type your answer here">
<input type="submit" name="submit_answer" value="Submit your answer">
<input type="button" name="leave" value="Leave this page" onClick="return confirmation();">
</form>
I am a novice in web development, I have created a simple html page. The page has two buttons, Submit and Display Data. The Submit button is supposed to post form data to a particular page after validating the form. This button is working fine. I am facing a problem with the Display Data button. The button is supposed to open a separate page and there should not be any kind of form validation. The page is getting open but the form is also getting validated.
The html page:
<html>
<head>
<script>
function validateForm()
{
var name=document.forms["myForm"]["name"].value;
var email=document.forms["myForm"]["email"].value;
var mobile=document.forms["myForm"]["mobile"].value;
var address=document.forms["myForm"]["address"].value;
var atpos=email.indexOf("#");
var dotpos=email.lastIndexOf(".");
if (name==null || name=="")
{
alert("Name must be filled out");
return false;
}
else if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length)
{
alert("Not a valid e-mail address");
return false;
}
else if(isNaN(mobile)||mobile.indexOf(" ")!=-1)
{
alert("Enter numeric value")
return false;
}
else if (mobile.length != 10)
{
alert("Enter 10 digit mobile");
return false;
}
else if (mobile.charAt(0)=="0")
{
alert("Mobile no should not start with 0");
return false;
}
else if (address==null || address=="")
{
alert("Address must be filled out");
return false;
}
}
</script>
</head>
<body>
<h2>Employee Details Entry</h2>
<form name="myForm" action="insertDisplay.php" onSubmit="return validateForm()" method="post">
Name: <input type="text" name="name"><br/>
Email: <input type="text" name="email"><br/>
Mobile: <input type="text" name="mobile"><br/>
Address: <input type="text" name="address"><br/>
<input type="submit" value="Submit"> <button onClick="location.href = 'insertDisplay.php'">Display Data</button>
</form>
</body>
</html>
Where am I going wrong? Why is the form validation function getting called?
place
<button onClick="location.href = 'insertDisplay.php'">Display Data</button> this line out of the form...
give this button the type you want to behave it.
<button type="button" onClick="location.href = 'insertDisplay.php'">Display Data</button>
You can take the values out of the form, or you can use, <input type="button"/> tag. It will not submit your form and will work as you intended.
<input type="button" value="display data" onClick="location.href = 'a.php'">
I suppose you also want your datas to be passed to your PHP file after clicking your button ?
If you push the out of the form will not be sended and you'll have no datas.
In fact, you want both buttons to submit your form, but only the first one should validate it ?
If this is it you can do this :
<form name="myForm" action="insert.php" method="post">
Name: <input type="text" name="name"><br/>
Email: <input type="text" name="email"><br/>
Mobile: <input type="text" name="mobile"><br/>
Address: <input type="text" name="address"><br/>
<input type="submit" name="typesubmit" value="Submit" onclick="return validateForm();" />
<input type="submit" name="typesubmit" value="Display Data" />
</form>
You'll be abled on your insert.php file to make difference between display and submit by checking $_POST['typesubmit'] value.
And if you want your "display" button to post your form on another php file, you can do this :
<form name="myForm" action="insert.php" method="post">
Name: <input type="text" name="name"><br/>
Email: <input type="text" name="email"><br/>
Mobile: <input type="text" name="mobile"><br/>
Address: <input type="text" name="address"><br/>
<input type="submit" value="Submit" onclick="return validateForm();" />
<input type="submit" value="Display Data" onclick="document.myForm.action='display.php';" />
</form>
whenever i click on submit button it fires alert("empty username") but goes a head and directs me to checklogin.php...how can i avoid that and let it remain on the page unless the field is not empty?
</body>
</html>
<script type="text/javascript"></script>
function RequiredFields(){
var username=document.forms["login"]["username"].value;
if (username==""||username==null){
alert("empty username")
document.login.username.focus();
if(document.all||document.getElementById){
return false;
}
}
}
</script>
<form action="checklogin.php" method="POST" onSubmit="RequiredFields()">
Username<input type="text" name="username"/>
Password<input type="password" name="password"/>
<input type="submit" value="Login" />
</form>
</body>
</html>
in the submit input you can add the event handler of onsubmit like this:
<input type="submit" value="submit form" onsubmit="return RequiredFields();"/>
the RequiredFields will return false if not all the required fields are full and the submit process will stop.
When you change your submit to this it won't submit if RequiredFields returns false.
<input type="submit" value="Login" onsubmit="return RequiredFields();"/>
Use this code
<input type="submit" value="Login" onclick="return RequiredFields()" />
I think this might work.
function xyz(event)
{
event.preventDefault(); // while the function returns false
}
also you may use HTML5 attribute required to avoid javascript overburden.
<*input type="" required>*