how to send data post method of 2 forms in php?

0

How can I send data of 2 or more form of php to another page, I can do it with a single form that contains a table, but the design changes completely and I do not want that

<div class="form-one">
    <form>
        <input type="text" placeholder="Company Name">
        <input type="text" placeholder="Email*">
        <input type="text" placeholder="Title">
        <input type="text" placeholder="First Name *">
        <input type="text" placeholder="Middle Name">
        <input type="text" placeholder="Last Name *">
        <input type="text" placeholder="Address 1 *">
        <input type="text" placeholder="Address 2">
    </form>
</div>
<div class="form-two">
    <form>
        <input type="text" placeholder="Zip / Postal Code *">
        <select>
            <option>-- Country --</option>
            <option>United States</option>
            <option>Bangladesh</option>
            <option>UK</option>
            <option>India</option>
            <option>Pakistan</option>
            <option>Ucrane</option>
            <option>Canada</option>
            <option>Dubai</option>
        </select>
        <select>
            <option>-- State / Province / Region --</option>
            <option>United States</option>
            <option>Bangladesh</option>
            <option>UK</option>
            <option>India</option>
            <option>Pakistan</option>
            <option>Ucrane</option>
            <option>Canada</option>
            <option>Dubai</option>
        </select>
        <input type="password" placeholder="Confirm password">
        <input type="text" placeholder="Phone *">
        <input type="text" placeholder="Mobile Phone">
        <input type="text" placeholder="Fax">
    </form>
</div>

I want to send all the data entered in both form to receive them in another page and generate a file with all that data.

    
asked by alexander123 01.06.2016 в 15:28
source

4 answers

2

You can enter all the fields within a form and through a onclick event by calling a function where you could use a formData to send all the fields by means of $. Ajax and capture them in the php page, I'll explain:

HTML structure

<form action="#?" id="formGeneral">//form general
              <div class="form-one">
                            <input type="text" name="company" placeholder="Company Name">
                            <input type="text" name="email" placeholder="Email*">
                            <input type="text" name="title" placeholder="Title">
                            <input type="text" name="firstName" placeholder="First Name *">
                            <input type="text" name="middleName" placeholder="Middle Name">
                            <input type="text" name="lastName" placeholder="Last Name *">
                            <input type="text" name="address1" placeholder="Address 1 *">
                            <input type="text" name="address2" placeholder="Address 2">

                    </div>
                    <div class="form-two">

                            <input type="text" name="postalCode" placeholder="Zip / Postal Code *">
                            <select name="country">
                                <option>-- Country --</option>
                                <option>United States</option>
                                <option>Bangladesh</option>
                                <option>UK</option>
                                <option>India</option>
                                <option>Pakistan</option>
                                <option>Ucrane</option>
                                <option>Canada</option>
                                <option>Dubai</option>
                            </select>
                            <select name="state">
                                <option>-- State / Province / Region --</option>
                                <option>United States</option>
                                <option>Bangladesh</option>
                                <option>UK</option>
                                <option>India</option>
                                <option>Pakistan</option>
                                <option>Ucrane</option>
                                <option>Canada</option>
                                <option>Dubai</option>
                            </select>
                            <input type="password" name="name" placeholder="Confirm password">
                            <input type="text" name="phone" placeholder="Phone *">
                            <input type="text" name="mobile" placeholder="Mobile Phone">
                            <input type="text" name="fax" placeholder="Fax">

                    </div>
                     <button type="button" onclick="envioForm('#formGeneral');">Enviar Formulario!</button>
    </form>// fin form

This would be the structure, note that the form is outside the div, we do this with the intention of covering all the text fields and selects that exist, the text fields should have a name="" to be able to capture them on the php page. For shipping we create a button button where we add the onclick event and send the id of the form to create a function for sending the data:

JavaScript Function

<script>
// llega '#formulario'
function envioForm(formulario){
var form = $(formulario);
//Creamos el objeto del formData
var formData = new FormData(form);

$.ajax({
    contentType: false,
    processData: false,
    data: formData,
    type: 'post',
    url: 'dirección url', // url donde enviaras los datos 
    beforeSend:function(){
        // acciones mientras envia los datos
    },
    success:function(response){
        //  response muestra los datos que devuelve la pagina php
    }
  });
}
</script>

To receive the information on the page you would need a $ _REQUEST ['nameInput']; where the "nameInput" are the names (name) that we put to the fields, I hope you serve

    
answered by 01.06.2016 в 17:41
2

The correct thing is to do it with just one form, the style changes will be minimal.

Everything that is not that will be patches or inventions not recommended for not doing things right.

    
answered by 02.11.2016 в 09:24
0

I suggest a single form and send it in this way.

var form = $("#Form_id").serialize();

$.ajax({
    url: "arch.php",
    type: "POST",
    data: form,
    error: function(e){},
    success: function(data){}
});

Since you mention that the bootstrap design moves, in the comments, maybe it's because you need classes in the tags, try to implement your form in this way and it will work with the script:

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<form class="form-horizontal">
  <div class="form-one form-group">
    <input type="text" placeholder="Company Name" class="form-control">
    <input type="text" placeholder="Email*" class="form-control">
    <input type="text" placeholder="Title" class="form-control">
    <input type="text" placeholder="First Name *" class="form-control">
    <input type="text" placeholder="Middle Name" class="form-control">
    <input type="text" placeholder="Last Name *" class="form-control">
    <input type="text" placeholder="Address 1 *" class="form-control">
    <input type="text" placeholder="Address 2" class="form-control">
  </div>
  <div class="form-two form-group">
    <input type="text" placeholder="Zip / Postal Code *" class="form-control">
    <select class="form-control">
      <option>-- Country --</option>
      <option>United States</option>
      <option>Bangladesh</option>
      <option>UK</option>
      <option>India</option>
      <option>Pakistan</option>
      <option>Ucrane</option>
      <option>Canada</option>
      <option>Dubai</option>
    </select>
    <select class="form-control">
      <option>-- State / Province / Region --</option>
      <option>United States</option>
      <option>Bangladesh</option>
      <option>UK</option>
      <option>India</option>
      <option>Pakistan</option>
      <option>Ucrane</option>
      <option>Canada</option>
      <option>Dubai</option>
    </select>
    <input type="password" placeholder="Confirm password" class="form-control">
    <input type="text" placeholder="Phone *" class="form-control">
    <input type="text" placeholder="Mobile Phone" class="form-control">
    <input type="text" placeholder="Fax" class="form-control">
  </div>
</form>

The only thing I did was add the classes as indicated on the bootstrap page in their section of forms .

Well if you do not detect the classes .form-horizontal , form-group , .form-control you may not have added the css and javascript on the page.

If the design is not exactly how you have it, bootstrap has declared these classes col-xs-2 col-sm-2 col-md-2 col-lg-2 so that you adapt according to the design you had previously these classes explains them in grid

    
answered by 01.06.2016 в 16:47
0

Well if you use bootstrap, I think jQuery is included, what you could do is assign an id to the div that has the form-one class and with jquery send the data to the file that will process the data.

EDIT: I forgot, the fields must have the name attribute in order to be captured by the serialize ();

var datos = $("#id input, select").serialize(); // Aqui se almacenaran todos los datos.

    $.ajax({
        url: "archivo_procesador_de_datos.php",
        type: "POST",
        data: "&" + datos,
        error: function(e){},
        beforeSend: function(){

        },
        success: function(data){

        }
    });
    
answered by 01.06.2016 в 16:14