Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

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.

Posted on 2014-04-17
11
417 Views
Last Modified: 2014-04-19
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"/>
0
Comment
Question by:morako
  • 7
  • 4
11 Comments
 
LVL 14

Accepted Solution

by:
quizwedge earned 500 total points
ID: 40007716
You need to change the - to = by the id of the dropdown

<select class="form-control simpleselect" id="select">

Open in new window


Then, add the following Javascript code

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

Open in new window


This will wait until the document is ready, then on a change in value on the dropdown, it will take the value of the dropdown and put it in the input.
0
 

Author Closing Comment

by:morako
ID: 40007841
Perfect...  Thanks...  ;-)
0
 

Author Comment

by:morako
ID: 40009113
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>
0
Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

 

Author Comment

by:morako
ID: 40009285
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"/>
0
 
LVL 14

Expert Comment

by:quizwedge
ID: 40009538
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.
0
 

Author Comment

by:morako
ID: 40009919
This worked....  Thanks...  ;-)

<script>
$(document).ready(function(){
    $("#select").change(function(){
        $("#field").val($("#select").val());
            $("#source").val($("#select option:selected").text());
    });
});
</script>
0
 
LVL 14

Expert Comment

by:quizwedge
ID: 40009986
Great! Good catch. Forgot about actually setting the input. :)
0
 

Author Comment

by:morako
ID: 40010117
Thanks again...  ;-)
0
 

Author Comment

by:morako
ID: 40010630
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.
0
 
LVL 14

Expert Comment

by:quizwedge
ID: 40010790
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.
0
 

Author Comment

by:morako
ID: 40010808
Thanks...   ;-)
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question