Jump to content

Html dropdown menu insert into text box?


farbods0

Recommended Posts

Hi is there a way to have a drop down menu insert its dictionary value into a textbox? For example lets say dropdown shows , shape, tool. When you click the color option then "orange" would populate the textbox, if you select shape then "square" would populate, so on and so forth.


Also when you type something into the textbox the dropdown selected item disappears.



<!Drop down menu with search function->
<p>Load Previous Run or Load Test Plan ID.</p>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var dropDown = [" ","color", "shape", "tool"];
var dropDownID = [" ","orange", "square", "hammer"];
$("#dropDown").select2({
data: dropDown
});
});
</script>
</head>
<body>
<div>
<select id="dropDown" style="width:300px;">
<!-- Dropdown List Option -->
</select>
</div>
</body>

<!TRPID Input box->
<br><br> Testrail Plan ID:<input type="text" TTPID="PlanID"><br><br>

Link to comment
Share on other sites

 

All you have to do is make sure the index position of selection matches that of related index position in array 'dropDownID'

 $("#dropDown").change(function() {
                    $("#dropdownID").val(dropDownID[$("#dropDown option:selected").index()]);
                });

Sorry I placed that snippet into my code but nothing seems to have changed

Link to comment
Share on other sites

Show us what you have done, then! Just saying it still doesn't work does nothing to help find a solution.

<p>Load Previous Run or Load Test Plan ID.</p>
        <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                var dropDown = [" ","color", "shape", "tool"];
          var dropDownID = [" ","orange", "square", "hammer"];
                $("#dropDown").select2({
                  data: dropDown
                  
                  
                });
                 $("#dropDown").change(function() {
                    $("#dropdownID").val(dropDownID[$("#dropDown option:selected").index()]);
                });
            });
        </script>
    </head>
    <body>
        <div>
            <select id="dropDown" style="width:300px;">
            <!-- Dropdown List Option -->
            </select>
        </div>
    </body>

<!TRPID Input box->
<br><br>    Testrail Plan ID:<input type="text" TTPID="PlanID"><br><br>
Link to comment
Share on other sites

I now know the problem, but! I told you to validate and correct your code, and you gave the impression that you had and still had the problem, when in fact you had not done anything of the kind, so until you correct the code, i'm not going to give you the solution, you might get someone to inform you, but not me! Until you fix the code.

Link to comment
Share on other sites

I now know the problem, but! I told you to validate and correct your code, and you gave the impression that you had and still had the problem, when in fact you had not done anything of the kind, so until you correct the code, i'm not going to give you the solution, you might get someone to inform you, but not me! Until you fix the code.

I don't know what you mean by validating, I went through the validator link you sent, typed in the code and it says 3 invalid but I run the code and it still runs fine

Link to comment
Share on other sites

The code is not running fine if it's not doing what it's supposed to.

 

You have to fix the validation errors, pages should always be valid HTML.

 

Firstly, this is not a valid HTML comment:

<!TRPID Input box->

Some browsers may print that text, others might figure out you meant to write a comment. Some of them might interpret it as a document type declaration which would actually screw up the rendering of your CSS.

 

This is how an HTML comment has to be written.

<!-- TRPID Input box -->

There are other issues in your HTML as well.

Link to comment
Share on other sites


<!DOCTYPE html>

 

<p>Load Previous Run or Load Test Plan ID.</p>

<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

var dropDown = [" ","color", "shape", "tool"];

var dropDownID = [" ","orange", "square", "hammer"];

$("#dropDown").select2({

data: dropDown

 

 

});

$("#dropDown").change(function() {

$("#dropdownID").val(dropDownID[$("#dropDown option:selected").index()]);

});

});

</script>

</head>

<body>

<div>

<select id="dropDown" style="width:300px;">

<!-- Dropdown List Option -->

</select>

</div>

</body>

 

<!--TRPID Input box-->

<br><br> Testrail Plan ID:<input type="text" TTPID="PlanID"><br><br>

Link to comment
Share on other sites

Validation states at https://validator.w3.org/ 5 errors remain, it gives description of what they are, I suggest you go through tutorials on html to know the proper layout of the html document, until then, no solution.

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title>
  Test Modify
  </title>
</head>
<body>
  <p>Load Previous Run or Load Test Plan ID.</p>
    		<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
    		<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />
    		<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
        <!--Drop down menu with search function-->
        <script type="text/javascript">
    			$(document).ready(function() {
    				var dropDown = [" ","Run1", "Run2", "Testplan", "Rails", "Europa"];
            var dropDownID = [" ","111111", "222222", "333333", "444444", "555555"];
    				$("#dropDown").select2({
    				  data: dropDown
    				});
    			});
    		</script>


    		<div>
    			<select id="dropDown" style="width:300px;">
    			<!-- Dropdown List Option -->
    			</select>
    		</div>





<!--TRPID Input box-->
<br><br>	Testrail Plan ID:<input type="text"><br><br>

