CODEWITHSUNDEEP
javascriptjqueryajaxformssubmit
MomasVII
MomasVII

Reputation: 5061

Posting with ajax not working

So i have a form like so:

 <form>
     <input type="submit" value="X" id="deleteButton" onclick="ConfirmChoice(<?php echo $id; ?>)" />
 </form>

and a function like this: 

<script type='text/javascript'>
function ConfirmChoice(theid) 
{ 
    var dataString = 'id=' + theid;
    answer = confirm("Are you sure you want to delete this song?");
    if (answer !=0) {
        $.ajax
        ({
            type: "POST",
            url: "deleteSong.php",
            data: dataString,
        });
    } 
}

</script>

So basically I want it to delete whatever they click on from my database which deleteSong will take care of. It gives the id of the song and as far as I know should confirm deletion then delete it right? Any help would be appreciated. Thanks

Upvotes: 0

Views: 60

Answers (3)

GMA
GMA

Reputation: 6096

It's hard to answer this without knowing where exactly the problem is. Is deleteSong.php working correctly?

Like others have said you should change the input type to button or return false from your function, otherwise the browser will try and submit the form in the normal manner but as you haven't specified an action within the <form> tag it won't work properly.

Personally, I would do things quite differently:

HTML:

 <input type="button" value="<?php echo $id ?>" id="deleteButton">

Javascript:

 $(document).ready(function () {
     $('#deleteButton').click(function () {
         var answer = confirm("Are you sure you want to delete this song?");
         if (!answer) {
             return false;
         }
         var data = 'id=' + $(this).val();
         $.ajax({
             type: 'POST',
             url: 'deleteSong.php',
             data: dataString,
             success: function (response) {
                 // response will contain the output from your php script.
                 // Do something with it here. If you just want to see what it
                 // says, do something like:
                 console.log(response);
                 // then look in the console (view > javascript console in chrome)
             }
         });
     });
});

Just to explain what I'm doing here (sorry if I'm telling you things you already know, I want to be as explicit as possible for anyone who might be reading this in the future:)

  • I enclose the whole thing in $(document).ready(function() { ... } ); so it only gets run when the page is finished loading, other wise you might end up trying to bind functions to the click action on a button that doesn't exist yet.
  • if (answer !=0) is redundant, you can just write if (!answer) as any positive integer will evaluate to true
  • I included a success callback above which might help you in debugging.

Is there only going to be one 'delete' button on the entire page? Or is there going to be a delete button next to every song? If it's the latter, you'll have to give each button a different ID, not just deleteButton because all IDs must be unique.

If the above doesn't work, are you sure that jQuery has loaded correctly? To check, type jQuery in the console, if you don't get an error then you're fine. The other possibility is that something's wrong with your deleteSong.php script but I can't help you there without seeing it.

Upvotes: 0

CarlosB
CarlosB

Reputation: 91

Also because your are not setting it, the request to the server is in json which in your case is badly formed.

Try something like this:

 var dataString = "{'id'= '"+ theid + "'}";

this should make it work :)

Upvotes: 0

Ali
Ali

Reputation: 595

change it from

input type="submit" to 

input type="button"

Upvotes: 1

Related Questions