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
409 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
 

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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Hi all! Recently there was EE question and the person wanted to have a multi-column textbox <div> selection, so as a first step to answer I provided a link but that was not complete with JavaScript selection, but had a good style sheet. So as a ques…
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…
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…

863 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

Need Help in Real-Time?

Connect with top rated Experts

25 Experts available now in Live!

Get 1:1 Help Now