Solved

Prevent other asp buttons from performing submit action

Posted on 2014-12-18
17
132 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 7
17 Comments
 
LVL 83

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 83

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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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 83

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 83

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
 

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 83

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 83

Expert Comment

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

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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: Swadhin
Introduction of Lists in Python: There are six built-in types of sequences. Lists and tuples are the most common one. In this article we will see how to use Lists in python and how we can utilize it while doing our own program. In general we can al…
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
Learn the basics of strings in Python: declaration, operations, indices, and slicing. Strings are declared with quotations; for example: s = "string": Strings are immutable.: Strings may be concatenated or multiplied using the addition and multiplic…
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…

623 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