Question

Problem solved…variable undefined. I will add full answer when stackoverflow allows me to answer own question

update, firebug is telling me that the variable barrister is undefined in plugin.php but I do define that variable (or at least I try to)
this is the line where it’s supposedly undefined: if(barrister.attr("value"))

this is the line where I try to define it: var barrister = $('input:radio[name=barrister]:checked').val();

---

I’m using a form with a radio button to submit data. The file plugin.php is supposed to get the data using javascript/ajax and then send it to results.php so that it can be inserted into the database. Information’s also retrieved from the database and is supposed to be inserted into the html. I can’t figure out where it’s breaking down, but I do know the database connection itself works. Any idea how I might find out the broken link? When I test it and check the database, there’s no data in it.

The form

<form method="post" id="form">  
    <table>  
    <tr>  
        <td><label>Barrister's Exam</label></td>  
        <td><input type="radio" id="barrister" name="barrister" value="1" /> Pass</td>
        <td><input type="radio" id="barrister" name="barrister" value="0" /> Fail</td>  
    </tr>
    <tr>  
        <td>Submit</td>  
        <td><input id="send" type="submit" value="Submit" /></td>  
    </tr>  
    </table>
</form>  

Getting the form data with plugin.php

function my_function() { ?>

<script type="text/javascript">

$(document).ready(function(){
    //global vars
    var barrister = $('input:radio[name=barrister]:checked').val();
        var loading = $("#loading");
    var messageList = $(".content > ul");

    //functions
    function updateShoutbox(){
        //just for the fade effect
        messageList.hide();
        loading.fadeIn();
        //send the post to shoutbox.php
        $.ajax({
            type: "POST", url: "http://yearofcall.com/wp-content/plugins/myplugin/results.php", data: "action=update",
            complete: function(data){
                loading.fadeOut();
                messageList.html(data.responseText);
                messageList.fadeIn(2000);
            }
        });
    }
    //check if all fields are filled
    function checkForm(){
        if(barrister.attr("value"))
            return true;
        else
            return false;
    }

    //Load for the first time the shoutbox data
    updateShoutbox();

    //on submit event
    $("#form").submit(function(){
        if(checkForm()){
            var barrister = barrister.attr("value");
            //we deactivate submit button while sending
            $("#send").attr({ disabled:true, value:"Sending..." });
            $("#send").blur();
            //send the post to results.php
            $.ajax({
                type: "POST", url: "http://yearofcall.com/wp-content/plugins/myplugin/results.php", data: "action=insert&barrister=" + barrister,
                complete: function(data){
                    messageList.html(data.responseText);
                    updateShoutbox();
                    //reactivate the send button
                    $("#send").attr({ disabled:false, value:"Send" });
                }
             });
        }
        else alert("Please fill all fields!");
        //we prevent the refresh of the page after submitting the form
        return false;
    });
});

</script>
<?php

}

add_action('wp_head', 'my_function');

putting the data into “results” table of the database “year” with results.php I know the database connection works

<?php
define("HOST", "host");  
define("USER", "user");  
define("PASSWORD", "password");  
define("DB", "year");  

/************************
    FUNCTIONS
/************************/
function connect($db, $user, $password){
    $link = @mysql_connect($db, $user, $password);
    if (!$link)
        die("Could not connect: ".mysql_error());
    else{
        $db = mysql_select_db(DB);
        if(!$db)
            die("Could not select database: ".mysql_error());
        else return $link;
    }
}
function getContent($link, $num){
    $res = @mysql_query("SELECT barrister FROM results ORDER BY date DESC LIMIT ".$num, $link);
    if(!$res)
        die("Error: ".mysql_error());
    else
        return $res;
}
function insertMessage($barrister){
    $query = sprintf("INSERT INTO results(barrister) VALUES('%s');", mysql_real_escape_string(strip_tags($barrister))
));
    $res = @mysql_query($query);
    if(!$res)
        die("Error: ".mysql_error());
    else
        return $res;
}

/******************************
    MANAGE REQUESTS
/******************************/
if(!$_POST['action']){
    //We are redirecting people to our shoutbox page if they try to enter in our shoutbox.php
    header ("Location: index.html"); 
}
else{
    $link = connect(HOST, USER, PASSWORD);
    switch($_POST['action']){
        case "update":
            $res = getContent($link, 100);
            while($row = mysql_fetch_array($res)){
                $result .= "<li><strong>".$row['user']."</strong><img src=\"http://eslangel.com/wp-content/plugins/myplugin/CSS/images/bullet.gif\" alt=\"-\" />".$row['message']." </li>";
            }
            echo $result;
            break;
        case "insert":
            echo insertMessage($_POST['barrister']);
            break;
    }
    mysql_close($link);
}


?>

The html where the data is returned to when retrieved from the database

 <div id="container">  
        <ul class="menu">  
            <li></li>  
        </ul>  
        <span class="clear"></span>  
        <div class="content">  
            <div id="loading"><img src="http:///></div>  
            <ul>  
            <ul>  
        </div>  
        </div> 

Answer 1

The first error I notice is that all of your radio buttons have the same ID. An ID attribute should be unique on the page. Besides this, the best tool for debugging javascript is the console.

Javascript Debugging for beginners

EDIT

Here’s an example of an ajax form submit using your markup http://jsfiddle.net/UADu5/

$(function(){
  // Submit form via ajax
  $('#check').click(function(){
    var barrister = null
    $.each($("input[name='barrister']:checked"), function(){
      if($(this).val() == 1)
        barrister = $(this).attr('value');
    });
    if(barrister){
      $.ajax({
        type: "POST", url: "http://yearofcall.com/wp-content/plugins/myplugin/results.php", 
        data: "action=insert&barrister=" + barrister,
        complete: function(data){
          messageList.html(data.responseText);
          updateShoutbox();

          //reactivate the send button
          $("#send").attr({ disabled:false, value:"Send" });
        }
      });
    } else {
      alert('Please fill all fields!')
    }

  })
})

<form method="post" id="form">
  <fieldset>
    <legend>Grade Exams</legend>
    <ul>
      <li>
        <p>Barrister's Exam</p>
        <label>
          <input type="radio" name="barrister" value="1" /> Pass
        </label>
        <label>
          <input type="radio" name="barrister" value="0" /> Fail
        </label>
      </li>  
      <li class="submit">
        <input type="button" id="check" value="Test">
      </li>
    </ul>
  </fieldset>
</form>