1 Replies - 1508 Views - Last Post: 14 May 2012 - 12:59 AM Rate Topic: -----

#1 Quinn_LDM   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 11-May 12

Word Press - Submit Form contents into database

Posted 11 May 2012 - 11:57 AM

Hello,
I'm currently working on a custom plugin for a Wordpres site for a client. Some details:
The plugin grabs a file path to an image, and a few other details regarding the image [name, comment] and creates some html dynamically that produces somthing like this:

<div class='carousel-feature'>
    <a href='" . $url_from_db . "'><img class='carousel-image' alt='Image Caption' src='" . $path_from_db . "'></a>
    <div class='carousel-caption'><p>" . $text . "</p></div>
</div>
<div class='carousel-feature'>
    <a href='" . $url_from_db . "'><img class='carousel-image' alt='Image Caption' src='" . $path_from_db . "'></a>
    <div class='carousel-caption'><p>" . $text . "</p></div>
</div>
<div class='carousel-feature'>
    <a href='" . $url_from_db . "'><img class='carousel-image' alt='Image Caption' src='" . $path_from_db . "'></a>
    <div class='carousel-caption'><p>" . $text . "</p></div>
</div>



As you can see there are some variables in there that are replaced with values from the Database. Currently all the values are pre-populated. This html is used to create a carousel feature using some jquery, this all works fine.

In the options menu on the back end, I need to be able to modify each of the individual features, such as changing the url that is loaded when the image is clicked, or the comment for the image, etc. So I create a form for each feature in the back end, and populate the forms text boxes with the same data from the database. The html for the forms looks like:

<div>
   <form id='i_image_details_" . $id . "' class='c_image_details' name='n_image_details' action='" . $url .     '/lucid_carousel/php_functions/process_image_details.php' . "' method='POST' >
       <p class='text'>Name:<input type='text' name='img_name' value='" . $img_name . "'></input></p>
       <p class='text'>Comment: <input type='text' name='img_comment' value='" . $img_comment . "'></input></p>
       <p class='text'>URL: <input type='text' name='img_url' value='" . $img_url . "'></input></p>
       <p class='text'>Active State: <input type='text' name='active' value='" . $active_state . "'></input></p>
          <input type='hidden' value='" . $id . "' name='id'' />
       <p class='text'><input name='submit' type='submit' value='Update'></input>
          <input type='button' value='Delete' style='margin-left: 100px'></input</p>
   </form>
</div>
<div>
   <form id='i_image_details_" . $id . "' class='c_image_details' name='n_image_details' action='" . $url .     '/lucid_carousel/php_functions/process_image_details.php' . "' method='POST' >
       <p class='text'>Name:<input type='text' name='img_name' value='" . $img_name . "'></input></p>
       <p class='text'>Comment: <input type='text' name='img_comment' value='" . $img_comment . "'></input></p>
       <p class='text'>URL: <input type='text' name='img_url' value='" . $img_url . "'></input></p>
       <p class='text'>Active State: <input type='text' name='active' value='" . $active_state . "'></input></p>
          <input type='hidden' value='" . $id . "' name='id'' />
       <p class='text'><input name='submit' type='submit' value='Update'></input>
          <input type='button' value='Delete' style='margin-left: 100px'></input</p>
   </form>
</div>
<div>
   <form id='i_image_details_" . $id . "' class='c_image_details' name='n_image_details' action='" . $url .     '/lucid_carousel/php_functions/process_image_details.php' . "' method='POST' >
       <p class='text'>Name:<input type='text' name='img_name' value='" . $img_name . "'></input></p>
       <p class='text'>Comment: <input type='text' name='img_comment' value='" . $img_comment . "'></input></p>
       <p class='text'>URL: <input type='text' name='img_url' value='" . $img_url . "'></input></p>
       <p class='text'>Active State: <input type='text' name='active' value='" . $active_state . "'></input></p>
          <input type='hidden' value='" . $id . "' name='id'' />
       <p class='text'><input name='submit' type='submit' value='Update'></input>
          <input type='button' value='Delete' style='margin-left: 100px'></input</p>
   </form>
</div>



I create that form by looping through each entry in the table, so the ids are always different.

