Welcome Guest, Not a member yet? Register   Sign In
CodeIgniter Forums Archived Discussions Archived Development & Programming Javascript onChange not working in xhtml
Javascript onChange not working in xhtml
  • El Forum
    Guest
  •  
#1
11-03-2009, 01:43 AM

[eluser]Jason Tan Boon Teck[/eluser]
I am not sure which is the cause of the failure - CI, XHTML, Javascript, etc.?

What the form does is to trigger a reload of the page whenever a drop down selection is changed. This will retrieved a different set of selections in the second drop down (cascading menu). I gave removed a third drop down, to reduce complexity of testing.

Right now, onChange doesn't seem to work. [removed]() also doesn't seem to display, but alert() does. I have deliberately misspelled some terms to prevent the forum app from stripping away the codes. Can anyone spot my error? Thanks.

View file:
Code:
<?php
echo "\n<body class='html'>";

echo "<sscript  language='javascript' type='text/javascript'>";
echo "document. write('JS in body');";
echo "</sscript>";

echo form_open('emr/edit_diagnosis/'.$patient_id);
echo "\n<table class='frame' width='100%' align='center'>";
echo "<tr>";
    echo "\n<td width='25%'><b>Diagnosis Chapter <font color='red'>*</font></b></td>";
    echo "<td colspan='2' class='red'>";  
    echo "\n<select name='diagnosisChapter' class='normal' oonChange='jaavascript:selectDiagnosisCategory()'>";
        echo "\n<option label='' value='0'>Choice 0</option>";
        echo "\n<option label='' value='K00-K93 Diseases of the digestive system'>Choice 1</option>";
        echo "\n<option label='' value='C00-D48 Neoplasms'>Choice 2</option>";
        echo "</select>";
    echo "</td>";
echo "</tr>";
echo "\n<tr>";
    echo "\n<td width='25%'><b>Diagnosis Category (ICD-10)<font color='red'>*</font></b></td>";
    echo "\n<td colspan='2' class='red'>";
        echo "\n<select name='diagnosisCategory' class='normal' oonChange='jaavascript:selectDiagnosis()'>";
            echo "\n<option value='' >Please select one</option>";
            foreach($dcode1_list as $dcode1)
            {
                echo "\n<option value='".$dcode1['dcode1_code']."' ";
                echo ($diagnosisCategory==$dcode1['dcode1_code'] ? " selected='selected'" : " ");
                echo ">".$dcode1['dcode1_code']." &nbsp;&nbsp;&nbsp;[".$dcode1['full_title']."]</option>";

            } //foreach
        echo "</select>";
    echo "</td>";
echo "</tr>";

?&gt;

              
   </table>
   <br />
   <center>
           &lt;input class='button' type='submit' name='submit' value='Enter Diagnosis' /&gt;
   </center>
   &lt;/form&gt;
<br />

    <sscript  language="javascript" type="text/javascript">
&lt;![CDATA[
    allert('Javascript is turned on!')
    document .write('JS in body');
        function selectDiagnosisCategory(){
            document.form.status.value="Unfinished";
            document.form.diagnosisCategory.selectedIndex = -1;
            document.form.diagnosis.selectedIndex = -1;
            document.form.diagnosis2.selectedIndex = -1;
            document.form.submit.click();
        }

        function selectDiagnosis(){
            document.form.status.value="Unfinished";
            document.form.diagnosis.selectedIndex = -1;
            document.form.diagnosis2.selectedIndex = -1;
            document.form.submit.click();
        }

         function selectDiagnosis2()
         {
            document.form.status.value="Unfinished";
            document.form.diagnosis2.selectedIndex = -1;
            document.form.submit.click();
         }
]]>
      </sscript>

&lt;/body&gt;&lt;/html>

The
  • El Forum
    Guest
  •  
#2
11-03-2009, 01:44 AM

[eluser]Jason Tan Boon Teck[/eluser]
The output as xhtml is as follows:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
&lt;html &gt;
&lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;
    &lt;link href="12082007010920071193889920_files/thirra_style.css" rel="stylesheet" type="text/css"/&gt;
    &lt;title&gt;Diagnosis&lt;/title&gt;
