0

I'm trying to update a database using html form + jquery + php

When I click on the Submit button on the form it works but it is adding two same records in the database for each click.

I can't find out what is going wrong and therefore I'm posting the whole script I'm using here. If anyone can find the problem then please point it out.

Here are the scripts I'm using

HTML

<div id="result" class="results"></div>
<form id="person-form" class="person-form" method="post">
 <fieldset>
  <legend><strong>Add a new member</strong></legend>
  <table>
  <tr><td><label for="Name" >Name</label></td>
  <td colspan="2"><input type="text" name="name" value="Enter the Name, 55 char max." /></td></tr>
  <tr><td><label for="email">Email</label></td>
  <td colspan="2"><input type="text" name="email" value="Enter the email" /></td></tr>
  <tr><td><label for="subscribe">Subscribe</label></td>
  <td><input type="checkbox" name="subscribe" value="Yes" /></td>
  <td><input type="submit" value="Add member" id="add-member" class="add-member"/></td></tr>
  </table>
  <div style="clear:both;"></div>
 </fieldset>
</form>

jQuery

$("#add-url").live("click", function() {
    var name = $('input[name=name]').val();
    var email = $('input[name=email]').val();
    var subs = $('input[name=subscribe]:checkbox:checked').val();
    var data = 'name='+name+'&email='+email+'&subs='+subs;

    $.post(add_member_script.ajaxurl, data,  function(data) {
   $('#results').html(data);

});
  return false;
});

And PHP

$connect = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD);

if (!$connect){
    die('Could not connect: ' . mysql_error());
}
mysql_select_db(DB_NAME, $connect);


if (empty($_POST['name']) || empty($_POST['email'])){
    echo 'enter some value';
}  else {

      if($_POST['subs']== 'yes') {
        $sql="INSERT INTO $table (name, email, subs) VALUES ('$_POST[name]','$_POST[email]','$_POST[subs]')";
      } else {
        $sql="INSERT INTO $table (name, email) VALUES ('$_POST[name]','$_POST[email]')";
      }

    if (!mysql_query($sql,$con)){
        mysql_error();
    } else {
        list_links_table ();
    }
    mysql_close($con);
    die();
}
Anuj
  • 333
  • 4
  • 14
  • have you tried using "INSERT IGNORE", to avoid duplicates? Still, there should be an error somewhere, and i'm sure someone will find it soon :P – Erenor Paz Jun 30 '12 at 23:49
  • Uh, by the way..isn't it submitting the form WITH the $.post() function, resulting in sending the same data twice to the php script? – Erenor Paz Jun 30 '12 at 23:52
  • @ErenorPaz - shouldn't be, since the JS function returns false, hence the page doesn't submit and refresh. – slugonamission Jun 30 '12 at 23:55
  • First `INSERT IGNORE` is not working. Can you please tell me little details about $.post() you are talking about. – Anuj Jun 30 '12 at 23:55
  • 1
    @ErenorPaz - sorry, I was probably wrong - use $().submit() on the form to bind your event handler rather than live(). This will handle the case where the form is submitted by other means too. – slugonamission Jun 30 '12 at 23:58
  • 1
    Am i blind, or right, that i cannot find that "#add-url" ID in the HTML? – Erenor Paz Jun 30 '12 at 23:58
  • Did you check Firebug to make sure you aren't somehow sending duplicate POST requests? – Mark Eirich Jul 01 '12 at 00:01
  • It is a typing mistake here, actually the submit button usages `#add-url` id and class too. Sorry about it – Anuj Jul 01 '12 at 00:01
  • @Mark Eirich I don't know how to use it to debug :( but now I'm trying to figure out how to use firebug. – Anuj Jul 01 '12 at 00:04
  • You could use the nice suggestion from Slugonamission, or even try to use `` to bind the event, so that the form will never be submitted (still, the Jquery code will submit)..at least..it's a try :D – Erenor Paz Jul 01 '12 at 00:06
  • @slugonamission I tried `.click()` , `.submit()` but not working. `.submit()` is refreshing the page – Anuj Jul 01 '12 at 00:09
  • Just remove all your JavaScript code and try it that way. – Mark Eirich Jul 01 '12 at 00:11
  • Please fix the SQL injection vulnerabilities, and consider switching to either the `mysqli_*` or `PDO` functions to access your database (the `mysql_` functions are obselete & using them is discouraged). See http://stackoverflow.com/questions/60174/best-way-to-prevent-sql-injection-in-php – John Carter Jul 01 '12 at 01:33

3 Answers3

1

It looks like the form may be getting submitted both via AJAX and the "normal" way. To make sure, add onsubmit="return false" to the form tag:

<form id="person-form" class="person-form" method="post" onsubmit="return false">

Alternately, you can remove all your JS and allow the form to submit normally, and see if the duplication persists.

Mark Eirich
  • 10,016
  • 2
  • 25
  • 27
  • Thanks for your advice but still not working. I forgot to say that I'm using it inside the WordPress admin area as a plugin. Though it should not be the reason but I thought I must mention it. – Anuj Jul 01 '12 at 00:14
  • When you remove the Javascript, does it still create duplicate entries? – Erenor Paz Jul 01 '12 at 00:15
  • 1
    @Anuj, if you suspect that running inside WP admin is a problem, then test it outside of WP admin. You have to keep reducing the problem, eliminating possibilities, until you find the root cause. – Mark Eirich Jul 01 '12 at 00:18
  • It was working fine when I was modifying it last time, but this time after a PC reboot this problem arrived. Can you please suggest me any debugging tool that can help? I'm very new here – Anuj Jul 01 '12 at 00:22
  • If you use Chrome as your browser, it comes with a good tool. Click View -> Developer -> Developer Tools, then go to the Network tab and click XHR at the bottom, then reload the page. Then you will see all AJAX requests appear in this pane. – Mark Eirich Jul 01 '12 at 00:28
0

As said in the comments, i would suggest you to use <input type="button" value="Add member" id="add-member" class="add-member"/> instead of the "type=submit", to make sure the form will never be uploaded via HTML, but only using the Javascript code :)

Erenor Paz
  • 3,061
  • 4
  • 37
  • 44
  • I did that too but still the same :(. Is there any other way to update database? I mean any other SQL command than `INSERT INTO`. As I browsed for this command I found that it supports and can insert multiple rows at once. Any alternate may solve it. :( – Anuj Jul 01 '12 at 00:19
  • You could just add an index on one of the columns an "UNIQUE" index, if you plan to have unique values, but that wouldn't be a solution, just a (bad) workaround. As Mark said below, it would be nice to try it outside WP, to check if it's your code or some strange behaviour caused by by wordpress – Erenor Paz Jul 01 '12 at 00:22
  • I have a column named ID that has AUTO_INCREMENT feature and it has UNIQUE values but please give some idea of how to do this. – Anuj Jul 01 '12 at 00:26
  • Uh, no, that wouldn't work..each time a row is inserted, that columns increases it's value by one, so you can't have duplicates there :) Really, try it outside wordpress, to see if the behaviour remains – Erenor Paz Jul 01 '12 at 00:28
0

Finally I found it, it has no error at all in the scripts I posted above. The problem was with a WordPress hook that I registered twice and because of that it was sending 2 requests with each click. I removed it and the problem solved. Thank you @Erenor Paz, @Mark Eirich and @slugonamission for your kind efforts. With that I finished my first WordPress plugin :)

Anuj
  • 333
  • 4
  • 14
  • Mark was the first to suggest that Wordpress thing, i think you could accept his answer, to reflect this :) – Erenor Paz Jul 01 '12 at 01:00