Question

This is a bit complex so I hope I word this right.

I have a form that loads a list of options and starts with one static input:

<span id="keyword_list_out" class="input"><input class="keys margin-bottom" type="text" name="keywords[]" />

When the page is loaded an Ajax call displays additional input fields that belong to the list such as:

<span class="field-wrapper"><input class="keys" type="text" name="keywords[]" value="Option One" /><a class="remove-keyword" href="javascript:void(0);"><img src="images/icons/cross-button-icon.png" /></a></span>
<span class="field-wrapper"><input class="keys" type="text" name="keywords[]" value="Option Two" /><a class="remove-keyword" href="javascript:void(0);"><img src="images/icons/cross-button-icon.png" /></a></span>

These options are prepended to the top of the first static input field ID: keyword_list_out.

The user can dynamically add more input fields and they can remove existing fields.

All of this so far works fine. My problem is accessing the data contained within the input fields. I need to be able to perform three functions once the form is submitted:

1. If the user has removed an option I need to remove this from the database
2. If the user has added a field I need to insert this into the database
3. If the user changes the value of an existing field I need to update this in the database

I can access the data within the input fields by using the input name ‘keyword_name[]’ as an array, and then I can loop through the array.

However this does not address existing options that have a specific ID number. I can assign ID numbers to the fields that were loaded from the Ajax call, however the static field and user added fields wont have ID numbers, as these arent necessary. These fields will simply be inserted into the database.

So I guess my question is how would I go about determining which existing option belongs to what ID number in the database. I should add that the options are not uniquely named.

I considered something such as:

1. Provide ID numbers only for the Ajax loaded fields
2. Upon submit loop through each input and prepend the ID to the end of the name value using a delimiter the user wont provide. IE: Option Two—1
3. With PHP looping through the array and exploding the array value where it matches ‘—‘
4. If a match was found on ‘—‘ update the database, else insert into the database

Any thoughts?

UPDATE

I have divided the input fields into two arrays: existing_options[] and new_options[].

In my Jquery script prior to posting i have added:

var existing_options = $('input[name=existing_options]').attr('value');
var new_options = $('input[name=new_options]').attr('value');

The Ajax data being sent is:

'existing_options[]=' + existing_options + '&new_options[]=' + new_options;

However PHP is returning that these values are strings and not arrays. Missing something here….

Answer 1

I would suggest on using an auto increment id on the database side. When you load the page, have the id placed like so <span class="field-wrapper" id="$row[id]"> and than when deleting use:

$('.remove-keyword').on('click', function(){
    var id = $(this).parents('span').attr('id');
    place ajax post here with data sent being this id.
});

And basically it’ll be the same for adding a keyword, except use ajax to post to your script, and use mysql_insert_id(); in your script as a returning id than dynamically create the next row.