Submitting form data into PHP with AJAX - php

Question

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... :)

Answer 1

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'

Answer 2

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