将输入从使用JavaScript和AJAX的HTML表单传递到PHP POST方法

Question

I have a form with several inputs using Bootstrap and JavaScript that I need to pass to my PHP script using the POST method.

My JavaScript:

$(document).ready(function() {
      $("#contact_form")
        .bootstrapValidator({
      feedbackIcons: {
    valid: "glyphicon glyphicon-ok",
    invalid: "glyphicon glyphicon-remove",
    validating: "glyphicon glyphicon-refresh"
  },
  fields: {
    name: {
      validators: {
        stringLength: {
          min: 2
        },
        notEmpty: {
          message: "message"
        }
      }
    },
    n2: {
      validators: {
        stringLength: {
          min: 2,
          message: "message"
        },
        notEmpty: {
          message: "message"
        }
      }
    },
    n3: {
      validators: {
          stringLength: {
          min: 3,
          message: "message"
        },
        notEmpty: {
          message: "message"
        },
      }
    },
    n4: {
      validators: {
          stringLength: {
          min: 18,
          message: "message"
        },
        notEmpty: {
          message: "message"
        },
      }
    },
    puesto: {
      validators: {
        stringLength: {
          min: 4,
          message: "message"
        },
        notEmpty: {
          message: "message"
        }
      }
    },
    n6: {
      validators: {
        stringLength: {
          min: 4,
          message: "message"
        },
        notEmpty: {
          message: "message"
        }
      }
    },

    n7: {
      validators: {
          stringLength: {
          min: 4,
          message: "message"
        },
        notEmpty: {
          message: "message"
        },
      }
    },
  }
})
.on("success.form.bv", function(e) {
  $("#success_message").slideDown({ opacity: "show" }, "slow"); // Do something ...
  $("#contact_form").data("bootstrapValidator").resetForm();

  // Prevent form submission
  e.preventDefault();

  // Get the form instance
  var $form = $(e.target);
  console.log($form);

  // 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"
  );

});

});

This is the type of form am using:

<div class="container">
<script src="ce.js"></script>
<form class="well form-horizontal" action=" " method="post"  id="contact_form">
<fieldset>

<!-- Form Name -->
<legend>Title</legend>

<!-- Text input-->

<div class="form-group" action="actualizar.php" method="post">
<label class="col-md-4 control-label">Nombre</label>  
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input  name="name" placeholder="Name" class="form-control"  type="text" id="name">
</div>
</div>
</div>
<!-- Several other forms below this -->

I need to obtain the input in my PHP like this;

<?php
    $var = $_POST['name']; 
    echo $var;
 ?> 

I have all the code in one PHP file.

Its currently not obtaining data in the POST, I know the AJAX in the JS is using a post method but I have no clue of how to access that data. I appreciate all your help.

Answer 1

Your Ajax call should be like this:

$.ajax({
  method: 'POST',
  url: 'your-post-url-here/',
  data: $form.serialize(),
  dataType: 'json',
  success: function(result) {
    console.log(result);
  }
});