0

I have a form on a page where users can add new text inputs (up to 30 inputs). The entered value of this text input is stored in the post_meta table via AJAX as an array.

Here is the php that displays my form:

<div class="input_fields_wrap">
    <?php 
    $dj_song_choices = get_post_meta($post->ID, 'DJPlaylist', true); 
    $i=0;
    if($dj_song_choices) {
        foreach($dj_song_choices as $dj_song_choice) { ?>

        <fieldset name="DJPlaylist[<?php echo $i; ?>]">
            <input type="text" class="DJPlaylistSong" name="DJPlaylist[<?php echo $i; ?>][]" value="<?php echo $dj_song_choice[0]; ?>"><input type="text" class="DJPlaylistArtist" name="DJPlaylist[<?php echo $i; ?>][]" value="<?php echo $dj_song_choice[1]; ?>">
            <a href="#" class="remove_song"><i class="fa fa-minus-circle"></i></a>
        </fieldset>

    <?php 
    $i++;
    }
} ?>
</div>
<button class="add_field_button"><i class="fa fa-plus-circle"></i> Add Song</button>

This shows each song/artist pair in the array stored in the table.

Here is the jQuery that handles new song (text input) creation:

var max_fields      = 30; //maximum input boxes allowed
var songWrapper         = $(".input_fields_wrap"); //Fields songWrapper
var add_button      = $(".add_field_button"); //Add button ID

var songNum = $('.input_fields_wrap fieldset').length - 1; //initlal text box count

$(add_button).on('click', function(e){ //on add input button click
    e.preventDefault();
    if(songNum < max_fields){ //max input box allowed
        songNum++; //text box increment
        $html = '<fieldset name="DJPlaylist['+songNum+']"><input type="text" class="DJPlaylistSong" name="DJPlaylist['+songNum+'][]"><input type="text" class="DJPlaylistArtist" name="DJPlaylist['+songNum+'][]"><a href="#" class="remove_song"><i class="fa fa-minus-circle"></i></a></fieldset>';


        $(songWrapper).append($html); 
    }
});

$(songWrapper).on("click",".remove_song", function(e){ //user click on remove text
    e.preventDefault(); $(this).parent('fieldset').remove(); songNum--;
})

Data is sent to the DB via AJAX, here is my AJAX code:

$('form[id^="iPadRequests-"]').on('change', function(e) {


e.preventDefault();

$.post( update_user_info.ajaxurl, {
      action : 'update_dj_playlist_info',
      nonce : update_user_info.nonce,
      post : $(this).serialize()
  },
  function(response) {
      console.log(response);
      responseSuccess(response);
  });

return false;

});

And finally, the AJAX function to add the data to the DB:

function updateiPadRequestInfo() {

    if(empty($_POST) || !isset($_POST)) {
        self::ajaxStatus('error', 'Nothing to update.');
    } else {
        $data = $_POST;

        $dataString = $data['post'];
        parse_str($dataString, $dataArray);

        $nonce = $data['nonce'];

        if(wp_verify_nonce($nonce, 'update_user_info') !== false) {

            $user_ID = get_current_user_id();
            $post_id = $dataArray['booking_id'];
            //$dataArray['iPadRequests'] = isset($dataArray['iPadRequests']) ? $dataArray['iPadRequests'] : false;
            $dataArray['DJPlaylist'] = isset($dataArray['DJPlaylist']) ? $dataArray['DJPlaylist'] : false;


            if($user_ID != NULL) {
                foreach($dataArray as $key=>$value) {

                $status = update_post_meta($post_id, $key, $value);

            }
                self::ajaxStatus('success', 'Meta fields updated.', $dataArray);

            } else {
                self::ajaxStatus('error', 'You are unauthorized to perform this action.', $dataArray);
            }
        } else {
            self::ajaxStatus('error', 'Nonce check cannot fail.');
        }
    }
}

I am now trying to create a "remove" button. You can see the button is there in the code already .remove_song - and, it does visually remove the song in the front end. However, how can I get it to remove the specific song/artist in the array stored in the database?

An example of how the current array looks is as follows (using print_r(get_post_meta($post->ID, 'DJPlaylist', true));):

Array
(
[0] => Array
    (
        [0] => Call me Maybe
        [1] => Carly Rae Jepson
    )

[1] => Array
    (
        [0] => Hello
        [1] => Adele
    )

[2] => Array
    (
        [0] => Play That Funky Music
        [1] => Wild Cherry
    )

[3] => Array
    (
        [0] => Blessings
        [1] => Chance the Rapper
    )

[4] => Array
    (
        [0] => 
        [1] => 
    )

)
  • I recommend you to use the custom post type. It is helpful to manage large amount of data, accessible thought rest api, easy to search and expandable. – maheshwaghmare Jul 4 '18 at 19:12
  • In your case you can create custom taxonomies for the songs. Eg taxonomies are Singers, Categories (devotional, dj etc) – maheshwaghmare Jul 4 '18 at 19:15
  • If you still want to use the array then, What is responseSuccess()? Do you have regenerate the HTML markup after Ajax complete. If yes, then there is the solution. Set the index of array element to remove button as a data attribute and on click on that button remove the index of that array. – maheshwaghmare Jul 4 '18 at 19:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.