Foros del Web » Programando para Internet » Jquery »

submit no funciona dentro de un modal

 Estas en el tema de submit no funciona dentro de un modal en el foro de Jquery en Foros del Web. Hoal buenas , supongamos que tenemos este archivo en php @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código PHP: Ver original echo '<div class="modal-header">';     echo    '<button type="button" ...
  #1 (permalink)  
Antiguo 02/12/2015, 02:55
 
Fecha de Ingreso: febrero-2011
Ubicación: Barcelona
Mensajes: 195
Antigüedad: 13 años, 9 meses
Puntos: 1
submit no funciona dentro de un modal
Hoal buenas , supongamos que tenemos este archivo en php
Código PHP: 
Ver original
  1. echo '<div class="modal-header">'; 
  2.     echo    '<button type="button" class="close" data-dismiss="modal">&times;</button>';
  3.     echo    '<h4 class="modal-title">Seleccione Contrato</h4>';
  4.     echo  '</div>';
  5.     
  6. {   
  7.     echo '<div class="modal-body">';   
  8.     echo    '<form  id="formcontract"   class="form-horizontal">';
  9.     echo    '<div class="form-group">';
  10.     echo        '<label class="col-sm-3 control-label" for="formGroup" id="contract">Contratos</label>';
  11.    
  12.     echo        '<div class="input-group col-sm-7">';
  13.     echo        '<span class="input-group-addon"><span class="glyphicon glyphicon-list-alt"></span></span>';    
  14.     echo        '<select  name="contrato" class="selectboxit" onchange="mostrarValor(this);">';
  15.     echo '<option selected="disabled">Selecciona un Contrato</option>';
  16.     foreach($incidencias as $cust) 
  17.     { 
  18.             echo '<option value="'.$cust->Num_distribucion.'-'.$cust->Num_dist_venta.'-'.$cust->Num_linea_operacion.'-'.$cust->Num_operacion.'">'.$cust->Num_contrato.' '.$cust->Cdad_disponible.'Kg de '.$cust->NombreProducto.'</option>';
  19.             
  20.     }
  21.             
  22.             echo '</select>';
  23.     echo '</div>';
  24.     echo '</div>';
  25.     
  26.     echo '<div class="col-xs-4">';
  27.     /* echo '<input type="text" class="form-control"  size="5" name="cupo" id="cupo" disabled/>'; */
  28.  
  29.     echo '</div>';
  30.     echo '</div>';
  31.     echo '</div>';
  32.     echo '<div class="col-sm-12">&nbsp;</div>';
  33.     echo '<div class="col-sm-12">&nbsp;</div>';
  34.     echo '<div class="col-sm-12">&nbsp;</div>';
  35.     
  36.     
  37.     /* echo  "Toneladas de "; */
  38. ?>
  39. <link rel="stylesheet" href="assets/css/font-icons/font-awesome/css/font-awesome.min.css">  
  40.  
  41.  
  42.  
  43. <?php
  44.  
  45.  
  46. echo '<div class="modal-header">
  47.  
  48.  
  49.         <h4 class="modal-title">Autorización de Matrículas</h4>
  50.     </div>
  51. <div class="col-sm-2">&nbsp;</div>
  52. <div class="col-sm-3">&nbsp;</div>
  53.  
  54.  <div class="modal-body">
  55.             
  56.      
  57.                     <div class="form-group">
  58.                             <label class="col-sm-3 control-label" for="formGroup">Tractora</label>
  59.                               <div class="input-group col-sm-5">
  60.                                 <span class="input-group-addon"><span class="fa fa-keyboard-o"></span></span>
  61.                               <input class="form-control" type="text" name="matricula" id="formGroup" placeholder="AAA1234">
  62.                               
  63.                             </div>
  64.                         </div>  
  65. <div class="col-sm-12">&nbsp;</div>
  66. <div class="col-sm-12">&nbsp;</div>
  67.                     <div class="form-group">
  68.                             <label class="col-sm-3 control-label" for="formGroup">Remolque</label>
  69.                               <div class="input-group col-sm-5">
  70.                                 <span class="input-group-addon"><span class="fa fa-keyboard-o"></span></span>
  71.                               <input class="form-control" type="text" name="matricular" id="formGroup" placeholder="AAA1234">
  72.                               
  73.                             </div>
  74.                           </div>    
  75. <div class="col-sm-12">&nbsp;</div>
  76. <div class="col-sm-12">&nbsp;</div>                     
  77.                     <div class="form-group">
  78.                             <label class="col-sm-3 control-label" for="formGroup">N.I.F-N.I.E</label>
  79.                               <div class="input-group col-sm-5">
  80.                             <span class="input-group-addon"><span class="fa fa-credit-card"></span></span>
  81.                               <input class="form-control" type="text" name="dni" id="formGroup" placeholder="DNI o PASAPORTE">
  82.                                 </div>
  83.                         </div>
  84. <div class="col-sm-12">&nbsp;</div>
  85. <div class="col-sm-12">&nbsp;</div>                                 
  86.                     <div class="form-group">
  87.                             <label class="col-sm-3 control-label" for="formGroup">Conductor</label>
  88.                               <div class="input-group col-sm-5">
  89.                             <span class="input-group-addon"><span class="entypo-user"></span></span>
  90.                               <input class="form-control" type="text" name="xofer" id="formGroup" placeholder="Nombre y Apellido">
  91.                                 </div>
  92.                         </div>
  93. <div class="col-sm-12">&nbsp;</div>
  94. <div class="col-sm-12">&nbsp;</div>
  95.     <div class="form-group">
  96.                             <label class="col-sm-3 control-label" for="formGroup">P.M.A</label>
  97.                               <div class="input-group col-sm-5">
  98.                             <span class="input-group-addon"><span class="entypo-download"></span></span>
  99.                               <select name="pma" id="formGroup" class="selectboxit">
  100.                               <option>40.800</option>
  101.                               <option>41.000</option>
  102.                               <option>44.000</option>
  103.                               </select>
  104.                             </div>
  105.                               
  106.     </div>
  107.     <div class="col-sm-12">&nbsp;</div>
  108.     <div class="col-sm-12">&nbsp;</div>
  109.                         <div class="modal-footer">
  110.                         <input class="btn btn-success" id="enviar" type="submit" value="Enviar" />
  111.                         </div>
  112.                 </form>';
  113.                 
  114.                      
  115.  
  116.     
  117. }
  118.  
  119.     $nopera = $cust->Num_operacion;
  120.     $distventa = $cust->Num_dist_venta;
  121.     $distribucion = $cust->Num_distribucion;
  122.     $numproduct = $cust->Num_producto;
  123.     $product = $cust->NombreProducto;
  124.     $nuclienvendedor = $cust->Num_cliente_vendedor;
  125.     $noclienvendedor = $cust->NombreClienteVendedor;
  126.     $ncontrato = $cust->Num_contrato;
  127.     $cupos = $cust->Cdad_disponible;
  128.     $lineaopera = $cust->Num_linea_operacion;
  129. /*  echo $nopera;
  130.     echo '<br>';
  131.     echo $lineaopera;
  132.     echo '<br>';
  133.     echo $distventa;
  134.     echo '<br>';
  135.     echo $distribucion;
  136.     echo "|||||";
  137.     echo '<br>';
  138.     echo $ncontrato;
  139.     echo '<br>';
  140.      */
  141.  
  142.  
  143. $_SESSION['Num_linea_operacion'] = $lineaopera;
  144. $_SESSION['Cdad_disponible'] = $cupos;
  145. $_SESSION['Num_contrato'] = $ncontrato;
  146. $_SESSION['NombreClienteVendedor'] = $noclienvendedor;
  147. $_SESSION['Num_cliente_vendedor'] = $nuclienvendedor;
  148. $_SESSION['NombreProducto'] = $product;
  149. $_SESSION['Num_producto'] = $numproduct;
  150. $_SESSION['Num_distribucion'] = $distribucion;
  151. $_SESSION['Num_dist_venta'] = $distventa;
  152. $_SESSION['Num_operacion'] = $nopera;
  153.  
  154.  
  155. ?>
  156. <script>
  157. $("#formcontract").submit(function(e) {
  158.  
  159.     var url = "autorizar.php"; // the script where you handle the form input.
  160.  
  161.     $.ajax({
  162.            type: "POST",
  163.            url: url,
  164.            data: $("#formcontract").serialize(), // serializes the form's elements.
  165.            success: function(data)
  166.            {
  167.                alert(data); // show response from the php script.
  168.            }
  169.          });
  170.  
  171.     e.preventDefault(); // avoid to execute the actual submit of the form.
  172. });
  173. </script>
  174. <script>
  175. var mostrarValor2 = function(x){
  176.             document.getElementById('cupo').value=x.value;
  177.             }
  178. </script>
  179. <script>
  180. var mostrarValor3 = function(x){
  181.             document.getElementById('cupo').value=x.value;
  182.             }
  183. </script>
  184.  
  185.  
  186. <?
  187. $matricula  =  $_POST['matricula'];
  188. $matricular  =  $_POST['matricular'];
  189. $dni  =  $_POST['dni'];
  190. $xofer  =  $_POST['xofer'];
  191. $select  =  $_POST['contrato'];
  192. $pma  =  $_POST['pma'];
  193. die();


