value pass from html dropdown to javascript

Question

i am trying to pass value from jsp to javascript but it crashes saying value is undefined

my dropdown code :

<html:select  name="AuthoringForm" property="disease_name" size="1" onchange="javascript:onchange_action()" >
<option selected="selected"> </option> 
<option value="Malaria">Malaria</option>
<option value="High Fever">High Fever</option>
<option value="Cholera">Cholera</option>
</html:select></p>

javasript :

function onchange_action()
{
    var e=document.getElementsByName("AuthoringForm");
    alert("the value of the option here is "+e);
    decisiontree.dieasenameencode=e;
}

alert says :

the value of the option here is undifined

my jsp :

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@taglib uri="/WEB-INF/struts-html.tld" prefix="html" %> 
<%@taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %> 
<%@taglib uri="/WEB-INF/struts-nested.tld" prefix="nested" %> 
<% 
response.setHeader("Cache-Control","no-cache"); //HTTP 1.1
response.setHeader("Pragma","no-cache"); //HTTP 1.0
response.setDateHeader ("Expires", 0); //prevents caching at the proxy server
%>

<html>
<head>
<script src="javascript/display_toggle.js" type="text/javascript"></script>
<script src="javascript/onchange_action.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>IDOC AUTHORING TOOL</title>
</head>
<body>
<p>
<u> </u><font size="7"><u>IDOC AUTHORING TOOL</u></font></p>
<p></p>
<p>Choose Authoring Mode :
<select size="1" name="AuthoringOption" id="AuthoringOption" onchange="javascript:display_toggle()">
<option selected="selected"> </option>
<option value ="1">Input Desicion Tree</option>
<option value ="2">Input Prevention</option>
<option value ="3">Input Symptoms</option>
<option value ="4">Input Prescription</option>
</select>
</p>



<div id="BasePage"  style="display:block;" >
<p>Enter/Choose ailment : 
<select  size="1">
<option>Malaria</option>
<option>High Fever</option>
<option>Cholera</option>
</select></p>

<fieldset style="width: 381px; height: 126px; padding: 2">
    <legend align="left"></legend>
 Tick off patient context :
    <input type="radio" value="V1" checked name="R1">Men
    <input type="radio" name="R1" value="V2">Women
    <p>
    <input type="radio" name="R1" value="V3"> Child
    <input type="radio" name="R1" value="V4"> All</p>
    </fieldset>
<p>Enter Pre Conditions</p>
<p><textarea rows="2" cols="20"></textarea> 
</div> 


<!-- ______________________________________________________________________________________________________- -->


<div id="Symptoms" style="display:none;">
<html:form method="POST" action="symptoms"  >
<!-- --- -->    
<p></p>
<p>Enter/Choose ailment : 
<html:select name="AuthoringForm" property="disease_name" size="1">
<option>Malaria</option>
<option>High Fever</option>
<option>Cholera</option>
</html:select></p>
<fieldset style="width: 381px; height: 126px; padding: 2">
<legend align="left"></legend>
 Tick off patient context :
<html:radio value="Men" name="AuthoringForm" property="patient_context" disabled="false"/>
Men
<html:radio value="Womwen" name="AuthoringForm" property="patient_context" disabled="false"/>
Women
<p>
<html:radio value="Child" name="AuthoringForm" property="patient_context" disabled="false"/>
Child
<html:radio value="Al" name="AuthoringForm" property="patient_context" disabled="false"/>
All
</fieldset>
<p>Enter Pre Conditions</p>
<p><html:textarea rows="2" name="AuthoringForm" cols="20" property="patient_precondition" ></html:textarea>


<!-- ---------- -->

<p>Must Have Symptoms : 
May Have Symptoms :</p>
<p><html:textarea rows="2" name="AuthoringForm" cols="20" property="must_have_symptoms"></html:textarea>
<!-- <input type="submit" value="Submit" name="B2">-->
<html:textarea rows="2" name="AuthoringForm" cols="20" property="may_have_symptoms"></html:textarea>
<input type="submit" value="Submit" name="symptomsButton"><input type="reset" value="Reset" onclick="this.form.reset()"></p>
</html:form>
</div>

<!--___________________________________________________________________________________________ -->
<div id="Prevention" style="display:none;">
<html:form  method="POST" action="prevention"  >

<!-- ---------------------------------- --> 
<p></p>
<p>Enter/Choose ailment :

<html:select name="AuthoringForm" property="disease_name" size="1">
<option>Malaria</option>
<option>High Fever</option>
<option>Cholera</option>
</html:select></p>



    <fieldset style="width: 381px; height: 126px; padding: 2">
    <legend align="left"></legend>
     Tick off patient context :
    <html:radio value="Men" name="AuthoringForm" property="patient_context" disabled="false"/>
    Men
    <html:radio value="Womwen" name="AuthoringForm" property="patient_context" disabled="false"/>
    Women
    <p>
    <html:radio value="Child" name="AuthoringForm" property="patient_context" disabled="false"/>
    Child
    <html:radio value="Al" name="AuthoringForm" property="patient_context" disabled="false"/>
    All
    </fieldset>

<p>Enter Pre Conditions</p>

    <p><html:textarea rows="2" name="AuthoringForm" cols="20" property="patient_precondition" ></html:textarea>


<!-- --------------------------------------------------- -->   


    <p>Input for Prevention :
    </p>
    <p><html:textarea rows="8" name="AuthoringForm" cols="79" property="prevention"></html:textarea>
    <input type="submit" value="Submit" name="preventionButton"><input type="reset" value="Reset" onclick="this.form.reset()">
    </p>
</html:form>
</div>


<!--____________________________________________________________________________________________ -->




<div id="decisiontree" style="display:none;">