<!--Makes the window size smaller-->
<script type="text/javascript">
    window.resizeTo(500,300);
</script>

<!--Function for ready to call test plan-->
<script type="text/javascript">
var sUserName="";
function fnCallDialog()
{
 showModelessDialog("testLaunch.hta",window,"status:false;dialogWidth:300px;dialogHeight:300px");

}
</script>


  <input type= "button" onclick="location.href='http://linux28.aquantia.com/testrail/index.php?/plans/view/testPlanID';" value="Open Testrail Test Plan for Modiciation"/><br><br>
		<input type= "button" value="Ready to Launch Test Plan"   onClick="fnCallDialog()">


</body>
</html>

Sorry about that, its just my first time doing html, but I fixed all the errors now but I still can't figure out where to play that snippet of code you sent

Edited by farbods0
Link to comment
Share on other sites

The link element as it is, should be placed in between <head> and </head> area, but since it passed, but! I want you to move it.

   <script type="text/javascript">
    			$(document).ready(function() {
    				var dropDown = [" ","Run1", "Run2", "Testplan", "Rails", "Europa"];
            var dropDownID = [" ","111111", "222222", "333333", "444444", "555555"];
    				$("#dropDown").select2({
    				  data: dropDown
    				});
//added code by dsonesuk

$("#dropDown").change(function() { 
$("#dropdownID").val(dropDownID[$("#dropDown option:selected").index()]); 
});

    			});
    		</script>

This from above highlighted in red

 

$("#dropdownID").val(dropDownID[$("#dropDown option:selected").index()]);

 

is a reference to a ID attribute value where '#' specifies that it is a id name, whereas '.' a period or full stop character used here '.something' refers to a class name.

 

This means you need to add a id ref of 'dropdownID' on that element you wish to target to add the specific relative value from array, like so

Testrail Plan ID:<input type="text" id="dropdownID"><br><br>
Link to comment
Share on other sites

 

The link element as it is, should be placed in between <head> and </head> area, but since it passed, but! I want you to move it.

   <script type="text/javascript">
    			$(document).ready(function() {
    				var dropDown = [" ","Run1", "Run2", "Testplan", "Rails", "Europa"];
            var dropDownID = [" ","111111", "222222", "333333", "444444", "555555"];
    				$("#dropDown").select2({
    				  data: dropDown
    				});
//added code by dsonesuk

$("#dropDown").change(function() { 
$("#dropdownID").val(dropDownID[$("#dropDown option:selected").index()]); 
});

    			});
    		</script>

This from above highlighted in red

 

$("#dropdownID").val(dropDownID[$("#dropDown option:selected").index()]);

 

is a reference to a ID attribute value where '#' specifies that it is a id name, whereas '.' a period or full stop character used here '.something' refers to a class name.

 

This means you need to add a id ref of 'dropdownID' on that element you wish to target to add the specific relative value from array, like so

Testrail Plan ID:<input type="text" id="dropdownID"><br><br>

Hmm strange I did it like you asked, (even changed the link) but still nothing gets populated in the Plan ID: box

https://jsfiddle.net/vba66zds/2/

Link to comment
Share on other sites

Validate or look at the id value carefully, it has to match exactly what jquery refers to without the hash at beginning, and you need to close the input tag, which is the main reason the id value is wrong, also using js fiddle you have place specific code in its respective section.

Link to comment
Share on other sites

Validate or look at the id value carefully, it has to match exactly what jquery refers to without the hash at beginning, and you need to close the input tag, which is the main reason the id value is wrong, also using js fiddle you have place specific code in its respective section.

Wow can't believe that was the reason. Thank you so much it works now!! Now need to figure how to remove the dropdown selection if the user types into the input box

Edited by farbods0
Link to comment
Share on other sites

You would use '.keypress' which will detect then trigger code to hide dropdown, but the jquery select2 library uses a mixture of created span and ul,li elements to produce the customized dropdown, so you would have to hide() or fadeOut() those elements parent element instead.

Link to comment
Share on other sites

You would use '.keypress' which will detect then trigger code to hide dropdown, but the jquery select2 library uses a mixture of created span and ul,li elements to produce the customized dropdown, so you would have to hide() or fadeOut() those elements parent element instead.

$(document).ready(function(){
$("input").keypress(function(){
Along these lines?
Link to comment
Share on other sites

It wouldn't would it '// code to hide custom dropdown' is just a comment for you to add the code related to hiding custom dropdown it doesn't do anything else, if you add in its place

 

alert('keypressed');

 

you should get a annoying alert showing 'keypressed' everytime you press a character key in the inputs box

Link to comment
Share on other sites

It wouldn't would it '// code to hide custom dropdown' is just a comment for you to add the code related to hiding custom dropdown it doesn't do anything else, if you add in its place

 

alert('keypressed');

 

you should get a annoying alert showing 'keypressed' everytime you press a character key in the inputs box

Hmm I tried that but it just deletes anything you type into the inputbox. What I was looking for was to clear the dropdown selection if a user starts typing into the input box.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...