jeudi 17 décembre 2015

How to accessing hidden checkbox in pop up window in javascript?

I have 2 JSP pages with links to another jsp page which opens up as a pop up window. The pop up window displays both NewFile2.jsp as well as NewFile3.jsp on a single page with their values populated. Though I am able to display the textfield values, I am unable to populate the checkbox fields that enable a textfield.

For Example: When I check "Other" for Race and click the View Link in NewFile3.jsp, the Pop Up window in NewFile3.jsp does not populate the checkboxes for Race. It only populates the checkboxes for Ethnicity. Below is the portion of the code in which I am facing issues. I don't know how to fix this.

NewFile2.jsp

<html>
<head>
<script type="text/javascript">
function displayThis(chkbx){
    document.getElementById("RaceOtherName").style.display = chkbx.checked ? "inline" : "none"
}

function OpenPopUp(url, name){
    window.open(url, name);
    return false;
}
</script>
</head>
<body>
<form name="form1" action="NewFile2.jsp" method="post">
<a href="" onclick="javascript:return OpenPopUp('PopUp.jsp','win1');">View</a>
<input type="checkbox" id="Race1" name="Race" value="1">Race1
<input type="checkbox" id="Race2" name="Race" value="2">Race2
<input type="checkbox" id="RaceOther" name="Race" value="Other" onclick="displayThis(this);">Other
<input type="text" id="RaceOtherName" name="RaceOtherName" style="display: none;">
<input type="submit" onclick="form1.action='NewFile3.jsp'">
</form>
</body>
</html>

NewFile3.jsp

<html>
<head>
<script type="text/javascript">
function displayThis(chkbx){
    document.getElementById("EthOtherName").style.display = chkbx.checked ? "inline" : "none"
}

function OpenPopUp(url, name){
    window.open(url, name);
    return false;
}

function setH(){
    document.getElementById("hRace1").value="<%=request.getParameter("Race1")%>";
    document.getElementById("hRace2").value="<%=request.getParameter("Race2")%>";
    document.getElementById("hRaceOther").value="<%=request.getParameter("RaceOther")%>";
    document.getElementById("hRaceOtherName").value="<%=request.getParameter("RaceOtherName")%>";
}window.onload=setH;


</script>
</head>
<body>
<form action="" method="post">
<input type="hidden" id="hRace1" name="hRace1">
<input type="hidden" id="hRace2" name="hRace2">
<input type="hidden" id="hRaceOther" name="hRaceOther">
<input type="hidden" id="hRaceOtherName" name="hRaceOtherName">
<a href="" onclick="javascript:return OpenPopUp('PopUp2.jsp','win2');">View</a>
<input type="checkbox" id="Eth1" name="Ethnicity" value="1">Eth1
<input type="checkbox" id="Eth2" name="Ethnicity" value="2">Eth2
<input type="checkbox" id="EthOther" name="Ethnicity" value="Other" onclick="displayThis(this)">Other
<input type="text" id="EthOtherName" name="EthOtherName" style="display:none;">
<input type="submit">

</form>
</body>
</html>

PopUp.jsp

<html>
<head>
<script type="text/javascript">
function setAll(){

    if(window.opener.document.getElementById("Race1").checked){
        document.getElementById("Race1").checked=true;
    }
    if(window.opener.document.getElementById("Race2").checked){
        document.getElementById("Race2").checked=true;
    }
    if(window.opener.document.getElementById("RaceOther").checked){
        document.getElementById("RaceOther").checked=true;
                document.getElementById("RaceOtherName").value=window.opener.document.getElementById("RaceOtherName").value;
    }
}

</script>
</head>
<body onload="setAll();">
<table border="1" width="100%">
<tr><td>
<input type="checkbox" id="Race1" name="Race" value="1">Race1
<input type="checkbox" id="Race2" name="Race" value="2">Race2
<input type="checkbox" id="RaceOther" name="Race" value="Other">Other
<input type="text" id="RaceOtherName" name="RaceOtherName" disabled="disabled">
</td><td>
<input type="checkbox" id="Eth1" name="Ethnicity" value="1">Eth1
<input type="checkbox" id="Eth2" name="Ethnicity" value="2">Eth2
<input type="checkbox" id="EthOther" name="Ethnicity" value="Other">Other
<input type="text" id="EthOtherName" name="EthOtherName" disabled="disabled">
</td></tr>
</table>
</body>
</html>

PopUp2.jsp

<html>
<head>
<script type="text/javascript">
function setAll2(){
    if(window.opener.document.getElementById("Eth1").checked){
        document.getElementById("Eth1").checked=true;
    }
    if(window.opener.document.getElementById("Eth2").checked){
        document.getElementById("Eth2").checked=true;
    }
    if(window.opener.document.getElementById("EthOther").checked){
        document.getElementById("EthOther").checked=true;
        document.getElementById("EthOtherName").value=window.opener.document.getElementById("EthOtherName").value;
    }
    if(window.opener.document.getElementById("hRace").value=='1'){
        document.getElementById("Race1").checked=true;
    }
    if(window.opener.document.getElementById("hRace").value=='2'){
        document.getElementById("Race2").checked=true;
    }
    if(window.opener.document.getElementById("hRace").value=='Other'){
        document.getElementById("RaceOther").checked=true;
        document.getElementById("RaceOtherName").value=window.opener.document.getElementById("hRaceOtherName").value;
    }
}
</script>
</head>
<body onload="setAll2();">
<table border="1" width="100%">
<tr>
<td>
<input type="checkbox" id="Race1" name="Race" value="1">Race1
<input type="checkbox" id="Race2" name="Race" value="2">Race2
<input type="checkbox" id="RaceOther" name="Race" value="Other">Other
<input type="text" id="RaceOtherName" name="RaceOtherName" style="display: none;">
</td>
<td>
<input type="checkbox" id="Eth1" name="Ethnicity" value="1">Eth1
<input type="checkbox" id="Eth2" name="Ethnicity" value="2">Eth2
<input type="checkbox" id="EthOther" name="Ethnicity" value="Other">Other
<input type="text" id="EthOtherName" name="EthOtherName" style="display:none;">
</td></tr>
</table>
</body>
</html>




Aucun commentaire:

Enregistrer un commentaire