serialized form not sending ajax

Question

I'm having trouble to send a serialized form through ajax to a php file. I can see the string on the client side, but on the server side I receive an empty array. I'm trying to save the form data into a database, but a I can't seem to find a way to separate every input, and show it in my php file after I sent with ajax.

JavaScript

$(function() {
  //twitter bootstrap script
  $("button#guardar").click(function(e) {

    //var info = $('#myform').serialize();
    var info = $('form.contact').serialize();
    $.ajax({
      type: "POST",
      url: "solicitudesProc.php",
      data: info,
      success: function(data) {
        alert(info);
        window.location.href = "solicitudesProc.php";
        //window.location.reload();
        $("#modalnuevo").modal('hide');
      },
      error: function(data) {
        alert("failure");
      }
    });

  });
});

<form class="contact" id="myform" method="post" name='alta'>
  <div class="modal-body">
    <div class="row">
      <div class="col-md-2">
        <label>Solicitante</label>
        <input type="text" class="form-control pull-right" name='solicitante' maxlength="20" required />
      </div>
      <div class="col-md-2">
        <label>Fecha Emision</label>
        <input type="text" class="form-control pull-right" name='fechaEmision' maxlength="20" />
      </div>
    </div>
    <div class="row">
      <div class="col-md-2">
        <label>Area Solicitante</label>
        <input type="text" class="form-control pull-right" name='area' maxlength="20" />
      </div>
    </div>


    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
      <button type="submit" id="guardar" name='guardar' class="btn btn-danger pull-right" value="guardar">Generar</button>
    </div>
</form>

server side solicitudesProc.php

<?php   $info = $_POST;
 echo $_POST["solicitante"]; print_r($_POST);  ?>

Why would you change location? `window.location.href = "solicitudesProc.php";` will reload the page with a GET and no data — mplungjan, Oct 11 '17 at 12:46
https://stackoverflow.com/questions/18866571/receive-json-post-with-php — chiliNUT, Oct 11 '17 at 12:47
You also need to cancel the default action of your button: Submitting the form. — jeroen, Oct 11 '17 at 12:49
mplungjan, i change location to see if the serialized form was send. That's why a try to print it. But i see the problem. How do i know if the data was sended? — o. roro, Oct 11 '17 at 13:15

score 0 · Answer 1 · answered Oct 11 '17 at 13:06

Do not change location
Cancel the submit

I strongly suggest you either remove the form OR wire up the submit event:

$(function() {
  $("form.contact").on("submit", function(e) {
    e.preventDefault(); // stop the submit
    var info = $(this).serialize();
    $.ajax({
      type: "POST",
      url: "solicitudesProc.php",
      data: info,
      success: function(data) {
        console.log(info);
        $("#modalnuevo").modal('hide');
      },
      error: function(data) {
        alert("failure");
      }
    });
  });
});

score 0 · Answer 2 · answered Oct 11 '17 at 20:16

I maked it work by doing this changes:

change the form action to the php file im sending.

<form action="solicitudesProc.php" class="contact" id="myform" method="post" name='alta' >

and my ajax changed to:

                var info = $('#myform').serialize();
        //var info = $('form.contact').serialize();
        $.ajax({
                type: "POST",
                url: form.attr("action"),
                data: $("#myform input").serialize(),
                success: function(data){
                    //console.log(info);
                    window.location.href = "solicitudes.php";
                    //window.location.reload();
                    $("#modalnuevo").modal('hide'); 
                },
                error: function(data){
                    alert("failure");
            }
        });

    });

});

Thanks for your help!

serialized form not sending ajax

2 Answers2