Saving form data, inside wordpress?

Question

I am adding onto an opensource meta box script... View the source here

What I am doing is essentially adding contents inside a textbox as a layer (textbox is cloned each time a user wants a new layer), here is a fiddle to demonstrate how it operates fiddle.

Creating the functionality you see in the fiddle is the easy part, but saving the data is where I am weak... I have a basic understanding of using ajax to save data, I think it would be ideal to save form data with ajax then put it onto a database.

My problem (The source code of the script here) I cannot add <form> inside the script.

Here is a sample on how I would save the data...

Save:

save : function(el) {

    // Temporary disable submit button
    jQuery('.publish button').text('Saving ...').addClass('saving').attr('disabled', true);
    jQuery('.saving-warning').text('Please do not navigate away from this page while Brash is saving your layers!');


    // Iterate over the sublayers
        jQuery(this).find('#sub-layers .block').each(function(sublayer) {

            // Iterate over the sublayer properties
            jQuery(this).find('input, select, textarea').each(function() {

                // Save original name attr to element's data
                jQuery(this).data('name', jQuery(this).attr('name') );


            });
        });

    // Reset layer counter
    Brash.counter = 0;

    setTimeout(function() {

        // Iterate over the sublayers
        jQuery('#sub-layers .block').each(function(sublayer) {

            // Data to send
            $data = jQuery('.main .moon_metabox').eq(layer).find('input, textarea, select');
            $data = $data.add( jQuery('#DONTHAVEFORM_DUETOSCRIPT > input')  );


            // Post layer
            jQuery.ajax(jQuery(el).attr('action'), {
                type : 'POST',
                data : $data.serialize(),
                async : false,
                success : function(id) {

                    Brash.counter += 1;

                    if(jQuery('.main .moon_metabox').length == Brash.counter) {

                        // Give feedback
                        jQuery('.publish button').text('Saved').removeClass('saving').addClass('saved');
                        jQuery('.saving-warning').text('');

                        // Re-enable the button
                        setTimeout(function() {
                            jQuery('.publish button').text('Save changes').attr('disabled', false).removeClass('saved');
                        }, 2000);


                            // Layers
                            jQuery('.main .moon_metabox').each(function(layer) {

                                // Sublayers
                                jQuery(this).find('#sub-layers .block').each(function(sublayer) {
                                    jQuery(this).find('input, select, textarea').each(function() {
                                        jQuery(this).attr('name', jQuery(this).data('name'));
                                    });
                                });
                            });

                    }
                }
            });
        });
    }, 500);
},

 // Save changes
jQuery('#DONTHAVEFORM_DUETOSCRIPT').submit(function(e) {
    e.preventDefault();
    Brash.save(this);
});

Once I get the form tags working, in lay-mans terms essentially the goal with this method to saving data is putting information in input fields and filling database tables with those values?

I have seen plugins using action="<?php echo $_SERVER['REQUEST_URI']?>" If I put that inside the form action, where does the data travel? How do I direct it to a database table, I am hoping to get links and some brief information that can help paint a clearer picture, that would be super!

Recap: For learning and testing, I just want to figure out how I can take form data, with only 2 inputs 1 textarea, put that form data onto a wordpress database using ajax, then reuse that data, it doesn't seem to complicated, I just cannot figure out how to incorporate a form inside the metabox script, and I need a little lesson in the saving data department.

Here is how I am implementing my custom data in the script.

I create my own custom $field['type'] named sortable. Line #40 in the fiddle. is the beginning of this code,

case 'sortable':


                echo '<div id="sample" style="display: none;">';
                echo '<div class="block" style="margin: 0 auto;">';
                echo '<p class="handle"></p>';
                echo '<div contenteditable="true" class="cancel" style="margin: 0 auto;">';
                echo '<textarea name="', $field['id'], '" id="', $field['id'], '" class="joetest" cols="60" rows="10">', '' !== $meta ? $meta : $field['std'], '</textarea>';
                echo '</div>';
                echo '</div>';
                echo '</div>';


                echo '<div id="sub-layers"></div>';

                echo '<a class="add">add</a>';


                echo '<div class="inner">
                            <button class="button-primary">Save changes</button>
                                <p class="saving-warning"></p>
                                  <div class="clear"></div>
                      </div>';      

            break;

Jean Paul · Accepted Answer · 2013-07-19 22:36:34Z

1

It seems you're overcomplicating things a bit. To save your data via ajax in wordpress, you need to use the ajaxurl - it is automatically defined in wp-admin.

Then you need create a function that will capture your data using an action you specify.

so in your php you need

<?php

    add_action('wp_ajax_your_action', 'your_function' );

 function your_function(){

 //Do your saving here     

 }


?>

Then on the front end, use your jQuery ajax like this

// Post layer
        jQuery.ajax(ajaxurl + '?action=your_action', {
            type : 'POST',
            data : $data.serialize(),
            async : false,
            success : function(id) {
            //Do your stuff here   

            }

The mistake you are making is that you are submitting the form to the wrong URI.

answered Jul 19, 2013 at 22:36

Jean Paul

9129 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Michael Joseph Aubry Over a year ago

Ok thanks for answering, I wrote an ajax funtion like this before to store some variables onto a database, but I was looking at the source code of a plugin and they did something different, I couldnt quite identify what they did, but ill run this method... not sure if you do a lot of wordpress database queries but should I create a new table, if not what table should I populate?

Jean Paul Over a year ago

I haven't examined all the data you're saving but it looks like you should create your table. Please let me know if this answer answers your question.

Michael Joseph Aubry Over a year ago

Ok ill definitely chime in and let you know, it may take a little while, I am managing a few things right now, I appreciate the help...

Michael Joseph Aubry Over a year ago

I realize the script already posts data to the database into the postmeta table, I am just working on taking advantage of that... I figured out how to store some values onto the database, still working on getting it all functional though..

Collectives™ on Stack Overflow

Saving form data, inside wordpress?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related