Question

I have code that allows a field to be edited via a input thats hidden/shown when a button is clicked. It works fine but it only locally changes the data on the page(no updates to my database. Which means when a user edits their profile its saved on the database). I know how to submit a form without a refresh using jquery but I don’t understand how to combine the two so someone can edit a field(in place) and then when they click done it submits it without a refresh(like facebook).

The issue is using the code below the ‘edit’ button(which is just a anchor) turns into ‘save’ button then back into ‘edit’. I thought for me to submit the field, I need the button to be a submit button?

Here’s the code I’m using to do the in place editing:

$('#editvalue').click(function(e){$('#storedvalue').hide();$('#altervalue').show();});
$('#savevalue').click(function(e){
   var showNew = $('#changevalue').val();
   $('#altervalue').hide();
   $('#storedvalue').show();
   $('#storedvalue span').text(showNew);
});

And I learned how to submit a form without a refresh from here a tutorial. I’m not sure how to combine them for the effect I want but I’m not sure if this is even the right way to approach the problem. Is there a way take the showNew variable and submit it as a post without the user clicking a submit button(maybe triggered when the user clicks save)?

I’m super new to jquery and web programming so sorry if I’m not explaining this right. If it helps here’s the html that works with the js code above:
PHP jQuery Example:

<div id="wrapper">
   <div id="container">
      <div id="storedvalue"><span>Hello</span> [<a href="javascript:void(0);" id="editvalue">edit</a>]</div>
      <div id="altervalue" style="display:none;"><input type="text" name="changevalue" id="changevalue" value="Hello"> [<a href="javascript:void(0);" id="savevalue">save</a>]</div>
   </div>
</div>

Answer 1

If I understand you correctly, simply do an AJAX post as described at http://api.jquery.com/jQuery.post/ inside your $(‘#savevalue’).click(function(e){…})` function. something like this:

$('#editvalue').click(function(e){$('#storedvalue').hide();$('#altervalue').show();});
$('#savevalue').click(function(e){
    var showNew = $('#changevalue').val();
    $('#altervalue').hide();
    $.post("test.php", { val: showNew } );
    $('#storedvalue').show();
    $('#storedvalue span').text(showNew);
});

This would post the single field to the test.php page. You can (and should) add success/failure callbacks aswell to see if everything went as expected.

Of course, this value will have to be handled on the PHP side for the rest.

EDIT: example with more generic code, including html generation at http://jsfiddle.net/X8Rsg/4/