We Keep Coding

Change form POST data before submit with jQuery not working

I'm currently trying to change the value of a hidden input in my form during the form submit. So first I've my hidden input:
<input autocomplete="off" class="um-form-field valid not-required " type="text" name="webauthn_result-320" id="webauthn_result-320" value="" placeholder="" data-validate="" data-key="webauthn_result">
Now I'm using this function to do some things before the form submit. To get the results to the backend, I want to modify the form so that I can access them with $_POST in PHP:
jQuery(document).on('submit', '#login-form', function () {
var someVarialbel = 20;
jQuery('input[data-key=webauthn_result]').val(['success', someVarialbel]);
});
Sadly, it don't works. I've checked the backend and the value is empty. Any idea whats wrong?

Try something like this.
You will need to use preventDefault to make any changes.
$("#form_id").on("submit", function (e) {
e.preventDefault();//stop submit event
var self = $(this);//this form
$("#change_value").val("deneme");//change input
$("#form_id").off("submit");//need form submit event off.
self.unbind('submit');
self.submit();//submit form
});

From jQuery Documentation: Here is the link
For example, consider the HTML:
<form id="target" action="destination.html">
<input type="text" value="Hello there">
<input type="submit" value="Go">
</form>
<div id="other">
Trigger the handler
</div>
The event handler can be bound to the form:
$( "#target" ).submit(function( event ) {
alert( "Handler for .submit() called." );
event.preventDefault();
});
Now when the form is submitted, the message is alerted. This happens prior to the actual submission, so we can cancel the submit action by calling .preventDefault() on the event object or by returning false from our handler. We can trigger the event manually when another element is clicked:

You can set value in JSON format as below:
jQuery(document).on('submit', '#login-form', function () {
var someVarialbel = 20;
jQuery('input[data-key=webauthn_result]').val(JSON.stringify(['success', someVarialbel]));
});
Hope it help you!

PHP doesn't process the form

I'm having a little problem here.
I have a form with a jQuery that disables the submit input when the form is submited.The problem is: I use PHP to process the data when the input submit is clicked. But apparently the button is being disabled first, then PHP can not perform the processing. I need to find a way to prevent this, take a look in the code snippets:
<form class='send' action='{$_SERVER['PHP_SELF']}' method='post'>
<!--Form data-->
<input type='submit' name='finish' value='Send'/>
</form>
jQuery function to disable:
$('.send').on('submit', function()
{
$(this).find('input[type="submit"]').prop("disabled", true);
});
And then the PHP code to process:
if(isset($_POST['finish']))
{
//Do things
}
As I said, the PHP don't process the form because JS disabled the button to prevent multiple submitions. How to process PHP before disable the button? Thanks!

Since you are disabling the submit button it will not get send over to to server in the $_POST variable so your code doesn't work, as you have said.
Another way to do what you are looking for is to create a hidden HTML input
<input type="hidden" name="form">
Then when you check if the form is send, you will use
if(isset($_POST['form']))
{
//Do things
}

You can solve it easily changing your submit button by a simple button:
<form class='send' action='{$_SERVER['PHP_SELF']}' method='post'>
<!--Form data-->
<input type='button' name='finish' value='Send'/>
</form>
$('input[name="finish"]', '.send').on('click', function(){
$(this).prop('disabled', true);
$('.send').submit();
});

Submit a form based on the javascript event

What I want is to be able to submit a form when ever a user presses some key like tab or enter (i.e. that will case him to lose focus) also clicking outside of the text field should trigger a submit. However when ever he click on the cancel button it should prevent the submit ion
html structure look like this
<form id="form">
<input id="text" onblur="$(this).closest('form').submit();">
<a id"submit">submit</a>
<a id"cancel">cancel</a>
</form>
Currently what happens is that when a user presses enter a form is submitted twice and it should be submitted only once. When he presses a cancel a form is submitted and cancelled right after that.
Does anyone have any idea how can I write some javascript code that can accomplish this behaviour (the idea for is take form the jira in-line edit mode and I am trying to construct something in similar manner)

I'm going to provide you with another you could approach this by using jQuery and it's .change() event handler. This way when the user clicks off of the input element, it'll trigger the .change() event and you can submit a form within it's callback function. If the user cancels then you can handle that event normally, same with the submit button click.
The Form:
<form id="form">
<input id="text">
<a id="cancel">cancel</a>
<a id="submit">submit</a>
</form>
The Javascript (jQuery):
$(document).ready(function(){
$('#submit').click(function(e){
e.preventDefault();
//submit the form
console.log('form submitted by button click')
});
$('#cancel').click(function(e) {
e.preventDefault();
//close form?
console.log('cancelled form');
});
$('#text').change(function(){
//submit the form
console.log('form submitted, maybe hide form now?');
});
});
The jsFiddle.

Keep submit flag to prevent duplication on form submit. Something like that
<form id="form">
<input id="text" onblur="submitForm('form');">
<button onclick="submitForm('form');">submit</button>
<button type="cancel">cancel</button>
</form>
<script>
var submitFlag = {};
function submitForm(id){
if(!submitFlag[id]){
submitFlag[id] = true;
$('#' + id).submit();
} else {
// do nothing
// alert('Form already submitted');
return;
}
}
</script>

jQuery .submit() is not triggering

