-2

This is my ajax_script.js file:

$(document).ready(function()
{
    $("#color-submit").click(function()
    {
        $.ajax(
        {
            async:false,
            url:MyAjax.ajaxurl,
            success:function(response)
            {


                //var color_code=response.color;
                //var x = JSON.parse(response);
                alert(response.success);

                //alert(object);

                //alert(response['msg']);
                //$(".h1").css({"background-color":"#FF9852"});
                //console.log(color_code);

            }
        });
    });

});

and this is my action page

<?php
add_shortcode("259876985",contact);
add_action( 'admin_menu', 'my_practice_plugin' );
wp_enqueue_style('mystyle', plugins_url('/css/style.css',__FILE__));
wp_enqueue_script('formjs', plugins_url('/js/formjs.js',__FILE__), array('jquery'));



//running ajax

// embed the javascript file that makes the AJAX request
wp_enqueue_script('my-ajax-request', plugins_url('/js/ajax_script.js',__FILE__), array('jquery')); 

// declare the URL to the file that handles the AJAX request (wp-admin/admin-ajax.php)
wp_localize_script( 'my-ajax-request', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

//action for plugin
add_action( 'wp_ajax_nopriv_myajax_submit', 'myajax_submit');
add_action( 'wp_ajax_myajax_submit', 'myajax_submit');

function myajax_submit() {
    // get the submitted parameters
    //$color_value=$_POST['color-field'];

    // generate the response


    // response output
    $response=array();
    $response['success']='#FF8569';
    echo json_encode($response);
    header('Content-Type: application/json');
    die();

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

}//function ends here



//running ajax


/** Step 1. */
function my_practice_plugin() {
    add_options_page( 'My Practice Contact Plugin', 'Practice Contact', 'manage_options', 'practice_contact','my_plugin_output' );
}

function my_plugin_output()
{
    ?>
  <h3> To use this Plugin use this shortcode: <span class='shortcode'> &nbsp;&nbsp;&nbsp;&nbsp; [259876985] </span> </h3>
    <br>
    <h2> Select Your Color for the form </h2> 


<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<div class="container">
<div class="row">
<div class="col-md-4">

            <form method="post" name="color-form" id="color-form" >
                <div class="input-group">

                    <span class="input-group-btn">
                        <button type="button" class="btn btn-success btn-add" name="plus_button" id="plus_button">+</button>
                    </span>

                    <input type="text" name="color-field" class="form-control" id="color-field" value="#000000">

                    <div class="input-group-btn group-color"> 

                        <button type="button" class="btn btn-default btn-box dropdown-toggle" data-toggle="dropdown" name="select_color_button"  id="select_color_button">
                            <span class="fa fa-square" id="preview"></span> 
                        </button>

                        <ul class="dropdown-menu">

                            <li>

                                <div class="panel panel-default">

                                    <div class="panel-heading">
                                        <span class="panel-label">Color Swatch</span>
                                    </div>

                                    <div class="panel-body">

                                        <ul class="list-inline">
                                            <li><div id="#FF0000" class="swatch swatch-clickable" style="background-color:#FF0000"></div></li>
                                            <li><div id="#00FF00" class="swatch swatch-clickable" style="background-color:#00FF00"></div></li>
                                            <li><div id="#FFFF00" class="swatch swatch-clickable" style="background-color:#FFFF00"></div></li>
                                            <li><div id="#0000FF" class="swatch swatch-clickable" style="background-color:#0000FF"></div></li>
                                            <li><div id="#FF00FF" class="swatch swatch-clickable" style="background-color:#FF00FF"></div></li>
                                            <li><div id="#00FFFF" class="swatch swatch-clickable" style="background-color:#00FFFF"></div></li>
                                        </ul>

                                        <ul class="list-inline">
                                            <li><div id="#EF2326" class="swatch swatch-clickable" style="background-color:#EF2326"></div></li>
                                            <li><div id="#6DBE45" class="swatch swatch-clickable" style="background-color:#6DBE45"></div></li>
                                            <li><div id="#F2EA3F" class="swatch swatch-clickable" style="background-color:#F2EA3F"></div></li>
                                            <li><div id="#344EA2" class="swatch swatch-clickable" style="background-color:#344EA2"></div></li>
                                            <li><div id="#B6519F" class="swatch swatch-clickable" style="background-color:#B6519F"></div></li>
                                            <li><div id="#73CDD8" class="swatch swatch-clickable" style="background-color:#73CDD8"></div></li>
                                        </ul>

                                    </div>

                                </div>

                            </li>

                        </ul>

                    </div>


                </div>
                <br />
                     <button type="button" id="color-submit" name="color-submit" class="btn btn-primary"> Submit  </button>
                </form>
<p id="msg"> </p>

</div>
</div>
</div>

    <?php
    }

function contact()
{
    ?>

<div class="jumbotron jumbotron-sm">
    <div class="container">
        <div class="row">
            <div class="col-sm-12 col-lg-12">
                <h1 class="h1">
                    Contact us <small>Feel free to contact us</small></h1>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="well well-sm">
                <form>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="name">
                                Name</label>
                            <input type="text" class="form-control" id="name" placeholder="Enter name" required="required" />
                        </div>
                        <div class="form-group">
                            <label for="email">
                                Email Address</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span>
                                </span>
                                <input type="email" class="form-control" id="email" placeholder="Enter email" required="required" /></div>
                        </div>
                        <div class="form-group">
                            <label for="subject">
                                Subject</label>

                            <select id="subject" name="subject" class="form-control" required="required">
                                <option value="na" selected="">Choose One:</option>
                                <option value="service">General Customer Service</option>
                                <option value="suggestions">Suggestions</option>
                                <option value="product">Product Support</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="name">
                                Message</label>
                            <textarea name="message" id="message" class="form-control" rows="9" cols="25" required="required"
                                placeholder="Message"></textarea>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <button type="submit" class="btn btn-primary pull-right" id="btnContactUs">
                            Send Message</button>
                    </div>
                </div>
                </form>
            </div>
        </div>
        <div class="col-md-4">
            <form>
            <legend><span class="glyphicon glyphicon-globe"></span> Our office</legend>
            <address>
                <strong>Twitter, Inc.</strong><br>
                795 Folsom Ave, Suite 600<br>
                San Francisco, CA 94107<br>
                <abbr title="Phone">
                    P:</abbr>
                (123) 456-7890
            </address>
            <address>
                <strong>Full Name</strong><br>
                <a href="mailto:#">first.last@example.com</a>
            </address>
            </form>
        </div>
    </div>
</div>

    <?php

    }
?>
-2

In function myajax_submit send the headers before echoing any content

header('Content-Type: application/json');
echo json_encode($response);
die();

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.