We help IT Professionals succeed at work.

HowTo Pass Javascript back into onclick value on ASP page

Working on logic for an ASP page.
I have a form (myForm) that I want to auto update fields as the user completes the form.

I have a radio button (myRadio) that successfully assigns a variable to a hidden field. (myTempField)
This is where i get 'fuzzy'
Then I have a javascript method (scrapeTempField) to handle variable assignment for a dropdown (Choose) selection.

for the onChange event for the dropdown, I want to grab the hidden field's value
assign it to a new javascript variable; append value with text (extraText)
and then pass that JavaScript variable
BACK
to a visible text field (myTarget) for the user to verify or modify by typing.
before pressing submit to write the combined string to a data source

Ive almost got it but missing the appending piece before forcing it into the textfield
(no server roundtrips please)

thanks for your help !



<%
'
Response.Write "<form name='myForm' action=select.asp method=post>"
'
Response.Write "MyLabel:<input type='radio' value='MyRadioSelection' name='myRadio' id='myRadio' onClick=""document.forms[0].myTempField.value='"myValue"';""> &nbsp;&nbsp;"
'
Response.Write "<input type='hidden' name='myTempField' id='myTempField' value='' />"
'
%>
<script type="text/javascript">
<!--
function scrapeTempField() {
jstemp = document.forms[0].temp.value;
// not sure about this block's logic
return jstemp;
}
//-->
</script>
<%
'
Response.Write "<Select NAME='Choose'>"
Response.Write "<option value='begin'>Select Option</option>"
Response.Write "<option value='option1' onClick=""document.forms[0].myTarget.value='"  & "extraText';"">extraText</option>"
Response.Write "</SELECT>"
'
'
Response.Write "Description: <input name='myTarget' id='desc' type=text size=40 >"
'
'housekeeping
Response.Write "</form>"
Response.Write "<input type=submit value='USE >"
%>

Open in new window

Comment
Watch Question

JAaron AndersonProgramming Architect @ Widener University

Author

Commented:
lol
ok I swapped lines 30&31 in the example .... (blush)

but the handling on line 23 and javascript are the logic I am not figuring out on my own thx
Michel PlungjanIT Expert
Top Expert 2009

Commented:
You have a few issues
one being onChange of the select instead of onClick of the option

<script type="text/javascript">
<!--
function scrapeTempField(theSel) {
  var text = "";
  if (theSel.selectedIndex!=-1) {
    text += theSel.options[theSel.selectedIndex].value;
    text += theSel.myTempField.value;
  }
  theSel.form.myTarget.value=text;
}
//-->
</script>

<%
Dim myValue=...???...
%>
<form name="myForm" action="select.asp" method="post">
MyLabel:<input type="radio" value="MyRadioSelection" name="myRadio" id="myRadio" onClick="this.form.myTempField.value=this.value" value="<%=myValue %>" /> &nbsp;&nbsp;
<input type="hidden" name="myTempField" id="myTempField" value="" />"
<Select NAME="Choose"  onChange="scrapeTempField(this)">
<option value="begin">Select Option</option>
<option value='option1'>extraText</option>
</SELECT>
Description: <input name="myTarget" id="desc" type="text" size="40" />
<input type="submit" value="USE">
</form>

Open in new window

Michel PlungjanIT Expert
Top Expert 2009

Commented:
Let me know if this needs to work on click of a "BACK" or reload (onclicks and onchanges have to be re-executed)
JAaron AndersonProgramming Architect @ Widener University

Author

Commented:
onClick doesnt work in IE8 first of all on drop down menus unless theres a way I have not yet found -- maybe thats part of my uphill battle ...

I could apply onclick events for radio buttons (Ive tested that) but I want a clean form GUI a dropdown is ideal. I will continue to test.

also,
>>Let me know if this needs to work on click of a "BACK" or reload (onclicks and onchanges have to be re-executed)
This makes no sense to me -- please clarifyin an attempt to answer this, I did preface I do not want to perform any server postbacks thus only the original page onload ...
hth

