jquery using ajax to send data and save in php [duplicate] - php

Question

This question already has answers here:
jQuery AJAX submit form
(20 answers)
Closed 8 years ago.
Good day im am trying to send or get data from a form and then using jquery and then ajax to send the data into a php page that should save it in the database how can i do it in jquery and use ajax to do it, any help will do and thanks!
HTML page 1 that will use jquery ajax to send data into the php page
<form>
Name:<input type='text' name='name'>
E-mail:<input type='text' name='email'>
Gender:<select name='gender'>
<option value='male'>male</option>
<option value='female'>female</option>
</select>
Message:<textarea name='about'></textarea>
</form>
PHP page 2 that would recieve the data from the page 1 form
<?php
echo "
$_POST['name'];
$_POST['email'];
$_POST['gender'];
$_POST['about'];
";
?>
any help with this project would help us greatly and thanks!
(update)
This is the jquery that i tried to use but it went to the url and i think that is not very safe
$(document).ready(function(){
$("#chat").click(function(){
$("#content").load("a.php");
});
$("#send").ajaxSubmit({url: 'a2.php', type: 'post'})
});

Answer 1

you can use following code :
var form = new FormData($('#form_step4')[0]);
form.append('view_type','addtemplate');
$.ajax({
type: "POST",
url: "savedata.php",
data: form,
cache: false,
contentType: false,
processData: false,
success: function(data){
//alert("---"+data);
alert("Settings has been updated successfully.");
window.location.reload(true);
}
});
where savedata.php is the file name in which you can do the the DB things

Answer 2

Hi i would start by adding a id to the form. and then either go with a onclick on the button element, or just define a click-event-handler for the button.
<form id="my_form">
Name:<input type='text' name='name'>
E-mail:<input type='text' name='email'>
Gender:<select name='gender'>
<option value='male'>male</option>
<option value='female'>female</option>
</select>
Message:<textarea name='about'></textarea>
<input type="button" value="Send" onclick="sendForm()"/>
</form>
Then the jquery/ajax/js part.
function sendForm(){
$.ajax({
type: "POST",
url: "PAGE2.php",
data: jQuery("#my_form").serialize(),
cache: false,
success: function(data){
/* alert(data); if json obj. alert(JSON.stringify(data));*/
}
});
}

Answer 3

Try this one:
<form id="formId">
Name:<input type='text' name='name'>
E-mail:<input type='text' name='email'>
Gender:<select name='gender'>
<option value='male'>male</option>
<option value='female'>female</option>
</select>
Message:<textarea name='about'></textarea>
<input type="button" value="Send" onclick="save()"/>
</form>
<script type="javascript">
function save(){
var query = $('#formId').serialize();
var url = 'savedata.php';
$.post(url, query, function (response) {
alert (response);
});
}
</script>
assign Id to your form... for now in my code i have given ID formId.. you can change this one as per your form name.