0

Good day all:

I'm wondering if the cancellation of one of my onclick js function in the below code is as a result of having multiple onclick function. here is the code:

<FORM NAME="SubCategory" method=post action='accountingsearch2.php' target='_top'>
<p align="left">
<div id="presetlabel">Or use Preset Periods-->></div>
<div id="SubCategory">
<SELECT NAME="specifiedperiod" style="display:inline";>
<OPTION>Select a Time Period
<OPTION>Today
<OPTION>Current Week
<OPTION>Current Month
<OPTION>Current Quarter
<OPTION>Past Quarter
<OPTION>Current Year
<OPTION>Previous Year
</SELECT>
</div>
<div id="proceed2"><input type='submit' value='Proceed!' onclick='return ValidateSubCategory();'></div><!--the validation does not work with onsubmit-->
</FORM>
<form name="SubCategory2" method=post action='accountingsearch.php' target='_top'>
<div id="callabel"><label for="theDate">From today thru</label></div>
<div id="othersearch"><input type="text" value="2010/10/24" readonly name="theDate" size="11"></div>
<div id="cal"><input type="button" value="Calendar" onclick="displayCalendar(document.forms[0].theDate,'yyyy/mm/dd',this)" style="display:inline";></div>
 <!--<INPUT TYPE="" VALUE="" name="specifiedperiod" style="display:inline";-->
<!--<font size='2'> Please Specify an optional Device name </font><input id='searchField' name='searchField' value='(none)' type='text'></option>-->
<div id="proceed"><input type='submit' value='Proceed!'><!--onclick='return ValidateSubCategory();'--> </div>
</p>
</FORM>

If such is the case, how can I address this problem?

Currently, the first onclick function

onclick='return ValidateSubCategory();'

works fine. The problem is with the second

onclick="displayCalendar(document.forms[0].theDate,'yyyy/mm/dd',this)" style="display:inline";

Any assistance is greatly appreciated!
Mossa

2
Contributors
8
Replies
9
Views
6 Years
Discussion Span
Last Post by mbarandao
0

you have to use DOM 2 not DOM 0.
use this to attach events to obj in html

function addEventHandler(obj, eventName,handler){
   if (document.attachEvent){
      obj.attachEvent("on" + eventName, handler);
   } else if (document.addEventListener) {
      obj.addEventListener(eventName, handler, false);
   }
}

use it like this

submit = document.getElementById("proceed");
addEventHandler(submit, "click" , function(){return ValidateSubCategory;});
addEventHandler(submit, "click" , function(){displayCalendar(document.forms[0].theDate,'yyyy/mm/dd',this)});

Edited by Gerbiler: typo

0

Gerbiler, thanks for the reply and for the suggested solution. Where specifically would I apply the second script within the my code posted earlier?

submit = document.getElementById("proceed");
addEventHandler(submit, "click" , function(){return ValidateSubCategory;});
addEventHandler(submit, "click" , function(){displayCalendar(document.forms[0].theDate,'yyyy/mm/dd',this)});

Edited by mbarandao: n/a

0

you would have to put it within a script tag anywhere in your code as long as it is within an onload function handler such as...

window.onload = myonload;
function myonload(){
   //code that i gave earlier
}

The code I gave assumes that the element you want to click has an id of proceed. just change the id in document.getElementById(); to match whatever you want to have the events.

0

Thanks for providing more details. I have modified in the following manner; however, I'm affraid the modification is incorrect. Here is the code:

<script type="text/javascript">
function addEventHandler(obj, eventName,handler){
   if (document.attachEvent){
      obj.attachEvent("on" + eventName, handler);
   } else if (document.addEventListener) {
      obj.addEventListener(eventName, handler, false);
   }
}
</script>
<script type="text/javascript">
window.onload = myonload;
function myonload(){
submit = document.getElementById("proceed");
addEventHandler(submit, "click" , function(){return ValidateSubCategory;});
addEventHandler(submit, "click" , function(){displayCalendar(document.forms[0].theDate,'yyyy/mm/dd',this)});
}
</script>


</HEAD>

<BODY>
<FORM NAME="SubCategory" method=post action='accountingsearch2.php' target='_top'>
<p align="left">
<div id="presetlabel">Or use Preset Periods-->></div>
<div id="SubCategory">
<SELECT NAME="specifiedperiod" style="display:inline";>
<OPTION>Select a Time Period
<OPTION>Today
<OPTION>Week to Date
<OPTION>Current Month
<OPTION>Current Quarter
<OPTION>Past Quarter
<OPTION>Year-to-Date
<OPTION>Previous Year
</SELECT>
</div>
<div id="proceed2"><input type='submit' id='proceed'  <!--onclick='return ValidateSubCategory();'-->></div><!--the validation does not work with onsubmit-->
</FORM>
<form name="SubCategory2" method=post action='accountingsearch.php' target='_top'>
<div id="callabel"><label for="theDate">From today thru</label></div>
<div id="othersearch"><input type="text" value="2010/10/24" readonly name="theDate" size="11"><!--<input type="button" value="Calendar" onclick="displayCalendar(document.forms[0].theDate,'yyyy/mm/dd',this);">--></div>
<!--<div id="cal"><input type="button" value="Calendar" onclick="displayCalendar(document.forms[0].theDate,'yyyy/mm/dd',this)"></div>-->
 <!--<INPUT TYPE="" VALUE="" name="specifiedperiod" style="display:inline";-->
