goto next step on asp:wizard from aspx (JS) on div click

2.8k Views Asked by At

I have a div on the aspx page in which I have created an onClick event. The onClick for the div points to:

onclick="'javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$Wizard1$StepNavigationTemplateContainerID$StepNextButton", "", true, "", "", false, false))'"

The above link so happens to be the onClick for the StepNext button on the page. I have removed that button's visibility, and hence want to permit it so that when I click on this div it would goto the next step.

However, it doesn't work? The browser does nothing. Is there a way I can goto the next step from the aspx page?

EDIT: Here is some additional code:

The div (note: I tried with the exact onClick of the code below it, and does not work either):

            <div id="Box1" class="BoxUploadStyle"  onmouseover="this.style.backgroundImage='url(../IMG/box1_over.gif)';this.style.cursor='hand';this.style.cursor='pointer';" 
                onmouseout="this.style.backgroundImage='url(../IMG/box1.gif)';" 
                onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions('Box1', '', true, '', '', false, false))">  
            <h3><a href="#">Simple Upload</a></h3> 
            Upload upto 10 files each time.
            </div>

Here is the code for the button Next and Previous (from the View Source - since it is part of the wizard):

</tr><tr>
        <td align="right">
            <input type="submit" name="ctl00$ContentPlaceHolder1$Wizard1$StepNavigationTemplateContainerID$StepPreviousButton" value="Previous" id="ctl00_ContentPlaceHolder1_Wizard1_StepNavigationTemplateContainerID_StepPreviousButton" style="color:#284E98;background-color:White;border-color:#507CD1;border-width:1px;border-style:Solid;font-family:Verdana;font-size:0.8em;" />
            <input type="submit" name="ctl00$ContentPlaceHolder1$Wizard1$StepNavigationTemplateContainerID$StepNextButton" value="Next" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ContentPlaceHolder1$Wizard1$StepNavigationTemplateContainerID$StepNextButton&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="ctl00_ContentPlaceHolder1_Wizard1_StepNavigationTemplateContainerID_StepNextButton" style="color:#284E98;background-color:White;border-color:#507CD1;border-width:1px;border-style:Solid;font-family:Verdana;font-size:0.8em;" />
        </td>
2

There are 2 best solutions below

3
On

I can see 2 issues which might cause your javascript not to run:

  1. You are double quoting your javascript string: you have:

    onclick="'javascript:...'"

and it should be:

onclick="javascript:..."

or

onclick='javascript:...'

Also, you shouldn't use the " html entity in javascript to indicate a quote, you should just use quotes (just make sure you use the opposite of the one you use to surround the entire javascript line).

try changing your code line to this:

onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions('ctl00$ContentPlaceHolder1$Wizard1$StepNavigationTemplateContainerID$StepNextButton', '', true, '', '', false, false))"
0
On

The wizard button Next has type="submit"

So, in your javascript code after WebForm_DoPostBackWithOption, you have to call document.forms[0].submit();