14

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'})

    });
user1868185
  • 899
  • 3
  • 9
  • 24

3 Answers3

16

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

Sunil Verma
  • 2,490
  • 1
  • 14
  • 15
  • you need not to worry about the form element use whatever you want, just name the form id as form_step4 and also include a jquery file in the head. all will be transfer to the savedata.php file :) – Sunil Verma Sep 26 '13 at 13:43
  • thanks loads for the additional info im a bit new in jquery so im currently trying to learn loads from others and we really appreciate every help im the coder in the project here and the others are do the document and the style so im really trying to learn by my self now but really thanks! – user1868185 Sep 26 '13 at 13:46
  • @SunilVerma how to get the value of the file in php?is it like `$_FILES['nameofinput']` ? does this go with other input field? – Brownman Revival Feb 24 '15 at 10:54
  • @HogRider yes you can access the files data using $_FILES, rest of the input fields can be accessed with either $_POST or $_REQUEST – Sunil Verma Feb 25 '15 at 12:24
  • @SunilVerma sir i have a question what is this line `form.append('view_type','addtemplate');` for – Brownman Revival Feb 26 '15 at 02:24
  • 1
    @HogRider this is just an example if you want to append a variable to the post request at run time. i left it in the code for someone interested. – Sunil Verma Feb 27 '15 at 06:15
  • @SunilVerma i will up your answer it helped me happy coding – Brownman Revival Feb 27 '15 at 07:17
6

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.

ratnesh dwivedi
  • 352
  • 2
  • 8
  • @user1868185: this is simple just copy & paste this code in you JavaScript Tag & use on send button – ratnesh dwivedi Sep 26 '13 at 13:49
  • I tried your code but I dont know why it does not work for me!:( should I add s.th in head part of my html page to use javascript? – mOna Sep 23 '14 at 17:12
6

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));*/
    }
  });

}
Karlton
  • 116
  • 3