submission help

[andyd34]

I have the following form i want to submit without a page refresh, its only a test form the get my head aroung jquery but hey you have to start somewhere

 

<script>
$(document).ready(function(){

$("#add_me").click(function(){
  $("#add_container").slideDown(400);
});
$("#add_close").click(function(){
  $("#add_container").slideUp(400);
});
$("#add_success_close").click(function(){
  $("#add_container").slideUp(400);
});

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

var add_field = $("input#add_field").val();
var uid = $("input#uid").val();
var dataString = 'add_field='+ add_field + '&uid=' + uid;
$.ajax({
  type: "POST",
  url: "ajax.php",
  data: dataString,
  success: function()
   {
   $('#add_success').fadeIn(200).show();
   $("#add_container").fadeIn(200).show();
   $('#add_cont').fadeOut(200).hide();
   }
});
});
</script>


<div id="add_container" class="popup_div">
<form name="add_form">
<input type="hidden" name="uid" value="<?=$user_id?>" />
  <div id="add_cont">
    <table width="100%">

      <tr>
        <td align="center"><p style="padding:10px">
            <select name="add_field">
              <option value="3">3</option>
              <option value="6">6</option>
              <option value="9">9</option>
              <option value="12">12</option>
            </select>
          </p></td>
      </tr>
      <tr>
        <td align="center">
<input type="button" value="ADD" id="add_button" />
           
            <input type="button" value="CLOSE" id="add_close" />
        </td>
      </tr>
    </table>
  </div>
  <div id="add_success" style="display:none">
  	<h1>db_results_field</h1>
    <button id="add_success_close">CLOSE</button>
  </div>
</form>
</div>

 

then I have the ajax.php as

 

if($_POST['add_hours'])
{
 $add_field = $_POST['add_field'];
 $uid = $_POST['uid'];
$sql = "UPDATE table SET field = '$add_field' WHERE user_id = '$uid'";
mysql_query($sql);
}

 

I dont know where I am going wrong but nothing is being added to the database and if I change the form button from button to submit the page refreshes which I dont want because I then lose the div

 

Can anyone see where I have messed up and offer some advise

 

Thanks

[andyd34]

I now have the submission working but am having trouble refreshing the buttons.

 

<script>
$("#add_me").click(function(){
$.ajax({
type: "POST",
url: "./ajax.php",
data: "add="+ add_field +"& uid=<?=$UIB?>",
success: function(){
  $("#my_buttons").refresh();
}
});
return false;
});
});

$("#remove_me").click(function(){	
$.ajax({
type: "POST",
url: "./ajax.php",
data: "remove=1& uid=<?=$UID?>",
success: function(){
  $("#my_buttons").refresh();
}
});
return false;
});	
</script>

<div id="my_buttons">
<? IF($row['field']) { ?>
<button id="add_me">ADD</button>
<? } ELSE { ?>
<button id="remove_me">REMOVE</button>
<? } ?>
</div>

 

I have tried

$("#add_me").html('<button id="remove_me">REMOVE</button>');

This changes the button text but there is no functionality. With

$("#my_buttons").refresh();

I get this

Error:Object doesn't support this method or property

 

I am using jquery 1.3.2 which i think is the latest and the tutorials I have read suggest using .refresh, can anyone give me any pointers

[cooldude832]

Side note you want to verify that UserID in the ajax.php and limit the query to 1 row because you could accidentally update all the rows at once