Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Prevent other asp buttons from performing submit action

Posted on 2014-12-18
17
Medium Priority
?
134 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 84

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 84

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
Technology Partners: 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 84

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 84

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 84

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 84

Expert Comment

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

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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Hello there! As a developer I have modified and refactored the unit tests which was written by fellow developers in the past. On the course, I have gone through various misconceptions and technical challenges when it comes to implementation. I would…
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 modules and packages in Python. Every Python file is a module, ending in the suffix: .py: Modules are a collection of functions and variables.: Packages are a collection of modules.: Module functions and variables are accessed us…

927 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