Link to home
Start Free TrialLog in
Avatar of morako
morakoFlag for United States of America

asked on

How to populate the text field with a select dropdown so that the user can complete the rest of the info after the initial select.

How to pre-populate the text field with the contents from a select dropdown value so that the user can complete the rest of the info after the initial select. using jQuery 11



<select class="form-control simpleselect" id-"select">
    <option value="http://website1.com/?id=">option1</option>
    <option value="http://another.website2.com/?id=">option2</option>
    <option value="http://adifferent.website3.com/?id=">option3</option>
</select>

<input type="text" class="form-control" name="" value="" id="field"/>
ASKER CERTIFIED SOLUTION
Avatar of quizwedge
quizwedge
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of morako

ASKER

Perfect...  Thanks...  ;-)
Avatar of morako

ASKER

Quick question...  if I also want to pass the displayed value in another field how can i do this?

So pass the URL to field and pass the displayed value  "option3 to another field.


<option value="http://adifferent.website3.com/?id=">option3</option>
Avatar of morako

ASKER

I'm thinking something like this...

<select class="form-control simpleselect" id-"select">
    <option id="option1" value="http://website1.com/?id=">option1</option>
    <option id="option2" value="http://another.website2.com/?id=">option2</option>
    <option id="option3"  value="http://adifferent.website3.com/?id=">option3</option>
</select>

<script>
$(document).ready(function(){
    $("#select").change(function(value, id){
        $("#field").val($("#select").val(value));
            $("#source").val($("#select").val(id));
    });
});
</script>

<input type="text" class="form-control" name="" value="" id="field"/>

<input type="text" class="form-control" name="" value="" id="source"/>
Below
$("#field").val($("#select").val());

Open in new window

try adding
$("#select option:selected").text();

Open in new window


I didn't double check it, but it looks about right.
Avatar of morako

ASKER

This worked....  Thanks...  ;-)

<script>
$(document).ready(function(){
    $("#select").change(function(){
        $("#field").val($("#select").val());
            $("#source").val($("#select option:selected").text());
    });
});
</script>
Great! Good catch. Forgot about actually setting the input. :)
Avatar of morako

ASKER

Thanks again...  ;-)
Avatar of morako

ASKER

Sorry to expand on this question again.

lats say on the #field instead of creating a value in the field you wanted to populate the placeholder, how would you do this.

<input type="text" class="form-control" name="" value="" id="field" placeholder=""/>

placeholder="the value"

Thanks in advance.
I'm on my phone but check out .attr at http://api.jquery.com/attr/ You'll want to pass placeholder for the attribute. Note, IE 9 (or 8? I can't remember now) and below don't support placeholder. For that you would need to use a jQuery plugin or some other workaround. Lots exist so it would be searching for one that meets your needs.
Avatar of morako

ASKER

Thanks...   ;-)