I have implemented a short code to display the product search form in the page built using Visual Composer.
add_shortcode( 'sagar-custom-search', 'sagar_custom_search' );
function sagar_custom_search() {
$form = '<form role="search" method="get" id="searchform" action="' . esc_url( home_url( '/' ) ) . ' ">';
$form .= '<div>';
$form .= '<label class="screen-reader-text" for="s">' . __( 'Search for:', 'woocommerce' ) . '</label>';
$form .= '<input type="text" value="' . get_search_query() . '" name="s" id="s" placeholder="' . __( 'My Search form', 'woocommerce' ) . '" />';
$form .= '<input type="submit" id="searchsubmit" value="'. esc_attr__( 'Search', 'woocommerce' ) .'" />';
$form .= '<input type="hidden" name="post_type" value="product" />';
$form .= '</div>';
$form .= '</form>';
echo $form;
echo "sagar tamang";
}
The form can be seen using inspect but it is not being rendered. Can anybody help figure it out.
Good day fellows, I'm displaying a form via ajax based on some drop downs menus. User can can select the class on one dropdown and subject on another, which in turn returns a list of students in that class.
This is formated in a form like manner that allows user to enter scores of subjects that a student have acquire. This is how the form looks after user have selected their preferences:
I want when the save button is click and after user have enter the score, it should be send to the database. I'm facing few problems:
When the score field is empty(since I added a required attribute) it doesn't validate that the field is empty, but rather send a request to the file that is responsible to insert records.
When the request reaches the file responsible to insert records(create_score.php) it's like no values were send through the form. I know this because I var_dump($_POST) and it return this array(0) { }
This is the script I'm using to return the file:
$(document).ready(function() {
$('#subject_id').on('change', function(){
var subject_id = $('#subject_id').val();
var class_id = $('#class_id').val();
var term = $('#term').val();
if (subject_id != '' || class_id != '') {
$.ajax({
url:"includes/ajax/read_student_score_form.php",
method:"post",
data:{"subject":subject_id, "class":class_id, "term":term},
dataType:"text",
success:function(data){
$("#result").html(data);
}
});
} else {
$("#result").html('');
}
});
$('#class_id').on('change', function(){
var subject_id = $('#subject_id').val();
var class_id = $('#class_id').val();
var term = $('#term').val();
if (subject_id != '' || class_id != '') {
$.ajax({
url:"includes/ajax/read_student_score_form.php",
method:"post",
data:{"subject":subject_id, "class":class_id, "term":term},
dataType:"text",
success:function(data){
$("#result").html(data);
}
});
} else {
$("#result").html('');
}
});
$('#term').on('change', function() {
/* Act on the event */
var subject_id = $('#subject_id').val();
var class_id = $('#class_id').val();
var term = $('#term').val();
if (subject_id != '' || class_id != '') {
$.ajax({
url:"includes/ajax/read_student_score_form.php",
method:"post",
data:{"subject":subject_id, "class":class_id, "term":term},
dataType:"text",
success:function(data){
$("#result").html(data);
}
});
} else {
$("#result").html('');
}
});
When the submit is click the is how I structure my code to post values to file responsible to insert records(create_score.php)
$(document).on('click', '#savebtn', function(event) {
event.preventDefault();
// this is where I'm testing if the button is working
alert("Button click");
console.log("Button click for console");
var form = $('#st_score_form');
var formdata = form.serialize();
$.post("includes/ajax/create_score.php", formdata)
.done(function(data){
$("#success").fadeIn('slow', function(){
$("#success").html('<div class="alert alert-info alert-dismissible"><button type="button" class="close" data-dismiss="alert" aria-hidden="true"><i class="glyphicon glyphicon-remove-circle"></i></button><b><i class="fa fa-check"></i>Alert! </b>'+data+'</div>');
});
})
.fail(function(data){
$("#success").fadeIn('slow', function(){
$("#success").html('<div class="alert alert-warning alert-dismissible"><button type="button" class="close" data-dismiss="alert" aria-hidden="true"><i class="glyphicon glyphicon-remove-circle"></i></button><b><i class="fa fa-warning"></i>Alert! </b>'+data+'</div>');
});
});
});
$('body').append('<button id="#savebtn"></button>');
This is how I'm returning the form(read_student_score_form.php):
if (mysqli_num_rows($result) > 0) {
# code...
$output .= '<h4 align="center">Periodic Report</h4>';
$output .= '<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th scope="row" colspan="1">Subject</th>
<td colspan="5">'.$subject["subject_name"].'</td>
<th scope="row">Class</th>
<td>'.$class['class_name'].'</td>
<th scope="row">Period</th>
<td>'.$period.'</td>
</tr>';
$output .= '</table>';
$output .= '<table class="table table-bordered table-condensed table-responsive table-striped">
<thead>
<tr>
<th>Student</th>
<th>Score</th>
<th>Operations</th>
</tr>
</thead>';
$output .= '<tbody>';
while ($row = mysqli_fetch_array($result)) {
# code...
$output .= '<form action="#" method="post" id="st_score_form">';
// unseen fields values that will be send
$output .= '<tr style="display: none;">';
$output .= '<td><input type="text" name="student_id" value="'.$row['student_id'].'"></td>';
$output .= '<td><input type="text" name="subject_id" value="'.$subject_id.'"></td>';
$output .= '<td><input type="text" name="class_id" value="'.$class_id.'"></td>';
$output .= '<td><input type="text" name="term" value="'.$term.'"></td>';
$output .= '</tr>';
// -- end of unseen fields
$output .= '<tr>';
$output .= '<td>'.$row["first_name"]." ".substr($row["middle_name"], 0, 1).". ".$row["surname"].'</td>';
$output .= '<div class="form-group">';
$output .= '<td><input type="number" min="59" max="100" name="score" class="form-control" required="required"></td>';
$output .= '<td><input type="submit" name="savebtn" id="savebtn" value="Save" class="btn btn-info form-control"></td>';
$output .= '</div>';
$output .= '</tr>';
$output .= '</form>';
}
$output .= '</tbody>';
$output .= '</table>';
$output .= '</div>';
echo $output;
} else {
echo "Data not found";
}
Contents of file responsible to insert records (create_score.php)
if (isset($_POST)){
// just testing to see values posted
echo var_dump($_POST);
}
I'm open to feed backs and suggestions on ways I can make this work. Thanks!!!
UPDATE This is how I'm now displaying my form
$output .= '<form action="#" method="post" id="st_score_form">';
while ($row = mysqli_fetch_array($result)) {
# code...
// unseen fields values that will be send
$output .= '<tr style="display: none;">';
$output .= '<td><input type="text" id="student_id" name="student_id" value="'.$row['student_id'].'"></td>';
$output .= '<td><input type="text" name="subject_id" value="'.$subject_id.'"></td>';
$output .= '<td><input type="text" name="class_id" value="'.$class_id.'"></td>';
$output .= '<td><input type="text" name="term" value="'.$term.'"></td>';
$output .= '</tr>';
// -- end of unseen fields
$output .= '<tr>';
$output .= '<td>'.$row["first_name"]." ".substr($row["middle_name"], 0, 1).". ".$row["surname"].'</td>';
$output .= '<div class="form-group">';
$output .= '<td><input type="number" min="59" max="100" name="score" class="form-control" required="required"></td>';
$output .= '<td><input type="submit" name="savebtn" id="savebtn" value="Save" class="btn btn-info form-control"></td>';
$output .= '</div>';
$output .= '</tr>';
}
$output .= '</form>';
you have multiple elements with same ID, specificaly
id="savebtn"
first one is appended with jQuery, and second one comes over wire and you try to add that one too.. that can be a messy,, try to isolate or change the button refs, or classes,, try to switch to classes and ditch ID's once and for all, I did that long time ago and my life changed for the better :)
also,, for your issue number
1) try to add check same way you have for other event
$(document).on('click', '#savebtn', function(event) {
event.preventDefault();
var form = $('#st_score_form');
var formdata = form.serialize();
// check for value if not empty
var subject_id = $('#subject_id').val();
var class_id = $('#class_id').val();
var term = $('#term').val();
if (subject_id != '' || class_id != '') {
$.post("includes/ajax/create_score.php", formdata)
.done(function(data){
$("#success").fadeIn('slow', function(){
$("#success").html('<div class="alert alert-info alert-dismissible"><button type="button" class="close" data-dismiss="alert" aria-hidden="true"><i class="glyphicon glyphicon-remove-circle"></i></button><b><i class="fa fa-check"></i>Alert! </b>'+data+'</div>');
});
})
.fail(function(data){
$("#success").fadeIn('slow', function(){
$("#success").html('<div class="alert alert-warning alert-dismissible"><button type="button" class="close" data-dismiss="alert" aria-hidden="true"><i class="glyphicon glyphicon-remove-circle"></i></button><b><i class="fa fa-warning"></i>Alert! </b>'+data+'</div>');
});
});
}
});
for your issue number
2) when you get results from read_student_score_form.php page try to run this in your browser console to see if you have any results,,, that's before you try to send it to server,,
var form = $('#st_score_form');
var formdata = form.serialize();
run that, and get me your results here so maybe we can continue on this issue,,
UPDATE:
you are loop wrongly... take a look on your while in php and that one would render multiple <form action="#" method="post" id="st_score_form"> and that's wrong.. move it before while,, something like this:
<?php
$output .= '<form action="#" method="post" id="st_score_form">';
while ($row = mysqli_fetch_array($result)) {
} // end while
$output .= '</form>';
I need for this php file a modification but I don't know javascript. This makes it really hard for me how to do it.
I want to do this:
If checkbox is checked than activate my submit button else don't activate them (default).
I already did some modifications:
I added the checkbox with id= checkbox and I added the parameter disabled="disabled" to my button.
This is working. Now I need only to activate the button when checkbox is checked.
But I have now 2 problems:
I don't know where to put the javascript code to my file
I don't know to I can call or activate javascript in my code
Would be really nice if someone could help me.
<?php
if(isset($_POST['photo-name'])){
$photo_name = $_POST['photo-name'];
}
if(isset($_POST['photo-title'])){
$photo_title = $_POST['photo-title'];
}
if(isset($_POST['photo-description'])){
$photo_description = $_POST['photo-description'];
}
if(empty($photo_name)){
$photo_name = '';
}
if(empty($photo_description)){
$photo_description = '';
}
$sql= $wpdb->get_results("SELECT name,id FROM ".$wpdb->prefix."u_gallery_cat ORDER BY name ASC");
$html .= '<div><label for="photo-name"><strong>'.__('Caption:','user-gallery').'</strong></label></div>';
$html .= '<div class="contest-input"><input type="text" name="photo-name" id="photo-name" value="'.$photo_name.'" /></div>';
$html .= '<div><label for="photo-content"><strong>'.__('Description:','user-gallery').'</strong> <span class="contest-small-font-2">'.__('(Optional)','user-gallery').'</span></label></div>';
$html .= '<div class="contest-input"><textarea class="photo-description-textarea" name="photo-description" id="photo-description">'.$photo_description.'</textarea></div>';
if(!empty($sql)){
$html .= '<div><label for="photo-category"><strong>'.__('Category:','user-gallery').'</strong></label></div>';
$html .= '<select name="photo-category" id="photo-category">';
foreach($sql as $item){
$html .= '<option value="'.$item->id.'">'.$item->name.'</option>';
}
$html .= '</select>';
}
if ($photo_limit == 100000000){
$html .= '<div><label for="user-photo"><strong>'.__('Select image:','user-gallery').'</strong></label></div>';
}else{
$html .= '<div><label for="user-photo"><strong>'.__('Select image: (max.','user-gallery').' '.$p_limit.')</strong></label></div>';
}
$html .= '<div class="contest-input"><input type="file" name="user-photo" id="user-photo" size="50" accept="image/*" onchange="loadFileU(event)" class="selimg"></div>';
$html .= '<img id="coutput"/>';
$html .= '<div class="ug-clear"></div>';
$html .= '<input type="hidden" name="user_id" />';
$html .= '<input type="hidden" name="action" value="new_post" />';
$html .= '<div class="contest-button-div">';
$html .= '<div class="contest-button"><input type="checkbox" name="chk" id="chk" value="yourvalue" class="checkbox"></div>';
$html .= '<div class="contest-button"><input type="submit" value="'.__('Add Photo','user-gallery').'" id="submit" disabled="disabled" name="submit" class="ug-styled-button tooglebutton" /></div>';
$html .= '<div class="ug-clear"></div>';
$html .= '</div>';
$html .= '<div class="ug-clear"></div>';
$html .= '</form>';
$html .= '<div class="ug-clear"></div>';
$html .= '</div>';
}
?>
Without using Jquery :
On your checkbox add a onchange() event to trigger Javascript:
<div class="contest-button"><input type="checkbox" name="chk" id="chk" value="yourvalue" class="checkbox" onchange="openSubmit()"></div>
Then for your script :
<script type="text/javascript">
function openSubmit(){ // This function is called by the checkbox click
if(document.getElementById('chk').checked == true){ // If it is checked
document.getElementById('submit').disabled = false; // Then we remove the disable attribute
}
</script>
Using Jquery :
$('#chk').change(function(){ // You put an event on your checkbox here
if($(this).is(':checked')){ // If statut of checkbox is checked
document.getElementById('submit').disabled = false; // Then we remove the disable attribute
}
});
You can put this script at the bottom of your file after your PHP.
I have a plugin that creates a shortcode that outputs a form onto the page. There is nothing overly special about the form its self (just a bunch of html echo'd out). Where I am running into issues is when I need to manipulate that html with js. For some reason if I try to enqueue and register the js, none of the dynamic properties I need the form to have work but if I just put the js directly below the shortcode then everything works as expected. I normally wouldn't care if I had to do this for just esthetic js but I will also need this form to make an ajax call when the the submit button is pressed and I don't know how to do that without properly enqueueing the script. Below is the class for the Form output and the class that will just enqueue all the scripts I need:
namespace mmUserPreference;
class Form
{
public function __construct()
{
add_shortcode('user_preference_form', array($this, 'user_preference_form_shortcode'));
}
public function user_preference_form_shortcode()
{
//the ../ is to keep the form submit on the first page level
$output = '<div class="user_preference_form_container">';
$output .= '<form id="user_preference" method="post">';
$output .= '<div class="top_nav_up">';
$output .= '<div class="top_nav_top_row">';
$output .= '<div class="form_title_up">Manage Your e-Alerts</div>';
$output .= '<div class="top_nav_up_right">';
$output .= '<div class="form_submit_up"><input type="submit" value="Save"></div>';
$output .= '<div class="form_collapse_up"><i class="fa fa-chevron-up rotate" aria-hidden="true"></i></div>';
$output .= '</div>';
$output .= '</div>';
$output .= '<ul class="tabs_up">';
$output .= '<li class="tab_link_up current" data-tab="topics">Topics</li>';
$output .= '<li class="tab_link_up" data-tab="stocks">Stocks</li>';
$output .= '</ul>';
$output .= '</div>';
$output .= '<div class="form_content_up">';
$output .= '<div id="topics" class="tab-content-up current">';
$output .= '<div class="row_up">';
$output .= '<div class="input_label_up"><input type="checkbox" name="stocks_field" value="true"> Stocks</div>';
$output .= '<div class="input_label_up"><input type="checkbox" name="us_economy_field" value="true"> U.S. Economy</div>';
$output .= '</div>';
$output .= '<div class="row_up">';
$output .= '<div class="input_label_up"><input type="checkbox" name="stock_market_today_field" value="true"> Stock Market Today</div>';
$output .= '<div class="input_label_up"><input type="checkbox" name="technology_article_field" value="true"> Technology Article</div>';
$output .= '</div>';
$output .= '<div class="row_up">';
$output .= '<div class="input_label_up"><input type="checkbox" name="global_markets_field" value="true"> Global Markets</div>';
$output .= '<div class="input_label_up"><input type="checkbox" name="top_news_field" value="true"> Top News</div>';
$output .= '</div>';
$output .= '<div class="row_up">';
$output .= '<div class="input_label_up"><input type="checkbox" name="nasdaq_field" value="true"> Nasdaq.com</div>';
$output .= '<div class="input_label_up"><input type="checkbox" name="investing_ideas" value="true"> Investing Ideas</div>';
$output .= '</div>';
$output .= '<div class="row_up">';
$output .= '<div class="input_label_up"><input type="checkbox" name="oil" value="true"> Oil</div>';
$output .= '<div class="input_label_up"><input type="checkbox" name="tech_stocks" value="true"> Tech Stocks</div>';
$output .= '</div>';
$output .= '</div>';
$output .= '<div id="stocks" class="tab-content-up">';
$output .= '<div class="row_up">';
$output .= '<div class="input_label_up"><input type="checkbox" name="aapl" value="true"> AAPL</div>';
$output .= '<div class="input_label_up"><input type="checkbox" name="lmt" value="true"> LMT</div>';
$output .= '</div>';
$output .= '<div class="row_up">';
$output .= '<div class="input_label_up"><input type="checkbox" name="ekso" value="true"> EKOS</div>';
$output .= '<div class="input_label_up"><input type="checkbox" name="noc" value="true"> NOC</div>';
$output .= '</div>';
$output .= '<div class="row_up">';
$output .= '<div class="input_label_up"><input type="checkbox" name="ups" value="true"> UPS</div>';
$output .= '<div class="input_label_up"><input type="checkbox" name="tsla" value="true"> TSLA</div>';
$output .= '</div>';
$output .= '<div class="row_up">';
$output .= '<div class="input_label_up"><input type="checkbox" name="vz" value="true"> VZ</div>';
$output .= '<div class="input_label_up"><input type="checkbox" name="nvda" value="true"> NVDA</div>';
$output .= '</div>';
$output .= '<div class="row_up">';
$output .= '<div class="input_label_up"><input type="checkbox" name="awk" value="true"> AWK</div>';
$output .= '<div class="input_label_up"><input type="checkbox" name="rtn" value="true"> RTN</div>';
$output .= '</div>';
$output .= '</div>';
$output .= '</div>';
if(isset($_COOKIE['mmp_e'])) {
$output .= '<input type="hidden" name="email" value="' . $_COOKIE['mmp_e'] . '">';
} else {
$output .= '<input type="text" name="email" required><br> Please enter the email address you would like these updates to be sent to. <br>';
}
$output .= '</form>';
$output .= '</div>';
echo $output;
?>
<script>
// jQuery(document).ready(function($) {
// //for the user preference form tabs
// $('div.user_preference_form_container li.tab_link_up').click(function () {
// var tab_id = $(this).attr('data-tab');
//
// $('li.tab_link_up').removeClass('current');
// $('.tab-content-up').removeClass('current');
//
// $(this).addClass('current');
// $("#" + tab_id).addClass('current');
// });
//
// $('div.form_collapse_up').click(function () {
// $('.tabs_up').toggle('slow');
// $('.form_content_up').toggle('slow');
// $('.form_submit_up').toggle('slow');
// $('.form_collapse_up > .fa-chevron-up').toggleClass("down");
// });
// });
</script>
<?php
}
}
then to enqueue the scripts
namespace mmUserPreference;
class loadScripts
{
public function __construct()
{
add_action('wp_enqueue_scripts', array($this, 'loadScripts'));
}
public function loadScripts()
{
wp_register_script(
'user-preference-form-style-js',
plugins_url('../js/mm-user-preference-form-style.js', __FILE__),
array('jquery'),
null,
false);
wp_register_script(
'user-preference-form-submit-js',
plugins_url('../js/mm-user-preference-form-submit.js', __FILE__),
array('jquery'),
null,
true);
wp_register_style(
'user-preference-form-style-css',
plugins_url('../css/mm-user-preference-form.css', __FILE__)
);
wp_enqueue_script('user-preference-form-style-js');
wp_enqueue_script('user-preference-form-submit-js');
wp_enqueue_style('user-preference-form-style-css');
}
}
Then the main plugin file just looks something like this right now:
/*
Plugin Name: ******
Description: *****
Version: 1.0.0
Author: ******
License: GPL2
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/
include 'classes/Form.php';
include 'classes/loadScripts.php';
use mmUserPreference\Form;
use mmUserPreference\loadScripts;
use mmUserPreference\sendEmail;
use mmUserPreference\userQuery;
$userPrefScripts = new loadScripts();
$userPrefForm = new Form();
Any ideas where I am going wrong?
So for whatever reason I had to load my scripts at the 'wp_footer' hook in order for my shortcode to be effected by the js ie:
add_action('wp_footer', array($this, 'loadScripts'));
I just want to add a html block using .before() fucntion of JQuery here is the block :
$buttonValue = '<div class="addthis_toolbox addthis_default_style" '.$str .'>
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_pinterest_pinit" pi:pinit:layout="horizontal"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>';
and here is the Script that I use it :
$script = "(function($){\n";
$script .= "$(document).ready(function(){\n";
$script .= "$( \".prod-view\" ).before( \"$buttonValue\" );";
$script .= "}); \n";
$script .= "})(jQuery);" ;
I have already tried php addslashes() function, but with no luck
Try this,
$buttonValue = '<div class="addthis_toolbox addthis_default_style" '.$str .'><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_button_pinterest_pinit" pi:pinit:layout="horizontal"></a><a class="addthis_counter addthis_pill_style"></a></div>';
SCRIPT
$script = "(function($){\n";
$script .= "$(document).ready(function(){\n";
$script .= "$( \".prod-view\" ).before( '$buttonValue' );";
$script .= "}); \n";
$script .= "})(jQuery);" ;
Differences from you code is make the html in single line, otherwise it make a js error. And then use semicolon in .before()