<html:form method="POST" action="decisiontree" >
<!-- ------------------------------------------------ -->
<p></p>
<p>Enter/Choose ailment :

<!-- ------------------------------------ -->
<html:select  name="AuthoringForm" property="disease_name" size="1" onchange="javascript:onchange_action()" >
<option value="Malaria">Malaria</option>
<option value="High Fever">High Fever</option>
<option value="Cholera">Cholera</option>
</html:select></p>

<!-- --------------------------------- -->

<fieldset style="width: 381px; height: 126px; padding: 2">
    <legend align="left"></legend>
     Tick off patient context :
    <html:radio value="Men" name="AuthoringForm" property="patient_context" disabled="false"/>
    Men
    <html:radio value="Womwen" name="AuthoringForm" property="patient_context" disabled="false"/>
    Women
    <p>
    <html:radio value="Child" name="AuthoringForm" property="patient_context" disabled="false"/>
    Child
    <html:radio value="Al" name="AuthoringForm" property="patient_context" disabled="false"/>
    All
</fieldset>
<p>Enter Pre Conditions</p>
<p><html:textarea rows="2" name="AuthoringForm" cols="20" property="patient_precondition" ></html:textarea>

<!-- ------------------------------------------------ -->

    <p>
    </p>
    <fieldset style="width: 1225px; height: 451px; padding: 2">
    <legend>Decision Tree Preview </legend>

<applet id="decisiontree" code="com.vaannila.utility.dynamicTreeApplet.class" archive="./appletjars/dynamictree.jar, ./appletjars/prefuse.jar" width ="1000" height="500" >
</applet>
</fieldset><p>

    </p>
    <p>Enter Follow Up Questions :</p>

    <html:textarea rows="4" name="AuthoringForm" cols="45" property="follow_up_questions" ></html:textarea>
    <html:radio value="Yes" name="AuthoringForm" property="followupconsent" disabled="false"/> 
Yes
    <html:radio  value="No" name="AuthoringForm" property="followupconsent" disabled="false"/> 
No
    <input type="submit" value="Submit" name="followupQuestionButton"><input type="reset" value="Reset" onclick="this.form.reset()"><p>
    </p>
</html:form>
</div>
<!--  ______________________________________________________________________________________________________________________________-->

<div id="Prescription" style="display:none;">
<html:form  method="POST" action="prescription"  >

<!-- ---------------------------------- --> 

<p></p>
<p>Enter/Choose ailment :
<html:select name="AuthoringForm" property="disease_name" size="1">
<option>Malaria</option>
<option>High Fever</option>
<option>Cholera</option>
</html:select></p>


    <fieldset style="width: 381px; height: 126px; padding: 2">
    <legend align="left"></legend>
     Tick off patient context :
    <html:radio value="Men" name="AuthoringForm" property="patient_context" disabled="false"/>
    Men
    <html:radio value="Womwen" name="AuthoringForm" property="patient_context" disabled="false"/>
    Women
    <p>
    <html:radio value="Child" name="AuthoringForm" property="patient_context" disabled="false"/>
    Child
    <html:radio value="Al" name="AuthoringForm" property="patient_context" disabled="false"/>
    All
    </fieldset>

<p>Enter Pre Conditions</p>

    <p><html:textarea rows="2" name="AuthoringForm" cols="20" property="patient_precondition" ></html:textarea>


<!-- --------------------------------------------------- -->   


    <p>Input for Prescription :
    </p>
    <p><html:textarea rows="8" name="AuthoringForm" cols="79" property="prescrption"></html:textarea>
    <input type="submit" value="Submit" name="prescriptionButton" ><input type="reset" value="Reset" onclick="this.form.reset()">
    </p>
</html:form>
</div>
</body>
</html>

Use getElementById instead of name, and you need to use .value — Pekka
– Pekka, Commented Aug 29, 2011 at 6:41

Ryan Li · Accepted Answer · 2011-08-29 06:58:22Z

4

You will need:

var e=document.getElementsByName("AuthoringForm")[0];
alert("the value of the option here is "+e.value);

Full code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="application/javascript">
function onchange_action()
{
    var e=document.getElementsByName("AuthoringForm")[0];
    alert("the value of the option here is "+e.value);
    decisiontree.dieasenameencode=e;
}
</script>
</head>
<body>
<select name="AuthoringForm" property="disease_name" size="1" onchange="onchange_action();">
    <option selected="selected"> </option> 
    <option value="Malaria">Malaria</option>
    <option value="High Fever">High Fever</option>
    <option value="Cholera">Cholera</option>
</select>
</body>
</html>

edited Aug 29, 2011 at 6:58

answered Aug 29, 2011 at 6:41

Ryan Li

9,3687 gold badges36 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ryan Li Over a year ago

@bhalkian: I edited to include the full HTML code, you could try with that. It's working for me.

bhalkian Over a year ago

appreciate Ryan for quick response yeah it worked for me as well when i took you code seperately but doesnot work if i merged it my jsp .I am pasting my full jsp for you .

Ryan Li Over a year ago

@bhalkian: I don't know JSP but I think the problem is that many of your elements have the name of AuthoringForm. Attribute name is only used for a single input generally. You should assign a unique id to the <select> element and get it by getElementById.

IT_INFOhUb · Accepted Answer · 2013-02-15 07:31:31Z

0

function onchange_action()
{
    var e=document.getElementsById("AuthoringForm").value;
    alert("the value of the option here is "+e);
    decisiontree.dieasenameencode=e;
}

might be this can help you to get value.

answered Feb 15, 2013 at 7:31

IT_INFOhUb

5168 gold badges21 silver badges41 bronze badges

Collectives™ on Stack Overflow

value pass from html dropdown to javascript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related