I tried on, click, live, submit and it doesn't work properly for my mail submit form. It's like 50% of time it works, 50% it does not.
Here is my code:
Contact.html:
<div id="contact">
<h2>Let keep in touch</h2>
<form id="mail-form" name="contactform" action="send_form_email.php" method="post">
<input class="contact-form" type="text" name="name" maxlength="50" placeholder="Name"><br>
<input class="contact-form" type="text" name="mail" maxlength="80" placeholder="Email"><br>
<textarea class="mail-content" name="content" maxlength="1000" cols="25" rows="6"></textarea><br><br>
<center><input id="submit-button" type="submit" value="Send your message"></center>
</form>
</div>
<div id='thankyou'>Thank you for contacting me. I'll reply as soon as possible.</div>
javascript file:
$("#mail-form").submit(function (e) {
e.preventDefault(); //STOP default action
$.post("send_form_email.php", $("#mail-form").serialize(), function(data) {
showThankYou();
});
});
function showThankYou() {
$contact = $("#contact");
$thankyou = $("#thankyou");
$contact.fadeOut(800, function() {
$thankyou.fadeIn(800);
});
}
Most of time when i tried to submit, browser was redirected to the blank send_form_email.php. When i pressed the back button, sometimes the submit form works.
Also, I added alert() into both submit and jquery post functions, and they weren't fired.
Could someone please explain why this is occurring, thank you in advance.
Btw, my website form url is: http://dkonayuki.net/contact.html
And all the emails were sent properly. But browser (chrome) stuck at the blank php page.
The problem is definitely related to my page transition (using ajax). But I have no idea how to fix it without commenting out those code. Here is my transition code:
$("nav").on("click", "a", function(e) {
e.preventDefault();
pagename = this.href.substring(this.href.lastIndexOf('/') + 1);
// great html5 stuff, change url without reloading entire page
history.pushState(pagename, "dkonayuki", pagename);
$mainContent
.fadeOut(400, function() {
// and great ajax also
$mainContent.hide().load(pagename + " #main > *", function() {
$mainContent.fadeIn(800);
$("nav a").removeClass("current");
$("nav a[href='"+ pagename +"']").addClass("current");
});
});
return false;
});

You are using input button submit and jquery submit together . when you click on submit button then your default submit event is triggering. use onsubmit="return false;" in form tag or e.preventDefault(); in your submit function to prevent default event.
try
<form id="mail-form" onsubmit="return false;" name="contactform" action="send_form_email.php" method="post">

Since you are apparently loading the javascript from a separate file, you probably include it before the form is defined, which means that it will not bind to the form.
Make sure the wrap the javascript in an
$(document).ready(function() {
// Your code
});
So that the binding is triggered after the form html is actually loaded.

It might occur because DOM is not fully loaded.
Try disabling the button from html:
<input id="submit-button" type="submit" value="Send your message" disabled>
Wrap jquery events inside, so that they are fired once the DOM is loaded:
$(document).ready(function () {
//Enable submit button now
$("#submit-button").removeAttr("disabled");
//Attach submit handler to form
$("#mail-form").submit(function (e) {
e.preventDefault(); //STOP default action
$.post("send_form_email.php", $("#mail-form").serialize(), function(data) {
showThankYou();
});
});
});

Now, I finally found my problem. it's about binding event to submit-button after it's loaded dynamically. So I used jquery on function:
$("#main").on('click', "#submit-button", function (e) {... }
Because #main is always there and it's not loaded dynamically, this code works beautifully.

Form fields value get reset without page load

Following is my code in which i am trying to accomplish, when user clicks on the submit button then my javascript function sets all the value to null in the textfields of the form whose id='contact_form' without loading the page . Kindly let me know how can i modify the following code to accomplish the functionality i've been trying to do.
Thanks!!
<script type='text/javascript'>
$(document).ready(function(){
$('#love').click(function(e) {
document.contact_form.name.value = '';
alert('aloha!!');
//stop the form from being submitted (not working fine)
e.preventDefault();
}
}
</script>
<form name='abc' action='' id='abc' >
<input type="submit" id='love' />
</form>
I have also tried the following function it worked fine but its not preventing from the page load
<script type='text/javascript'>
function js(){
document.contact_form.name.value = '';
//stop the form from being submitted (NOT WORKING!!)
preventDefault();
}
}
</script>

If you try onsubmit="return false;" in the form tag your form will not be submitted. Unfortunately it will NEVER be submit. Unless you are not planning to submit it via AJAX you have to modify your onsubmit event like this:
<form onsubmit="return callFunction()">
function callFunction() {
if(condition)
return true;
else
return false;
}

$("#abc").submit( function() {
// do everything you want.
return false; //will prevent the reload.
});

To have a function execute when the form submits you have to do something like this;
<form onsubmit="return validate();">
your form here
</form>
Then you can have your check in a function called 'validate()' (or whatever you want to call it)
Make sure the validate() function returns true is the form is allowed to submit, or returns false if the page is not allowed to submit.
Also put id's and names on your input elements, that way you can access them much easier.

Assuming you have an HTML like this :
<form>
<input type="text" id="text" />
<input type="submit" id='submit' value="clear above field without reloading" />
</form>
And you want the text field value to clear when a user submits without reloading using jQuery, then following script will be your remedy :
$(function(){
$('#submit').click(function(){
$('#text').value('');
})
});

A form can be submitted in many ways, not only by clicking on a submit buttons. You should really watch for submit events, and cancel them with preventDefault (instead of click events that might trigger the submit). See #user1359163's answer.
But you problem seem to be document.contact_form.name.value. There is no property contact_form on the document object, so this will raise an error. The preventDefault is not executed, your form gets submitted and you never see the error. Set your debugger to "Stop on errors"!
You might want something like document.forms["contact"], but I don't know your HTML. An id selector for the input element would be the better choice.