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.
Related
I have a form with id theForm which has the following div with a submit button inside:
<div id="placeOrder"
style="text-align: right; width: 100%; background-color: white;">
<button type="submit"
class='input_submit'
style="margin-right: 15px;"
onClick="placeOrder()">Place Order
</button>
</div>
When clicked, the function placeOrder() is called. The function changes the innerHTML of the above div to be "processing ..." (so the submit button is now gone).
The above code works, but now the problem is that I can't get the form to submit! I've tried putting this in the placeOrder() function:
document.theForm.submit();
But that doesn't work.
How can I get the form to submit?
Set the name attribute of your form to "theForm" and your code will work.
You can use...
document.getElementById('theForm').submit();
...but don't replace the innerHTML. You could hide the form and then insert a processing... span which will appear in its place.
var form = document.getElementById('theForm');
form.style.display = 'none';
var processing = document.createElement('span');
processing.appendChild(document.createTextNode('processing ...'));
form.parentNode.insertBefore(processing, form);
It works perfectly in my case.
document.getElementById("form1").submit();
Also, you can use it in a function as below:
function formSubmit()
{
document.getElementById("form1").submit();
}
document.forms["name of your form"].submit();
or
document.getElementById("form id").submit();
You can try any of this...this will definitely work...
I will leave the way I do to submit the form without using the name tag inside the form:
HTML
<button type="submit" onClick="placeOrder(this.form)">Place Order</button>
JavaScript
function placeOrder(form){
form.submit();
}
You can use the below code to submit the form using JavaScript:
document.getElementById('FormID').submit();
<html>
<body>
<p>Enter some text in the fields below, and then press the "Submit form" button to submit the form.</p>
<form id="myForm" action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="button" onclick="myFunction()" value="Submit form">
</form>
<script>
function myFunction() {
document.getElementById("myForm").submit();
}
</script>
</body>
</html>
HTML
<!-- change id attribute to name -->
<form method="post" action="yourUrl" name="theForm">
<button onclick="placeOrder()">Place Order</button>
</form>
JavaScript
function placeOrder () {
document.theForm.submit()
}
If your form does not have any id, but it has a class name like theForm, you can use the below statement to submit it:
document.getElementsByClassName("theForm")[0].submit();
I have came up with an easy resolve using a simple form hidden on my website with the same information the users logged in with. Example: If you want a user to be logged in on this form, you can add something like this to the follow form below.
<input type="checkbox" name="autologin" id="autologin" />
As far I know I am the first to hide a form and submit it via clicking a link. There is the link submitting a hidden form with the information. It is not 100% safe if you don't like auto login methods on your website with passwords sitting on a hidden form password text area...
Okay, so here is the work. Let’s say $siteid is the account and $sitepw is password.
First make the form in your PHP script. If you don’t like HTML in it, use minimal data and then echo in the value in a hidden form. I just use a PHP value and echo in anywhere I want pref next to the form button as you can't see it.
PHP form to print
$hidden_forum = '
<form id="alt_forum_login" action="./forum/ucp.php?mode=login" method="post" style="display:none;">
<input type="text" name="username" id="username" value="'.strtolower($siteid).'" title="Username" />
<input type="password" name="password" id="password" value="'.$sitepw.'" title="Password" />
</form>';
PHP and link to submit form
<?php print $hidden_forum; ?>
<pre>Forum</pre>
I found similar questions here, but not what i'm looking for.
I want to send form, when clicking on html tag <a>, with java script. My problem is that I don't know where I put the name, so I can use php isset function later.
This is what I did, but it's not working:
<?php
if (isset($_POST['test'])) {
echo "Test Kappa 123";
}
?>
<form method="post" action="<?=$site_link?>user/<?=$username?>" id="form_options">
Radnom text
</form>
You can place the value in a hidden input field like so:
<?php
if (isset($_POST['test'])) {
echo "Test Kappa 123";
}
?>
<form method="post" action="<?=$site_link?>user/<?=$username?>" id="form_options">
<input type="hidden" name="test" value="test value" />
Radnom text
</form>
Note: I made a number of changes from your code.
Forms only submit values in <button>, <input> and <textarea>, not <a>. You should make that link into a button, then you don't even have to use javascript.
Like this:
<form method="post" action="<?=$site_link?>user/<?=$username?>" id="form_options">
<button name="test" type="submit" value="test">Radnom text</button>
</form>
If you don't want it to look like a button. You can use this css to remove the background and border:
<style>
button {
background:none;
border:none;
}
</style>
I have a dashboard page, and for the easiest solution I've made the entire page a form (as there are several drop downs scattered across the whole page). I want to implement a feature that can submit the form every 30 minutes, be it with JavaScript, jQuery or anything else, but when I've tried it just refuses to execute the code, so I tried going back to something basi such as submitting the form when the drop-down is changed via "OnChange".
Here is an example snippet of a seperate page with some code from my dashboard page. This in itself should be working but I just can't see why it won't execute the code, maybe I'm missing something obvious? Can you help me fix this:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function submit_my_form(myfield)
{
myfield.form.submit();
}
function submitForm() {
document.getElementById("branchForm").submit();
}
</script>
</head>
<body>
<?php
$branch_array = array(
array(1,"BRANCH 1",1, "http://BRANCH.BRANCH1:1"),
array(2,"BRANCH 2",1, ""),
array(3,"BRANCH 3",3, "http://branch3:3"),
);
?>
<form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="POST" name="branchForm" id="branchForm">
<select name="query" id="query" class="select" onChange="submit_my_form(this);">
<?php
foreach ($branch_array as $x) { // populate select box with branches available from array
echo '<option value ="'.$x[0].'"';
if (isset($_POST['query']) && $_POST['query'] == $x[0])
{
echo ' selected="selected" >'.$x[0].". ".$x[1].'</option>';
} else {
echo ' option="'.$x[0].". ".$x[1].'">'.$x[0].". ".$x[1].'</option>';
}
}
?>
</select>
<input type="submit" name="submit" value="Refresh" class="btnRefresh" />
<input type="button" value="go" name="click" onClick="submitForm();" />
</form>
<?php echo "<br/>Output: {$_POST['query']}"; ?>
</body>
</html>
Nothing happens when the drop-down is changed, and nothing happens when the "go" button is pressed.
Since you don't mind using jQuery, here you go:
var form = $("#formId");
$("select[name=selectField]").on("change", function(e){
form.trigger("submit");
});
http://jsfiddle.net/zt8zz1j5/
All it essentially does is listen for change on the select element, and simply triggers the submit event on the form. Of course you'll need to change the names and IDs to fit your code, but I'm sure you can handle that :), and remember to include jQuery in the document.
And for the button it's the same thing. You listen for the 'click' event and then trigger 'submit' on the form.
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']; ?>
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.