passing form data to mySQL through AJAX

Question

I am using JavaScript and AJAX to send form data to a php processing file to then populate an SQL database without refreshing the initial form page.

The php/SQL connection is working, but the form data is not being sent correctly.

There are two fields: a radio group called "choice", and a text field called "comments". When the DB is populated, the choice field is always "yes" (the first of the 3 radio buttons), and the comments field is always blank. I think the issue must be the way that the datastring is being constructed, but hours of tinkering have brought no success.

Here is the html form

<form id="paPoll">
  <label><input type="radio" name="RadioGroup1" value="yes" id="choice1">Yes</label>
  <label><input type="radio" name="RadioGroup1" value="no" id="choice2">No</label>
  <label><input type="radio" name="RadioGroup1" value="dont_know" id="choice3">I Don't Know</label>
  <label for="comments">Comments?</label><input name="comments" type="text" id="comments" size="25" maxlength="60">   
  <input type="button" name="form_process" id="form_process" value="submit" onClick="$.fn.removeMbMenu($.mbMenu.options.actualOpenedMenu,true);" />
</form>

here is the Javascript/AJAX function

<script type="text/javascript">
    $(function() {
      $("#form_process").click(function() {
        var choice = $("#choice").val();
        var comments = $("#comments").val();
        var dataString = 'choice='+ choice + '&comments=' + comments;

        $.ajax({
          type: "POST",
          url: "**ABSOLUTE URL TO PROCESSOR**",
          data: dataString
        });
      });
    });
</script>

here is the php processor

<?php
$choice = $_POST ['choice'];
$comments = $_POST ['comments'];
//perform insert
    $query = mysql_query("INSERT INTO paPoll 
    (choice, comments)      
    VALUES  
    ('$choice', '$comments')");         
        if (!query) {
           die("Database query failed: " . mysql_error());
        }
?>

Thoughts or suggestions?

I found a very similar question here, but the thread is 3 years old. A user suggested this

//Instead of using
data: dataString
//use
data : {param: value, param2: value2}

but I'm not sure how, or in what format he means to get the param values.

Thank you
-syllable

Answer 1

Were it me i would just make this easier on myself by using the Form plugin . Its already got an ajaxSubmit set of functions to make ajaxify your form with little effort. IT also has the handy formSerialize function which will serialize a form for ajax submission or to append to a query string for a link. :-)

That said an easier way without the plugin and utilizing your existing code:

$("#form_process").click(function() {

  $.ajax({
    type: "POST",
    url: "**ABSOLUTE URL TO PROCESSOR**",
    data: {
      'choice': $("input[@name=RadioGroup1]:checked").val(), 
      'comments':  $("#comments").val()
    }
  });

});

Either way though, you also need to change all your radio inputs to have unique ID's (or no ID at all)... you cant use the same one as its required that all id attributes have unique values within the document.

Answer 2

several week ago i have the same problem, and i just try using the old way like this

<script type="text/javascript">
    $(function() {
      $("#form_process").click(function() {
        //$("#choice").val(); //you cannot use the same id for more than 1 tag
        var choice = 0; 
             if(document.getElementById("choice1").checked) choice='Yes';
        else if(document.getElementById("choice2").checked) choice='No';
        else if(document.getElementById("choice3").checked) choice='Dont Know';

        var comments = document.getElementById('comments').value; //$("#comments").val();
        var dataString = 'choice='+ choice + '&comments=' + comments;

        $.ajax({
          type: "POST",
          url: "**ABSOLUTE URL TO PROCESSOR**",
          data: dataString
        });
     });
   });
</script>

really i don't know, i think this is not the best way but this work for me:)