locked
Does anyone have an idea why my form submission stopped submitting? RRS feed

  • Question

  • User1216627406 posted

    My ASP.Net form was submitting just fine until I added bootstrap validation with AJAX to submit the form.

    Suddenly, it is no longer submitting. When I click the submit button, it appears like it was going to submit but doesn't.

    I believe as usual that I am missing something. The name of the file I am posting here is called policies.aspx.

    I have been bogged down by this since yesterday evening.

    Thanks for your help in advance.

     <form id="form1" runat="server" class="form-inline">
               <asp:ScriptManager ID="ScriptManager1" runat="server" />
       <fieldset>
           
          <!-- Form Name -->
          <legend> Personal Information </legend>
    
       <div class="envelope">
       <asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Inline"><ContentTemplate>
        <asp:Label style="font-weight:bold;font-size:16px;" ID="Label1" Runat="Server">
        </asp:Label>
    
        <div style="margin-top:2px;margin-left:112px;">
         <asp:Label ID="txtaffirmation" runat="server"> </asp:Label></div><br /><br />
       <div style="margin-left:200px;">
      <div class="form-group">
        <label>Employee Name</label>
              <div class="inner-addon left-addon">
              <i class="glyphicon glyphicon-user"></i>
        <asp:Textbox id="txtFullName" required="true" runat="server" class="form-control" style="text-transform:uppercase;" />
      </div></div>
      <div class="form-group">
        <label>Employee ID</label>
                        <div class="inner-addon left-addon">
                    <i class="glyphicon glyphicon-camera"></i>
        <asp:Textbox id="txtUserName" required="true" runat="server" class="form-control" />
          </div></div>
      <div style="margin-left:-100px;">
      <div class="col-xs-4">
     <div class="form-group">
          <label>Employee Email</label>
                        <div class="inner-addon left-addon">
                    <i class="glyphicon glyphicon-envelope"></i>
        <asp:Textbox id="txtEmail" required="true" runat="server" placeholder="Your email address..." />
    
      </div></div></div>
     <div class="col-xs-4">
     <div class="form-group">
          <label>Employee Signature</label>
              <div class="inner-addon left-addon">
              <i class="glyphicon glyphicon-unchecked"></i>
        <asp:Textbox id="txtSignature" required="true" runat="server" placeholder="Your signature..." />
    
      </div></div></div>
     <div class="col-xs-4">
     <div class="form-group">
          <label>Date</label>
              <div class="inner-addon left-addon">
              <i class="glyphicon glyphicon-calendar"></i>
        <asp:Textbox id="txtDate" required="true" runat="server" />
        </div></div></div></div></div>
        <asp:Button ID="btnAdd" class="btn btn-warning" style="margin-left:250px;" runat="server" CausesValidation="false" Text="Submit and Close" OnClick="Insert"  />
        </ContentTemplate> </asp:UpdatePanel>
        <asp:Panel ID="PleaseWaitMessagePanel" runat="server" CssClass="modalPopup" Height="60px" Width="125px"> Please wait<br /> <img src="images/loader.gif" alt="Please wait" /> </asp:Panel> <asp:Button ID="HiddenButton" runat="server" CssClass="hidden" Text="Hidden Button" ToolTip="Necessary for Modal Popup Extender" /> 
        <cc1:ModalPopupExtender ID="PleaseWaitPopup" BehaviorID="PleaseWaitPopup" runat="server" TargetControlID="HiddenButton" PopupControlID="PleaseWaitMessagePanel" BackgroundCssClass="modalBackground"> </cc1:ModalPopupExtender>
       </div>
        </fieldset>
             </form>
    <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js'></script>
       <script type="text/javascript">
    
         $(document).ready(function () {
             $('#form1').bootstrapValidator({
                 // To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
                 feedbackIcons: {
                     valid: 'glyphicon glyphicon-ok',
                     invalid: 'glyphicon glyphicon-remove',
                     validating: 'glyphicon glyphicon-refresh'
                 },
                 fields: {
                     txtEmail: {
                         validators: {
                             notEmpty: {
                                 message: 'Please supply your email address'
                             },
                             emailAddress: {
                                 message: 'Please supply a valid email address'
                             }
                         }
                     },
    
                     txtSignature: {
                         validators: {
                             stringLength: {
                                 min: 2,
                             },
                             notEmpty: {
                                 message: 'Please supply your signature'
                             }
                         }
                     },
    
    
                 }
             })
    
    
                 .on('success.form.bv', function (e) {
                     $('#success_message').slideDown({ opacity: "show" }, "slow") // Do something ...
                     $('#form1').data('bootstrapValidator').resetForm();
    
                     // Prevent form submission
                     e.preventDefault();
    
                     // Get the form instance
                     var $form = $(e.target);
    
                     // Get the BootstrapValidator instance
                     var bv = $form.data('bootstrapValidator');
    
                     // Use Ajax to submit form data
                     $.post($form.attr('action'), $form.serialize(), function (result) {
                         console.log(result);
                     }, 'json');
                 });
         });
    
    </script>
    
        <script type="text/javascript">
        $("#txtDate").datepicker();
        $("#txtDate").datepicker("setDate", new Date());
       </script>
        <style type="text/css">
        .ui-datepicker-today {
        background: green !important;
        }
        </style>
        </body>

    Thursday, November 10, 2016 2:54 PM

All replies

  • User753101303 posted

    Hi,

    simflex

    it appears like it was going to submit but doesn't.

    Not 100% clear. Does it look like there is an Ajax request that happens? Use F12 in your browser and check the console tab for possible javascript errors or the Network tab for AJax requests. Put a breakpoint on the server side code to see if called etc... You could also try wihtout the update panel to see what happens (I don't like them much).

    Usually it's easier to use this kind of tool to find first how it fails exactly. You can then fix this error.

    Looking at the code and wondering what happens is IMHO much less efficient.

    Thursday, November 10, 2016 5:22 PM
  • User1216627406 posted

    Thanks a lot Patrice.

    You are right, I don't like updatePanel myself but that's the only way I could get loader on the form to work for us.

    Management us to put Processing...please wait and that's the only I could get to work.

    That may be causing the problem.

    Thursday, November 10, 2016 7:54 PM