Passing input from HTML forms that use JavaScript and AJAX to PHP POST method

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.

moreirapontocom · Accepted Answer · 2017-06-26 19:43:05Z

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);
  }
});

answered Jun 26, 2017 at 19:43

moreirapontocom

4583 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

OrangeHat Over a year ago

How would I get the input data from that to my PHP code?

Jonathan Over a year ago

@OrangeHat like this $var = $_POST['name']

moreirapontocom Over a year ago

@orangeHat What you get on this: <?php print_r($_REQUEST); ?>?

OrangeHat Over a year ago

@Jonathan An empty Array. I got it working for the purpose of what I have to do, the data value inside the ajax is sending me the entire page plus the PHP post values correctly.

Collectives™ on Stack Overflow

Passing input from HTML forms that use JavaScript and AJAX to PHP POST method

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related