Avatar of digitalwise
digitalwise

asked on 

jquery form submission - multiple forms on page

We have multiple forms on a page that are popped up in a bootstrap modal - when we had one, we could submit the data from the modal and all was well.   Once we added a 2nd one, we started having weird issues - it keeps giving me alerts or randomly closing the modal.    The biggest issue is that it is refreshing the page too.

This is the jquery for the two of them.

$('##searejectform_'+radiovalue).on('submit', function(e){
      e.preventDefault();
      $.post('_pa_rejectsea.cfm', 
         $('##searejectform_'+radiovalue).serialize(), 
         function(data, status, xhr){
           alert( "Saved" );
        // Set a timeout to hide the element again
        setTimeout(function(){
          $("##searejectreason_"+radiovalue).hide();
        }, 3000);
         });
    });

$("##tyrejectreason_"+radiovalue).modal('show');
	 $('##tyrejectform_'+radiovalue).on('submit', function(e){
      e.preventDefault();
      $.post('_pa_rejectty.cfm', 
         $('##tyrejectform_'+radiovalue).serialize(), 
         function(data, status, xhr){
           alert( "Saved" );
        // Set a timeout to hide the element again
        setTimeout(function(){
          $("##tyrejectreason_"+radiovalue).hide();
        }, 3000);
         });
    });

Open in new window


This is the code for the actual modals

<div class="modal fade" id="tyrejectreason_#pkid#">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">Thank You Letter Rejection Reason</h4>
      </div>
      <div class="modal-body">
        
        <form method="post" id="tyrejectform_#pkid#">
        <input type="hidden" name="pkid" value="#pkid#">
        
        Reason:<br>
<textarea name="Complete_TY_RejectedReason" id= "Complete_TY_RejectedReason_#pkid#" style="width:250px; height:150px;">#trim(Complete_TY_RejectedReason)#</textarea>
        
         <button type="submit" id="tysave">Save Changes</button>
        </form>
        
        
      </div>
      
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="modal fade" id="searejectreason_#pkid#">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">Student Aid & Expenses Rejection Reason</h4>
      </div>
      <div class="modal-body">
        
        <form method="post" id="searejectform_#pkid#">
        <input type="hidden" name="pkid" value="#pkid#">
        
        Reason:<br>
<textarea name="Complete_SEA_RejectedReason" id= "Complete_SEA_RejectedReason_#pkid#" style="width:250px; height:150px;">#trim(Complete_SEA_RejectedReason)#</textarea>
        
         <button type="submit" id="seasave">Save Changes</button>
        </form>
        
        
      </div>
      
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div>

Open in new window


What am I missing?   The data is updating in the tables so that part works but it is quirky...
jQuery

Avatar of undefined
Last Comment
zephyr_hex (Megan)

8/22/2022 - Mon