I have a form with 2 buttons (type="submit"). Each of them has different value.
$(document).ready(function() {
$('#myform').submit(function() {
var _att = $(this).attr("value");
if (_att == "insert") {
//do insert here ....
}
if (_att == "update") {
//do update here ....
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myform">
<input type="email" name="email" placeholder="Enter email" /><br>
<button type="submit" value="insert">Insert Button</button>
<button type="submit" value="update">Update Button</button>
</form>
My question is, how to get value from clicked button in the submitted form?
I tried by trying to get attr("value") but the return value is undefined.
You should handle the click event on [type="submit"] to get their attr("value"), i.e.
$(document).ready(function() {
$('[type="submit"]').on('click', function(event) {
event.preventDefault();
let value = $(this).attr("value");
console.log(value);
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myform">
<input type="email" name="email" placeholder="Enter email" /><br>
<button type="submit" value="insert">Insert Button</button>
<button type="submit" value="update">Update Button</button>
</form>
N.B. Remember to prevent their default behavior (with event.preventDefault).
You can achieve this easily by using a unique class .submit-button on your button
I have also added preventDefault function which will ensure that your page is not refreshing on form submit button clicked and check for all the validations - if any accordingly.
Run snippet to see it working below.
Working Demo: https://jsfiddle.net/xo3pkqf9/
$(document).ready(function() {
$("#myform button").click(function() {
//Check which button was clicked
if ($(this).attr("value") == "insert") {
//Form Submits
alert("Insert Clicked - Form will submit")
$("#myform").submit();
}
if ($(this).attr("value") == "update") {
alert("Update Clicked - Form will submit")
//Form Submits
$("#myform").submit();
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myform">
<input type="email" name="email" placeholder="Enter email" required/><br>
<button type="submit" value="insert">Insert Button</button>
<button type="submit" value="update">Update Button</button>
</form>
Related
I want to make a custom validity message to my form, and there are some problem.
The validity message will show after click two times.
and if I don't input correct word "text" first time, then it will not submit anymore.
what's the problem in my code.
JS:
function a(){
jQuery("#text")[0].setCustomValidity("");
if (jQuery("#text").val() == "text"){
return confirm('sure?');
}
jQuery("#text")[0].setCustomValidity("Incorrect");
return false;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/" method="post" onsubmit="return a();">
<input type='text' id="text"/>
<input type="submit" value="submit"/>
</form>
Please try to check below solution:
$(document).on('click',"#submit_btn", function()
{
if($("#text").val() === "text")
return confirm('sure?');
else
$("#text")[0].setCustomValidity("Incorrect");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/" method="post">
<input type='text' id="text"/>
<input type="submit" value="submit" id="submit_btn"/>
</form>
i want to submit a form with and enter key stroke when the user enters a username and password.I get an alert coming back from my function when the enter key is pressed.But after that it doesnt submit the form. What am i doing wrong?
<form id="myForm" action="#" onsubmit="return false;" >
<div>
<input type="text" id="username" />
</div>
<div>
<input type="password" id="password" />
</div>
<div>
<button type="submit" id="btnLogin" onclick="myFunction(0)">Log in</button>
</div>
<script type="text/javascript">
function myFunction(e) {
if ((e && e.keyCode == 13) || e == 0) {
alert("The form was submitted"); // this alert gets called,but my form doesnt get submitted
document.forms.myForm.submit();
}
}
You can use like this.(Use jquery)
1.Change Input type submit to button
2.Change the code for submitting form
3.Write a keyPress event for the form
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm" action="test.html" >
<div>
<input type="text" id="username" />
</div>
<div>
<input type="password" id="password" />
</div>
<div>
<button type="button" id="btnLogin" onclick="myFunction(0)">Log in</button>
</div>
</form>
<script type="text/javascript">
function myFunction() {
alert("form submitted");
document.getElementById("myForm").submit();
}
$('#myForm').on('keydown', function (e) {
if (e.which === 13) {
myFunction();
}
});
</script>
1) Remove return false from the form onsubmit event.
2) Remove onclick event from the button.
3) Using JS, bind a submit event to the form and do what you need in the event handler, as below:
var loginForm = document.getElementById('myForm');
loginForm && loginForm.addEventListener('submit', myFunction);
function myFunction(event) {
event.preventDefault();
alert("form is about to be submitted...");
loginForm.submit();
}
<form id="myForm">
<div>
<input type="text" id="username" />
</div>
<div>
<input type="password" id="password" />
</div>
<div>
<button type="submit" id="btnLogin">Log in</button>
</div>
</form>
Even better, remove all the JS and keep only the form as in my answer. It would submit the form on enter as that's the default behaviour when there is a button/input with type submit!
You can try this without checking keyCode. You can enter key from any input fields or button inside the form.
function myFunction(e) {
var username = e.target.querySelector('#username');
var password = e.target.querySelector('#password');
if(username.value && password.value){
alert("The form was submitted");
return true;
}
return false;
}
<form id="myForm" action="#" onsubmit="return myFunction(event)">
<div>
<input type="text" id="username" />
</div>
<div>
<input type="password" id="password" />
</div>
<div>
<button type="submit" id="btnLogin">Log in</button>
</div>
</form>
I dont think you really need javascript for this as realistically pressing enter inside a form will usually submit the form.
Notice in the example below that all we are really doing is targeting
the submit event for the form and this also includes hitting the enter
key.
However to satisfy your question
Using jQuery you could try binding the keypress event to the button click submit event.
Something like this:
$("#btnLogin").blur();
$('#btnLogin').focus().click();
p.s. remember to close your <form> tag with </form>
Example
$('#myForm').submit(function() {
var confirmSubmit = confirm("Submit the form?");
if(confirmSubmit)
{
$("#btnLogin").blur();
$('#btnLogin').focus().click();
}
else
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm" action="yourPage.html">
<div>
<input type="text" id="username" />
</div>
<div>
<input type="password" id="password" />
</div>
<div>
<button type="submit" id="btnLogin">Log in</button>
</div>
</form>
How can I prompt for confirmation before submitting a form after they press the Insert key, and submit the form without confirmation when the user pushes the Enter/Return key ?
Summary of actions intended
INSERT : Prompt for confirmation. Submit form if confirmed.
ENTER : Submit form.
I have the following html form :
<form action="hhhhhhh.php" method="post" >
<input type="text" name="DatInvNew"/>
<input type="text" name="SumInvNew"/>
<input type="text" name="KolInvNew"/>
<input type="submit" value="next"/>
</form>
Here is the answer..
Try it once, Just copy and past it..
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('#inputform').on('keydown', 'input', function (event) {
switch(event.which) {
case 13: // enter
event.preventDefault();
var $this = $(event.target);
var index = parseFloat($this.attr('data-index'));
$('[data-index="' + (index + 1).toString() + '"]').focus();
break;
case 45: // insert
$('#click-to-submit').trigger('click');
break;
}
});
});
</script>
<form id='inputform' action="hhhhhhh.php" method="post">
<input type="text" name="DatInvNew" data-index="1" />
<input type="text" name="SumInvNew" data-index="2" />
<input type="text" name="KolInvNew" data-index="3" />
<input type="submit" value="next" class="click-to-submit" id="click-to-submit" />
</form>
The following example does these things (as per the original question) :
INSERT : Prompt for confirmation. Submit form if confirmed.
ENTER : Submit form.
document.onkeypress = function (e) {
e = e || window.event;
if(e.keyCode == 45) {
if(confirm("Would you like to submit this form?")) {
document.getElementById("myForm").submit();
}
} else if (e.keyCode == 13) {
document.getElementById("myForm").submit();
}
};
And change your html slightly :
<form action="hhhhhhh.php" method="post" id="myForm">
<input type="text" name="DatInvNew"/>
<input type="text" name="SumInvNew"/>
<input type="text" name="KolInvNew"/>
<input type="submit" value="next"/>
</form>
I have form which need to be submited to another domain, like this:
<form id="myform" action="https://example.com" target="myiframe" method="POST">
<input type="text" name="email" value="">
<input type="text" name="name" value="">
<input type="text" name="phone" value="">
<input type="submit" name="submit" value="Submit">
</form>
And iframe:
<iframe style="display:none;" name="myiframe" src=""></iframe>
This work fine, but after submit form it stays filled.
So, how to clear (reset) form after submit?
Use an event-listener to trigger the submit and the clearing.
First, change the submit button to a regular button with a proper id (you should do the same to the other elements):
<input type="button" name="submitButton" id="submitButton" value="Submit" />
Then bind the event-listener to the button with JavaScript:
<script type="text/javascript">
document.getElementById('submitButton').addEventListener('click', function ()
{
handleTheForm;
}, false);
</script>
Wherea handleTheform is a method, defined accordingly:
<script type="text/javascript">
function handleTheForm()
{
document.forms[0].submit(); // Submit the form.
document.forms[0].reset(); // Clear the form.
}
</script>
Edit To handle the Enter button, simply add an event-listener for buttons and check which key is being pressed:
<script type="text/javascript">
document.addEventListener('keypress', function (e)
{
var key = e.which || e.keyCode;
var enterKey = 13;
if (key == enterKey)
{
handleTheForm;
}
});
</script>
Your final picture should look something like this:
<form id="myform" action="https://example.com" target="myiframe" method="POST">
<input type="text" name="email" id="email" value="" />
<input type="text" name="name" id="name" value="" />
<input type="text" name="phone" id="phone" value="" />
<input type="button" name="submitButton" id="submitButton" value="Submit" />
</form>
<script type="text/javascript">
function handleTheForm()
{
document.forms[0].submit(); // Submit the form.
document.forms[0].reset(); // Clear the form.
}
document.getElementById('submitButton').addEventListener('click', function ()
{
handleTheForm;
}, false);
document.addEventListener('keypress', function (e)
{
var key = e.which || e.keyCode;
var enterKey = 13;
if (key == enterKey)
{
handleTheForm;
}
});
</script>
You might have to tweek something a little but since I haven't manage to test this.
This solution is applicable to your problem
// code from answer with bind() transfered to plain javascript
function SubmitWithCallback(form, frame, successFunction) {
var callback = function () {
if(successFunction)
successFunction();
frame.removeEventListener('load', callback, false);
};
frame.addEventListener('load', callback, false);
form.submit();
}
You can easily achieve this using jQuery by
$("#formId").reset();
Hope this helps...
My Form looks like this:
<body>
<form id="myForm" method="post">
<label>id:</label>
<input type="text" name="id" id="id" size="50"/>
<div id="hidden" style="display: none;">
<label>Name:</label>
<input type="text" name="name" size="50"/><br/>
<input type="button" id="button2" value="Update" size="25" /> <br/>
</div>
<input type="button" id="button1" value ="Get Info" onclick="document.getElementById('hidden').style.display = ''; this.style.display = 'none'" size="25"/>
I have JS that looks like this
$(document).ready(function(){
$("#button1").click(function(){
$.post(
'xxx.php',
{ id: $('input[name="id"]', '#myForm').val() },
function(json) {
if (json.abc === 'no'){
alert('does not exist');
}
else{
$("input[name='name']").val(json.name);
}},
"json"
);
});
$("#button2").click(function(){
$('form#myForm').attr({action: "xxx1.php"});
$('form#myForm').submit();
});
});
The problem is that the user can only submit this form by clicking on the submit button. Any ideas on how i can adjust the js so that the enter button(on keyboard) also submits the form?
Note: there are two submit buttons both are interlinked.
You could give your input element an id, for easier retrieval:
<input id="txtName" type="text" name="name" size="50"/><br/>
Then you may bind your function to the keypress event:
$('#txtName').keypress(function (e) {
if (e.which == 13) {
$("#button1").click()
}
});
Or, for a general case, you may want to just bind the function to every text box of the form:
$('#myForm input:text').keypress(function (e) {
if (e.which == 13) {
$("#button1").click()
}
});
This code works for me.
$('#yourform').bind('submit', function() {