CODEWITHSUNDEEP
javascriptphphtmlmysql
user3311499
user3311499

Reputation: 69

Pass text data from select box

can anyone help me how to pass the selected text from all of my select(box) to their specific (textboxes). Because the values of all the selectbox are all id integers and I'm planning to save the text of each selectbox that I select to the database.

My script to pass selected text from selectbox to textbox is not working can anyone help me make it work?

html:

<form method="post">
Caraga Region: <select name="region" id="region"></select>
Municipalities: <select name="town" id="town"></select>
Unique ID: <select name="uniq_id" id="uniq_id"></select>
Position: <select name="position" id="position"></select> <br />
Salary Grade: <select name="salary_grade" id="salary_grade"></select>
Salary: <select name="salary" id="salary"></select> <br />
<br />
<br />
Transfer Selected Text to textbox:<br />
<input id="region" name="reg" type="text"><br />
<input id="town" name="t" type="text" ><br />
<input id="uniq_id" name="u" type="text" ><br />
<input id="position" name="p" type="text" ><br />
<input id="salary_grade" name="sg" type="text" ><br />
<input id="salary" name="s" type="text" ><br />
</form>

script code to fill data in the selectbox:

<script type="text/javascript">
$( document ).ready(function() { 
   $("#region").jCombo({ url: "getRegion.php" } );
   $("#town").jCombo({ url: "getTown.php?townid=", parent: "#region", selected_value : '510' } );
   $("#uniq_id").jCombo({ url: "getID.php?unqid=", parent: "#town", selected_value : '150' } );
   $("#position").jCombo({ url: "getPosition.php?posid=", parent: "#uniq_id", selected_value : '150' } );
   $("#salary_grade").jCombo({ url: "getSalary_Grade.php?sgid=", parent: "#position", selected_value : '150' } );
   $("#salary").jCombo({ url: "getSalary.php?salaryid=", parent: "#salary_grade", selected_value : '150' } );
});
</script>

script to pass data from selected text from each selectbox to specific textbox:

<script type="text/javascript">
$( document ).ready(function() { 
$("#region").document.getElementByID("region").options[document.getElementByID("region").selectedIndex].text
$("#town").document.getElementByID("town").options[document.getElementByID("town").selectedIndex].text
$("#uniq_id").document.getElementByID("uniq_id").options[document.getElementByID("uniq_id").selectedIndex].text
$("#position").document.getElementByID("position").options[document.getElementByID("position").selectedIndex].text
$("#salary_grade").document.getElementByID("salary_grade").options[document.getElementByID("salary_grade").selectedIndex].text
$("#salary").document.getElementByID("salary").options[document.getElementByID("salary").selectedIndex].text
});
</script>

Upvotes: 1

Views: 604

Answers (2)

Tom Faltesek
Tom Faltesek

Reputation: 2818

You should really make sure your IDs are unique. I've added a prefix to them so they are valid.

<form method="post">
Caraga Region: <select name="region" id="s_region"></select>
Municipalities: <select name="town" id="s_town"></select>
Unique ID: <select name="uniq_id" id="s_uniq_id"></select>
Position: <select name="position" id="s_position"></select> <br />
Salary Grade: <select name="salary_grade" id="s_salary_grade"></select>
Salary: <select name="salary" id="s_salary"></select> <br />
<br />
<br />
Transfer Selected Text to textbox:<br />
<input id="t_region" name="reg" type="text"><br />
<input id="t_town" name="t" type="text" ><br />
<input id="t_uniq_id" name="u" type="text" ><br />
<input id="t_position" name="p" type="text" ><br />
<input id="t_salary_grade" name="sg" type="text" ><br />
<input id="t_salary" name="s" type="text" ><br />
</form>

<script type="text/javascript">
$( document ).ready(function() { 
    $("#t_region").val($( "#s_region option:selected" ).text());
    $("#t_town").val($( "#s_town option:selected" ).text());
    $("#t_uniq_id").val($( "#s_uniq_id option:selected" ).text());
    $("#t_position").val($( "#s_position option:selected" ).text());
    $("#t_salary_grade").val($( "#s_salary_grade option:selected" ).text());
    $("#t_salary").val($( "#s_salary option:selected" ).text());
});
</script>

Upvotes: 0

Kovo
Kovo

Reputation: 1717

I think you misunderstand how JQuery selectors work. Also, you have duplicate IDs in your HTML. This is not valid HTML and will cause issues for you.

The following will work for you:

<form method="post">
Caraga Region: <select name="region" id="region"></select>
Municipalities: <select name="town" id="town"></select>
Unique ID: <select name="uniq_id" id="uniq_id"></select>
Position: <select name="position" id="position"></select> <br />
Salary Grade: <select name="salary_grade" id="salary_grade"></select>
Salary: <select name="salary" id="salary"></select> <br />
<br />
<br />
Transfer Selected Text to textbox:<br />
<input id="region2" name="reg" type="text"><br />
<input id="town2" name="t" type="text" ><br />
<input id="uniq_id2" name="u" type="text" ><br />
<input id="position2" name="p" type="text" ><br />
<input id="salary_grade2" name="sg" type="text" ><br />
<input id="salary2" name="s" type="text" ><br />
</form>


<script type="text/javascript">
$( document ).ready(function() { 
$("#region2").attr('value', $('#region').text());
//etc...
});
</script>

Upvotes: 1

Related Questions