We Keep Coding

Show message on checkbox click

I try to show a message when someone clicks on a checkbox.
Do you have any idea to display a message?
I tried, but it doesn't work.
The Checkbox :
echo '<div><input type="checkbox" value="' . $products_id .'" id="productsCompare" title="Compare" /> Compare</div>';
the script including the element to show a message
<script>
$(function() {
$('input[type=checkbox]').change(function(){
var chkArray = [];
$('#container').html('');
//put the selected checkboxes values in chkArray[]
$('input[type=checkbox]:checked').each(function() {
chkArray.push($(this).val());
});
// message
var toggle = false;
$('#productsCompare').click(function() {
$('input[type=checkbox]').attr('checked',!toggle);
toggle = !toggle;
$(\'productsCompare\').show();
});
//If chkArray is not empty show the <div> and create the list
if(chkArray.length !== 0){
$.ajax({
method: 'POST',
url : "http://localhost/.........test.php",
data : {product_id: chkArray},
});
}
});
})
</script>
The message
<div class="col-md-12" id="productsCompare" style="display:none;">
<div class="separator"></div>
<div class="alert alert-info text-md-center">
<span class="text-md-center">
<button class="btn">Compare</button>
</span>
</div>
</div>

Check my example and try to modify it with your case.
$("#box").addClass('novis');
$("#ch").on('click',function(){
$("#box").toggleClass('novis','vis');
});
.vis{ display: block; }
.novis{ display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Show</label>
<input type="checkbox" id="ch" unchecked>
<div id="box">
<p>Hello world</p>
</div>

jquery sum is not working, when calling the function the sum changes to zero

I am creating a small application for the examination, when I click the next button, the current answer radio button value should be stored in some variable and that value should be added to the next answer value, i am doing this with the jquery, but my stored value is always re-setting to zero when I call that function for the multiple times,
here is what I tried so far.
following is my view page
<div>
<div id="questionvalue">#a.QDescription</div>
<div>
<div id="questionvalue">
<input type="radio" name="test" value="#a.Choice1Percent"> #a.Choice1Desc<br>
</div>
</div>
<div>
<input type="radio" name="test" value="#a.Choice2Percent"> #a.Choice2Desc<br>
</div>
<div>
<input type="radio" name="test" value="#a.Choice3Percent"> #a.Choice3Desc<br>
</div>
<div>
<input type="radio" name="test" value="#a.Choice4Percent"> #a.Choice4Desc<br>
</div>
<button type="button" id="starttestbuttonid" class="btn btn-default" onclick="StartTest()">Next</button>
following is the script which i am trying to add the sum of the answers
<script>
function StartTest() {
debugger;
var selopt = parseFloat($('input[name=test]:checked').val());
var optionssum=0;
optionssum+= optionssum + selopt;
$.ajax({
url: $("baseUrl").html() + "Test/_QuestionView",
type: "POST",
data: { selectedoption: selopt},
success: function (data) {
debugger;
$('#appendquestion').html(data);
// $('#myModal').modal(show);
},
error: function (data) {
$('#loading').hide();
}
});
}
can anyone help in how to calculate the sum.

You can't do optionssum += optionssum + selopt; I think you mean optionssum += selopt;
Also, of course optionssum is going to be reset every time, you have it right here var optionssum=0; inside of StartTest() and every time the button is clicked that is called.
Just change your code to this, it should work (Made it a global variable)
var optionssum=0;
function StartTest() {
debugger;
var selopt = parseFloat($('input[name=test]:checked').val());
optionssum+= selopt;
$.ajax({
url: $("baseUrl").html() + "Test/_QuestionView",
type: "POST",
data: { selectedoption: selopt},
success: function (data) {
debugger;
$('#appendquestion').html(data);
// $('#myModal').modal(show);
},
error: function (data) {
$('#loading').hide();
}
});
}

The problem is because you keep set var optionssum=0;
I can suggest to you doing something like below
HTML
<div id="questionvalue">#a.QDescription</div>
<div>
<div id="questionvalue">
<input type="radio" name="test" value="1"> 1<br>
</div>
</div>
<div>
<input type="radio" name="test" value="2"> 2<br>
</div>
<div>
<input type="radio" name="test" value="3"> 3<br>
</div>
<div>
<input type="radio" name="test" value="4"> 4<br>
</div>
<button type="button" id="starttestbuttonid" class="btn btn-default" data-optionssum="0" >Next</button>
<br>
<b>Total : <span class="tot" >
</span>
</b>
JAVASCRIPT
$(document).ready(function(){
$("#starttestbuttonid").on("click",function(){
var optionssum = $(this).data("optionssum");
var selopt = parseFloat($('input[name=test]:checked').val());
alert("+ "+selopt);
if(!isNaN(selopt))
optionssum+= selopt;
/*
Your ajax
*/
//set latest total value
$(this).data("optionssum",optionssum);
// just want to show the value
$(".tot").html(optionssum);
});
});
JSFiddle example : https://jsfiddle.net/synz/Ltv3k0bq/

Getting undefined output from jQuery function

I'm getting undefined output from my jQuery function below. I initially assigned empty string to my product_type, I want it to be empty when I don't choose anyone of them, but still getting undefined output. Hopefully, I can have some hints here.
$(function () {
var internal_note = {};
var customer_note = {};
var product_type = "";
var web_camera = "";
var touch_screen = "";
$( "#test" ).on("click" , 'button:not(:disabled)',function(event){
if ($('input[name="product_type"]:checked')){
product_type = $('input[name="product_type"]:checked').attr("value");
};
if($('input[name="web_camera"]:checked')){
web_camera = $('input[name="web_camera"]:checked').attr("value");
};
if($('input[name="touch_screen"]:checked')){
touch_screen = $('input[name="touch_screen"]:checked').attr("value");
};
$('#left_note_list input').each(function(){
internal_note[this.value] = JSON.stringify($(this).val());
});
alert(product_type);
$.ajax({
type: "post",
url: '/insert/',
data: {
'internal_note': JSON.stringify(internal_note),
'product_type': JSON.stringify(product_type),
'web_camera': JSON.stringify(web_camera),
'touch_screen': JSON.stringify(touch_screen)
},
success: function (data) {
swal(data,'You Click the Button','success');
$("#test button:not(:disabled)").text('Done!').attr('disabled', 'disabled');
},
error: function(data){
swal(data.responseText,'You Click the Button', 'error');
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="col-md-4">
<h4 class="sub-header" id="product_type">Product Type</h4>
<form>
<div class="radio"><label><input type="radio" name="product_type" value="Laptop">Laptop</label></div>
<div class="radio"><label><input type="radio" name="product_type" value="Tower">Tower</label></div>
<div class="radio"><label><input type="radio" name="product_type" value="Minitower">Minitower</label></div>
<div class="radio"><label><input type="radio" name="product_type" value="Small Form Factor">Small Form Factor</label></div>
</form>
</div><!-- /.col-lg-4 Product Type-->
<div class="text-center" id="test">
<button target="_blank"
class="btn btn-primary ">
Test
</button>
</div>

Your issue is coming from the way you are checking to see is the checkbox is checked. This if check if ($('input[name="product_type"]:checked')). This works, but you do not get a true or false answer back, so you are essentially checking truthy instead. You can either check the length of $('input[name="product_type"]:checked') or you can do this instead
$('input[name="product_type"]').is(":checked")
Here is a good post on how to check whether or not a checkbox is checked
jQuery if checkbox is checked
$(function () {
var internal_note = {};
var customer_note = {};
var product_type = "";
var web_camera = "";
var touch_screen = "";
$( "#test" ).on("click" , 'button:not(:disabled)',function(event){
if ($('input[name="product_type"]').is(":checked")){
product_type = $('input[name="product_type"]:checked').attr("value");
}
if($('input[name="web_camera"]:checked')){
web_camera = $('input[name="web_camera"]:checked').attr("value");
}
if($('input[name="touch_screen"]:checked')){
touch_screen = $('input[name="touch_screen"]:checked').attr("value");
}
$('#left_note_list input').each(function(){
internal_note[this.value] = JSON.stringify($(this).val());
});
alert(product_type);
$.ajax({
type: "post",
url: '/insert/',
data: {
'internal_note': JSON.stringify(internal_note),
'product_type': JSON.stringify(product_type),
'web_camera': JSON.stringify(web_camera),
'touch_screen': JSON.stringify(touch_screen)
},
success: function (data) {
swal(data,'You Click the Button','success');
$("#test button:not(:disabled)").text('Done!').attr('disabled', 'disabled');
},
error: function(data){
swal(data.responseText,'You Click the Button', 'error');
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="col-md-4">
<h4 class="sub-header" id="product_type">Product Type</h4>
<form>
<div class="radio"><label><input type="radio" name="product_type" value="Laptop">Laptop</label></div>
<div class="radio"><label><input type="radio" name="product_type" value="Tower">Tower</label></div>
<div class="radio"><label><input type="radio" name="product_type" value="Minitower">Minitower</label></div>
<div class="radio"><label><input type="radio" name="product_type" value="Small Form Factor">Small Form Factor</label></div>
</form>
</div><!-- /.col-lg-4 Product Type-->
<div class="text-center" id="test">
<button target="_blank"
class="btn btn-primary ">
Test
</button>
</div>

It's because your conditional check is never returning false, so it's always assigning the value of product_type, even when nothing is selected. Instead of the check you have, use this:
if ($('input[name="product_type"]:checked').length>0){ ... }
That'll correctly check to ensure you have a checked product type.

onsubmit validateForm funxtion is not working

here for validation i used onsubmit event.
but any how its not working.
i just want check that textbox filed is empty or not.
<!DOCTYPE html>
<html>
<head>
<title>temple3</title>
<link rel="stylesheet" type="text/css" href="temple3css.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div id="popup-content" class='container'>
<div id="container1">
<form id="form" class="form" onsubmit="return validateForm()">
<h1>Feedbak Form</h1>
<div class="content">
<div class="intro"></div>
<div id="section0" >
<div class="field roption">
<input type="radio" name="view" value="public" checked="checked"> <span>Public</span>
<input type="radio" name="view" value="private" ><span>Private</span>
</div>
<div class="field category">
<label for>Category:</label>
<select class="dropDownCate" autofocus>
<option value="bug">Bug</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div class="field message">
<label for="Comments">Comments:</label>
<textarea id="comments" name="Comments" placeholder='Your Feedback Here!' autofocus></textarea>
</div>
<div class="field">
<label for="Email">Email</label>
<input type="email" id="email" name="Email" placeholder="example#stevens.edu(optional)" autofocus>
</div>
<div class="field"><input type="submit" id="submit-feedback-button" autofocus></div>
</div>
</div>
</form>
</div>
</div>
<div id="popup-overlay-bg"> </div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
function validateForm(){
var texbox=document.getElementById("comments").value;
if(texbox == "") {
document.getElementById("comments").focus();
// document.getElementById("comments").style.border = "1px solid #ff0000";
return false;
}
}
$(document).ready(function(){
$("#feedback-button").click(function(){
openfeedbackform();
});
$("#popup-overlay-bg").click(function(){
closefeedbackform();
});
$("#submit-feedback-button").click(function(){
// closefeedbackform();
});
$(window).resize(function(){
updatefeedbackform();
});
$("#submit-feedback-button").click(function(){
var category=$(".dropDownCate").val();
var roption=$('input:radio[name=view]:checked').val();
var message=$("#comments").val();
var email=$("#email").val();
$.ajax({
type: "POST",
url: "feedback.php",
data: "category="+category+ "&roption="+roption+ "&message="+message+ "&email="+email,
success:function(result)
{
if(result=="true"){
$("#form").hide();
$("#container1").html("<h3>Thank you for your feedback We will get back to you ASAP</h3> ");
}
else{
$("#form").hide();
$("#container1").html("<h3> database error </h3>");
}
}
});
return false;
});
});
function openfeedbackform(){
$("#popup-content").find('input:text').val('');
$("#popup-content").fadeIn();
$("#popup-overlay-bg").fadeIn();
updatefeedbackform();
}
function updatefeedbackform(){
$popup=$("#popup-content");
var top = "50px";
var left = ($(window).width() - $popup.outerWidth()) / 2;
$popup.css({
'top' : top,
'left' : left
});
}
function closefeedbackform(){
$("#popup-content").fadeOut();
$("#popup-overlay-bg").fadeOut();
}
</script>
</body>
</html>
earlier i used same this for form validation. but i don't why its not working here. i tried to debug but function has not been call.

The problem is you are doing ajax submit in the button click event, not in the form submit.
The click handler is triggered before the submit event handler, so the validation does not have any effect.
The solution will be to use the form submit event handler for both validation and the ajax call as given below, and then there is no need to have the inline event handler like onsubmit="return validateForm()"
$("#form").submit(function () {
if (validateForm() === false) {
return false;
}
var category = $(".dropDownCate").val();
var roption = $('input:radio[name=view]:checked').val();
var message = $("#comments").val();
var email = $("#email").val();
$.ajax({
type: "POST",
url: "feedback.php",
data: "category=" + category + "&roption=" + roption + "&message=" + message + "&email=" + email,
success: function (result) {
if (result == "true") {
$("#form").hide();
$("#container1").html("<h3>Thank you for your feedback We will get back to you ASAP</h3> ");
} else {
$("#form").hide();
$("#container1").html("<h3> database error </h3>");
}
}
});
return false;
});

Clearing an input field on blur

I'm attempting to clear all inputs with the class "new" on blur, but for some reason it just won't work. I've bashed my head at the this for three hours now, which obvious point am I missing? Relevant code below.
UPDATE 2
I tried changing out the switch-case block with corresponding if blocks, and they give the expected result. This eliminates the current problem, but I don't find it to be a viable answer to the original question which is why my origianl code with switch-case doesn't work.
UPDATE 1
After some research and experimenting I've discovered that I can clear all inputs with the class "new" as long as they're not inside my switch-case block. The selector I'm testing with is $('.new'), once inside the switch-case block this gives no visible effect.
#{
ViewBag.Title = "Viser infrastruktur";
Layout = "~/Views/Shared/_SuperOfficeLayout.cshtml";
}
<table class="table table-striped compact hover row-border">
<thead>
<tr>
<th>Produsent</th>
<th>Modell</th>
<th>Serienummer</th>
<th>Firmware</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="control-group">
<input type="text" class="col-md-12 form-control autosave new" name="manufacturer" placeholder="Produsent" value="" />
<input type="hidden" class="autosave new" name="id" value="" />
<input type="hidden" class="autosave new" name="superOfficeCustomerId" value="#Model.SuperOfficeCustomerId" />
</div>
</td>
<td>
<div class="control-group">
<input type="text" class="col-md-12 form-control autosave new" name="model" placeholder="Modell" />
</div>
</td>
<td>
<div class="control-group">
<input type="text" class="col-md-12 form-control autosave new" name="serialNumber" placeholder="Serienummer" />
</div>
</td>
<td>
<div class="control-group">
<input type="text" class="col-md-12 form-control autosave new" name="firmware" placeholder="Firmware" />
</div>
</td>
</tr>
#foreach (var infrastructure in Model.Infrastructures)
{
<tr>
<td>
<div class="control-group">
<input type="text" class="col-md-12 form-control autosave" name="manufacturer" placeholder="Produsent" value="#infrastructure.Manufacturer" />
<input type="hidden" class="autosave" name="id" value="#infrastructure.Id" />
<input type="hidden" class="autosave" name="superOfficeCustomerId" value="#Model.SuperOfficeCustomerId" />
</div>
</td>
<td>
<div class="control-group">
<input type="text" class="col-md-12 form-control autosave" name="model" placeholder="Modell" value="#infrastructure.Model" />
</div>
</td>
<td>
<div class="control-group">
<input type="text" class="col-md-12 form-control autosave" name="serialNumber" placeholder="Serienummer" value="#infrastructure.SerialNumber" />
</div>
</td>
<td>
<div class="control-group">
<input type="text" class="col-md-12 form-control autosave" name="firmware" placeholder="Firmware" value="#infrastructure.Firmware" />
</div>
</td>
</tr>
}
</tbody>
#section SpecializedScripts
{
<script type="text/javascript">
function saveSettings(element, ajaxUrl, ajaxType) {
var fields = $(element).closest('tr').children('td').children('div').children('.autosave');
var abort = false;
var ajaxData = {};
$(fields).each(function () {
abort = ($(this).val() == '' || $(this).val() == null);
backgroundColor = abort == true ? '#d9534f' : '#f9f598';
$(this).css('background-color', backgroundColor).css('color', '#ffffff').stop().animate({ 'background-color': '#ffffff', 'color': '#000000' }, 1500);
ajaxData[$(this).prop('name')] = $(this).val();
});
if (abort == true) {
return false;
}
$.ajax({
url: ajaxUrl,
type: ajaxType,
data: ajaxData
}).success(function (data, textStatus, jqXHR) {
$(fields).each(function() {
$(this).css('background-color', '#5cb85c').css('color', '#ffffff').stop().animate({ 'background-color': '#ffffff', 'color': '#000000' }, 1500);
});
switch(data.status)
{
case 'Deleted':
$(element).closest('tr').remove();
break;
case 'Added':
var tableBody = $('tbody');
var html = '<tr>';
for (var field in data.result) {
if (field == 'id' || field == 'superOfficeCustomerId')
{
html += '<input type="hidden" class="autosave" name="' + field + '" value="' + data.result[field] + '" />';
}
else {
html += '<td>'
+ '<div class="control-group">'
+ '<input type="text" class="col-md-12 autosave form-control" name="' + field + '" value="' + data.result[field] + '" />'
+ '</div>'
+ '</td>';
$('input.new[name=' + field + ']').val('');
}
}
html += '</tr>';
$(tableBody).append(html);
case 'Modified':
$(fields).each(function () {
$(this).val(data.result[$(this).prop('name')]);
});
break;
}
}).fail(function () {
});
}
$(document).on('blur', 'input.autosave', function () {
saveSettings($(this), '/Link/SaveInfrastructure', 'POST');
});
$(document).on('change', 'input.new', function () {
});
</script>
}

Something like this should work:
$('input.new').on('blur', function() { $(this).val(''); $(this).text(''); });
just make sure the input exists when you bind the event otherwise you can do:
$(document).on('blur', 'input.new', function() { $(this).val(''); $(this).text(''); });

For vanilla JavaScript, you can use
<input onBlur={(event) => { event.target.value = ''; }} />