Problem with adding value to form textbox using jQuery

Discussion in 'Coding Help' started by jason, Oct 21, 2008.

Tags:
  1. jason

    jason New Member

    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 ;)
     
  2. davkell

    davkell New Member

    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?
     
  3. jason

    jason New Member

    Cheers davkell for your reply ;)

    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 :D
     
  4. davkell

    davkell New Member

    No bother, good to see it worked for you!
     

Share This Page