thanks
JAaron AndersonProgramming Architect @ Widener University

Author

Commented:
couldnt get your script to work did you test this out ?
Im not following line 18, it consists of three total value parameters, could this be why I cannot get your code to work either?
thx
MyLabel:<input type="radio" value="MyRadioSelection" name="myRadio" id="myRadio" onClick="this.form.myTempField.value=this.value" value="<%=myValue %>" /> &nbsp;&nbsp;

Open in new window

Michel PlungjanIT Expert
Top Expert 2009

Commented:
That is what I said.
You had onClick on the option but you must use onChange of the select
Michel PlungjanIT Expert
Top Expert 2009

Commented:
And this
<input type="radio" value="MyRadioSelection" name="myRadio" id="myRadio"
onClick="this.form.myTempField.value=this.value"
value="<%=myValue %>" /> &nbsp;&nbsp;

sets the value of the field called myTempField to the value of the radio
That value is set by the ASP here
value="<%=myValue %>"
JAaron AndersonProgramming Architect @ Widener University

Author

Commented:
Thank you mplungjan for your input, Im trying to parse understanding from it... something is still amiss If I copy and paste Post ID:32967808 into an *.asp file and assign Dim myValue=TESTTEXT

When I access the page I get a Browser error do you have that code actually working?
JAaron AndersonProgramming Architect @ Widener University

Author

Commented:
Im goinf to try surrounding the code snippetts with <% Document.Write "***" %>
Michel PlungjanIT Expert
Top Expert 2009

Commented:
nono
<%
Dim myValue="test text"
%>
document.write("<%= myValue %>"); // assuming no breakline


IT Expert
Top Expert 2009
Commented:
A few issues with my code.

Here is a full version, I am not asp programmer so the asp part has not been tested, only the javascript part

<script type="text/javascript">
<!--
function scrapeTempField(theSel) {
  var text = "";
  if (theSel.selectedIndex>0) { // e.g. not the "Select Option"
    text += theSel.options[theSel.selectedIndex].value;
    text += theSel.form.myTempField.value;
  }
  theSel.form.myTarget.value=text;
}
window.onload=function() {
  scrapeTempField(document.forms[0].Choose);
  if (document.getElementsById('myRadio').checked) document.getElementsById('myRadio').onclick();
}
//-->
</script>
<%
Dim myValue
myValue = "test text"
%>
<form name="myForm" action="select.asp" method="post">
MyLabel:<input type="radio" value="MyRadioSelection" name="myRadio" id="myRadio" onClick="this.form.myTempField.value=this.value" value="<%=myValue%>" /> &nbsp;&nbsp;
<input type="hidden" name="myTempField" id="myTempField" value="" />
<Select NAME="Choose" onChange="scrapeTempField(this)">
<option value="begin" selected="selected">Select Option</option>
<option value="option1">extraText</option>
</SELECT>
Description: <input name="myTarget" id="desc" type="text" size="40" />
<input type="submit" value="USE">
</form>

Open in new window

JAaron AndersonProgramming Architect @ Widener University

Author

Commented:
ok I run that and see it pushes it - real cool ... let me integrate that into my multi-radio multi-dropdown environment ... and let you know my success... it is VERY interesting to uncover the relationship and symbiotic behavior nature between OnClick & OnChange for crossBrowser usage... way to go !
JAaron AndersonProgramming Architect @ Widener University

Author

Commented:
it worked ! and integrated into ASP just fine :)

thanks so much mplungjan !
JAaron AndersonProgramming Architect @ Widener University

Author

Commented:
it worked ! and integrated into ASP just fine :)

thanks so much mplungjan !
Michel PlungjanIT Expert
Top Expert 2009

Commented:
You are doubly welcome ;)
JAaron AndersonProgramming Architect @ Widener University

Author

Commented:
have a followup post mplungjan
could you look at it too ?
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26266989.html


thx