es un formulario el cual si lo lanzas del navegador va perfecto

pero si este archivo lo llamo desde un modal el boton submit no funciona
  #2 (permalink)  
Antiguo 02/12/2015, 14:40
 
Fecha de Ingreso: diciembre-2015
Ubicación: rosario
Mensajes: 69
Antigüedad: 8 años, 11 meses
Puntos: 5
Respuesta: submit no funciona dentro de un modal
Creo q tenes q modificar esta linea

Código Javascript: 
Ver original
  1. $("#formcontract").submit(function(e) {

por esta

Código Javascript: 
Ver original
  1. $("#formcontract").on('submit',function(e) {
  #3 (permalink)  
Antiguo 02/12/2015, 14:52
Avatar de andresgarciadev  
Fecha de Ingreso: junio-2013
Mensajes: 218
Antigüedad: 11 años, 4 meses
Puntos: 32
Respuesta: submit no funciona dentro de un modal
cuando el modal se crea dinamicamente, es decir al iniciar la pagina no existia, para que funcione la linea debe ser asi
Código Javascript: 
Ver original
  1. $(document).on('submit',"#formcontract",function(e) {
si aun asi no funciona mira bien si no tienes otro elemento con el mismo id (formcontract)
  #4 (permalink)  
Antiguo 03/12/2015, 03:13
 
Fecha de Ingreso: febrero-2011
Ubicación: Barcelona
Mensajes: 195
Antigüedad: 13 años, 9 meses
Puntos: 1
Respuesta: submit no funciona dentro de un modal
sigue sin funcionar , probe las dos respuestas . posteo el codigo de donde se lanza el modal a ver si veis algo raro , yo desde luego que no veo nada y ya no se que hacer

Código HTML: 
Ver original
  1. <!-- Modal -->
  2.         <div id="myModal" class="modal fade" role="dialog">
  3.             <div class="modal-dialog">
  4.          
  5.             <!-- Modal content-->
  6.             <div class="modal-content">
  7.               <div class="modal-header">
  8.               
  9.                 <button type="button" class="close" data-dismiss="modal">&times;</button>
  10.                 <h4 class="modal-title">Su Perfil de  Usuario</h4>
  11.               </div>
  12.               <div class="modal-body" id="mbody2">
  13.               </div>
  14.              
  15.               </div>
  16.             </div>
  17.          
  18.           </div>
  19.         </div>
  20.  
  21.         
  22.         <div id="myModal2" class="modal fade" role="dialog">
  23.           <div class="modal-dialog modal-lg" role="document">
  24.          <!-- Modal content-->
  25.                 <div class="modal-content">  
  26.                     <div class="form-group">
  27.                         <div class="modal-body" width="800px" id="mbody">
  28.               
  29.               
  30.               
  31.                         </div>  
  32.                     </div>
  33.                 </div>   
  34.             </div>
  35.         </div>      
  36.  
  37.  
  38.  
  39.  
  40. <div class="page-container sidebar-collapsed"><!-- add class "sidebar-collapsed" to close sidebar by default, "chat-visible" to make chat appear always --> 
  41.         
  42.         <div class="sidebar-menu">
  43.             
  44.                 
  45.             <header class="logo-env">
  46.                 
  47.                 <!-- logo -->
  48.                 <div class="logo">
  49.                     <a href="#">    
  50.                         <img src="assets/images/EUROPORTS.png" width="80%" alt="80%" />
  51.                     </a>
  52.                 </div>
  53.                 
  54.                 
  55.                             <!-- logo collapse icon -->
  56.                 <div class="sidebar-collapse">
  57.                     <a href="#" class="sidebar-collapse-icon with-animation"><!-- add class "with-animation" if you want sidebar to have animation during expanding/collapsing transition -->
  58.                     <i class="entypo-menu"></i>
  59.                     </a>
  60.                             
  61.                 </div>
  62.                 
  63.                                         
  64.                 
  65.                 <!-- open/close menu icon (do not remove if you want to enable menu on mobile devices) -->
  66.                 <div class="sidebar-mobile-menu visible-xs">
  67.                     <a href="#" class="with-animation"><!-- add class "with-animation" to support animation -->
  68.                         <i class="entypo-menu"></i>
  69.                     </a>
  70.                 </div>
  71.                 
  72.             </header>
  73.                     
  74.             
  75.             
  76.                     
  77.             
  78.                     
  79.             <ul id="main-menu" class="">
  80.             <a class="btn btn-primary" id="BOTONPARAABRIRMODAL">
  81.                     <i class="entypo-plus" data-toggle="modal" data-target="#myModal2">Autorizar Matrículas</i>
  82.                     </a>
  83.                 <!-- add class "multiple-expanded" to allow multiple submenus to open -->
  84.                 <!-- class "auto-inherit-active-class" will automatically add "active" class for parent elements who are marked already with class "active" -->
  85.                 <!-- Search Bar -->
  86.                 
  87.                 <li class="opened active">
  88.                     <a href="#">
  89.                         <i class="entypo-window"></i>
  90.                         <span>Autorizaciones</span>
  91.                         
  92.                     </a>
  93.                     
  94.                     
  95.                 </li>
  96.             </ul>
  97.                     
  98.         </div>  
  99.         <div class="main-content">
  100.             
  101.     <div class="row">
  102.  
  103.         
  104.         <!-- Profile Info and Notifications -->
  105.         <div class="col-md-6 col-sm-8 clearfix">
  106.             
  107.             <ul class="user-info pull-left pull-none-xsm">
  108.             
  109.                             <!-- Profile Info -->
  110.                 <li class="profile-info dropdown"><!-- add class "pull-right" if you want to place this from right -->
  111.                     
  112.                     <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  113.                         <?php echo '<img src="assets/images/'.$cliente.'.png" alt="" class="img-circle" width="44" />';?>
  114. <?php  echo  "Bienvenid@ "   .$_SESSION['user'];?>
  115.                     </a>
  116.  
  117.                     
  118.             </li>       
  119.                         
  120.                         
  121.             <li class="notifications dropdown">
  122.                         
  123.                 <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
  124.                         <i class="entypo-user" data-toggle="modal" data-target="#myModal" id="BOTONPARAABRIRMODAL2"></i>
  125.                         </a>
  126.                                 
  127.                             
  128.             </li>
  129.  
  130.  
  131.                     
  132.             
  133.         
  134.         </ul>
  135.                 
  136.         
  137.  
  138.  
  139. <li class="external">
  140.     <a href="mailbox.html">All Messages</a>
  141. </li>               </ul>
  142.                 
  143.             </li>
  144.             
  145.             
  146.     <script>
  147. $(function () {
  148. $("#datepicker").datepicker();
  149. });
  150. </script>
  151. </head>
  152. <body>
  153. Fecha:
  154. <div id="datepicker"></div>
  155. </body>
  156. </html>
  157.  
  158.  
  159. <li class="external">
  160.     <a href="#">See all tasks</a>
  161. </li>               </ul>
  162.                 
  163.             </li>
  164.         
  165.         </ul>
  166.     
  167.     </div> 
  168.  
  169.     
  170.     
  171.  <!-- <script type="text/javascript">
  172. var responsiveHelper;
  173. var breakpointDefinition = {
  174.     tablet: 1024,
  175.     phone : 480
  176. };
  177. var tableContainer;
  178.  
  179.     jQuery(document).ready(function($)
  180.     {
  181.         tableContainer = $("#table-1");
  182.         
  183.         tableContainer.dataTable({
  184.             "sPaginationType": "bootstrap",
  185.             "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
  186.             "bStateSave": true,
  187.             
  188.  
  189.             // Responsive Settings
  190.             bAutoWidth     : false,
  191.             fnPreDrawCallback: function () {
  192.                 // Initialize the responsive datatables helper once.
  193.                 if (!responsiveHelper) {
  194.                     responsiveHelper = new ResponsiveDatatablesHelper(tableContainer, breakpointDefinition);
  195.                 }
  196.             },
  197.             fnRowCallback  : function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
  198.                 responsiveHelper.createExpandIcon(nRow);
  199.             },
  200.             fnDrawCallback : function (oSettings) {
  201.                 responsiveHelper.respond();
  202.             }
  203.         });
  204.         
  205.         $(".dataTables_wrapper select").select2({
  206.             minimumResultsForSearch: -1
  207.         });
  208.     });
  209. </script>//-->
  210.  
  211. <br />
  212.  
  213.     
  214. </h2>
  215.  
  216.  
  217.  
  218.  
  219.  
  220. <h4><center>Autorizaciones pendientes de carga</h4>
  221.  
  222.  
  223.  
  224. <?php require_once("autht.php");?>
  225.  
  226.  
  227. <script type="text/javascript"> 
  228. $("#BOTONPARAABRIRMODAL").click(function(){
  229. $.ajax({
  230.   method: "GET", //Elige get o post
  231.   url: "contratos8.php",
  232.   
  233. })
  234.   .done(function( msg ) {
  235.    $("#mbody").html(msg); 
  236.  $("#myModal2").show();
  237.   });
  238.  });
  239.  </script> 
  240.  
  241.  <script type="text/javascript"> 
  242. $("#BOTONPARAABRIRMODAL2").click(function(){
  243. $.ajax({
  244.   method: "GET", //Elige get o post
  245.   url: "mail.php",
  246.   
  247. })
  248.   .done(function( msg ) {
  249.    $("#mbody2").html(msg); 
  250.  $("#myModal").show();
  251.   });
  252.  });
  253.  </script>
  254.  
  255.  
  256. <script type="text/javascript">
  257. jQuery(window).load(function()
  258. {
  259.     var $ = jQuery;
  260.     
  261.     $("#table-2").dataTable({
  262.         "sPaginationType": "bootstrap",
  263.         "sDom": "t<'row'<'col-xs-6 col-left'i><'col-xs-6 col-right'p>>",
  264.         "bStateSave": false,
  265.         "iDisplayLength": 8,
  266.         "aoColumns": [
  267.             { "bSortable": false },
  268.             null,
  269.             null,
  270.             null,
  271.             null
  272.         ]
  273.     });
  274.     
  275.     $(".dataTables_wrapper select").select2({
  276.         minimumResultsForSearch: -1
  277.     });
  278.     
  279.     // Highlighted rows
  280.     $("#table-2 tbody input[type=checkbox]").each(function(i, el)
  281.     {
  282.         var $this = $(el),
  283.             $p = $this.closest('tr');
  284.         
  285.         $(el).on('change', function()
  286.         {
  287.             var is_checked = $this.is(':checked');
  288.             
  289.             $p[is_checked ? 'addClass' : 'removeClass']('highlight');
  290.         });
  291.     });
  292.     
  293.     // Replace Checboxes
  294.     $(".pagination a").click(function(ev)
  295.     {
  296.         replaceCheckboxes();
  297.     });
  298. });
  299.     
  300. // Sample Function to add new row
  301. var giCount = 1;
  302.  
  303. function fnClickAddRow() 
  304. {
  305.     $('#table-2').dataTable().fnAddData(['<div class="checkbox checkbox-replace"><input type="checkbox" /></div>', giCount+".2", giCount+".3", giCount+".4", giCount+".5" ]);
  306.     
  307.     replaceCheckboxes(); // because there is checkbox, replace it
  308.     
  309.     giCount++;
  310. }
  311. </script>
  312.  
  313.  
  314.  
  315. <br />
  316. <br />
  317.  
  318.  
  319. <h3>&nbsp;</h3>
  320. <br />
  321. <script type="text/javascript">
  322.     jQuery(document).ready(function($)
  323.     {
  324.         var table = $("#table-3").dataTable({
  325.             "sPaginationType": "bootstrap",
  326.             "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
  327.             "bStateSave": true
  328.         });
  329.         
  330.         table.columnFilter({
  331.             "sPlaceHolder" : "head:after"
  332.         });
  333.     });
  334. </script>
  335.  
  336. <br />
  337.  
  338.  
  339. <h3>&nbsp;</h3>
  340. <br />
  341. <script type="text/javascript">
  342.     jQuery(document).ready(function($)
  343.     {
  344.         var table = $("#table-4").dataTable({
  345.             "sPaginationType": "bootstrap",
  346.             "sDom": "<'row'<'col-xs-6 col-left'l><'col-xs-6 col-right'<'export-data'T>f>r>t<'row'<'col-xs-6 col-left'i><'col-xs-6 col-right'p>>",
  347.             "oTableTools": {
  348.             },
  349.             
  350.         });
  351.     });
  352.         
  353. </script>
  354.  
  355. <br /><!-- Footer --></div>
  356.  
  357.     
  358. <div id="chat" class="fixed" data-current-user="Art Ramadani" data-order-by-status="1" data-max-chat-history="25">
  359.     
  360.     <div class="chat-inner">
  361.     
  362.         
  363.         <h2 class="chat-header">
  364.             <a href="#" class="chat-close" data-animate="1"><i class="entypo-cancel"></i></a>
  365.             
  366.             <i class="entypo-users"></i>
  367.             Chat
  368.             <span class="badge badge-success is-hidden">0</span>
  369.         </h2>
  #5 (permalink)  
Antiguo 03/12/2015, 06:48
 
Fecha de Ingreso: diciembre-2015
Ubicación: rosario
Mensajes: 69
Antigüedad: 8 años, 11 meses
Puntos: 5
Respuesta: submit no funciona dentro de un modal
se corto el codigo q pegaste, igual vas a tener que ordenar un poco esa pagina, no abras tantas etiquetas <script> abri una sola y me todo ahi, o si podes separarla a un archivo externo mucho mejor.
Última edición por infoturnosya; 03/12/2015 a las 06:58
  #6 (permalink)  
Antiguo 03/12/2015, 14:29
 
Fecha de Ingreso: noviembre-2015
Mensajes: 59
Antigüedad: 9 años
Puntos: 0
Respuesta: submit no funciona dentro de un modal
lo que te dice andresgarciadev es cierto. cuando declaras el evento submit al formulario este no esta creado , solo crea cuando creas el modal. tendrias que declarar el evento despues de creado el modal.
o puedes tambien utilizar el metodo live de jquery , es igual al bind solo que este sirve para los elementos que cumplan la seleccion jquery existentes y para los futuros que se creen .

$("seleccion jquery").live("evento", mifuncion);

Etiquetas: modal, submit
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 18:14.