V. Seles V. Seles - 3 months ago 9
Ajax Question

Get values from dynamically created fields and send them to PHP via Ajax

I have a page with a text field

Field name
and two buttons
(Insert field, Show fields)
.

The user inserts a value inside of the first text field that's going to be a new field's name. When he clicks on
Insert field
that value is going to be send to my database and inserted into a table called
TBL_FIELDS
.

And when the user clicks on
Show fields
, the page loads all the field names from
TBL_FIELDS
and creates N text fields with it's placeholders containing the names that were loaded.

These fields are shown inside of a
.fieldList
div that contains another button
Insert values
and when the user clicks on it, I want to get all the values from these dynamically created fields as well as it's placeholders and insert them into another database table called
TBL_VALUES
, this table has three columns,
ID
,
FIELD_NAME
which represents the name (placeholder) of the field and
FIELD_VALUE
which represents the value of the field.

So my question is, how can I get the values and placeholders from all these dynamically created fields and send them to my .php file via Ajax? I know I can use
.val()
to get it's value and
.attr('placeholder')
to get the placeholder but that's not exactly my point, my problem is that I don't know how many fields there will be nor how can I acess them with
$_POST
.

This is what I have so far, here's script.js:

$(document).ready(function(){

var fieldCount = 0;

$("#btnFieldSend").click(function(){

if($("#txtFieldName").val()) {

$.ajax({

type: 'post',
dataType: 'json',
url: 'insertField.php',
data: { txtFieldName: $("#txtFieldName").val() }
}).done(function(data){

if(data.ok) {

$("#txtFieldName").val('');
alert(data.ok);
}
else
alert(data.err);
})
}
});

$("#btnFields").click(function(){

if($(".fieldList").is(":hidden")) {

$.ajax({

dataType: 'json',
url: 'selectField.php'
}).done(function(data){

if(data.ok) {

fieldCount = data.fieldCount;

for(var i = 0; i < fieldCount; i++)
$(".appField").append('<input id="' + i + '" type="text" placeholder="' + data.fieldName[i][0] + '">');

$(".fieldList").show();
}
else
alert(data.err);
});
}
});

$("#insertValues").click(function(){

// send values
});
});


Please, notice that I'm not asking anyone to do this for me, I know I'm not providing any code for
$("#insertValues").click()
which is going to get all the values from the fields and send them to php, and it also lacks the php code which is going to receive it. I'm just stuck and don't know what to do or how to proceed, I just need some help to guide me to a way to solve this.

If you need me to show my html,
insertField.php
,
selectField.php
or maybe my sql script, just let me know.

Answer

Give all of the inputs a name attribute so they can be sent through to your backend.

You can send through a form as a whole, as if it weren't via Ajax with $('#formId').serialize() specified as your Ajax function's data attribute.