Solved

Prevent other asp buttons from performing submit action

Posted on 2014-12-18
17
121 Views
Last Modified: 2015-01-13
I'm building an upload form.  Along with uploading, the user needs to enter some data and may or may not to work with a cart.   The cart buttons remove a listing from the cart or empty the cart entirely.  However, when I attempt to use these buttons, the page performs the submit action I have indicated, return validateForm()....
<form enctype="multipart/form-data" runat="server" method="post" action="gpsFieldPics.py" name="uploadForm" id="uploadForm" onSubmit="return validateForm()">

<asp:Button ID="btnRemove" runat="server" Text="Remove Track" UseSubmitBehavior="false" OnClick="btnRemove_Click" /><br /> 
<asp:Button ID="btnEmpty" runat="server" Text="Empty Cart" OnClick="btnEmpty_Click"  />

<input id="btnProcess" type="submit" value="Upload and Process" onclick="selectAllTracks()" />

Open in new window


That is not the complete form by the way.   You may notice I tried to use this... UseSubmitBehavior="false" , but it doesn't work in the way I thought it might.   Here are the code behind functions I'm trying to use....
protected void btnRemove_Click(object sender, EventArgs e) 
    {
        if (trks.Count > 0)
        {
            if (trkCart.SelectedIndex > -1)
            {
                trks.RemoveAt(trkCart.SelectedIndex);
                this.DisplayTrackCart();
            }
            else
            {
                lblMessage.Text = "Please select the item you want to remove.";
            }
        }
    }

 protected void btnEmpty_Click(object sender, EventArgs e)
    {
        if (trks.Count > 0)
        {
            trks.Clear();
            trkCart.Items.Clear();
        }
    }

Open in new window


I apparently cannot use PageFunctions or Ajax to call the code-behind functions because they are not static and don't return anything.

I also cannot split the form into two forms, because an asp page cannot have two forms with runat=server and because I'm using a python cgi script which seems  to only recover the elements of one form not two.

Any ideas on what I can do?  Thanks
0
Comment
Question by:Nate_LR
  • 8
  • 7
17 Comments
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 40508124
runat="server" can be very misleading.  While that tells the server to execute some things, other things will be done Only in the browser.  Certain kinds of images and buttons are defined to be 'submit' buttons in HTML and if you use them, that is what will happen.  Also, in the browser, if the user presses 'Enter' while they are in a field, the form will be submitted.
0
 

Author Comment

by:Nate_LR
ID: 40508175
I appreciate your comments, but I don't read any recommendations or solutions in your response.
0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 40508273
Show me the code in the View Source of your browser and I might have some recommendations.
0
 

Author Comment

by:Nate_LR
ID: 40509384
<div class="wrap">

    <div class="main" id="content">
              

        <form method="post" action="gpsFieldPics.py" id="uploadForm" enctype="multipart/form-data" onSubmit="return validateForm()">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE3MDgzMTE0NDIPZBYCAgMPZBYCAgcPEGQQFQAVABQrAwBkZBgBBR5fX0NvbnRyb2xzUmVxdWlyZVBvc3RCYWNrS2V5X18WAQUHdHJrQ2FydPvcxzWsurnmHF4Z0H2VpBAdjIkPkFuFm6+UndwJ33Pm" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['uploadForm'];
