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
406 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
Comment Utility
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
Comment Utility
Perfect...  Thanks...  ;-)
0
 

Author Comment

by:morako
Comment Utility
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
Comment Utility
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
Comment Utility
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
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 

Author Comment

by:morako
Comment Utility
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
Comment Utility
Great! Good catch. Forgot about actually setting the input. :)
0
 

Author Comment

by:morako
Comment Utility
Thanks again...  ;-)
0
 

Author Comment

by:morako
Comment Utility
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
Comment Utility
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
Comment Utility
Thanks...   ;-)
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

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 Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
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…

772 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

10 Experts available now in Live!

Get 1:1 Help Now