morako
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"/>
<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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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>
So pass the URL to field and pass the displayed value "option3 to another field.
<option value="http://adifferent.website3.com/?id=">option3</option>
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(functi on(value, id){
$("#field").val($("#select ").val(val ue));
$("#source").val($("#selec t").val(id ));
});
});
</script>
<input type="text" class="form-control" name="" value="" id="field"/>
<input type="text" class="form-control" name="" value="" id="source"/>
<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(functi
$("#field").val($("#select
$("#source").val($("#selec
});
});
</script>
<input type="text" class="form-control" name="" value="" id="field"/>
<input type="text" class="form-control" name="" value="" id="source"/>
Below
I didn't double check it, but it looks about right.
$("#field").val($("#select").val());
try adding$("#select option:selected").text();
I didn't double check it, but it looks about right.
ASKER
This worked.... Thanks... ;-)
<script>
$(document).ready(function (){
$("#select").change(functi on(){
$("#field").val($("#select ").val());
$("#source").val($("#selec t option:selected").text());
});
});
</script>
<script>
$(document).ready(function
$("#select").change(functi
$("#field").val($("#select
$("#source").val($("#selec
});
});
</script>
Great! Good catch. Forgot about actually setting the input. :)
ASKER
Thanks again... ;-)
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.
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.
ASKER
Thanks... ;-)
ASKER