I have created a page in wordpress which is hosted in localhost. The page containing two drop down lists. one is for selecting category lists from a table called 'category' and the second drop down list is depended on first, that is for selecting the subcategory from the 'subcategory' table. The category id is added to each subcategory value. The value of subcategory drop down list is depend on the category drop down and i tried to implement this using ajax.
Code of my php file named test_ajax.php
jQuery(document).ready( function(){
jQuery('#category').on('change',function (e){
e.preventDefault();
console.log("start1");
var catId = document.getElementById('category').value;
console.log(catId);
jQuery.ajax({
type: 'POST',
url: "/mudratcr/wp-admin/admin-ajax.php",
data: {'key':catId},
cache: false,
success : function (data) {
jQuery('#sub_cat').html(data);
console.log(data);
}
});
});
});
</script>
<form method="post" name="myform" id="myform">
<table width="200" border="0" cellpadding="10">
<tr>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
</tr>
<tr>
<td><label>Category</label></td>
<td><select name="category" id="category" >
<option value="">Select the category</option>
<?php
global $wpdb;
$result_fromDB = $wpdb->get_results("SELECT * FROM `category`");
foreach ($result_fromDB as $cat) {
echo "<option value='".$cat->id."' selected>".$cat->name."</option>";
}
?>
</select>
</td>
<td></td>
</tr>
<tr>
<td><label>Sub Category</label></td>
<td>
<div id="fetch_data"><select name="sub_cat" id="sub_cat">
<option value=""> Select Sub category</option>
</select></div>
</td>
<td><div id="one"><span></span></div></td>
</tr>
</table>
</form>
functions.php-- not written the complete code.
function registerFormAction(){
// To handle the form data we will have to register ajax action.
$catid = $_REQUEST['catId']; //catId is the value of category drop down list
}add_action('wp_ajax_nopriv_submitAjaxForm','registerFormAction');
add_action('wp_ajax_submitAjaxForm','registerFormAction');
When i run this page it shows bad request. Can anyone help me. I am a beginner . And i read many articles about ajax and word press, nothing works
This question already has answers here: AJAX Implementation (2 answers) Closed 6 years ago.I have created a page in wordpress which is hosted in localhost. The page containing two drop down lists. one is for selecting category lists from a table called 'category' and the second drop down list is depended on first, that is for selecting the subcategory from the 'subcategory' table. The category id is added to each subcategory value. The value of subcategory drop down list is depend on the category drop down and i tried to implement this using ajax.
Code of my php file named test_ajax.php
jQuery(document).ready( function(){
jQuery('#category').on('change',function (e){
e.preventDefault();
console.log("start1");
var catId = document.getElementById('category').value;
console.log(catId);
jQuery.ajax({
type: 'POST',
url: "/mudratcr/wp-admin/admin-ajax.php",
data: {'key':catId},
cache: false,
success : function (data) {
jQuery('#sub_cat').html(data);
console.log(data);
}
});
});
});
</script>
<form method="post" name="myform" id="myform">
<table width="200" border="0" cellpadding="10">
<tr>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
</tr>
<tr>
<td><label>Category</label></td>
<td><select name="category" id="category" >
<option value="">Select the category</option>
<?php
global $wpdb;
$result_fromDB = $wpdb->get_results("SELECT * FROM `category`");
foreach ($result_fromDB as $cat) {
echo "<option value='".$cat->id."' selected>".$cat->name."</option>";
}
?>
</select>
</td>
<td></td>
</tr>
<tr>
<td><label>Sub Category</label></td>
<td>
<div id="fetch_data"><select name="sub_cat" id="sub_cat">
<option value=""> Select Sub category</option>
</select></div>
</td>
<td><div id="one"><span></span></div></td>
</tr>
</table>
</form>
functions.php-- not written the complete code.
function registerFormAction(){
// To handle the form data we will have to register ajax action.
$catid = $_REQUEST['catId']; //catId is the value of category drop down list
}add_action('wp_ajax_nopriv_submitAjaxForm','registerFormAction');
add_action('wp_ajax_submitAjaxForm','registerFormAction');
When i run this page it shows bad request. Can anyone help me. I am a beginner . And i read many articles about ajax and word press, nothing works
Share Improve this question edited Nov 27, 2018 at 8:17 fuxia♦ 107k39 gold badges255 silver badges461 bronze badges asked Nov 27, 2018 at 8:06 Agreesh V SAgreesh V S 291 silver badge5 bronze badges 2- i hope this link help for you:pippinsplugins/… – vikrant zilpe Commented Nov 27, 2018 at 8:22
- @avs Don't post the same question twice. You've already got an answer in your second question... – Krzysiek Dróżdż Commented Nov 27, 2018 at 8:33
1 Answer
Reset to default 0This function will load the JS scripts:
function test_ajax_load_scripts() {
// load our jquery file that sends the $.post request
wp_enqueue_script( "ajax-test", plugin_dir_url( __FILE__ ) . '/ajax-test.js', array( 'jquery' ) );
// make the ajaxurl var available to the above script
wp_localize_script( 'ajax-test', 'the_ajax_script', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) ); }
add_action('wp_print_scripts', 'test_ajax_load_scripts');