Thread: Problem with adding value to form textbox using jQuery

I am going out of my mind with what I would typically believe to be a trivial problem...

I have a page with a form. In the form I have a selection box and a few text boxes. When I change the selection box value to zero it should clear the text boxes, and when I change the selection box to any other value it sets the text boxes to other values (which it gets from an ajax call). This all works fine using the following code which I call from my jQuery document.ready event handler.

Code:

if($("select#myselboxID").val() != 0){ // if my selection box value is not zero
            
                $.ajax({ type: "POST", url: "includes/ajax/getDetails.php?id=" + $("select#myselboxID").val(), dataType: "xml", success: function(xml){                    
                    $("form input#name").attr("Value", $(xml).find('name').text());                     
                    $("form input#phone").attr("Value", $(xml).find('phone').text());
                    $("form input#email").attr("Value", $(xml).find('email').text());
                    $("form textarea#_address").text($(xml).find('address').text());
                }});
            }
            else{ // if my selection box value is zero
                $("form input#name").attr("Value", "");                     
                $("form input#phone").attr("Value", "");
                $("form input#email").attr("Value", "");
                $("form textarea#address").text("");
            }

So with the above I can make my form values clear and change to other values etc to my hearts content. However if I go down and manually edit a text box value and then change the value in the selection box, the value I manually set the textbox to stays there and only the other non edited textbox fields change. When really I want all textbox entries to change regardless of whether or not I manually modified them.

Could someone please explain to me why this is happening? I feel like there is something significant about how a browser works with form values that I'm clearly unaware of.

Many Thanks

I have something that's doing something similar (but not exactly the same). I use:

Code:

    $('.display_reply').click(function(){ // if a button is clicked
         $('textarea, :text').val('');       // empty a text area & all text boxes
    });

That will clear everything in my form (1 textarea & 3 input text boxes) when a button with that class is clicked.

Have you tried using .val() instead of setting the .attr() ?

Also, how is the code you posted being triggered? Could it be to do with the event you're using when the select box is changed?

Cheers davkell for your reply

how is the code you posted being triggered?

Sorry I should have mentioned that the code fires on the selection box change event. This event does fire at the appropriate times, which I have proven to myself by simply inserting alert() calls in the code block.

I just tried using val() to init the values of the form components and it worked a charm!! - fair play

So there's a difference between using val("") and .attr("Value", "") it would appear. At one level they work the same and then on another, they don't.

All the best

No bother, good to see it worked for you!