This question already has answers here:
Can I make a <button> not submit a form?
(8 answers)
Closed 8 years ago.
HTML:
<form target="" method="post">
<input name="username" type="text" />
<input name="password" type="password" />
<button>Cancel</button>
<input type="submit" />
</form>
Fiddle: http://jsfiddle.net/n9Lpcqyr/
Problem: When I hit enter, both buttons get triggered. Tested with this jQuery:
$('button').click(function(){
alert('help');
});
$("form").submit(function(){
alert('hey');
});
Because the first <button> is mapped to .remove() the dialog, the form no longer exists to be submitted. I know I can bind the enter key to the inputs with js, but I'm looking for an HTML-only solution. I tried tabindex with no luck. What else can I do?
You could move the cancel button outside of the form, like so (and use CSS to style):
<form target="" method="post">
<input name="username" type="text" />
<input name="password" type="password" />
<input type="submit" />
</form>
<button>Cancel</button>
Related
I have an HTML form that has a submit button. I want this button to be disabled when it is clicked. But I also want the form to get submitted.
I am not using ajax request to submit the form. The PHP script that handles the form takes a long time. So some users just click it after a few seconds and the form gets submitted twice which leads to two rows with the same data in the database.
Here's what I tried so far
<form method="POST" action="xyz.php">
<input type="text" name="fields[]" />
<input type="text" name="fields[]" />
<input type="text" name="fields[]" />
<input type="text" name="fields[]" />
<input type="submit" onclick="$(this).attr('disabled', true);" value="Submit" />
</form>
The onclick event on submit button disables the button but it also don't let the form to be submitted. But I want the form to be submitted and also want the button to be disabled.
You May try the below code
onclick="this.disabled=true;this.form.submit();this.value='Submiting...';"
If you're using jQuery, then here's a fully-jQuery, unobtrusively handled version which would work.
If you were to give your form an ID, you could make it handle that form specifically - this example will handle all forms on your page.
$(function() {
$("form").submit(function(event) {
$(this).find('input[type="submit"]').prop("disabled", true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" action="xyz.php">
<input type="text" name="fields[]" />
<input type="text" name="fields[]" />
<input type="text" name="fields[]" />
<input type="text" name="fields[]" />
<input type="submit" value="Submit" />
</form>
Note that you should use .prop() rather than .attr() to set properties such as "disabled"
(see http://api.jquery.com/attr/).
This question already has an answer here:
JavaScript form submit WITH a field called submit
(1 answer)
Closed 6 years ago.
How to submit form when have input type="submit" inner form using javascript ?
i want to submit form using javascript (have input type="submit" inner form ).
i tried to use this code
<form action="" method="post" name="test_fn">
<input type="text" name="input1" value="ON">
<input type="submit" name="submit" value="ON">
</form>
<script type="text/javascript">
setTimeout(function(){test_fn.submit();}, 0);
</script>
but not work. how can i do that ? for submit form using javascript (have input type="submit" inner form )
thank
First you should change your input submit name.
When you name the button submit, you override the submit() function on the form,so it will become "submit is not a function"
<form action="" method="post" name="test_fn" id="test_fn">
<input type="text" name="input1" value="ON">
<input type="submit" name="btnsubmit" value="ON"> //Changed submit name here
</form>
then can call submit by your form name like this
<script type="text/javascript">
setTimeout(function(){document.test_fn.submit()}, 0);
</script>
This question already has answers here:
Submitting data from textarea by hitting "Enter"
(5 answers)
Closed 8 years ago.
I'm sorry to make this question, as others have done it already. But mostly don't have a good explanation, or always are mixed with more complex chats functions. I want a simple code. The only thing i want is to make my textarea value submit and get inserted to my db using ENTER key. Please don't redirect me to another question, as i know they must be others with starter skills that wants to learn. Just adjust the code to the simple form i have added. Thanks.
Code:
<?php
if(isset($_POST['submit'])) {
$comment = $_POST['textarea'];
$db->query("INSERT INTO blog(textarea) VALUES('$comment')");
}
?>
<form id="form1">
<div>
Comment:
</div>
<div>
<textarea name="textarea" form="form1" maxlength="200" id="textarea" placeholder="Make your comment..."></textarea>
<input style="visibility:hidden" type="submit" form="form1" name="submit" id="submit" value="Submit">
</div>
</form>
You can do this quite simply by adding a keypress event handler to the textarea:
<form id="form1">
<div>
Comment:
</div>
<div>
<textarea onkeypress="if(event.which==13)document.getElementById('form1').submit();"
placeholder="Make your comment..."
name="textarea" form="form1" maxlength="200" id="textarea"></textarea>
<input style="visibility:hidden" type="submit" form="form1" name="submitForm" id="submitForm" value="Submit">
</div>
</form>
That checks if the pressed key has keycode 13 (which is the keycode for the enter key), and submits the form if it does.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I have used a template from the web for a Login page, and I am not able to figure out how can I link this page to another when one clicks the 'Login' button. I have no knowledge of HTML and CSS or JS , so if anybody can guide me through this I'll be grateful.Its for a college project that has to be submitted tomorrow. Its not that I don't want to learn, but there was something else I was working on which didn't work out pretty well so I had to start this and I have only a day.
I was unable to paste the code here. SO here's the link : http://pastebin.com/pPS0Np8A
<input type="button" value="click" onclick="window.open("http://www.google.com/"); window.open("http://www.youtube.com/");" />
If it's just a Link when pressing the button, put an <a>-tag around your button and the LInk inside the href attribute:
<p><input type="submit" value="Sign In"></p>
using harshit's solution i added the id to restore css properties but if the css value is a class rather than an id just replace id= with class=.
<input type="button" value="click" id="myCssClassId" onclick="window.open("http://www.google.com/"); window.open("http://www.youtube.com/");" />
So you were "not able to figure out how can I link this page to another when one clicks the 'Login' button".
Simplified from the login-page you provided, you have the following code:
<form action="Default5.aspx" method="POST">
<fieldset>
<p><label for="email">E-mail address</label></p>
<p><input type="email"
id="email"
value="mail#address.com"
required="required" />
</p>
<p><label for="password">Password</label></p>
<p><input type="password"
id="password"
value="password" />
</p>
<p><input type="submit" value="Login" /></p>
</fieldset>
</form>
Now, note the <input type="submit" value="Login" />. Once you'll click that, the form will submit the data contained in it (the password and email).
When you submit a form, the form needs an address where it needs to send the data to. This is then also the page that is displayed ('redirected'). You set this simply with the form's action attribute, which is just an URL.
Just wanted to rectify this for future readers.
EDIT:
So, for example an exact image-search on google could work like:
<form method="GET"
action="http://www.google.com/search"
target="_BLANK"
onsubmit="var e = this.getElementsByTagName('input');
e[1].value= 'isz:ex,iszw:' + e[3].value
+ ',iszh:' + e[4].value;
return true;
"
><fieldset>
<input type="hidden" name="tbm" value="isch" />
<input type="hidden" id="tbs" name="tbs" />
<p>Search Image:
<input type="text" name="q" value="search" />
</p>
<p>
Width: <input type="text" value="32" /> px <br />
Height: <input type="text" value="32" /> px <br />
<input type="submit" value="Search" />
</p>
</fieldset>
</form>
Example jsFiddle here
Here the method is changed from POST to GET. That way the values entered in the form are appended to the URL (so anyone can read them).
To close with a final example of how to open a new blank page I added the target-attribute, and pointed it to _BLANK.
The example's are intentionally kept simple, style and expand on them as you wish.
This is my html code for my little form. The way my 'submit button is styled it can only be an <a>. Can I still submit this form to an email? How can I make this send to the email assigned to it? jQuery or Javascript?
For example can I use this:
<a class="btn send" href="#send">Send</a>
versus input type="submit"?
<form action="mailto:me#myemail.com">
<input name="name" type="text" value="" placeholder="Name" required/><br>
<input name="email" type="email" value="" placeholder="you#yourmail.com" required/><br>
<textarea class="message" maxlength="200" placeholder="We can answer your questions." required><?php echo $_POST[message]; ?></textarea><br>
<a class="btn send" href="#send"><img src="img/send.png" /></a>
</form>
You can use JavaScript to dynamically submit the form:
$(".btn.send").click(function() {
$(this).closest("form").submit();
return false;
});
Or since you use image, how about simple <input type="image">:
<input type="image" src="img/send.png">
You can use
<button type=submit>Submit Me!</button>
Also "image" buttons submit forms.
Now, that said, you cannot directly initiate an email transaction from an HTML form. The best you can do is cause the user's mailer to be shown, but you have precious little control over how/if that works.
Even better...
$('#AnyElement').click(function() {
$('#formID').submit();
});