This question already has answers here:
POST form and prevent response
(2 answers)
Closed 9 years ago.
I have html form whose action is a php script. php code basically replaces the file.
HTML code:
<form name="input" action="//copy.php" method="POST" onsubmit="return alertbox();">
<input type="hidden" name="path1" value=path to image 1/>
<input type="hidden" name="path2" value='path to image 2' />
<input type="submit" name="submit" value="Copy image"/>
</form>
Php code:
if isset($_POST['submit']))
{
$image1 = $_POST['path1'];
$image2 = $_POST['path2'];
copy($image1, $image2);
}
?>
Now when I click submit, a alert box opens that "file is updated successfully" and when I click ok on it, a blank page load. How can I avoid loading the blank page? I want to stay on the same page after clicking submit with pop up msg.
SOLUTION
As I don't see "Answer your own question" option, I am posting solution here.
This link POST form and prevent response, gives you textual answer to the question. While I providing the answer by code.
So basically, it very simpl. Just put
header("HTTP/1.0 204 No Response");
in the php file and it will work successfully on all browser, without opening new page. This will avoid use of jquery.
Leave action empty.
<form method="post" action="">
Then check if posted using isset function
if(isset($_POST)){
...
}
This will keep you on the same page after submit button..
<form name="input" action="" method="POST" onsubmit="return alertbox();">
<input type="hidden" name="path1" value=path to image 1/>
<input type="hidden" name="path2" value='path to image 2' />
<input type="submit" name="submit" value="Copy image"/>
</form>
But now, your image(s) may not be loaded. Maybe it will work, maybe not. If not, you will need to resolve functions which may reside in copy.php file. Since we dont know whats in that file, its hard to answer your question correctly, but.. you may try this "blind" shot..
if(isset($_POST['submit']))
{
//include "//copy.php"; // this file probably contains functions, so lets load functions first IF needed..
$image1 = $_POST['path1'];
$image2 = $_POST['path2'];
copy($image1, $image2);
}
Have you tried changing the type on the input:
<input type="submit" name="submit" value="Copy image"/>
to
<input type="button" name="submit" id="submit" value="Copy image"/>
<input type="button" /> won't submit a form by default (check all browsers to be sure).
<input type="submit"> by default, the tag in which the submit input is, is submitted. If you still want to use this, you will have to override the input submit/button's functionality with an event.preventDefault(). In that case, you need:
$('#submit').click(function (event) {
event.preventDefault();
//Do whatever you need to
//Submit if needed: document.forms[0].submit();
});
For further details refer this link
action="<?php echo $_SERVER['PHP_SELF']; ?>
Related
EDIT: I should mention the form submits fine manually but with the javascript nothing seems to happen
I'm trying to get a form to autosubmit on page load and then redirect the user. Reason for this is this is part of a PHP page and the data needs to go into my database but then also POST the variables to a 3rd party SMS platform then return to the users dashboard.
My form looks like this:
<html>
<form action="https://www.example.com" id="myForm" method ="POST">
<input type="hidden" name="apiKey" value="withheld">
<input type="hidden" name="message" value="<?php echo $club_name ?> have requested you to play for them this weekend. Please login to your account to see more information and accept.">
<input type="hidden" name="to" value="<?php echo $to ?>">
<input type="hidden" name="from" value="withheld">
<input type="submit" name="submit" id="submit" value="Submit">
</form>
</html>
This seems to work fine so I assume the Javascript is incorrect which is:
<script>
document.getElementById('myForm').submit();
window.location.replace("https://www.example.com");
</script>
You have to use a different name than
name="submit"
as all name attributes are set as properties on the form,
hence overriding the default "submit" property on the form,
and the default form method "submit()" is gone.
https://developer.mozilla.org/de/docs/Web/API/HTMLFormElement
"Named inputs are added to their owner form instance as properties, and can overwrite native properties if they share the same name (eg a form with an input named action will have its action property return that input instead of the form's action HTML attribute)."
In your code window.location.replace("https://www.example.com"); line won't make sense because submit() function will try to submit the form and will change the page and then replace function will prevent submitting the form and will redirect the page. The right way to do this via js can be, submit the form via ajax and in the success callback of Ajax run document.getElementById('myForm').submit()
My workmates and I use the link below a couple of times in a day by clicking several pages to finally get this link:
http://eharita.mamak.bel.tr/imararsiv/test.aspx?f_ada=36391&f_parsel=4
What i want to do is, after test.aspx?_ada= you see 36391 this is my first number and &f_parsel= 4 this is the second one.
I want to create an HTML which consist of 2 boxes and a submit, sent button, in the very first box i want to write down a number (in the example it is : 36391) and in the second box another number (in the example it is : 4) and after that i ll click on Submit or Send button and this action will take me to the URL of
http://eharita.mamak.bel.tr/imararsiv/test.aspx?f_ada=36391&f_parsel=4
Maybe its easy or not but as a civil engineer i don't know how to make an HTML page like that.
It is quite easy, you just need a basic form.
<form action="http://eharita.mamak.bel.tr/imararsiv/test.aspx" method="GET">
<input type="text" name="f_ada" > <br>
<input type="text" name="f_parsel"> <br>
<button type="submit"> Submit</button>
</form>
You can try it out here http://jsfiddle.net/ea6heach/
<form action="http://eharita.mamak.bel.tr/imararsiv/test.aspx">
<input type="text" name="f_ada"/><br>
<input type="text" name="f_parcel"/><br>
<input type="submit" name="submit"/>
</form>
The demo doesn't work because Stackoverflow doesn't allow HTML redirecting but this is the idea of a simple form.
Following form write in particular html file.
<form action="action_page.php">
First number<br>
<input type="text" name="first_val" >
<br>
Second number<br>
<input type="text" name="second_val">
<br><br>
<input type="submit" value="Submit">
</form>
//following code write in the 'action_page.php' file.
<?php
//in the action_page.php file write following code
if(isset($_GET['first_val']) && isset($_GET['second_val'])
{
?f_ada=36391&f_parsel=4
$url = 'http://eharita.mamak.bel.tr/imararsiv/test.aspx/';
$url .= '?f_ada='.$_GET['first_val']&f_parsel['second_val'];
header('Location: $url);
}
?>
So I have a form that when submitted requires confirmation. I am using Javascript confirm to prompt for this. However, I do not want it to refresh if someone hits cancel. I thought putting an empty else statement would do so, however it appears I was wrong.
Not sure what I need to be doing to make sure it does NOT refresh if someone presses cancel on the popup.
the JS confirm code
function postConfirm() {
if (confirm('You will not have another chance after submitting to view your post. Please make sure it is exactly how you want it before continuing. ')) {
yourformelement.submit();
} else {
}
}
the form that uses this JS function (if needed)
<div id="uploadForm">
<center>
<form enctype="multipart/form-data" action="functions/post_upload.php" method="post">
<input type="hidden" name="MAX_FILE_SIZE" value="99999999" />
<div><textarea id="text" cols="70" rows="15" name="entry"></textarea></div>
<p> Attach an image to this memory!</p>
<input name="userfile" type="file"><br>
<input type="submit" value="Submit" class="blueButton" onclick="postConfirm()"/></div>
</form></center>
</div>
Change:
onclick="postConfirm()"
to
onclick="return postConfirm()"
and in your function, make the else:
else {
return false;
}
jsFiddle example
try adding
return false;
to the else part of your if statement.
Edit:
Also modify your call to the function so that the return false is passed back to the submit action (which is fired when the button is clicked).
<input type="submit" value="Submit" class="blueButton" onclick="return postConfirm()"/></div>
You can prevent form submission using the preventDefault() method of event object and manually submit the form upon confirmation using the submit() method of form elements.
Change your HTML to:
<input type="submit" value="Submit" class="blueButton" onclick="postConfirm(event)"/></div>
function postConfirm(e) {
e.preventDefault();
if(confirm('You will not have another chance after submitting to view your post. Please make sure it is exactly how you want it before continuing. '))
yourformelement.submit();
}
However, it is better to avoid inline javascript since it is considered a bad practice. Instead you can do:
var button = document.getElementsByClassName("blueButton")[0];
button.addEventListener("click",function(e) {
e.preventDefault();
if(confirm('You will not have another chance after submitting to view your post. Please make sure it is exactly how you want it before continuing. '))
yourformelement.submit();
});
try
<input type="button" value="Submit" class="blueButton" onclick="postConfirm()"/></div>
instead of
<input type="submit" value="Submit" class="blueButton" onclick="postConfirm()"/></div>
I have two files. One is login.html which is a simple html5 file with a form.
HTML
<form method="post" action="" name="form1">entre the pasword:
<input type="password" name="code" placeholder="code" maxlength="6">
<p class="submit">
<input type="submit" name="commit" value="send" onclick="verif(document.form1.code)">
</p>
</form>
Second is my javascript file with the below code:
function verif(inputtxt) {
var pwd = "123456";
if (inputtxt.value.match(pwd)) {
window.location.href = 'Test.html';
} else {
alert('Code erron\351 ! ')
return false;
}
}
Now my problem is that when I enter my password, if it is wrong the alert message indicating an error should appear (it appears and I don't have a problem with that) and if it is correct, I should get redirected to the next page. The second part doesn't work for me.
Please help, I'm stuck with that for two days now..
Since your button is a submit button, I think it is submitting the form after the JS is done and this could be the reason why you don't get redirected to Test.html (as form action attribute doesn't have any value.) Try the below code for the HTML form and check if this solves the issue.
<form method="post" action="" name="form1" onsubmit="verif(document.form1.code);return false;">entre the pasword:
<input type="password" name="code" placeholder="code" maxlength="6">
<p class="submit">
<input type="submit" name="commit" value="send">
</p>
</form>
The return false; in the onsubmit attribute prevents the form's default submit action. The verif(document.form1.code) will be executed whenever the form is submitted (that is the submit button is clicked).
I have two submit buttons on the same page. It doesn't seem to be working when I submit the page. Here is my code. Thanks for any suggestions.
<?php
if ($_POST['Submit_1'])
{
echo "Submit_1";
}
if ($_POST['Submit_2'])
{
echo "Submit_2";
}
?>
<form name="form1" id="form1" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post">
<input type="submit" name="Submit_2" value="Add more" onclick=" validateForm('form1');return false;" >
<input type="submit" name="Submit_1" value="Submit" onclick=" validateForm('form1');return false;" >
</form>
return false; will stop the buttons from submitting the form.
You are using JavaScript to validate the form, then return false: the submit never propagates (unless it's part of your JavaScript we don't have). You need to submit after validation, and add a way to distinguish the button presses via JavaScript (like another parameter to your submit), or don't use JavaScript and PHP will handle it nicely for you.
Use type button instead of submit.