jQuery AJAX submit form
You can use the ajaxForm/ajaxSubmit functions from Ajax Form Plugin or the jQuery serialize function.
AjaxForm:
$("#theForm").ajaxForm({url: 'server.php', type: 'post'})
or
$("#theForm").ajaxSubmit({url: 'server.php', type: 'post'})
ajaxForm will send when the submit button is pressed. ajaxSubmit sends immediately.
Serialize:
$.get('server.php?' + $('#theForm').serialize())
$.post('server.php', $('#theForm').serialize())
AJAX serialization documentation is here.
Submitting Form using jquery AJAX
welcome to stackoverflow, here are the changes, hope it will works
$.ajax({
type: 'POST',
url: url,
data: $('.myForm').serialize() ,
dataType : 'json', // changing data type to json
success: function (data) { // here I'm adding data as a parameter which stores the response
console.log(data); // instead of alert I'm changing this to console.log which logs all the response in console.
}
});
in php
if(isset($_POST)) {
echo json_encode($_POST);
}
this should print array of post parameters in your console, however you will get an array in php.
jQuery Ajax submitting form multiple times
I see both form submit and Ajax call are doing the same work. If you are going to post the data only with AJAX call then form submit is not required.
I hope this works well for you.
$(document).ready(function () {
function postDataToServer() {
var id_js = $('#ID_TXT').val();
$.ajax({
type: "POST",
url: 'server.php',
data: {
'Mark': 1,
'id': id_js,
},
success: function (response) {
$('#result').html(response);
}
});
}
$(document).on('click', '.btn-success', postDataToServer);
});
Submitting Form via JQuery Ajax Post Request
This is the html part
<form id="form" action="" method="post">
<input type="text" name="msgID" id="msgID">
<input type="text" name="senderId" id="senderId">
<input type="text" name="senderName" id="senderName">
<input type="text" name="recipientId" id="recipientId">
<input type="text" name="recipientName" id="recipientName">
<input type="submit" name="dsq" value="dsqdsq">
</form>
this is the JavaScript part
<script type="text/javascript">
$(document).ready(function(){
$("#form").submit(function(){
$.ajax({
url: "test.php",
data: $("#form").serialize(),
type: "POST",
dataType: 'json',
success: function (e) {
console.log(JSON.stringify(e));
},
error:function(e){
console.log(JSON.stringify(e));
}
});
return false;
});
});
</script>
And this is the php code
<?php
die(json_encode(array("status"=>true)));
?>
Hope that will helps you.
Form submit with AJAX passing form data to PHP without page refresh
The form is submitting after the ajax request.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function () {
$('form').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: 'post.php',
data: $('form').serialize(),
success: function () {
alert('form was submitted');
}
});
});
});
</script>
</head>
<body>
<form>
<input name="time" value="00:00:00.00"><br>
<input name="date" value="0000-00-00"><br>
<input name="submit" type="submit" value="Submit">
</form>
</body>
</html>
submitting html form via jquery ajax() and serialize()
Use this - there have been a few syntax errors and the event has to be submit
$(function(){
$("#form1").submit(function(event){
event.preventDefault();
$.ajax({
url:'submit.php',
type:'GET',
data:$(this).serialize(),
success:function(result){
$("#response").text(result);
}
});
});
});
submit form with button outside form using ajax
The issue is because you are creating a new submit
event handler in every click. From the description of what you want to do, you instead need to create a single submit handler when the page loads, and trigger it when the button is clicked. Something like this:
$('#newForm').submit(function(e) { // handle the submit event
e.preventDefault();
let formData = $(this).serialize();
$.post({
type: 'POST',
url: '/api/pois/',
data: formData
})
})
$('#confirmYes').click(function() {
$('#confirm-object').modal('hide');
$('#newForm').submit(); // trigger the submit event
});
Submitting HTML form using Jquery AJAX
Quick Description of AJAX
AJAX is simply Asyncronous JSON or XML (in most newer situations JSON). Because we are doing an ASYNC task we will likely be providing our users with a more enjoyable UI experience. In this specific case we are doing a FORM submission using AJAX.
Really quickly there are 4 general web actions GET
, POST
, PUT
, and DELETE
; these directly correspond with SELECT/Retreiving DATA
, INSERTING DATA
, UPDATING/UPSERTING DATA
, and DELETING DATA
. A default HTML/ASP.Net webform/PHP/Python or any other form
action is to "submit" which is a POST action. Because of this the below will all describe doing a POST. Sometimes however with http you might want a different action and would likely want to utilitize .ajax
.
My code specifically for you (described in code comments):
/* attach a submit handler to the form */
$("#formoid").submit(function(event) {
/* stop form from submitting normally */
event.preventDefault();
/* get the action attribute from the <form action=""> element */
var $form = $(this),
url = $form.attr('action');
/* Send the data using post with element id name and name2*/
var posting = $.post(url, {
name: $('#name').val(),
name2: $('#name2').val()
});
/* Alerts the results */
posting.done(function(data) {
$('#result').text('success');
});
posting.fail(function() {
$('#result').text('failed');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="formoid" action="studentFormInsert.php" title="" method="post">
<div>
<label class="title">First Name</label>
<input type="text" id="name" name="name">
</div>
<div>
<label class="title">Last Name</label>
<input type="text" id="name2" name="name2">
</div>
<div>
<input type="submit" id="submitButton" name="submitButton" value="Submit">
</div>
</form>
<div id="result"></div>
how to submit form name and submit button name in ajax form submission
I got my answer. Even when the page reloads after submitting the form, the form name does not go with the form data. Only the all the input elements with submit button name is sent into the form data. Even the input type="button" element name does not go into form data.
But with AJAX form submission when we use ('form').serialize() method OR ('form').serailizeArray() method all the form elements value with their names are serialize but SUBMIT Button value DOES NOT SERIALIZE with this. But I found a solution to send submit button NAME and VALUE with minimum lines of code.
var formdata = new FormData();
for (var i = 0; i < $(this)[0].length; i++) {
formdata.append($(this)[0][i].name, $(this)[0][i].value);
}
the above code will make the array of all elements including with submit button NAME and VALUE. The benefit of this is we can check for the submit button name at SERVER SIDE and can perform the valuable operations on the basis of only one condition.
Related Topics
Add a Property to a JavaScript Object Using a Variable as the Name
Window.Onload VS $(Document).Ready()
Detecting an Undefined Object Property
Find the Min/Max Element of an Array in JavaScript
Formatting a Number With Exactly Two Decimals in JavaScript
Chrome/Firefox Console.Log Always Appends a Line Saying 'Undefined'
How Does "This" Keyword Work Within a Function
Can Scrapy Be Used to Scrape Dynamic Content from Websites That Are Using Ajax
Convert Js Object to Json String
Programmatically Navigate Using React-Router
What Does the Exclamation Mark Do Before the Function
Window.Close and Self.Close Do Not Close the Window in Chrome
How to Make Setinterval Also Work When a Tab Is Inactive in Chrome
Difference Between Call and Apply