Display jquery values in separate input fields

Question

I am trying to display the value of #response from the code below into the input fields. Here is the code.

<script>
        $(document).ready(function() {

            $("#productID").change(function() {
                //alert($('#productID option:selected').val());
                var pId = $('#productID').val();

                $.get('updateProduct', {
                    productID: pId.trim()    //using trim to get rid of any extra invisible character from pId                    
                },
                function(responseText) {
                  $('#response').val(responseText);                       

                });

            });
        });
    </script>

$('#response').val(responseText); --> If this contains two values then is there a way to retrieve those values separately? what I would like to do is display values separately into three separate input fields.

 $('#response').val(responseText);

This could contain values such as, Product Description, Product comments, Product type. Those values are coming from the servlet. After receiving those values they will be displayed into three separate input field.

At the moment if I do the following,

<input type="text" id="response"/>

This will display all three values in the same input field. Any idea how could I display three values in three separate input fields? Thanks in advance

input is coming from a servlet page. Inside the "doGet" i have the following code.

 for (Product8339384 ps1 : ps) {
                comments = ps1.getComments();
                description =ps1.getDescription();                    
            }              
            out.println(comments);  
            out.println(description);

Output: The output should be displayed inside the two separate input fields. which will display comments and description. both those values received from the DB.

input is coming from servlet which is getting value from DB table. In servlet inside the "doGet" I have the following code, for (Product8339384 ps1 : ps) { comments = ps1.getComments(); description =ps1.getDescription(); } out.println(comments); out.println(description); — ron
– ron, Commented Aug 21, 2014 at 11:47

Terje Nygård · Accepted Answer · 2014-08-21 11:57:02Z

1

I suggest you loop through the result (ResponsText) and split up the data (hopefully you have a seperator there ?) into a ex. Javascript Array [].

When you have a way to know how many items there is in the array you can ex. dynamically insert input elements using JQuery like this :

$(InputsWrapper).append('<div><input type="text" name="mytext[]" id="field_'+     FieldCount +'" value="Text '+ FieldCount +'"/></div>');

This way, you can use each item you get from your Array and insert a new Input element, and assign the data to it inside the $.each (JQuery) or for-loop (Javascript).

You can also loop through your result like this if you dont want the temporary array-way :

$.each(responseText.split(','), function(index, value) { 
  alert(index + ': ' + value); 
});

.... given you have something to split on :)

Hope this give you something more to work on...

answered Aug 21, 2014 at 11:57

Terje Nygård

1,2556 gold badges27 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ron Over a year ago

Thanks. I will have a look.

Terje Nygård Over a year ago

do so :) scream out if you need any further examples or details :)

ron Over a year ago

I think I do need bit more help. The example code I posted it is inside the header and I would like to access the JQuery value inside my html body tag. Not sure the example you showed me, how that is going to work.

ron · Accepted Answer · 2014-08-21 14:04:17Z

1

Here is the solution. The Jquery code is inside the header.

 $(document).ready(function() {
            $("#productID").change(function() {                   
                var pId = $('#productID').val();
                $.get('updateProduct', {
                    productID: pId.trim()    //using trim to get rid of any extra invisible character from pId                    
                },
                function(responseText) {                       
                    $.each(responseText.split(','), function(index, value) {
                        if(index === 0){
                          $('#comments').val(value);  
                        }
                        else if(index === 1){                                
                             $('#description').val(value);                                 
                        } 
                    });

                });
            });
        });

Then inside the html body.

<input type="text" id="comments" name="id"/>
<input type="text" id="description" name="id"/>

answered Aug 21, 2014 at 14:04

ron

2912 gold badges4 silver badges14 bronze badges

1 Comment

ron Over a year ago

Thanks to you. I just follow your lead :)

Collectives™ on Stack Overflow

Display jquery values in separate input fields

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related