Multiple arrays to a JSON array to PHP via AJAX

627
November 25, 2016, at 11:22 PM

I have a form

<form id="ajax-form" onsubmit="return false;">
<p class="legend">All fields marked with an asterisk are required.</p>
<fieldset>
    <legend>User Details</legend>
        <div><label for="post[uname]">Username <em>*</em></label> <input id="post[uname]" type="text" name="uname" value=""  /></div>
            <p class='note' id='err[Name]'></p>
</fieldset>
 <div class="buttonrow">
    <input type="submit" value="Submit This Form via AJAX" class="button" />  
    <input type="button" value="Start Again" class="button" />
     <a href="ajaxformval.html">Refresh this Page</a>
</div>
</form>

I have two arrays post and err. I'm trying to send them to php and then in php it will json_encode the array and print it on the screen like so:

{
   "err": {
       "uname": "Please enter a user name"
   }
   "post": {
       "uname": ""
    }
}

or this is if the user did enter a name:

{
   "post": {
       "uname": "Bob Ross"
    }
}

There could be multiple fields for post and err but it should still follow the same suite.

How do I send the data to php, I understand it's some sort of serializeArray but it doesn't format it properly when I do:

JSON.stringify($("#ajax-form").serializeArray())

A jsfiddle to full html:

https://jsfiddle.net/dzv8ttjn/1/

Answer 1

Your best bet is to call .serialize(); on the form which will give you something like: user-name=some%20name&email=some%20emale&gender=Female&interests=Software

Send that to the PHP script, and have the script create the format of the response while looping over the $_POST array. Something like the below would work:

(note that I've changed your id's to be more sensible and updated the jQuery version used)

<?php 
if(count($_POST)>0){
    $response = ['err'=>[], 'post'=>[]];
    foreach($_POST as $key => $value)
    {
        $response['post'][$key]=$value;
        if(trim($value) == '') $response['err'][$key]='Please enter a '.$key; 
    }
    echo json_encode($response);
  exit;
}
?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> Lab4: Form Validation with AJAX,JQuery,JSON and PHP</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">

    </script>
    <script type="text/javascript">
      $("#ajax-form").on('submit', function(event) {
            event.preventDefault();
            var dataString = $(this).serialize();
            $.ajax({
              type: "POST",
              // url: "page.php", // add this line to send to some page other than the this one
              data: dataString,
              success: function(response) {
                if (response) {
                  alert('test worked');
                }
              },
              error: function(xhr, status, error) {
                console.log(xhr);
              }
            });
        });
    </script>
  </head>
  <body>
    <div id="wrapper">
      <h2>Form Validation with AJAX,JQuery,JSON and PHP</h2>
      <div class="form-container">
        <span id="ajax-message"></span>
        <form id="ajax-form" onsubmit="return false;">
          <p class="legend">All fields marked with an asterisk are required.</p>
          <fieldset>
            <legend>User Details</legend>
            <div>
              <label for="uname">Username <em>*</em></label>
              <input id="uname" type="text" name="user-name" value="" />
              <p class='note' id='name-error'></p>
            </div>
            <div>
              <label for="password">Email Address <em>*</em></label>
              <input id="password" type="text" name="email" value="" />
              <p class='note' id='password-error'></p>
            </div>
            <div>
              <label for="post[gender]">Gender <em>*</em></label>
              <input type="radio" name="gender" value="Male" class="form-check-input" id="Male" required> Male
              <input type="radio" name="gender" value="Female" class="form-check-input" id="Female" required> Female
              <p class='note' id='gender-error'></p>
            </div>
            <div>
              <label for="interests">Interests<em>*</em></label>
              <input type="checkbox" name="interests" value="Music" class="form-check-input" id="Music"> Music
              <input type="checkbox" name="interests" value="Software" class="form-check-input" id="Software"> Software
              <input type="checkbox" name="interests" value="Hardware" class="form-check-input" id="Hardware"> Hardware</div>
          </fieldset>
          <div class="buttonrow">
            <input type="submit" value="Submit This Form via AJAX" class="button" />
            <input type="button" value="Start Again" class="button" />
            <a href="ajaxformval.html">Refresh this Page</a>
          </div>
        </form>
      </div>
      <h3>JSON Array</h3>
      <pre id='debug'></pre>
    </div>
  </body>
  </html>
Rent Charter Buses Company
READ ALSO
CSS - why my browsers can&#39;t reflect any changes made on the server?

CSS - why my browsers can't reflect any changes made on the server?

I was working on some CSS code and then suddenly the server stopped reflecting any changed made on the serverAt first I thought it was a caching problem but I disabled caching on my browser and even tried using different browsers but still it's using the old version...

814
Bad layout and wrapping on simple Bootstrap page

Bad layout and wrapping on simple Bootstrap page

I am trying to create a simple Bootstrap page that has four input fields each with a side buttonThe four input fields to be in a line horizontally and centered across the screen

784
navigation tabs with changing icon image

navigation tabs with changing icon image

I am trying to make tab navigation with changing image icon, I tried to do it with angular ng-show & ng-hid for icon images but the result was flickeringIs there any easier way to do it?enter image description here

711