Multiple Onclick conflict

Question

mbarandao 0 Junior Poster

13 Years Ago

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

javascript

2 Contributors
8 Replies
735 Views
16 Hours Discussion Span
Latest Post 13 Years Ago Latest Post by mbarandao

Gerbiler 1 Junior Poster in Training

13 Years Ago

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 13 Years Ago by Gerbiler because: typo

Gerbiler 1 Junior Poster in Training

13 Years Ago

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.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

mbarandao 0 Junior Poster · Answer 1 · 2010-12-01T00:59:36+00:00

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)});

mbarandao 0 Junior Poster · Answer 2 · 2010-12-01T01:49:23+00:00

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?

Gerbiler 1 Junior Poster in Training · Answer 3 · 2010-12-01T02:22:14+00:00

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

mbarandao 0 Junior Poster · Answer 4 · 2010-12-01T03:15:15+00:00

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.

Gerbiler 1 Junior Poster in Training · Answer 5 · 2010-12-01T04:13:54+00:00

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.

mbarandao 0 Junior Poster · Answer 6 · 2010-12-01T10:00:40+00:00

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