We Keep Coding

Check if all radio buttons selected then

I want to check if all radio buttons were checked and if not use alert message. Alert message works but it sends to answers.php anyways without the selected field. How to do that form action wouldn't work if an alert is true? Thank you.
count.js
$(document).ready(function () {
var names = {};
$(':radio').each(function () {
names[$(this).attr('name')] = true;
});
var count = 0;
$.each(names, function () {
count++;
});
$("#qSubmit").click(function () {
if ($(':radio:checked').length !== count) {
alert("not all checked");
}
});
});
form.php
$(document).ready(function () {
var names = {};
$(':radio').each(function () {
names[$(this).attr('name')] = true;
});
var count = 0;
$.each(names, function () {
count++;
});
$("#qSubmit").click(function () {
if ($(':radio:checked').length !== count) {
alert("not all checked");
}
});
});
<form action="bbb.php" method="post" id="quiz" style="margin-top:100px;" >
<?php
while ($row = $result2->fetch_assoc()) {
echo '<div class="row">';
echo '<div class="col-md-8 col-sm-8 col-xs-12">';
echo '<div class="borderis">' . $row['question'] . '</div><br>';
$i++;
echo '<fieldset id="group">';
echo '<label for="' . $row['answer1'] . '"><input type="radio" id="' . $row['answer1'] . '"name="answers' . $i . '" value="' . $row['answer1'] . '"> <bled></bled>
<span>' . $row['answer1'] . '</span></label>' . '<br>';
echo '<label for="' . $row['answer2'] . '"><input type="radio" id="' . $row['answer2'] . '"name="answers' . $i . '" value="' . $row['answer2'] . '"> <bled></bled>
<span>' . $row['answer2'] . '</span></label>' . '<br>';
echo '<label for="' . $row['answer3'] . '"><input type="radio" id="' . $row['answer3'] . '"name="answers' . $i . '" value="' . $row['answer3'] . '"> <bled></bled>
<span>' . $row['answer3'] . '</span></label>' . '<br>';
echo '<label for="' . $row['answer4'] . '"><input type="radio" id="' . $row['answer4'] . '"name="answers' . $i . '" value="' . $row['answer4'] . '"> <bled></bled>
<span>' . $row['answer4'] . '</span></label>' . '<br>';
echo '</fieldset>';
echo '</div></div>';
}
?>
<input type="submit" value="Pateikti atsakymus" name="result" class="qSubmit" id="qSubmit" />
</form>

You need to prevent the default action of the button which is to submit the form
$("#qSubmit").click(function(event) {
if ($(':radio:checked').length !== count) {
// prevent submit
event.preventDefault();
alert("not all checked");
}
});

