Jquery pass two array data via ajax to php and extract in two prefix

Question

I would like to pass two array data to php and extract them in two prefix so I can choose them by that two prefix.

Example code

HTML

<form>
  <!-- set one -->
  <div class="one">
    <input id="name" name="name">
  </div>
  <!-- /set one -->

  <!-- set two -->
  <div class="two">
    <input id="email" name="email">
  </div>
  <!-- /set two -->

  <!-- set one again -->
  <div class="one">
    <input id="msg" name="msg">
  </div>
  <!-- /set one -->

  <button type="submit"></button>
</form>

Jquery

I don't know how to pass set one and set two in data, should it pass by two array? I would like to select them by parent class one and two.

  $('form').on('submit', function(e) {
    e.preventDefault();

  $.ajax({
      type: 'POST',
      url: 'contact.php',
      data: $('form').serialize(),
      success: function(data) {
        console.log(data);
      },
      error: function(data) {
        console.log(data);
      }
    });
  });

PHP

<?php
  extract($_POST, EXTR_PREFIX_ALL, 'one'); // how to extract only set one?
  extract($_POST, EXTR_PREFIX_ALL, 'two'); // how to extract only set two?
>

I want to use them like this in php:

if (empty($one_name) || empty($two_email) || empty($one_msg)) { // select them by prefix
  // function
}

The html can not include php code, how can use jquery and php do that?

Thanks.

charlietfl · Accepted Answer · 2016-01-25 02:40:58Z

2

Use array names on the form controls

<div class="one">
    <input id="name_1" name="one[name]">
  </div>
  <!-- /set one -->

  <!-- set two -->
  <div class="two">
    <input id="email_2" name="two[email]">
  </div>

 <!-- set one again -->
  <div class="one">
    <input id="msg" name="one[msg]">
  </div>

Your serialize() method needs no changes

Receive in php

$data_one  = $_POST['one'];    
echo $data_one['name'];

answered Jan 25, 2016 at 2:40

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

Comments

cssyphus · Accepted Answer · 2016-01-25 02:43:20Z

1

This is far more simplistic than Charlie's answer, but you can also do this -- if you can avoid using .serialize()

$('form').on('submit', function(e) {
    e.preventDefault();

    var one_name = $('.one #name').val();
    var two_email = $('.two #email').val();
    var one_msg = $('.one #msg').val();

    $.ajax({
        type: 'POST',
        url: 'contact.php',
        data: 'one_name=' +one_name+ '&two_email=' +two_email+ '&one_msg=' +one_msg,
        success: function(data) {
            console.log(data);
        },
        error: function(data) {
            console.log(data);
        }
    });
});

PHP:

<?php
    $one_name = $_POST['one_name'];
    $two_email = $_POST['two_email'];
    $one_msg = $_POST['one_msg'];

answered Jan 25, 2016 at 2:43

cssyphus

40.4k20 gold badges104 silver badges125 bronze badges

2 Comments

charlietfl Over a year ago

why would you want to avoid serialize(). No fun building long strings in a big form .. or building big objects either

cssyphus Over a year ago

Totally agree. Just that sometimes beginners don't know all the options. I don't know the OP, probably he already knows the above, but perhaps he does not. Just fwiw. LOVE your answer, though.

Collectives™ on Stack Overflow

Jquery pass two array data via ajax to php and extract in two prefix

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related