<!--<font size='2'> Please Specify an optional Device name </font><input id='searchField' name='searchField' value='(none)' type='text'></option>-->
<div id="proceed"><input type='submit' id='proceed' ><!--onclick='return ValidateSubCategory();'--> </div>
</p>
</FORM>

What have I done incorrectly?

Edited by mbarandao: add-on

0

you have two tags that have id "proceed", the div and the submit, change one of them to a different id. also you don't have () at the end of validateSubCategory

Edited by Gerbiler: quotes

0

Ok, I have corrected as instructed above --I notice a minor positive change; however, the following is occurring:

addEventHandler(submit, "click" , function(){return ValidateSubCategory()});

works by displaying an alert message if the field is not populated correctly, however when you click "ok" on the alert dialogue box, the script proceeds forward without reverting back to the form for addressing the alerted message.

As to the second onclick function --the calendar, this is none-responsive on click of the button "calendar". Here is the revised code as previously advised:

<script type="text/javascript">
function addEventHandler(obj, eventName,handler){
   if (document.attachEvent){
      obj.attachEvent("on" + eventName, handler);
   } else if (document.addEventListener) {
      obj.addEventListener(eventName, handler, false);
   }
}
</script>
<script type="text/javascript">
window.onload = myonload;
function myonload()
{
submit = document.getElementById("proceed");
addEventHandler(submit, "click" , function(){return ValidateSubCategory();
}
);
addEventHandler(submit, "click" , function(){displayCalendar(document.forms[0].theDate,'yyyy/mm/dd',this);
}
);
}
</script>


</HEAD>

<BODY>
<FORM NAME="SubCategory" method=post action='accountingsearch2.php' target='_top'>
<p align="left">
<div id="presetlabel">Or use Preset Periods-->></div>
<div id="SubCategory">
<SELECT NAME="specifiedperiod" style="display:inline";>
<OPTION>Select a Time Period
<OPTION>Today
<OPTION>Week to Date
<OPTION>Current Month
<OPTION>Current Quarter
<OPTION>Past Quarter
<OPTION>Year-to-Date
<OPTION>Previous Year
</SELECT>
</div>
<div id="continue2"><input type='submit' id='proceed'> </div> <!--onclick='return ValidateSubCategory();' the validation does not work with onsubmit-->
</FORM>
<form name="SubCategory2" method=post action='accountingsearch.php' target='_top'>
<div id="callabel"><label for="theDate">From today thru</label></div>
<div id="othersearch"><input type="text" value="2010/10/24" readonly name="theDate" size="11"><input type="button" value="Calendar"><!-- onclick="displayCalendar(document.forms[0].theDate,'yyyy/mm/dd',this);">--></div>
<!--<div id="cal"><input type="button" value="Calendar" onclick="displayCalendar(document.forms[0].theDate,'yyyy/mm/dd',this)"></div>-->
 <!--<INPUT TYPE="" VALUE="" name="specifiedperiod" style="display:inline";-->
<!--<font size='2'> Please Specify an optional Device name </font><input id='searchField' name='searchField' value='(none)' type='text'></option>-->
<div id="continue"><input type='submit' id='proceed' ></div>
</p>
</FORM>

I should also note that the onclick function for the display calendar has its type value as "button" not submit as does the Validate function. Maybe this is where my problem lies.

Edited by mbarandao: typo

0

the reason that the form is submitted even when it fails validation is that the proceed button is of type submit, so it submits the form whether or not it's onclick event did anything. make it of type button and add document.forms[1].submit to ValidateSubCategory if the form validates.

Edited by Gerbiler: n/a

0

Issue resolved!
Thank you very much Gerbiler for your time, great expertise and guidance. Here is my revised code. All is well!

<script>
function ValidateSubCategory()
{
    if ( document.SubCategory.specifiedperiod.selectedIndex == 0 )
    {
        alert("You must select a time period");
        return false;
    }
    return true;
}
</script>

</HEAD>

<BODY>
<FORM NAME="SubCategory" method=post action='accountingsearch2.php' target='_top'>
<p align="left">
<div id="presetlabel">Or use Preset Periods-->></div>
<div id="SubCat">
<SELECT NAME="specifiedperiod" style="display:inline";>
<OPTION>Select a Time Period
<OPTION>Today
<OPTION>Week to Date
<OPTION>Current Month
<OPTION>Current Quarter
<OPTION>Past Quarter
<OPTION>Year-to-Date
<OPTION>Previous Year
</SELECT>
</div>

<div id="continue2"><input type='submit' id='proceed'  onclick='return ValidateSubCategory();'> </div> <!--the validation does not work with onsubmit-->
</FORM>
<form name="SubCategory2" method=post action='accountingsearch.php' target='_top'>
<div id="callabel"><label for="theDate">From today thru</label></div>
<div id="othersearch"><input type="text" value="2010/10/24" readonly name="theDate" size="11"><input type="button" id="proceed" value="Calendar" onclick="displayCalendar(this.form.theDate,'yyyy/mm/dd',this)";></div>
 <!--<INPUT TYPE="" VALUE="" name="specifiedperiod" style="display:inline";-->
<div id="continue"><input type='submit' id='proceed' ></div>

The very Best!
Mossa

Edited by mbarandao: n/a

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.