multiple submit buttons on the same page issue - javascript

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.

Related

Javascript submit() is not submitting the form

This is my code.
HTML
<form id="add_new_video" method="post" class="appnitro" style="margin-left:70px;" action="<?php echo base_url()?>videos/save">
<input type="text" name="name">
<button type="submit" class="dark_text_link" disabled id="submit" href="javascript:void(0);" onclick="return addVideo();">Add New Video</button>
</form>
And the JS is
function addVideo() {
//disables the onclick event of the element for 1 seconds
document.getElementById('submit').disabled = true;
setTimeout(function(){document.getElementById('submit').disabled = false;},1000);
document.getElementById('add_new_video').submit();
}
When I click the submit button, the button gets disabled for a second and re appears but the form does not submit. I'm still a newbie in javascript so there might be things I overlooked. Any idea ?
Several things
Never use the reserved word "submit" in a form element's name or ID - it will hide the submit event handler from the JavaScript
use the onsubmit to disable the button instead of using weird inline handlers. There is no href on a button for example
You should not disable a button you need to click before clicking it
Like this:
<form id="add_new_video" method="post" class="appnitro" style="margin-left:70px;" action="<?php echo base_url()?>videos/save">
<input type="text" name="name">
<button type="submit" id="buttonSub" class="dark_text_link">Add New Video</button>
</form>
using
window.onload=function() {
document.getElementById("add_new_video").onsubmit=function() {
document.getElementById('buttonSub').disabled = true;
setTimeout(function(){document.getElementById('buttonSub').disabled = false;},1000);
}
}
You do not actually need to ENABLE the form button again since you submit to the same page. The button will be enabled when the page reloads - this is of course not true if you target the form elsewhere
Replace button with this tag element.
<input type="submit" class="dark_text_link" disabled id="btnsubmit" href="javascript:void(0);" onclick="return addVideo();"/>

submitting a form via jquery removes submit input variable

Here's my HTML:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="test" method="get" action="">
<input type="hidden" name="var1" value="true" />
<input type="submit" name="var2" value="submit" />
</form>
<script>
$("#test").submit();
</script>
The resultant request that that makes has var1 in it but not var2. My question is why and what can I do to get var2?
Here's a live demo:
http://www.frostjedi.com/terra/dev/submit.php
try: method="post" in form or use <button type="submit"></button>
A form should submit the value of a submit button only if it's clicked to submit the form (see HTML5 4.10.22.4 Constructing the form data set). Calling the submit method doesn't click the button, so it doesn't submit the value.
The code you've posted will endlessly submit the form, thanks.
You can call the click method of the button, but that may not work (i.e. submit the button's value) everywhere:
<form id="test" method="get" action="">
<input type="hidden" name="var1" value="true">
<input type="submit" name="var2" value="submit">
</form>
<button onclick="$('#test')[0].var2.click()">submit form</button>
Or, as user3701524 suggests, use method=post if that suits.
The value on button will only be submitted when u actually CLICK that button. To make it all work nice, I recommend binding to
$('form').on('submit', function(e) {
// here you have the button value if it was clicked.
e.preventDefault(); // optional this prevent default submission.
});
either way, calling $('form').submit() will NOT send the button value because is not triggered by the button itself.
Hope it helps!

Hide Div on submit

I coded a html form and would like to hide a div upon submission using javascript. For some reason the div isn't hiding.
DIV & Form code:
<div id="map"><iframe src="sourceurl" width="700" height="300" frameborder="0"></iframe></div><br />
<form method="get" action="<?php echo $url = basename($_SERVER['PHP_SELF']); ?>" onsubmit="mapHide(); return false;">
<select name="country" onchange='this.form.submit()'>
<input type="hidden" name="action" value="submit" /><br>
</select>
</form>
JS:
<script>
function mapHide() {
document.getElementById('map').style.display = 'none';
}
</script>
Seems like this would be easier just using php. Check if the the form has been submitted and display content accordingly.
if($_SERVER['REQUEST_METHOD'] == 'POST'){
//form was submitted content
}
else{
//empty form
}
you probably found a code meant for onsubmit and used it for an onchange event. I'm not an expert on this but based on what I've read so far, onchange="this.submit.form()" will refresh or reload your page therefore, everything just resets back.
I tried using your code and place it on a
<input type="submit" onsubmit="this.form.submit();" />
and it works.
So probably what you can do, is to do it using AJAX.

how to open same page onsubmit? [duplicate]

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']; ?>

Javascript - submit button fails to call form action

Hi i simplified my register form as it wasn't calling the form action when the button was click. Now the form on contains a submit button, yet it still fails to call the action of the form. I can't see where there could be any problems. Thanks in advance for your help.
Form:
<div id="test">
<form id="test" name="test" method="post" action="test.php" >
<input type="submit" />
</form>
</div>
test.php
<?php
echo "test";
?>

Categories