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();"/>
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 have two different buttons like this :
<input type="button" name="but1" id="but1" value="page1" onclick="f('WebForm1')" />
<input type="button" name="but2" id="but2" value="page2" onclick="f('WebForm2')" />
and obviously two other webforms ("WebForm1" and "WebForm2").
using JavaScript, how can I submit the information from the default webform (which I have the buttons in it) to the page that is the value of its button?
(I mean when I click the first button, it should go to WebForm1 and submit data and when I click the second button, it should go to WebForm2 and submit the data)
I've never tried this before so in JavaScript I wrote
function f(t){
var a;
a = document.getElementById['form1'];
a.submit(t); }
but its not working.
Are all these functionalities to be implemented on the same page?
How I see it, you can make the two input buttons the submit buttons of the two different forms.
<form action = "WebForm1">
<input type= submit name="but1" id="but1" value="page1" />
</form>
<form action = "WebForm2">
<input type= submit name="but2" id="but2" value="page2" />
</form>
Also, I'm not sure if anything like a.submit(t) even works.
In HTML5 you can use <button> with form attribute:
<button type="submit" form="form1" value="Submit">Submit</button>
with form attribute you can specify the form element the <button> element belongs to.
Then, in your form:
<form action="WebForm1" method="get" id="form1">
...
</form>
hope this will help. t is the name of the form.
function f(t){
// <form name="WebForm1">
// t is the name of the form
document.t.submit();
}
this work only if the two form are in the same page as where the button are.
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!
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.
I have a form which I want to submit upon button click which is outside the form, here is my HTML :
<form id="checkin" name="checkin" id="checkin" action="#" method="post">
<input type="text" tabindex="100" class="identifier" name="identifier" id="identifier">
<input type="submit" tabindex="101" value="Submito" class="elsubmito" name="submit">
</form>
Here is my jQuery :
$("button").live('click', function() {
$("#checkin").submit();
});
$("#checkin").live('submit', function() {
});
When I click submit button inside the form its submitting ok, but its not submitting when I click on the button which is outside the form tags, why? how can I fix this ?
You are selecting all the <button> elements but you are trying to select an <input>.
It works when it is inside the form because the the normal submit functionality runs.
Change the selector to match the element you actually have: input[type=submit]
Better yet, forget about the JS and just structure your HTML better so that the submit button is inside the form.
If you're handling the form processing using JavaScript, then you'll want to return false in your button and form processing code.
I was able to achieve identical results using the JavaScript below, and the two HTML examples (with the button inside and outside of the form element).
JavaScript/jQuery
$("button").live('click', function() {
$("#checkin").submit();
return false;
});
$("#checkin").live('submit', function(){
alert("Hello world!");
return false;
});
HTML Example 1
Button inside the form.
<form id="checkin" name="checkin" id="checkin" action="" method="post">
<input type="text" tabindex="100" class="identifier" name="identifier" id="identifier">
<input type="submit" tabindex="101" value="Submito" class="elsubmito" name="submit">
<button>test</button>
</form>
HTML Example 2
Button outside the form.
<form id="checkin" name="checkin" id="checkin" action="" method="post">
<input type="text" tabindex="100" class="identifier" name="identifier" id="identifier">
<input type="submit" tabindex="101" value="Submito" class="elsubmito" name="submit">
</form>
<button>test</button>
As I said, both examples performed as expected. You may want to double-check your button listening code to ensure that you are in fact using the button element. If you're using an element with the id attribute set to button, then you'll want to ensure you are using the proper jQuery selector:
$("#button").live('click', function() { // ...
you can have a simple hyperlink outside of your form like this
click to submit and that's all you need