CODEWITHSUNDEEP
jqueryajaxformspost
Andelas
Andelas

Reputation: 2052

jquery ajax not setting variable to POST

I'm stumped. I'm using jquery and ajax to POST some fields from a form to the database.

This is for a "edit form" - so all the fields are pre-filled with data existing in the mysql database. I'm passing input from 4 fields, and it only works for 2 of them. Here's the HTML

<form id="editSubmit" method="post" name="editSubmit" action="" enctype="multipart/form-data">
                    <input type="hidden" id="newsID" name="newsID" value="<?=$newsID;?>">
                    <input type="hidden" id="authorID" name="authorID" value="<?=$news['editorID'];?>">
                    <label for="postTitle">Title</label><br />
                    <input type="text" name="postTitle" id="postTitle" class="text" size="20" value="<?=$postTitle;?>"/><br />
                    <label for="postText">Post Text</label><br />
                    <textarea name="postText" id="postText" class="textarea"><?=$postText;?></textarea>                 <br /><br />
                    <button type="submit">Submit Edit </button>
                    <input type="button" onClick="closeEdit()" value="Cancel">
</form>

Now here's the code I'm using to POST this to the page. 

$("form#editSubmit").submit(function() {

// we want to store the values from the form input box, then send via ajax below
var newsID     = $('#newsID').attr('value');
var postTitle     = $('#postTitle').attr('value');
var postText   = $('#postText').attr('value'); 
postText = postText.replace(/&/g,'%26');
var authorID  = $('#authorID').attr('value'); 

$.ajax({
        type: "POST",
        url: "news/editNews.php",
        data: "newsID="+ newsID + "&postTitle="+ postTitle + "&postText=" + postText + "&authorID=" + authorID,
        success: function(){
            $('form#editSubmit').fadeOut('slow');
            $('div.success').fadeIn();
            }
    }); // End .ajax function
return false;
}); //End submit function()

This code is successfully sending over the authorID and newsID, but no luck with the postTitle or postText. I can't see what I'm doing wrong. Maybe I'm missing something?

Also, I'm a totally newbie to ajax/jquery - so I'd appreciate any tips if something looks weird in the code. It's been a lot of trial and error to get this far.

Upvotes: 0

Views: 4419

Answers (3)

tvanfosson
tvanfosson

Reputation: 532445

For your text inputs and textarea, you want to use the val() method instead of attr('value'). Using attr('value') is correct for hidden inputs. Even better, just use $(this).serialize() as your data parameter.

$("form#editSubmit").submit(function() {

    var $form = $(this);
    $.ajax({
                type: "POST",
                url: "news/editNews.php",
                data: $form.serialize(),
                success: function(){
                        $('form#editSubmit').fadeOut('slow');
                        $('div.success').fadeIn();
                        }
    }); // End .ajax function
    return false;
}); //End submit function()

Upvotes: 2

Phil.Wheeler
Phil.Wheeler

Reputation: 16848

You dont' need to use $('form#editSubmit') - $('#editSubmit') will do just fine. You can retrieve the values from your fields using the val() function:

var newsID     = $('#newsID').val();
var postTitle     = $('#postTitle').val();
var postText   = $('#postText').val();

The other thing I notice is that your dataType isn't defined. If you're sending this as an JSON object, you'd be best to provide the dataType, contentType and present your actual data as separate object properties:

$.ajax({
                type: "POST",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                url: "news/editNews.php",
                data: "{'newsID':" newsID + ",'postTitle':'"+ postTitle + "','postText':'" + postText + "','authorID':" + authorID + "}",
                success: function(){
                        $('form#editSubmit').fadeOut('slow');
                        $('div.success').fadeIn();
                        }
        });

You could also look into the serialize() or serializeArray() functions.

Upvotes: 0

cletus
cletus

Reputation: 625007

Do this:

$.ajax({
  type: "POST",
  url: "news/editNews.php",
  data: {
    newsID: newsID,
    postTitle: postTitle,
    postText: postText,
    authorID: authorID
  },
  success: function() {
    $('form#editSubmit').fadeOut('slow');
    $('div.success').fadeIn();
  }
});

Let jQuery do the heavy lifting with respect to escaping and so on. Passing an anonymous object to the data field is the preferred approach.

Also do this:

$("...").val();

instead of:

$("...").attr("value");

Lastly instead of:

<input type="button" onClick="closeEdit()" value="Cancel">

The more "jquery way" is:

<input type="button" id="cancel" value="Cancel">

with:

$(function() {
  $("#cancel").click(closeEdit);
});

Upvotes: 1

Related Questions