&lt;/head&gt;
&lt;body class="html"&gt;[removed][removed]('JS in body');[removed]
<br/>diagnosisChapter <br/>diagnosisCategory<br/>diagnosis<br/>diagnosis2<br/>&lt;form action="http://192.168.0.18/thirra/index.php/emr/edit_diagnosis/12082007010920071193889920" method="post"&gt;
<table width="100%" align="center" class="frame"><tr>
<td width="25%"><b>Diagnosis Chapter <font color="red">*</font></b></td><td colspan="2" class="red">
<select name="diagnosisChapter" class="normal">
<option label="" value="0">Choice 0</option>
<option label="" value="K00-K93 Diseases of the digestive system">Choice 1</option>
<option label="" value="C00-D48 Neoplasms">Choice 2</option></select></td></tr>
<tr>
<td width="25%"><b>Diagnosis Category (ICD-10)<font color="red">*</font></b></td>
<td colspan="2" class="red">
<select name="diagnosisCategory" class="normal">
<option value="">Please select one</option></select></td></tr>              
   </table>
   <br/>
   <center>
           &lt;input type="submit" class="button" name="submit" value="Enter Diagnosis"/&gt;
   </center>
   &lt;/form&gt;
<br/>

    [removed]
&lt;![CDATA[
    alert('Javascript is turned on!')
    [removed]('JS in body');
        function selectDiagnosisCategory(){
            document.form.status.value="Unfinished";
            document.form.diagnosisCategory.selectedIndex = -1;
            document.form.diagnosis.selectedIndex = -1;
            document.form.diagnosis2.selectedIndex = -1;
            document.form.submit.click();
        }

        function selectDiagnosis(){
            document.form.status.value="Unfinished";
            document.form.diagnosis.selectedIndex = -1;
            document.form.diagnosis2.selectedIndex = -1;
            document.form.submit.click();
        }

         function selectDiagnosis2()
         {
            document.form.status.value="Unfinished";
            document.form.diagnosis2.selectedIndex = -1;
            document.form.submit.click();
         }
]]>
      [removed]

&lt;/body&gt;&lt;/html>
  • El Forum
    Guest
  •  
#3
11-03-2009, 03:54 AM

[eluser]Arun Kris[/eluser]
If the onchange event is not working in mozila then set an id atribute to the <select> element and try. Smile
  • El Forum
    Guest
  •  
#4
11-03-2009, 04:02 AM

[eluser]geshan[/eluser]
use some jquery (http://jquery.com) or you might again have problem with IE.
  • El Forum
    Guest
  •  
#5
11-03-2009, 04:09 AM

[eluser]Jason Tan Boon Teck[/eluser]
[quote author="Arun Kris" date="1257263656"]If the onchange event is not working in mozila then set an id atribute to the <select> element and try. Smile[/quote]

Could you please elaborate? I'm weak at Javascript and the above js snippets are not mine. Thanks.
  • El Forum
    Guest
  •  
#6
11-03-2009, 05:09 AM

[eluser]saidai jagan[/eluser]
<select name='diagnosisChapter' class='normal' oonChange='jaavascriptConfusedelectDiagnosisCategory()'>";
Change it to
<select name='diagnosisChapter' class='normal'>";
  • El Forum
    Guest
  •  
#7
11-03-2009, 05:24 AM

[eluser]LuckyFella73[/eluser]
Hi,

If you want your XHTML code to be valid you have to write
the event handler in lowercase letters.

Valid: "onchange"
NOT valid: "onChange"

I don't know if that could solve your problem but you could
try maybe.
  • El Forum
    Guest
  •  
#8
11-03-2009, 06:01 AM

[eluser]Arun Kris[/eluser]
ok tell you later
  • El Forum
    Guest
  •  
#9
11-03-2009, 06:08 AM

[eluser]Arun Kris[/eluser]
simply add the id attribute to the <select element> Smile
  • El Forum
    Guest
  •  
#10
11-03-2009, 08:56 AM

[eluser]Jason Tan Boon Teck[/eluser]
[quote author="LuckyFella73" date="1257269059"]Hi,

If you want your XHTML code to be valid you have to write
the event handler in lowercase letters.

Valid: "onchange"
NOT valid: "onChange"

I don't know if that could solve your problem but you could
try maybe.[/quote]

I tried. That didn't help the script. :-(




Theme © iAndrew 2016 - Forum software by © MyBB