if (!theForm) {
    theForm = document.uploadForm;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<script src="/GpsFieldPics/WebResource.axd?d=QKnclz054y4_qz-j2pRytk1jVIMLGtUu01JHDp9kzl-XA-7_n7lyFCowGPMZycJDw3WnzPayyk6ZAIqY_QWOVODbcnuyY72YKeWTAzU8kNU1&amp;t=635418424260000000" type="text/javascript"></script>


<script src="/GpsFieldPics/ScriptResource.axd?d=cSfecs94yz2PnBrNd_sexZku266qMXekqXgJLLVVWylidu9ZGv5Qfqx2Sz5_mCabTp6rk42PytrPoJce_JhCdax4SYbUgCpHetTEgAiX2xho8EPN2jR4Sc9SOPnibm32BiRvXVM2WnAuue4wyx2BNw2&amp;t=51e37521" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>



        <script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ToolkitScriptManager1', 'uploadForm', [], [], [], 90, '');
//]]>
</script>

        <table>

            <tr>
                <td style="width: 100px;">
                </td>

                <td colspan="2">
                    <strong>Instructions: </strong>
                    <br />
                    1.  To only process a new tracklog, select a tracklog .dbf file and select a Project.
                    <br />
                    2.  To relate photos to tracklogs and field collection points, select your photos and either select a tracklog
                        .dbf file, add tracks to the the tracklog cart, or both.
                    <br />
                    3.  To relate photos to field collection points only, select your photos and enter a date or a 
                        span of dates.
                    <br />
                    (For options #2 and #3, it is required to enter the time difference between the GPS and the camera
                    and select a Project and Photographer.)
                </td>
            </tr>
            <tr>
                <td style="width: 100px;">
                </td>

                <td style="width: 500px;">

                    
                            
                        <table>
                        
                            <tr>
                                <td>
                                    <br /><br />                                                                     

                                </td>
                            </tr>

                            <tr>
                                <td style="vertical-align:top;">
                                    <label for="fieldPics">Select Fieldpics:</label>
                    
                                    <input type="file" name="fieldPics" id="fieldPics" multiple="multiple" onChange="checkPhotoExt()"  /> 
  
                                    <br /><br />
                                    <label for="trkLog">Tracklog:</label> 

                                    <input type="file" name="trkLog" id="trkLog" accept="application/dbf" onChange="checkDbfFile()"  />

                                    <br /><br />
                                    
                                </td>
                            </tr>
                        

                            <tr>
                                <td>
                                    <br /><br />
                                    <br /><br />
                                    <br /><br /> 
                                    <br /><br />
                                    <br /><br />
                                                                                         

                                </td>
                            </tr>
                    
                             

                            <tr>
                                <td>
                                    <input type="text" name="minDiff" style="width: 50px;" /> Minutes &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  
                                    <input type="text" name="secDiff" style="width: 50px;" /> Seconds
                         
                                    <br /><br />
                                    <input type="radio" name="timeDiffOption" value="ahead" /> Ahead of GPS &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

	                                <input type="radio" name="timeDiffOption" value="behind" /> Behind GPS 
                                </td>
                            </tr>
                            

                            <tr>
                                <td>
                                    <br /><br />
                                </td>
                            </tr>


                            <tr>
                                <td>
                                    <input id="btnProcess" type="submit" value="Upload and Process" onclick="selectAllTracks()" />
                                    
                                </td>
                            </tr>
                        
                        </table>                            
                                       
                </td>

                <td style="vertical-align:top; width: 1200px;">
                                                              
                        <p id="carthead">Your tracklog cart:</p>

                        <div id="cartbuttons">
                            <input type="button" name="btnRemove" value="Remove Track" onclick="javascript:__doPostBack(&#39;btnRemove&#39;,&#39;&#39;)" id="btnRemove" /><br /> 
                           
                            <input type="submit" name="btnEmpty" value="Empty Cart" id="btnEmpty" />
                        
                        </div>

                        <select size="4" name="trkCart" multiple="multiple" id="trkCart">

</select>

                        <p id="shopbuttons">
                                   
                            <a id="toTracks" class="Hyper" href="Tracks.aspx">Back To Track Selection</a>  <img src="Images/green_arrow_forward.png" alt="back arrow to tracks" />
                        </p>

                        <p id="message">
                            <span id="lblMessage"></span>
                        </p>

                        <br />
                        <br />

                        
                        <table>
                            <tr>
                                <td>
                                    <select name="project" id="project" style="width:142px;">
	<option value=""></option>
	<option value="Project1">Project1</option>
	<option value="Project2">Project2</option>
	<option value="Project3">Project3</option>
	

</select>
                                    Project &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                </td>
                                <td>
                                    <select name="photographer" id="photographer" style="width:142px;">
	<option value=""></option>
	<option value="Name1">Name1</option>
	<option value="Name2">Name2</option>
	<option value="Name3">Name3</option>
	
</select>
                                    Photographer 
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <br />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    

                                    <input name="date1" type="text" id="date1" placeholder="MM/DD/YYYY" />  Date 1 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    
                                </td>
                                <td>
                                    <input name="date2" type="text" id="date2" placeholder="MM/DD/YYYY" />  Date 2
                                    
                                </td>
                            </tr>
                        </table>
                           
                        
                    

                </td>            
            </tr>        
        </table> 
        
        

<script type="text/javascript">
//<![CDATA[
Sys.Application.add_init(function() {
    $create(Sys.Extended.UI.CalendarBehavior, {"id":"CalendarExtender1"}, null, null, $get("date1"));
});
Sys.Application.add_init(function() {
    $create(Sys.Extended.UI.CalendarBehavior, {"id":"CalendarExtender2"}, null, null, $get("date2"));
});
//]]>
</script>
</form>        
        
     </div>        

</div>

Open in new window

0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 40509957
"Upload and Process" and "Empty Cart" are both regular submit buttons which will submit the form.  Also, if someone is in the time or date fields and presses enter, the form will be submitted.  Maybe you could turn "Empty Cart" into a javascript like the "Remove Track" button.
0
 

Author Comment

by:Nate_LR
ID: 40509961
If I turn them into javascript buttons, then how do I perform the code behind functions btnRemove_Click and btnEmpty_Click?
0
 

Author Comment

by:Nate_LR
ID: 40509969
Also have to disagree that the Remove Track button is javascript, this is how it currently is...
<div id="cartbuttons">
          <asp:Button ID="btnRemove" runat="server" Text="Remove Track" UseSubmitBehavior="false" OnClick="btnRemove_Click" /><br />
           <%-- <input type="button" id="btnRemove" value="Remove Track" onclick="RemoveTrack();" /> <br />--%>
          <asp:Button ID="btnEmpty" runat="server" Text="Empty Cart" OnClick="btnEmpty_Click"  />                        
</div>
0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 40510084
I guess you should look at the "View Source" you posted above.  When you use runat="server" , you have to look at the View Source in the browser to see what the ASP interpreter has converted it to.  No browser, not even IE, runs ASP code.
<input type="button" name="btnRemove" value="Remove Track" onclick="javascript:__doPostBack(&#39;btnRemove&#39;,&#39;&#39;)" id="btnRemove" /><br /> 
                           
<input type="submit" name="btnEmpty" value="Empty Cart" id="btnEmpty" />

Open in new window

0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:Nate_LR
ID: 40510186
The only reason you're seeing this...
onclick="javascript:__doPostBack(&#39;btnRemove&#39;,&#39;&#39;)"

is because I have UseSubmitBehavior="false" in...
<asp:Button ID="btnRemove" runat="server" Text="Remove Track" UseSubmitBehavior="false" OnClick="btnRemove_Click" />

if I take UseSubmitBehavior="false" out, it looks like this...
<input type="submit" name="btnRemove" value="Remove Track" id="btnRemove" />
0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 40510196
Then you would have another submit button on the page.  Which I believe is what you are trying to get rid of.

If you have to 'go back to the server' for those changes then I guess AJAX is the thing to do.  That could be a big change to your page though.
0
 

Author Comment

by:Nate_LR
ID: 40510219
But btnRemove_Click and btnEmpty_Click are not static, they don't return anything.  How can I get AJAX or modify those functions to get that to work?
0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 40510273
They must do something.  If not then remove them.
0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 40510274
You might want to click on "Request Attention" to get some others with more experience to look at your question.
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 40513215
Are you trying to prevent a post-back, but still do the action?

UseSubmitBehavior just switches between browser or ASP.NET post-back, but doesn't prevent a post-back.
0
 

Accepted Solution

by:
Nate_LR earned 0 total points
ID: 40539044
The only way I got this working is by creating two forms - one html form and one asp.net form for the cart.  Within the html form I have a second cart...
<select size="2" id="trkCart2" name="trkCart2" style="visibility:hidden;" multiple="multiple"></select>

Open in new window


Within my asp.net form I have the two buttons to edit the visible cart....
<asp:Button ID="btnRemove" runat="server" Text="Remove Track" OnClick="btnRemove_Click"  /><br /> 
 <asp:Button ID="btnEmpty" runat="server" Text="Empty Cart" OnClick="btnEmpty_Click"  />

Open in new window


Here are the code-behind functions for those buttons....
private void DisplayTrackCart()
    {
        ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "Clear Track Cart",
                 string.Format("clearTrackCart2();"), true);

        trkCart.Items.Clear();
        Track trk;
        for (int i = 0; i < trks.Count; i++)
        {
            trk = trks[i];
            trkCart.Items.Add(new ListItem(trk.TrkCartDisplay(), trk.trackID.ToString()));
            ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "Add Track " + i.ToString(),
                         "popHtmlTrackCart2('" + trk.trackID.ToString() + "', '" + trk.TrkCartDisplay() + "');", true);
        }
        
    }



    protected void btnRemove_Click(object sender, EventArgs e) 
    {
        if (trks.Count > 0)
        {
            if (trkCart.SelectedIndex > -1)
            {
                trks.RemoveAt(trkCart.SelectedIndex);
                this.DisplayTrackCart();
            }
            else
            {
                lblMessage.Text = "Please select the item you want to remove.";
            }
        }
    }

