Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 138
  • Last Modified:

Prevent other asp buttons from performing submit action

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
Nate_LR
Asked:
Nate_LR
  • 8
  • 7
1 Solution
 
Dave BaldwinFixer of ProblemsCommented:
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
 
Nate_LRAuthor Commented:
I appreciate your comments, but I don't read any recommendations or solutions in your response.
0
 
Dave BaldwinFixer of ProblemsCommented:
Show me the code in the View Source of your browser and I might have some recommendations.
0
A proven path to a career in data science

At Springboard, we know how to get you a job in data science. With Springboard’s Data Science Career Track, you’ll master data science  with a curriculum built by industry experts. You’ll work on real projects, and get 1-on-1 mentorship from a data scientist.

 
Nate_LRAuthor Commented:
<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
 
Dave BaldwinFixer of ProblemsCommented:
"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
 
Nate_LRAuthor Commented:
If I turn them into javascript buttons, then how do I perform the code behind functions btnRemove_Click and btnEmpty_Click?
0
 
Nate_LRAuthor Commented:
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
 
Dave BaldwinFixer of ProblemsCommented:
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
 
Nate_LRAuthor Commented:
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
 
Dave BaldwinFixer of ProblemsCommented:
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
 
Nate_LRAuthor Commented:
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
 
Dave BaldwinFixer of ProblemsCommented:
They must do something.  If not then remove them.
0
 
Dave BaldwinFixer of ProblemsCommented:
You might want to click on "Request Attention" to get some others with more experience to look at your question.
0
 
Bob LearnedCommented:
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
 
Nate_LRAuthor Commented:
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
 
Nate_LRAuthor Commented:
I found my own solution.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

A proven path to a career in data science

At Springboard, we know how to get you a job in data science. With Springboard’s Data Science Career Track, you’ll master data science  with a curriculum built by industry experts. You’ll work on real projects, and get 1-on-1 mentorship from a data scientist.

  • 8
  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now