CODEWITHSUNDEEP
phpjqueryajax
Xtrader
Xtrader

Reputation: 141

Submitting form data into PHP with AJAX

I have a problem to displaying some dynamically created data and showing the submitted data when ajax completed.

HTML - form.html

    <form name="myForm" id="myForm">
        <strong>Skills 1</strong>     
            <div>
                <select name="Skills[]" id="Skills">
                <optgroup label="Programming">
                   <option value="">-</option>
                   <option value="Javascript">Javascript</option>
                   <option value="C++">C++</option>
                   <option value="C#">C#</option>
                </optgroup>

                <optgroup label="Multimedia">
                   <option value="Adobe Flash MX">Adobe Flash MX</option>
                   <option value="Adobe Fireworks">Adobe Fireworks</option>
                   <option value="Adobe After Effects">Adobe After Effects</option>
                </optgroup>
                </select>
            </div>

            <div>
                <input type="text" name="SkillsNumber[]" id="SkillsNumber" placeholder="Number of year using" />
            </div>

            <div>
                <select name="SkillsGrade[]" id="SkillsGrade">
                  <option value="">Select your skills grade</option>
                  <option value="Noob">Noob</option>
                  <option value="Amateur">Amateur</option>
                  <option value="Professional">Professional</option>
                </select>
            </div>            
        </div>
    </form>
<div id="result-set"></div>

* This select section can be dynamically added (maximum is 3)

jQuery

$(function(){
$("#myForm").submit(function(){
    var formData = $(this).serializeArray();
    console.log(formData);

    $.ajax({
        type: "POST",
        data: {
            theData: formData
        },
        url: "theresult.php",
        success: function(result){
            $("#result-set").ajaxComplete(function() {
                   $("#result-set").html(result);
               });
        }   
    }); 
    return false;
});

PHP - theresult.php

<?php
   $data = $_POST['theData'];
   $enc = json_encode($data, true);

   ...
   ....
   .....
?>

The question is what should I do, if I have 3 select (so I have 3 Skills, 3 SkillsNumber, and 3 SkillsGrade) and showing it on #result-set. Already cracking head here.

Sorry for bad English. Newb here... :)

Upvotes: 1

Views: 560

Answers (2)

Igor Parra
Igor Parra

Reputation: 10348

Use parse_str to get your data:

PHP - theresult.php

<?php
    parse_str($_POST['theData'], $params);
    $Skills = $params['Skills[]']; // I am not sure about [] part, test it
    $SkillsGrade = $params['SkillsGrade[]'];   
    $SkillsNumber = $params['SkillsNumber[]'];   

    echo "Skills: $Skills<br />";
    echo "SkillsGrade: $SkillsGrade<br />";
    echo "SkillsNumber: $SkillsNumber<br />";

    exit;
?>

and add dataType: "html" to your $.ajax() definition

Upvotes: 1

Pankaj Khairnar
Pankaj Khairnar

Reputation: 3118

add a button on form like

<input type="button" value="submit" id="myBtn">

change your code like this

$("#myBtn").submit(function(){

and write your success function like this

success: function(result){                
     $("#result-set").html(result);
 }

if you want to use json data as a javascript object set your $.ajax method parameter like this dataType: 'json'

Upvotes: 1

Related Questions