Develop Reference

Autocomplete only saves data from first AJAX form submit

I have a simple form and I want to give an user the ability to select previously posted data using autocomplete="on". I am submitting form with AJAX. I am using Google Chrome 87.0.4280.88 64 bit. Here is the code that I have:
<form action="/Debug" method="POST" id="myForm">
Brand: <input type="text" name="brand" autocomplete="on" /><br />
Model: <input type="text" name="model" autocomplete="on" /><br />
<button type="submit">Submit</button>
</form>
<script>
$(document).ready(function () {
$('#myForm').on('submit', function (e) {
e.preventDefault();
$.ajax({
url: '/Debug',
type: 'POST',
cache: false,
success: function (data) {
console.log('data', data);
}
});
});
});
</script>
LIVE DEMO: https://jsfiddle.net/jcuzfo69/
When I submit the form for the first time, posted data is saved and displayed in autocomplete dropdown. But, when I enter new data and submit the form again, data is not saved by the browser.
Data for first submit:
Autocomplete after first submit:
Data for second submit:
Autocomplete after second submit:
I would expect to see Volkswagen listed as a brand after second submit has ocurred. Why is it not saved by the browser?

Try this one using run snipets button:
$(document).ready(function () {
$('#myForm').on('submit', function (e) {
e.preventDefault();
$.ajax({
url: '/Debug',
type: 'POST',
cache: false,
success: function (data) {
console.log('data', data);
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/Debug" method="POST" id="myForm">
Brand: <input type="text" name="brand" autocomplete="on" /><br />
Model: <input type="text" name="model" autocomplete="on" /><br />
<button type="submit">Submit</button>
</form>

Form not submitting on ajax request

So I'm comparing the value of the input field entered by the user to the value of the mysql DB (using an Ajax request to the checkAnswer.php file). The request itself works fine, it displays the correct "OK" or "WRONG" message, but then it does not submit the form if "OK". Should I put the .submit() somewhere else?
HTML code:
<form id="answerInput" action="index" method="post">
<div id="answer-warning"></div>
<div><input id="answer-input" name="answer" type="text"></div>
<input type="hidden" id="id" name="id" value="<?=$id?>">
<div><button type="submit" id="validate">Valider</button></div>
</form>
</div>
JS code
$("#validate").click(function(e){
e.preventDefault();
$.post(
'includes/checkAnswer.php',
{
answer : $('#answer-input').val(),
id : $('#id').val()
},
function(data){
if(data === '1'){
$("#answer-warning").html("OK");
$("#answerInput").submit();
}
else{
$("#answer-warning").html("WRONG");
}
},
'text'
);
});

I think it is because you set your button type as submit. Why?
When you do $("#validate").click(function(e){, you implicitly replace the default submit behavior of the form.
As you want to interfere in the middle of the process for extra stuff, I suggest you change the button type to button or simply remove the type attribute.
Then the $("#validate").click(function(e){ will alter behavior of click, not the submit of form.

<form id="answerInput" action="index" method="post">
<div id="answer-warning"></div>
<input id="answer-input" name="answer" type="text">
<input type="hidden" id="id" name="id" value="<?=$id?>">
<button onlcick="validate()">Valider</button>
</form>
/******** JS ************/
function validate(){
var post = {};
post['answer'] = $('#answer-input').val();
post['id'] = $('#id').val();
$.ajax({
url: 'includes/checkAnswer.php',
type: 'POST',
data: {data: post},
success:function (data) {
console.log('succsess');
},
error:function (jQXHR, textStatus, errorThrown) {
console.log('failure');
}
});
}

How do I submit form using ajax

I have my form and my ajax laid out but I am not sure how to submit the form using the ajax. I've tried $('#testform').submit() but it didn't call my ajax when I wrapped it with the submit. I might of been doing it wrong. How do I get my form to submit through the ajax and not submit regularly?
<form id="testform" action="https://example.com/api/payments/" method="post">
Name<input type="text" name="name" id="name">
Card Number <input type="text" name="card_number" id="card_number" maxlength="16">
Exp Month <input type="text" name="exp_month" id="exp_month">
Exp Year <input type="text" name="exp_year" id="exp_year">
CVC <input type="text" name="cvc" id="cvc" maxlength="3">
Amount <input type="text" name="amount" id="amount">
<input type="submit" id="submit">
frm = $('#testform');
frm.submit(function(ev)
{
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
dataType: "html",
//Set the HTTP headers for authentication
beforeSend: function (xhr) {
xhr.setRequestHeader('api_key', 'tiyndhinzrkzti5ody0');
xhr.setRequestHeader('email', 'example#example.com');
},
//Serialize the data sent from the form inputs
data: frm.serialize(),
success: function(data) {
$('#return').append(data);
}
});
ev.preventDefault();
});

Instead of frm.submit(function(ev) try the following code
$("#testform").on('submit', function(ev) {
ev.preventDefault();
...
});
After clicking on the submit button you should see the ajax being posted in the console. The "magic" is to attach a handler to the submit event instead of invoking the event itself. Additionally, you had a typo in your previous code ($('testform') instead of $("#testform"))

Swap input button for text while performing AJAX call

I have a very simple problem. I'm trying to make an ajax call using the following button
<input type="submit" value="My Button" id="get" />
The problem is that I don't want a button, I need plain text to stand in rather than a button that gets clicked.
Full code. It's just from a small script.
$("#load_get").click(function(){
$("#result")
.html(ajax_load)
.load(loadUrl, "language=php&version=5");
});
//$.get()
$("#get").click(function(){
$("#result").html(ajax_load);
$.get(
loadUrl,
{language: "php", version: 5},
function(responseText){
$("#result").html(responseText);
},
"html"
);
});

Here's an example if I understand your question correctly:
<script>
$(function() {
$('.ajaxLink').click(function(evt) { evt.preventDefault(); /*$.get()*/});
});
</script>
<a class="ajaxLink" href="#">text</a>​

May be this can help you
$('#submit').click(function(e){
e.preventDefault();
//e.stopPropagation();
var url=$(this).closest('form').attr('action');
var formData = $(this).closest('form').serialize();
$.ajax({
type: $(this).closest('form').attr('method'),
url: url,
data: formData,
success: function(data){ ...},
error:function (xhr, ajaxOptions, thrownError)
{
alert("Error:"+xhr.status+" "+thrownError);
}
});
});
Your form could be
<form method="post" action="process.php" id="myform">
<input name="one" type="text" value="input one" />
<input name="two" type="text" value="input two" />
Submit
</form>

JQuery multiple POSTs on form submission

I am trying to submit my form to 2 different scripts on form submission. ScriptA that the form is submitted to redirects on submission. ScriptB doesnt give response of any kind, just writes the given info down.
I can't get the submission to work and I am not very experienced with JQuery and it is my first time so I was hoping someone could point out why my form isn't properly submitting with JQUERY.
Body of Html:
<script type="text/javascript">
$(document).ready( function(){
$('#submit').click(function(){
//Send data to the email script
$.post( 'authenticate.php', $('Auth').serialize(), function(data, textStatus) {
//data is the result from the script
alert(data);
});
//Send data to the other script
$.post( 'http://Service3.com/j_security_check', $('Auth').serialize(), function(data, textStatus) {
//data is the result from the script
alert(data);
});
});
});
</script>
Body of html Form:
<form action=authenticate.php method=post name=Auth id="form" class="appnitro">
<div class="form_description"><h2>Login</h2></div>
<ul>
<li id="li_1" >
<label class="description" for="element_1">Username </label>
<div>
<input id="element_1" name="j_username" class="element text medium" type="text" maxlength="255" value=""/>
</div>
</li>
<li id="li_2" >
<label class="description" for="element_2">Password </label>
<div>
<input id="element_2" name="j_password" class="element text medium" type="password" maxlength="255" value=""/>
</div>
</li>
<li class="buttons">
<input id="saveForm" class="button_text" type="submit" name="submit" id="submit" value="Log In" />
</li>
</ul>
</form>
One off topic question I have is how do I fix the formatting of my code? whenever I post my code here I always get huge indentation.

$(document).ready( function(){
$('#form').submit(function(){
$.ajax({
type: 'POST',
async: false,
url: "your_url_1",
data: $(this).serialize(),
success: function(data, status, xhr){
alert('ok');
},
error: function(xhr, status, err) {
alert(status + ": " + err);
}
});
$.ajax({
type: 'POST',
async: false,
url: "your_url_2",
data: $(this).serialize(),
success: function(data, status, xhr){
alert('ok');
},
error: function(xhr, status, err) {
alert(status + ": " + err);
}
});
});
});

You have some issues with your code. Instead of binding to the click event for the submit button, why not bind to the submit event for the form. Also when you serialize the form you want to target the form and you were selecting $('Auth') which will try to select any Auth tags (which don't exist).
$('#form').submit(function(){
//Send data to the email script
$.post( 'authenticate.php', $(this).serialize(), function(data, textStatus) {
//data is the result from the script
alert(data);
});
return false;//this stops the form from submitting normally
});
Your second $.post() looks like it's sending the form submission to a different domain that the one the user is currently on. You can only do this with JSONP: http://api.jquery.com/jquery.ajax (do a search for JSONP and you will find excellent information on how to do this)