3

I've followed just about every guide and tutorial that I can lay my hands on but I just can't see what's causing this problem:

I use the following code:

        function updaterow(){
            $.ajax({
                url: 'updaterowajax.php',
                type:'POST',
                data: 'ID=' + ID + '&SupStatus=' + SupStatus +'&$OrderOther=' + OrderOther,
                success: function(result){
                    console.log(result);
                    }
                });
        }

To post the contents of a form to a php-page. But for some reason it doesn't seem to send this as a post. And it especially doesn't send it to the correct page.

What I end up with is this in the address bar:

orderlist.php?ID=36&SupStatus=2&OrderOther=Ska+binda+Telia+Liten+18+m%E5n.&Submit36=Spara

That's the name of the file where my AJAX-script is in. What it seems to be doing (to me) is that it's sending a GET to the current page instead of a POST to the "updaterowajax.php".

Am I doing something wrong here? All the info in the GET is correct but it's not passed on.

Anything wrong in the code or perhaps the setup of my server? Default Apache, MySQL and I've got jQuery 1.7.1

The Form that's supposed to be posted:

        while ($row = mysql_fetch_array($query)) {
        echo "<tr><form id='".$row['ID']."'>
                    <td class='idcell'><input type='text' name='ID' readonly='readonly' value='".$row['ID']."' /></td>
                    <td>".$row['ArtName']."</td>
                    <td>".$row['ArtNumber']."</td>
                    <td><a href='/singlepost.php?ID=".$row['ID']."' title='Skriv ut ".$row['CustName']."'>".$row['CustName']."</a></td>
                    <td>".$row['CustContact']."</td>
                    <td>
                        <select name='SupStatus'>
                            <option value='".$row['SupStatus']."'>".$row['SupRealStatus']."</option>
                            <option value='01'>Mottagen</option>
                            <option value='02'>Lagd i korg</option>
                            <option value='03'>Beställd</option>
                            <option value='04'>Ankommen</option>
                            <option value='05'>Slutförd</option>
                            <option value='06'>Nekad</option>
                        </select>
                    <td>".$row['SupRealName']."</td>
                    <td>".$row['Date']."</td>
                    <td><textarea name='OrderOther' cols='40' rows='3'>".$row['OrderOther']."</textarea><input type='submit' value='Spara' name='Submit".$row['ID']."' onClick='updaterow()' /></td></form></tr>";}

And the updaterowajax.php

<?php

    $ID = $_POST['ID'];
    $OrderOther = $_POST['OrderOther'];
    $SupStatus = $_POST['SupStatus'];

    mysql_connect ("localhost", "root", "bilradio388") or die ('Kan inte ansluta till databasen för att: ' . mysql_error());
    mysql_select_db ("bil_best");

    mysql_query("UPDATE BestTable SET OrderOther = '$OrderOther' WHERE ID = '$ID'");
    mysql_query("UPDATE BestTable SET SupStatus = '$SupStatus' WHERE ID = '$ID'");

    echo "Dra på trissor"

 ?>

Think that's it!

EDIT: As I mentioned in my post further down I managed to get it working for a while. I used the suggested method: onClick='return updaterow();' and it was actually working. For three tries. Then I changed some code and it stopped working. I have reverted back to the old working state but alas, no, it doesn't work anymore :P I was thinking that I had missed out on a ' or " or ; or whatever, but so far I haven't found the missing link. I will report back if I find it. However, the above stated method seems to work.

EDIT 2: Well, got the "prevent form to be sent normally" to work (not that hard thanks to you) but firebug tells me that the ID is not defined. I find this weird since I haven't changed anything from when it did work to input into the database. But just to be clear: Am I missing something? The code above should actually define the value of ID, right? Especially since it seems that the code has no problem defining it when it's sent as a GET.

Johannes Ohlsson
  • 55
  • 1
  • 8

5 Answers5

3

The issue is because you are calling your updaterow() function from the click of your submit button, therefore the form is being submitted as it normally would as well as the AJAX submission. You need to change the type of your input to button.

Adding return false; or event.preventDefault() to your function won't work as it will only return that will only apply to the event on the button, not the form submission.

As an side, it's best to attach your events through javascript or jQuery, and not use the onclick HTML attribute.

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
  • @MaxiWheat: I don't think having `updaterow` return false will stop the `submit` event, as that's a different event on a different element. – gen_Eric Feb 17 '12 at 15:48
  • @MaxiWheat returning false from the function won't work in this instance as it is called via the button, not the form. – Rory McCrossan Feb 17 '12 at 15:49
  • @RoryMcCrossan: Actually, `return false;` from `updaterow` does work. `onclick` returning false will stop the default action of the submit button (submitting the form). http://jsfiddle.net/sSW3T/ – gen_Eric Feb 17 '12 at 15:57
  • @MaxiWheat: I take that back, you're right. (P.S. He'd have to change the `onclick` to `onClick='return updaterow();'`). – gen_Eric Feb 17 '12 at 15:57
  • 2
    So long as you add 'return' to the `onclick` attribute, you're right it seems to work – Rory McCrossan Feb 17 '12 at 15:59
0

That is because the form is submitting anyway (after your ajax call) In the last line, change this:

onClick='updaterow()'

to this:

onsubmit='updaterow(); return false;'
Mohamed Ibrahim
  • 190
  • 4
0
"<input type='submit' value='Spara' name='Submit".$row['ID']."' onClick='updaterow()' />"

Here's your issue. This is a submit button, so it submits the form normally after running your click handler.

You need to either change this to <input type='button', or block the submit event on the form.

"<form id='".$row['ID']."' onsubmit='return false;'>"
gen_Eric
  • 223,194
  • 41
  • 299
  • 337
  • I've changed it to this: It blocks the form from being sent to the current page. However for some reason the content of the form isn't defined. See my edits in the original post for an explaination. – Johannes Ohlsson Feb 24 '12 at 16:14
0

The form is being submitted as well as the AJAX request.

To stop this, attach a click event to the submit button:

$("#submitButtonId").click(function(event) {
           // stop the form from submitting
           event.preventDefault();
           $.ajax({
                url: 'updaterowajax.php',
                type:'POST',
                data: 'ID=' + ID + '&SupStatus=' + SupStatus +'&$OrderOther=' + OrderOther,
                success: function(result)
                {
                    console.log(result);
                }
           });
});
Flukey
  • 6,445
  • 3
  • 46
  • 71
0

It actually seems to be working now. I followed the advice to simply put "return updaterow()" on the submit button and it's working great!

Such a simple thing and still I've spent ages trying to find the answer. Thanks a lot! I now know where to ask my questions in the future!

EDIT: Jay, it worked! For about three tries. Made some changes in the form (I wanted it to submit more data) and it all went haywire. So I changed it back to when it was working, but now it's not working again... Could use a gun right now :P

And I know that the code is vulnerable, but it's supposed to only be used locally, so I haven't bothered about that part yet.

Johannes Ohlsson
  • 55
  • 1
  • 8