[jQuery] JQuery Form - Ajax - Please HELP ! ! ! ! ! ! !
///////////Comment:
Can someone help me do the following:
create a function that collects ALL of the form's text field's Values,
along with their corresponding ID, and create an Array like this:
Example: var dataString = (item_01=123, item_01=456, item_01=789)
then take the 'dataString' Array, and send it to a Server via Ajax,
whenever I click the 'Submit Button'
Please Note:
that as new items are created/added to the form,
the 'Submit Button' must be able to continue submitting the
'dataString' Array to server via Ajax
whenever I click it.
////////////////////////////// HTML Code :
<form id="myForm" action="receive_items.php" method="post">
<ul>
<li>
<label>Item_01</label>
<input type="text" id="item_01" class="item_field"
value="123"/>
<input type="submit" value="delete button"
class="button_delete"/>
</li>
<li>
<label>Item_02</label>
<input type="text" id="item_02" class="item_field"
value="456"/>
<input type="submit" value="delete button"
class="button_delete"/>
</li>
<li id="item_03">
<label>Item_03</label>
<input type="text" id="item_03" class="item_field"
value="789"/>
<input type="submit" value="delete button"
class="button_delete"/>
</li>
</ul>
<input type="submit" value="Submit Button" class="button_submit"/>
</form>
////////////////////////////// JQuery Code:
$(document).ready(function(){
$('.button_submit').click(function(){
$.ajax({
type: "POST",
url: "receive_items.php",
data: dataString,
success: function(){
alert("The Data was successfully sent to server:");
}
});
});
});
- Thank you very much (in Advance)