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
422 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
[X]
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
  • 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
Turn Insights Into Action

You’ve already invested in ITSM tools, chat applications, automation utilities, and more. Fortify these solutions with intelligent communications so you can drive business processes forward.

With xMatters, you'll never miss a beat.

 

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: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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 HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

695 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