Question

I’m playing around with jquery and made a form that submits information without a page refresh but in the tutorial I followed it must first display a form for people to edit but what I want to do is slightly different.

I want to display a users profile page and then have a little edit link beside each item which causes a text field to appear if they click edit. I believe I can submit the form without a refresh but how can I have a form appear when the ‘edit’ button is clicked without refreshing?

Any idea of how I can accomplish this or even better what should I be searching to learn how to do this? I went through the sample items on jquery site and none of them seemed to hide/unhide by clicking.

Answer 1

Here is a quick example of how I’d handle the concept, I’d follow it up with posting and validation and all else a little server-side scripting etc, but this can act as your stepping stone overall. Pretty much all you got to remember is javascript/jquery is all smoke and mirrors since its all handled client-side you essentially need to work with what you have on screen be it hidden or otherwise.
In this case you have 2 elements one showing by default while the other hides, you make a logic that hides one over the other when one is chosen, and do what you need to respectively with either.

<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>


<script type="text/javascript">
$('#editvalue').click(function(e){$('#storedvalue').hide();$('#altervalue').show();});
$('#savevalue').click(function(e){
   var showNew = $('#changevalue').val();
   $('#altervalue').hide();
   $('#storedvalue').show();
   $('#storedvalue span').text(showNew);
});
</script>

DEMO