We Keep Coding

Getting value from submitted form

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>

How can I submit a form when the user presses the `Insert` key?

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>

jquery validation enable form when all fileds valid : do no show error for empty fileds

I want button to enable if all fields are valid, as no button enable and disable works fine, but when I move to next fields it highlights error for all fields, but I do not want this to happend any way to fix it, please guide way for it.
JS code:
$(document).ready(function() {
$('input').on('blur', function() {
if ($("#myform").valid()) {
$('#submit').prop('disabled', false);
} else {
$('#submit').prop('disabled', 'disabled');
}
});
$("#myform").validate();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
<form id="myform">
<input type="text" id="name2" name="name2" class="required" />
<br/>
<input type="text" id="name" name="name" class="required email" />
<br/>
<input type="text" id="name1" name="name1" class="required number" />
<br/>
<input type="submit" id="submit" disabled="disabled" />
</form>

at the end of input you also have to click outside to form that will blur and will validate . otherwise it won't work
$(document).ready(function() {
$('input').on('blur', function() {
if ($("#myform").valid()) {
$('#submit').prop('disabled', false);
} else {
$('#submit').prop('disabled', 'disabled');
}
});
$("#myform").validate();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
<form id="myform">
<input type="text" id="name2" name="name2" class="required"/><br/>
<input type="text" id="name" name="name" class="required email"/><br/>
<input type="text" id="name1" name="name1" class="required number"/><br/>
<input type="submit" id="submit" disabled="disabled" />
</form>

The issue is that you are validating the entire form , this would validate all the fields at the same time. You need to loop through each input and explicitly check each field to see if they are valid. If all of them are valid, only then enable submit button.
$(document).ready(function() {
$('input').on('blur', function() {
var allowSubmission = true;
$("input").each(function() {
if(!$(this).valid())
{
allowSubmission = false;
return false;
}
});
if(allowSubmission)
$('#submit').prop('disabled', false)
else
$('#submit').prop('disabled', true)
});
});
Example : http://jsfiddle.net/sd88wucL/109/

Do nothing on empty input - combinate with dynamic action on form

What i want is when you type something in input, depending what button you click, he will change path of action in form. I am at half way to achieve this (i think)....check out what i make till now
function OnSubmitForm() {
if(document.pressed == 'Log As')
{
document.myform.action ="log-as.html";
}
else
if(document.pressed == 'Log As Int')
{
document.myform.action ="log-as-int.html";
}
return true;
};
<form name="account" onsubmit="return onsubmitform();">
<input type="text" name="user" id="user">
<input type="submit" name="account" onclick="document.pressed=this.value" value="Log As" />
<input type="submit" name="account" onclick="document.pressed=this.value" value="Log As Int" />
</form>
And maybe i found solution for this, but i don't know how to combinate those two...
$('#search-form').submit(function(e) {
if (!$('#user').val()) {
e.preventDefault();
}
});

This can be easily done using JQuery like so:
$("input[type='submit']").click(function(){
var name = $(this).val();
if(name=="Log As"){
$("#myform").attr('action', 'log-as.html');
}
if(name=="Log As Int"){
$("#myform").attr('action', 'log-as-int.html');
}
});
JSFiddle demo here
I would also like to point out that you are submitting to a HTML page and not a PHP page. So do keep that in mind when trying to retrieve the values later.

You can do the same thing by using this code:
First of all name attribute of your form and input type submit are
same. They must be unique.
<form name="account" id="account" action="">
<input type="text" name="user" id="user">
<input type="submit" name="account_submit1" onclick="document.pressed=this.value" value="Log As" />
<input type="submit" name="account_submit2" onclick="document.pressed=this.value" value="Log As Int" />
</form>
and
$(document).ready(function () {
$("#account").submit(function(e){
alert($.trim($("#account [type='submit']:focus").val()))
if($.trim($("#account [type='submit']:focus").val()) == "Log As"){
$("#account").attr('action',"log-as.html");
}else{
$("#account").attr('action',"log-as-int.html");
}
});
});
Updated code according to the discussion:
$(document).ready(function () {
$("#account").submit(function(e){
if (!$('#user').val()) {
e.preventDefault();
}
if($.trim($("#account [type='submit']:focus").val()) == "Log As"){
$("#account").attr('action',"log-as.html");
}else{
$("#account").attr('action',"log-as-int.html");
}
});
});

Clear Form after submit to iframe

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...