Trigger events in modal window

Question

Trigger events in modal window

Navigation

#1 by (2 votes)
#2 by (0 votes)
#3 by (0 votes)

1

I have a modal window made with bootstrap, inside I have a form and I try to send that form to another file to process the information but the button does not do anything, I realized that the button to close the modal window has an attribute called data-dismiss that I suppose causes the window to close, is there an attribute for the form to be sent other than being of the submit type?

This button to close the modal window

<button type="button" class="btn btn-default" data dismiss="modal">Cancel</button>

Button to send the form

<button type="submit" class="btn btn-success" >Save changes</button>

Form

<form name="AddCat"  action="./insert" method="post" enctype="multipart/form-data"><br>

NOTE: the file where the form is processed is servlet

javascript bootstrap

asked by Missael Armenta 09.06.2016 в 17:30

source

3 answers

Can I create a custom user in WordPress? Problems with autocomplete in SublimeText 3 and Ubuntu

score 2 · Answer 1

You can try the following code

$(document).ready(escuchador);

function escuchador(){
        $("input[name='cursBoton']").on("click",function(event) {        
               event.preventDefault();    
              procesar(this);                            
      });       

       $("button[name='cursBoton']").on("click",function(event) {        
             event.preventDefault();    
              procesar(this);            

      });  

}

event.preventDefault will prevent the page from being reloaded

function procesar(event){      

var cursBton = $(event).val();
var form = $(event).closest("form");  
 var modal = $("#Agregar");
  if(form.valid())
   {                                        
        $.ajax({
        type: "POST",
        url: form.attr('action'),
        data: form.serialize() + "&cursBoton=" + cursBton,
        success: function( response ) {     
            //utilzar response

        }
      });   
  }

}

And you send your request to the server through ajax

score 0 · Answer 2

Sorry I had not read your question very well. What you can do is create a function with javascript and use the bootstrap function that closes the modal $('#modal').modal('hide')
It would be like this:

<button type="submit" class="btn btn-success" onclick="cierraModal()" >Save changes</button>

and the function:

function cierraModal(){
  $('form[name="AddCat"]').submit(fuction(e){
    $('#modal').modal('hide');
  });
}

score 0 · Answer 3

try this way:

having the button

 <button type="submit" id="btnguardar" class="btn btn-success closeModal">Save changes</button>

Instead of using the name ( btnguardar ), we use the id and a css class ( closeModal ).

You create this anonymous jquery function to capture the submit.

$("#btnguardar").submit(function( event ) {});

Then you capture the id, you close the current modal and you open another, all this within the previous function.

$(".closeModal").click(function () {
    $(".modal").modal("hide");
    $("#myModal2").modal();
});

would look like this:

$("#btnguardar").submit(function( event ) {
    $(".closeModal").click(function () {
        $(".modal").modal("hide");
        $("#myModal2").modal();
    });
});

and you add the document ready function to load it:

$(document).ready(function() {});