protected void btnEmpty_Click(object sender, EventArgs e)
    {
        if (trks.Count > 0)
        {
            trks.Clear();
            trkCart.Items.Clear();
        }

        ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "Clear Track Cart",
                 string.Format("clearTrackCart2();"), true);
    }

Open in new window


And here are the javascript functions the code-behind functions call....
function popHtmlTrackCart2(value, txt) {
        
        var trkCart2 = document.getElementById("trkCart2");
        //trkCart2.innerHTML = "";
        if (typeof trkCart2 === 'undefined' || trkCart2 === null) {
            setTimeout(function () {
                popHtmlTrackCart2(value, txt);
            }, 100);
        } else {
            var el = document.createElement("option");
            el.innerHTML = txt;
            el.value = value;
            trkCart2.appendChild(el);
        }        
    }

    function clearTrackCart2() {

        var trkCart2 = document.getElementById("trkCart2");
        //trkCart2.innerHTML = "";
        if (typeof trkCart2 === 'undefined' || trkCart2 === null) {
            setTimeout(function () {
                clearTrackCart2();
            }, 100);
        } else {
            trkCart2.innerHTML = "";
        }
    }

Open in new window

0
 

Author Closing Comment

by:Nate_LR
ID: 40546217
I found my own solution.
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Suggested Solutions

Introduction On September 29, 2012, the Python 3.3.0 was released; nothing extremely unexpected,  yet another, better version of Python. But, if you work in Microsoft Windows, you should notice that the Python Launcher for Windows was introduced wi…
Sequence is something that used to store data in it in very simple words. Let us just create a list first. To create a list first of all we need to give a name to our list which I have taken as “COURSE” followed by equals sign and finally enclosed …
Learn the basics of if, else, and elif statements in Python 2.7. Use "if" statements to test a specified condition.: The structure of an if statement is as follows: (CODE) Use "else" statements to allow the execution of an alternative, if the …
Learn the basics of while and for loops in Python.  while loops are used for testing while, or until, a condition is met: The structure of a while loop is as follows:     while <condition>:         do something         repeate: The break statement m…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now