You need to bind the submit event handler, not the submit button click ideally speaking, and prevent the default behavior of the form.
$(document).ready(function() {
$("#quiz").on('submit', function(e) {
var totalRadio = $(":radio").length;
if ($('radio:checked').length !== totalRadio) {
alert("not all checked");
e.preventDefault();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="bbb.php" method="post" id="quiz" style="margin-top:100px;">
Check 1<input type="radio" name="input1"> Check 1<input type="radio" name="input2"> Check 1<input type="radio" name="input3"> Check 1<input type="radio" name="input4"> Check 1<input type="radio" name="input5"> Check 1<input type="submit" value="Pateikti atsakymus"
name="result" class="qSubmit" id="qSubmit" />
</form>

How to use javascript to activate the button when checkbox is checked?

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.

Wordpress Shortcode associated js not working

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'));

Passing selected values into another page in php using javascript

I am new to Javascript and jquery.I wish to pass multiple selected values of dropdown from one php page to function of another php page.
In my dropdown I have two buttons.'Set' and 'unset'.Set will insert values into DB and Unset Deleting from DB.
Here is my php:(php1.php)
printf( '<h1>Update Capabilities</h1>' );
printf( '<form action="%s" method="POST" id="capabilityform">', $_SERVER['PHP_SELF'] );
printf( '<span class="subHeading">Capabilities</span>' );
printf('<select name="selectedCapabilities[]" multiple>');
foreach ($capabilityList as $i)
{
printf('<option value="%s">%s</option>', $i, $i);
}
printf( '</select>' );
printf( '<input type="hidden" name="hosts" value="%s"/>', implode( ',', $hosts ) );
printf( '<input id="capabilityHosts" type="hidden" name="sethosts" value="" />' );
printf( '<input id="setCapabilitiesButton" name="setcapabilities" type="summit" value="Set Capabilities" disabled="disabled" />' );
printf( '<input id="unsetCapabilitiesButton" name="unsetcapabilities" type="submit" value="Unset Capabilities" disabled="disabled" />' );
printf( '</form>' );
Another php page has two functions for set and unset.(php2.php)
function setCap($host , $capablities)
{
//....sql query here
}
function unsetCap($host , $capablities)
{
//....sql query here
}
if we press setCapabilities button all selected values will go to setcap() and for same as unsetCapabilities.
Could you please help to pass the selected values to the above functions using JS?

First you have to add class name to select option.
printf( '<h1>Update Capabilities</h1>' );
printf( '<form action="%s" method="POST" id="capabilityform">', $_SERVER['PHP_SELF'] );
printf( '<span class="subHeading">Capabilities</span>' );
printf('<select name="selectedCapabilities[]" class="selectedCapabilities" multiple>');
foreach ($capabilityList as $i)
{
printf('<option value="%s">%s</option>', $i, $i);
}
printf( '</select>' );
printf( '<input type="hidden" name="hosts" value="%s"/>', implode( ',', $hosts ) );
printf( '<input id="capabilityHosts" type="hidden" name="sethosts" value="" />' );
printf( '<input id="setCapabilitiesButton" name="setcapabilities" type="summit" value="Set Capabilities" disabled="disabled" />' );
printf( '<input id="unsetCapabilitiesButton" name="unsetcapabilities" type="submit" value="Unset Capabilities" disabled="disabled" />' );
printf( '</form>' );
and then add this javascript code.
<script type="text/javascript">
$("select.selectedCapabilities").change(function(){
var selectedCapabilities = $(".selectedCapabilities option:selected").val();
//uncomment alert you can check if you getting right data
//alert(selectedCapabilities);
$.ajax({
url: "php2.php",
type: "post",
data: {option: $(this).find("option:selected").val()},
success: function(data){
//this one you need to show some responce from php2 file
$("#getservicesdatas").html(data);
} });
});
</script>

jquery form results are not showing. Is my code wrong?

I am having difficulty with my form. On one of my pages is a form. You enter info, click submit, and it returns with some result. Well, it is supposed to return with a result. It appears to do nothing, currently. However, if I check the header responses in my developer tools, it does show the results. So I know they are being called correctly, they just are not appearing on the webpage.
Here is the calling code:
$content .= '
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(window).load(function(){
$j("#pubverify-form").submit(function() {
var str = $j(this).serialize();
$j.ajax({
type: "POST",
url: "' . $cs_base_dir . 'verify.php",
data: str,
success: function(msg){
$j("#note").ajaxComplete(function(event, request, settings)
{
$j(this).html(msg);
});
}
});
return false;
});
});
</script>';
Here is the code that I believe should show the results:
$content .= '<div id="verify-a-rec" class="clear">';
$content .= '<div id="fields">';
$content .= '<h4>Verify A Recommendation</h4>';
$content .= '<div class="verify_search">';
$content .= '<form id="pubverify-form" action="">';
$content .= '<div class="label_wrap_verify"><label class="error" for="search_last_name">Last Name </label>';
$content .= '<div class="input_wrap_verify"><input name="search_last_name" type="text" id="search_last_name"/></div></div>';
$content .= '<div class="label_wrap_verify"><label class="error" for="search_dob">Birthdate (mm-dd-yyyy) </label>';
$content .= '<div class="input_wrap_verify"><input name="search_dob" type="text" id="search_dob"/></div></div>';
$content .= '<div class="label_wrap_verify"><label class="error" for="search_issue_date">Issue Date (mm-dd-yyyy)</label>';
$content .= '<div class="input_wrap_verify"><input name="search_issue_date" type="text" id="search_issue_date"/></div></div>';
$content .= '<div class="button_wrap"><input type="submit" value="Verify" class="button" id="pubverify-submit" /></div>';
$content .= '</form>';
$content .= '</div>';
$content .= '</div>';
$content .= '<div style="clear:both"></div>';
$content .= '<div id="note">';
$content .= '<p>Enter a Recommendation ID and click Verify!</p>';
$content .= '<div class="patient_wrapper">';
$content .= '<div class="results_label">First Name </div>';
$content .= '<div class="results_label">Last Name </div>';
$content .= '<div class="results_label">Date of Birth </div>';
$content .= '<div class="results_label">Issue Date </div>';
$content .= '<div class="results_label">Expiration Date </div>';
$content .= '<div class="results_label">Dr. Information </div>';
$content .= '</div>';
$content .= '</div>';
$content .= '</div>';
return $content;
Can someone please help!?

This part is wrong.
$j("#note").ajaxComplete(function(event, request, settings)
{
$j(this).html(msg);
});
You need to remove the ajaxComplete code.
$j.ajax({
type: "POST",
url: "' . $cs_base_dir . 'verify.php",
data: str,
success: function(msg){
$j("#note").html(msg);
}
});