We Keep Coding

Submit form only after API query was successful to populate field

I've got a form like this:
<h4>Front Page</h4>
<form action="/action_page.php" method="get">
<input value="EC2R 6DA" id="postcode_input">
<input id="admin_district" placeholder="Admin District">
<input type="button" id="get_postcode" value="Check">
</form>
And JavaScript like this:
$(document).ready(function() {
$("#get_postcode").click(function(event) {
event.preventDefault();
var postcode = $("#postcode_input").val();
$.get(encodeURI("https://api.postcodes.io/postcodes/" + postcode))
.done(function(data) {
$("#admin_district").val(data.result['admin_district']);
console.dir(data);
})
.fail(function(error) {
fullResult.html(JSON.stringify(error.responseJSON, null, 4)).slideDown();
});
});
});
I'm wondering how I validate that the JavaScript API call completed before submitting the form, and then if it did, then I submit the form. At the moment it prevents the form from submitting so it can make the API call, but after the API call completed, it then doesn't do anything, when it should then submit the form.

Give your form an id attribute
<form id="myForm" action="/action_page.php" method="get">
Then in your $.get, in the .done function add:
$("#myForm").submit()

Stop form from redirecting on submit

I'm very aware that this question has been asked several times but I have tried at least 6 solutions and it has not worked. I'm collecting data to send to a google form but on form submission the browser redirects to a success page. I'd like for it to all happen using AJAX but my code isn't working.
HTML:
<form id="userinfo" method="get" action="https://script.google.com/macros/s/xxx/exec" accept-charset="UTF-8" onsubmit="return false">
<input type="text" name="name" id="formname" placeholder="Name">
<input type="text" name="email" id="formemail" placeholder="Email">placeholder="Game Days">
<input type="submit" value="submit" id="upload_data"/>
</form>
JS:
$("#userinfo").submit(function(e) {
var urll = "https://script.google.com/macros/s/xxx/exec"; // the script where you handle the form input.
$.ajax({
type: "GET",
url: urll,
data: $("#userinfo").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
e.preventDefault(); // avoid to execute the actual submit of the form.
});

You could use the jQuery Form Plugin to send the form without doing a submit.
Your code should look kinda like this:
$("#userInfo").ajaxSubmit({
success: function(data)
{
alert(data); // show response from the php script.
}
});

submit a form inside another form

I have a form with POST method and an action of another page.
Within the form i have another form that I need to make submit with a different action but its submitting with the main form action.
this is my second form:
<script>
function formSubmit()
{
document.getElementById("invoices_form").submit();
}
</script>
<form action="resend_multiple_invoices.php" name="invoices_form" method="post">
<input type="button" onclick="formSubmit()" value="Send Invoices" />
</form>
how can i get it to submit the second form and not the main one?

You cannot (universally) submit a nested form separately from its parent form. Nested forms are invalid HTML as outlined in the W3C prohibitions.
To solve your problem, I suggest you use two separate forms as follows:
<script>
function invoicesFormSubmit()
{
document.getElementById("invoices_form").submit();
}
function otherFormSubmit()
{
document.getElementById("other_form").submit();
}
</script>
<form action="resend_multiple_invoices.php" name="invoices_form" method="post">
//
// Input fields go here
//
<input type="button" onclick="invoicesFormSubmit()" value="Send Invoices" />
</form>
<form action="other_method.php" name="other_form" method="post">
//
// Input fields go here
//
<input type="button" onclick="otherFormSubmit()" value="Other Method" />
</form>

You can use the 'form'-attribute in your input-fields and then mix all your inputs.
By submitting they refer to the correct form.
<form action="" method="post" id="form1"></form>
<form action="" method="post" id="form2"></form>
<input name="firstname" form="form1">
<input name="firstname" form="form2">
<button type="submit" name="submit" form="form1">Save form 1</button>
<button type="submit" name="submit" form="form2">Save form 2</button>
See also https://www.w3schools.com/tags/att_input_form.asp

JQuery.ajax and html for validating an "inner form" through ajax, then submitting the entire form. I use ajax in both cases to show the purpose of a controller.php file and a submission id. You could also have an inner form which consists of several segregated sections by using classes instead of ids as Jquery selectors.
<form>
<input />
<textarea />
<select /> <!-- etc. -->
<section id="verify">
<input />
<textarea />
<select /> <!-- etc -->
<button type="button">submit</button>
<!-- eg. sub-submission verifies data in section -->
</section>
<select />
<input />
<input type="submit" value="submit" />
</form>
<script>
$(document).ready(function() {
$("#verify button").on ('click', verify);
$('form').submit (formSend);
function verify (){
// get input data within section only (ie. within inner form)
var postData = $('#verify').filter(':input' ).serializeArray();
postData.push ({name:"submitId", value:'verify'});
var request = $.ajax ({
type: "POST",
url: "controller.php",
data: postData,
error: function (xhr, status, message){
alert (status);
}
});
}
function formSend (){
// get input data within entire form
var postData = $(this).serializeArray();
postData.push ({name:"submitId", value:'send'});
var request = $.ajax ({
type: "POST",
url: "controller.php",
data: postData,
error: function (xhr, status, message){
alert (status);
}
});
}
});
</script>

Repopulating div with new form/content using jQuery/AJAX

Are there any jQuery/AJAX functions that when a form (or anything for that matter) is displayed, upon pressing a button the div containing the original form is replaced by a new form? Essentially, a multi-part form without having to reload the page.
Can I use something like this?
$('form#myForm').submit(function(event) {
event.preventDefault();
$.ajax({
type: '',
url: '',
data: $(this).serialize(),
success: function(response) {
$('#divName').html(response);
//somehow repopulate div with a second form?
}
})
return false;
});
I've used this before for adding items to a list, but I've never used it to totally repopulate it with different content. How can I direct it to the second form?
edit - I got it to work, but only when I write '#form2' for the replacement. I alerted the response and I get {"formToShow":"show2"}. I tried doing response.formToShow but it's undefined.
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
</head>
<div id="divName">
<form method="POST" action = "#" id="form1">
<input type="textbox" name="textbox1" value="1"/>
<input type="submit" name="submit1"/>
</form>
<form method="POST" action = "#" id="form2" style="display: none">
<input type="textbox" name="textbox2" value="2"/>
<input type="submit" name="submit2"/>
</form>
</div>
<script>
$('form#form1').submit(function(event) {
event.preventDefault();
$.ajax({
type: 'JSON',
url: 'receiving.php',
data: $(this).serialize(),
success: function(response) {
$('#form1').hide(); //hides
//$('#form2').show(); //this will show
$(response.formToShow).show(); //this does not display form 2
}
})
return false;
});
</script>
Here is receiving.php. When I view this page {"formToShow":"show2"} is displayed
<?php
echo json_encode(array("formToShow" => "#form2"));
?>

Check the JQuery Load Function

This is personal preference, but I'd never send HTML through the response and display it like that, what I'd do is:
Send a JSON array back from the server, such as { formToShow: "#form1" }
Then you can simply do this:
success: function(response) {
$('form').hide();
$(response.formToShow).show();
}
Obviously, using this method, you'd also have to have the second form in your markup like this:
<form method="POST" action = "#" id="form2" style="display: none">
<input type="textbox" name="textbox2"/>
<input type="submit" name="submit2"/>
</form>
You'd also have to change (to pickup the array):
$.ajax({
type: 'JSON'

try this
$('form#myForm').submit(function(event) {
event.preventDefault();
$.ajax({
type: '',
url: '',
data: $(this).serialize(),
success: function(response) {
$('#divName').html(response);
$('#form1').hide();
$('#form2').show();
}
})
return false;
});
<form method="POST" action = "#" id="form1">
<input type="textbox" name="textbox1"/>
<input type="submit" name="submit1"/>
</form>
<form method="POST" action = "#" id="form2" style="dispay:none;">
<input type="textbox" name="textbox2"/>
<input type="submit" name="submit2"/>
</form>

jQuery submit form doesn't work

<form accept-charset="UTF-8" action="/twitts" class="dialog " id="twitt-form" method="post" title="Dialog" selected="true">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓">
<input name="authenticity_token" type="hidden" value="BkLNJsJfbEzfQrCTDWHW4OvvOh0l2pLPxxEJ/bGt2IY="></div>
<input id="anonymous_id" name="anonymous[id]" type="hidden" value="22">
<fieldset>
<h1>Отправить сообщение</h1>
<a class="button leftButton" type="cancel">Отмена</a>
<a id="submit-twitt" class="button blueButton">Отправить</a>
<!-- <input class="button blueButton" id="submit-twitt" name="commit" type="submit" value="Отправить" /> -->
<input id="twitt-text" name="twitt[text]" size="30" type="text">
</fieldset>
<div class="spinner"></div>
</form>
when i call
$('#twitt-form').submit();
In the debugger or inside click event handler just nothing happened. And even if set .submit handler to the form
$('#twitt-form').submit(function() {
$('#twitt-text').val('');
$('#twitt-form').attr('selected', false);
return false;
});
Handler DOES work, but form does not submit any data. Why ?
And more: when I press Enter on form field #twitt-text form just submit well and .submit handler works also.

$('#twitt-form').submit(function() {
$('#twitt-text').val(''); <--- this it will make form value empty
$('#twitt-form').attr('selected', false);
return false;
});

why you are using return false without any condition.
return false;
is to prevent default form action. that is why form is not being submitted.

There are three problems I see with this code and two of them have been brought up now:
Inside your submit function, the first line will clear the input text field, so even if it submits, it won't submit anything.
The second thing is that #twitt-form is the form itself, so it doesn't have a selected attribute.
The form submit will be cancelled by the use of return false;.
Now if you were trying to prevent the page from going anywhere by submitting the form by AJAX, this is an example of what you can do:
$('#twitt-form').submit(function(e) {
$.ajax({
url: $(this).attr('action'),
data: $(this).serialize(),
type: $(this).attr('method'),
success: function(dataFromTheServer) {
// do whatever
}
});
$('#twitt-text').val('');
e.preventDefault();
return false;
});
But other than that I'm not sure what you're trying to do here.