So far is this is all good and dandy. But this is where my problem is. I can not seem to find away to submit the data from the form, to a database.

I've tried two methods.

1. Submit the form to a php file like normal, however if I do that, then I have no access to the $wpdb object which is required if you want to do any database querying, properly. And since I would like to make this a publicly available plugin after I finish it for this client, I need to do it properly and not use some work around.

2. I tried to use Wordpress' ajax support and submit the form back to an 'action' function, however the form data never makes it to the function. Here is the code for that
Javascript:
jQuery('.c_image_details').ajaxForm(function(){

    jQuery.post(
        
        MyAjax.ajaxurl,
        {
            // here we declare the parameters to send along with the request
            // this means the following action hooks will be fired:
            // wp_ajax_nopriv_myajax-submit and wp_ajax_myajax-submit
            action : 'myajax-submit',

            // other parameters can be added along with "action"
            postID : MyAjax.postID,
            postCommentNonce : MyAjax.postCommentNonce,
            data: MyAjax.data
        },
        function( response ) {
            document.getElementById('dump').innerHTML = response;
        }
    );
});



Code to add javascript to the admins head
add_action( 'admin_enqueue_scripts', 'wpse_enqueue' );

    function wpse_enqueue()
    {
        wp_enqueue_script( 'ajax-submit', plugin_dir_url( __FILE__ ) . 'js/ajax.js', array( 'jquery-form' )  );
        // declare the URL to the file that handles the AJAX request (wp-admin/admin-ajax.php)
        wp_localize_script( 'ajax-submit', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php'), 'postID' => 'Post', 'postCommentNonce' => wp_create_nonce( 'myajax-post-comment-nonce' ), 'data' => ''));
    }



PHP code that adds an actions to Wordpress, and the function refered to (myajax_submit) is the one that the ajax calls.
add_action( 'wp_ajax_myajax-submit', 'myajax_submit' );

    function myajax_submit() {
        // get the submitted parameters
        $nonce = $_POST['postCommentNonce'];

        // check to see if the submitted nonce matches with the
        // generated nonce we created earlier
        if ( ! wp_verify_nonce( $nonce, 'myajax-post-comment-nonce' ) )
            die ( 'Busted!');

        var_dump($_POST);

        $postID = $_POST['postID'];

        // generate the response
        $response = json_encode( array( 'success' => true ) );

        $id = $_POST['id'];
        $active = $_POST['active'];
        $img_url = $_POST['img_url'];
        $img_comment = $_POST['img_comment'];
        $img_name = $_POST['img_name'];
        $details = $_POST['details'];


        die ($id . $active . $img_name . $details . $postID);
        // response output
        header( "Content-Type: application/json" );
        //echo $response;



        // IMPORTANT: don't forget to "exit"
        exit;
    }



So the above function finishes at the var dump and returns what is in $_POST to the javascript which then outputs to the page for me to see, and here's what I get.

array
  'action' => string 'myajax-submit' (length=13)
  'postID' => string 'Post' (length=4)
  'postCommentNonce' => string '32fe6e7912' (length=10)
  'data' => string '' (length=0)



as you can see the only values that are Posted back are the one inside the MyAjax.ajaxurl,{}

I've seen some people try and do this at the top of their php file that the form submits to, but it won't work for me as is.

include_once('wp-config.php');
include_once('wp-load.php');
include_once('wp-includes/wp-db.php');

    $wpdb2 = new wpdb('user', 'password', 'name', 'host');



It is possible I'm trying to tackle this the wrong way, and if so, please give me a new direction! and if there is something I'm simply missing on either of these approaches, please point it out! Help is always appreciated!

And I thank you for your time!

Is This A Good Question/Topic? 0
  • +

Replies To: Word Press - Submit Form contents into database

#2 floppyspace   User is offline

  • D.I.C Regular

Reputation: 48
  • View blog
  • Posts: 256
  • Joined: 04-February 10

Re: Word Press - Submit Form contents into database

Posted 14 May 2012 - 12:59 AM

Without reading the whole thing, and finding the specific problem I used this as an example to do something similar a while ago, WordPress is tricky at times with all the built in functions, you can save the paths in the form screen if you want to without actually making DB tables for it.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1