Copy values from drop-down list to textbox 2

[omoo]

I have the following form with 2 columns in each line. 1st column is a empty text box which allow user to key in text and the 2nd column is a drop-down box which allow user to choose the existing records from database.

I need to copy the selected record from the drop-down box to the empty textbox without submitted the entire form. Because at the end of the form, I have to submit all the text in the textbox together. In the case where the user input a name in the textbox and select a value in the drop-down list, the value in the textbox will be taken.

<form name="insert_subcon_ratings_records" method="Post" action="insert_subcon_ratings_records.asp" onsubmit="return validate_form2(this)">
<table>
<tr><td width=180><font color=red>*</font>Subcontractor Name: </td>
<td><input type=text name=NAME size=50>
<select name="name">
    <%
    sql1="SELECT DISTINCT NAME from subdb_subcon_rating"
    Set rs1 = OraDatabase.Execute(sql1)
    response.write ("<option value=""""></option>")
    Do While Not rs1.EOF
        IF Request("name") = rs1("NAME") THEN
             response.write ("<option value="""&rs1("NAME")&""" selected >"&rs1("NAME")&"</option>")
        ELSE
             response.write ("<option value="""&rs1("NAME")&""">"&rs1("NAME")&"</option>")
        END IF
    rs1.MoveNext
    Loop
    %>
</select>
</td></tr>
<tr><td><font color=red>*</font>Year: </td>
<td><input type=text name="YEAR" size="50">
<select name="year">
    <%
    sql2="SELECT DISTINCT YEAR from subdb_subcon_rating"
    Set rs2 = OraDatabase.Execute(sql2)
    response.write ("<option value=""""></option>")
    Do While Not rs2.EOF
        IF Request("year") = rs2("YEAR") THEN
             response.write ("<option value="""&rs2("YEAR")&""" selected >"&rs2("YEAR")&"</option>")
        ELSE
             response.write ("<option value="""&rs2("YEAR")&""">"&rs2("YEAR")&"</option>")
        END IF
    rs2.MoveNext
    Loop
    %>
</select>
</td></tr>
<tr><td>Rating/100: </td>
<td><input type=text name="RATING" size="50">
<select name="rating">
    <%
    sql3="SELECT DISTINCT RATING from subdb_subcon_rating"
    Set rs3 = OraDatabase.Execute(sql3)
    response.write ("<option value=""""></option>")
    Do While Not rs3.EOF
        IF Request("rating") = rs3("RATING") THEN
             response.write ("<option value="""&rs3("RATING")&""" selected >"&rs3("RATING")&"</option>")
        ELSE
             response.write ("<option value="""&rs3("RATING")&""">"&rs3("RATING")&"</option>")
        END IF
    rs3.MoveNext
    Loop
    %>
</select>
</td></tr>
</table><br>
<input type="submit" name="submit_subcon_ratings_records" value="Submit Ratings Records">
<input type="reset" name="reset" value="Reset">
</form>

 

[BillyRayPreachersSon]

Some general advice:

1. Don't name form elements "name". This could cause issues.

2. Don't give all your elements the same names unless you need to. This could cause issues.

3. Post client-side code when asking about client-side issues. The server-side code is of no use in this case.

Hope this helps,
Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

4. Don't use "reset" as a form element name, either. This will cause any script trying to call the form's reset method to break.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BabyJeffy]

5. Don't use "submit" as a form name element, either. This will prevent the form from being submitted using the usual javascript methods.

6. Don't use "action" as a form name element, either. This can cause all kinds of madness if you ever need to change the form action using javascript.

Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

 

[omoo]

OK, thanks.

I have no idea how to start the client side script which is why I only post my server side script, hoping that it will help.

 

[BillyRayPreachersSon]

To view the client-side script, choose the "View source" option in your browser. To "start" it, you simply visit the page.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[theniteowl]

omoo what you want to do is not entirely clear.
You said

I need to copy the selected record from the drop-down box to the empty textbox without submitted the entire form. Because at the end of the form, I have to submit all the text in the textbox together. In the case where the user input a name in the textbox and select a value in the drop-down list, the value in the textbox will be taken.

But in the asp forum you stated that the selection in the listbox would overwrite the textbox.

But is sounds like what you intend to do is to allow the clients to select multiple records one at a time and appending each selection to the value in the textbox so that when you post you have a list of records to pull back. Is this the case?

Normally you would use an onchange event in your select list to call a javascript function. From there you would take the selected value and either append it to the value in the text box or overwrite the text box value with the new one.
Are you looking to do a single record or multiple?

How many records are likely to end up in your select list to choose from? If you want to select multiple you might be better off providing the records with a checkbox next to each one to select all the ones you want.


Stamp out, eliminate and abolish redundancy!

 

[omoo]

hi theniteowl,

I think I am not clear in my requirement. Sorry!

1) The selected value from the drop down list will be copied to the textbox.
2) If there is already value in the textbox, the selected value in the drop-down will overwrite the value in the textbox.
3) When the user has input all the values in the textbox, he will click on the submit button which will do the normal processing of the data.

This function of copying the selected value to the textbox is to allow the user to input the data more easily as he do not need to type it out again.

There will be likely less than 100 records in the database.

 

[theniteowl]

There is the catch in your plan.
You said when the user has input ALL the values in the textbox... This makes me think you want the textbox to possibly contain more than one value when submitted.

If they type in one or more values then select one from the list all of the typed values will be overwritten.
If they select an item with the select box it will be written to the text box but if they select another the first will be overwritten.

Do you want more than one value to appear in the text box?
And what will you do with those values on your next page?


Stamp out, eliminate and abolish redundancy!

 

[omoo]

Hi,

I think you might have mistaken my idea for this drop-down list. The purpose of each drop-down list beside a blank textbox is for the user to key in values by just selecting the value from the drop-down box instead of typing in the blank textbox.

For each field, the user can either type in the value in the blank textbox, or select a value from the drop-down list which will transfer the selected value from the drop-down list to the textbox. If the user type a value in the textbox and also select a value in the drop-down list, the value in the textbox will be overwritten.

After all the values in the textboxes are filled up (either by manually typed or select from drop-downlist), the user will click on the submit button, which will insert all these values into the database.

I hope you get what I mean now.

 

[theniteowl]

As I was asking, do you have MULTIPLE options per text box?
Or just a single option?
In other words, the can either type in ONE option manually or select ONE option from the select list?
If more than one selection per text box is possible then the whole concept needs re-thinking.
If it is one selection per box only then it is easy to accomplish.




Stamp out, eliminate and abolish redundancy!

 

[omoo]

only one option. no multiple selection.

 

[theniteowl]

Do this.
Rename the textbox for Name to txtName.
Rename the select box for Name to selName.
Rename the textbox for Year to txtYear.
Rename the select box for Year to selYear.
Rename the textbox for Rating to txtRating.
Rename the select box for Rating to selRating.
Case is important.

Add this function to your page.

function setoption(which)
{
  document.insert_subcon_ratings_records['txt'+which].value = (document.insert_subcon_ratings_records['sel'+which].options(document.insert_subcon_ratings_records['sel'+which].selectedIndex).text);
}

Add this onchange event to each select box.
onchange="setoption('Name')" for the Name select.
onchange="setoption('Year')" for the Year select.
onchange="setoption('Rating')" for the Rating select.

What this does:
When an option is changed in a select box it calls the function passing a value to indicate which field it is working with. The function sets the value of the corresponding text box to the text related to the selected option in the corresponding select box.

You could do this directly in the onchange event instead of calling a function to do it but this way is a bit cleaner.

One thing you may want to do is in your validation code make certain that there is a value in each text box before allowing it to submit.

Also, because this uses the onchange event, if they select an option then blank out the text in the textbox, then decide they really wanted the select option, they cannot simply select the same option again. They have to select a different option then select the one they want because onchange only triggers the function if the selected value changes.



Stamp out, eliminate and abolish redundancy!

 

[omoo]

Hi theniteowl,

the function works perfectly! thank a lot but i have one question. if i want to use this same function for 3 other forms in the same document, can i use something like this.form to replace the name of the form?

 

[theniteowl]

Yes, in fact we can take it a step further and make it generic.
Change your text fields to have the same name as the select field PLUS the letters txt in front.
So your Name text box is txtselName.
Your Name select box is selName.

Change your onchange call to this in all your select boxes:
onchange="setoption(this.form,this.name)"

and the function modified like this:

function setoption(frmname,which)
{
  frmname['txt'+which].value = (frmname[which].options(frmname[which].selectedIndex).text);
}

This should automatically pass the form name and the name of the select field. The function just appends txt to the beginning of the select field name in order to know which text box to write to.

I was trying to use (this.name) before posting the above code but was having errors and not sure why so I wrote in the names directly so I could send you the code. It seems to be working now so...


Stamp out, eliminate and abolish redundancy!

 

[omoo]

Thanks theniteowl. It works perfectly!

 

[theniteowl]

You are welcome.
BTW, how do you know if the typed in value is a valid option for your processing page to use?
Is it creating new records if it is a new value?
Or is it looking to see if a record exists based on the textbox value?
If the latter then incorrect text would result in an error on the next page.

Are all possible options listed in the listbox and they just have the ability to type it instead of selecting it from the list?
If so, when the form is validating you can test to see if the textbox value exists as one of the option values before allowing it to submit, ensuring that only a valid select box value is accepted.


Stamp out, eliminate and abolish redundancy!

 

[omoo]

this is used for inserting records in the database. the drop-down list is for the user to select the exiting data so that it will be more convenient and also can prevent the user from typing records with different caps or additional spaces.