jQuery: How to print value in input? - javascript

my question is super basic, but I'm not super informed about javascript so I have 5 radio buttons(like rating) and I want to print the value when some of them is checked to input field. I end up to print it with alert and it works, but I want to print it in input.
$(document).ready(function(){
$("input[type='button']").click(function(){
var radioValue = $("input[name='difficulty']:checked").val();
if(radioValue){
alert("Your are a - " + radioValue);
}
});
});
$('.rating-star').on('click', function() {
$(this).parents('.rating').find('.rating-star').removeClass('checked'); // uncheck previously checked star
$(this).addClass('checked'); // check currently selected star
var ratingValue = $(this).attr('data-rating'); // get rating value
var ratingTarget = $(this).attr('data-target');
// set the rating value to corresponding target radio input
$('input[name="' + ratingTarget + '"][value="' + ratingValue + '"]').prop('checked', true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<form>
<label>Question...</label>
<br>
<input type="radio" name="difficulty" value="1">
<input type="radio" name="difficulty" value="2">
<input type="radio" name="difficulty" value="3">
<input type="radio" name="difficulty" value="4">
<input type="radio" name="difficulty" value="5">
<br>
<div class="rating">
<i class="rating-star" data-rating="5" data-target="difficulty"></i>
<i class="rating-star" data-rating="4" data-target="difficulty"></i>
<i class="rating-star" data-rating="3" data-target="difficulty"></i>
<i class="rating-star" data-rating="2" data-target="difficulty"></i>
<i class="rating-star" data-rating="1" data-target="difficulty"></i>
</div>
</form>
<p><input type="button" value="Get Value"></p>
<input type="text" id="radioBtn" name="printRadio">

Try on method in print script as well.
$(document).ready(function(){
$("input[type='button']").on('click',function(){
var radioValue = $("input[name='difficulty']:checked").val();
if(radioValue){
//alert("Your are a - " + radioValue);
$('#radioBtn').val(radioValue);
}
});
});

Related

Checkbox and Radio input error in JavaScript and JQuery task list

Why does my Priority checkbox return 'on' as a result after selecting either the 'Important' or 'Unimportant' checkbox? Why does it not return either 'Important' or 'Unimportant'?
Also, why does my Category radio selection only return the correct selection the first time I input and click the add button - on every subsequent attempt, the return is blank for Category. All the other input options work correctly.
var $addButton = $(".btn-primary");
var $removeButton = $(".btn-danger");
var $todoList = $(".uncomplete");
var $doneList = $(".completed");
//Take Text Input and Add <li> to To Do List
$addButton.on("click", function(){
//Creating object Variables
var $sort = $(".sort").val();
var $newTask = $(".newTask").val();
var $taskDescr = $(".taskDescr").val();
var $taskDate = $(".taskDate").val();
// var $category= $(".category").val();
var $category= $("input[type='radio'][name='category']:checked").val();
//var $importance = $("input[type='checkbox'][name='importance']:checked").val();
var $importance = $('<input type="checkbox" name="importance"/>').val();
var $newTaskString = $sort + ", " + $taskDescr + ", " + $newTask + ", " + $taskDate + ", " + $category + ", " + $importance + " ";
var $todoList = $(".uncompleted");
//call append method on $todoList
$todoList.append("<li>" + $newTaskString + "<button><span> Done</span></button><button><span> Remove</span></button></li>").addClass("todo");
//add styles to button added to DOM by append
var $span = $(".todo button span");
var $button = $(".todo button");
$button.addClass("btn btn-success");
$span.addClass("glyphicon glyphicon-ok");
$("input").val("");
})
//When Success button Clicked, remove task from to do list and append to completed tasks
var $doneButton = $(".btn-success");
$(".uncompleted").on("click", ".btn-success", function(){
var $completedTask = $( this ).parent("li").text();
$(this).parent("li").remove();
$doneList.append("<li>" + $completedTask + "<button><span> Remove</span></button></li>").addClass("done");
$(".done button").addClass("btn btn-danger");
$(".done button span").addClass("glyphicon glyphicon-remove");
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="list-wrap" contenteditable="false">
<div class="list-inner-wrap">
<h2 class="title">ToDo List</h2>
<h3 class="title">Add Task</h2>
<label for="sort">Sort Order:</label><input type="text" class="sort" name="sort" id="sort" value="" placeholder="A,B,C,etc.">
<br>
<label for="task-name">Task Name:</label><input type="text" class="newTask" name="task-name" id="task-name" value="" placeholder="My task...">
<br>
<label for="task-descr">Task Descr:</label><input type="text" class="taskDescr" name="task-descr" id="task-descr" value="" placeholder="Buy milk...">
<!--<h4>Date</h4>-->
<br>
<label for="task-date">Start Date:</label><input type="text" class="taskDate" name="task-date" id="task-date" value="" placeholder="dd/mm/yyyy">
<br>
<form method="POST" action="..." name="radiodemo" id="radiodemo" onsubmit="getCategory();">
<label for="category"> Category:</label>
<input type="radio" id="grocery" name="category" value="Grocery" class="category" checked="checked">
<label for="grocery">Grocery</label>
<input type="radio" id="work" name="category" value="Work" class="category">
<label for="work">Work</label>
<input type="radio" id="chores" name="category" value="Chores" class="category">
<label for="chores">Chores</label>
<input type="radio" id="finance" name="category" value="Finance" class="category">
<label for="finance">Finance</label>
<br>
</form>
<label for="importance">Priority:</label>&nbsp &nbsp Important<input type="checkbox" class="importance" name="important" id="important" value="Important">
<label for="importance"></label>Unimportant<input type="checkbox" class="importance" name="unimportant" id="unimportant" value="Unimportant">
<br>
<button class="btn btn-primary">
<span class="glyphicon glyphicon-plus"> Add</span>
</button>
<br>
<h3 class="title">To Do</h2>
<h6><i>Click task item to edit or modify</i></h6>
<ul class="uncompleted" id="id01"><!--contenteditable="true"-->
<li>Need to be completed task
<button class="btn btn-success"><span class="glyphicon glyphicon-ok"> Done</span>
</button>
<button class="btn btn-danger"><span class="glyphicon glyphicon-remove"> Remove</span>
</button>
<br>
</li>
</ul>

jQuery form submit button goes to URL based on checkbox selected

I have a simple contact form with multiple checkboxes, when a user selects a checkbox it should go to the url/folder tied to the url that's in the value. The current problem is after a user checks the checkbox and clicks submit, then goes back to that page and the checkbox resets, the submit button still takes them to the previously selected checkbox.
Need a way to fully reset the form and disable the button so the submission doesn't get too confusing for the user. Thanks!
Here is my form code:
<form name="frm" id="myForm" method="post" >
<div class="provider-checkboxes">
<input type="checkbox" name="rGroup" id="r1" value="folder-1/" onclick="formaction(this)"/>
<label class="check-div" for="r1">Label 1</label>
<input type="checkbox" name="rGroup" id="r2" value="folder-2/" onclick="formaction(this)"/>
<label class="check-div" for="r2">Label 2</label>
<input type="checkbox" name="rGroup" id="r3" value="folder-3/" onclick="formaction(this)"/>
<label class="check-div" for="r3">Label 3</label>
<button type="submit" class="btn btn-primary btn-lg btn-block">Next</button>
</div>
</form>
Here is the script:
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
var inputValue = $(this).attr("value");
$("." + inputValue).toggle();
});
});
$('[data-toggle="btns"] .btn').on('click', function(){
var $this = $(this);
$this.parent().find('.active').removeClass('active');
$this.addClass('active');
});
$('.selectme input:checkbox').click(function() {
$('.selectme input:checkbox').not(this).prop('checked', false);
});
$('.provider-checkboxes input:checkbox').click(function() {
$('.provider-checkboxes input:checkbox').not(this).prop('checked', false);
});
function formaction(checkbox){
document.getElementById("myForm").action = checkbox.value;;
}
function UncheckAll(){
var w = document.getElementsByTagName('input');
for(var i = 0; i < w.length; i++){
if(w[i].type=='checkbox'){
w[i].checked = false;
}
}
}
Consider the following code. Think this will help, based on what you have shared.
$(function() {
function setFormAction(frm, a) {
frm.attr("action", a);
}
function unCheckAll() {
$("input[type='checkbox']").prop("checked", false);
$(".provider-checkboxes .btn").hide();
}
$('.provider-checkboxes input:checkbox').click(function() {
unCheckAll();
$(this).prop("checked", true);
$(".provider-checkboxes .btn").toggle(300);
setFormAction($("#myForm"), "./" + $(this).val());
console.log($("#myForm")[0]);
});
unCheckAll();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="frm" id="myForm" method="post">
<div class="provider-checkboxes">
<input type="checkbox" name="rGroup" id="r1" value="folder-1/" />
<label class="check-div" for="r1">Label 1</label>
<input type="checkbox" name="rGroup" id="r2" value="folder-2/" />
<label class="check-div" for="r2">Label 2</label>
<input type="checkbox" name="rGroup" id="r3" value="folder-3/" />
<label class="check-div" for="r3">Label 3</label>
<button type="submit" class="btn btn-primary btn-lg btn-block">Next</button>
</div>
</form>

Set Values null in javascript for unselected checkboxes

This is JavaScript Code :
var clinicalStat;
var id;
var val;
var clinicalVals;
$(":checkbox").click(function() {
//alert(" you checked");
if ($(this).is(':checked')) {
var checked1 = $(this).val(); //Inital value of checkbox is '0'
alert("The inital value for selected checkbox = " + checked1);
var checkedVal = $(this).val('1'); //value is change to '1'
alert("The value after checked the checkbox is = " + $(this).val());
}
});
$(":checkbox").click(function() {
clinicalStat = document.getElementById('clinicalStat').value; //clinicalStat(type='textbox') inital value is '0'
alert("The initial value of clinicalStat = " + clinicalStat);
clinicalStat = document.getElementById('clinicalStat').value = "1"; //now clinicalStat value is '1'
alert("Later the value is changed to = " + clinicalStat);
id = (this.id);
alert("id = " + id);
val = (this.value);
alert("val = " + val);
clinicalVals = clinicalStat + "^" + id + ":" + val;
alert("clinicalVals = " + clinicalVals);
});
This is my Checkbox code .
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-2 right2 fon">
<h6>Clinical Practice/Procedure</h6>
<hr>
<p><input type="hidden" id="incidentClassifId" name="incidentClassifId" value="0"></p>
<p><input type="hidden" id="incidentViewIndex" name="incidentViewIndex" value="0"></p>
<p><input type="hidden" id="appendStockistStatus" value="0"></p>
<p><input type="hidden" name="clinicalStat" id="clinicalStat" value="0"></p>
<p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalDoc" value="0">Documentation</p>
<p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalMiss" value="0">Missing Files</p>
<p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalPol" value="0"> Policy not available</p>
<p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalMed" value="0"> Medical records unavailable</p>
<p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalCon" value="0"> Confidentiality</p>
<p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalProc" value="0">Procedures not followed</p>
<p><input type="hidden" name="clinicalVals" id="clinicalVals"></p>
<p><input type="checkbox" id="checkBox" onclick="EnableDisableTextBox(this)"> Other (Specify)</p>
<p><input type="text2" id="text" name="incidentClassClinicalVal" disabled="disabled" style="width: 92%"></p>
</div>
if i checked Documentation Checkbox iam getting ClinicalVal value like this clinicalVals=1^clinicalDoc:1
what my problem is how to get clinical values like this clinicalVals=1^clinicalDoc:1^1^0:0^1^0:0^1^0:0^1^0:0^1^0:0 i.e clinicalDoc checkbox is selected remaining are not selected.
if i select two checkboxes the clinicalVal has to show like this clinicalVals=1^clinicalDoc:1^1^clinicalMiss:1^1^0:0^1^0:0^1^0:0^1^0:0 i.e two checkboxes are selected remaining are not selected
Loop your all the check box's and check for checkbox is checked or not
var clinicalStat;
var id;
var val;
var clinicalVals ='';
$(":checkbox").click(function() {
//alert(" you checked");
if ($(this).is(':checked')) {
var checked1 = $(this).val(); //Inital value of checkbox is '0'
var checkedVal = $(this).val('1'); //value is change to '1'
}
});
$(":checkbox").click(function() {
clinicalVals = '';
clinicalStat = document.getElementById('clinicalStat').value; //clinicalStat(type='textbox') inital value is '0'
clinicalStat = document.getElementById('clinicalStat').value = "1"; //now clinicalStat value is '1'
var checkboxes = document.getElementsByClassName('clinicalCheck');
for(var i =0; i< checkboxes.length; i++){
id = checkboxes[i].id;
val = checkboxes[i].value;
if(checkboxes[i].checked){
clinicalVals += clinicalStat + "^" + id + ":" + val+"^";
}else{
clinicalVals += 1 + "^0:" + val+"^";
}
}
console.log(clinicalVals);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-2 right2 fon">
<h6>Clinical Practice/Procedure</h6>
<hr>
<p><input type="hidden" id="incidentClassifId" name="incidentClassifId" value="0"></p>
<p><input type="hidden" id="incidentViewIndex" name="incidentViewIndex" value="0"></p>
<p><input type="hidden" id="appendStockistStatus" value="0"></p>
<p><input type="hidden" name="clinicalStat" id="clinicalStat" value="0"></p>
<p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalDoc" value="0">Documentation</p>
<p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalMiss" value="0">Missing Files</p>
<p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalPol" value="0"> Policy not available</p>
<p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalMed" value="0"> Medical records unavailable</p>
<p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalCon" value="0"> Confidentiality</p>
<p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalProc" value="0">Procedures not followed</p>
<p><input type="hidden" name="clinicalVals" id="clinicalVals"></p>
<p><input type="checkbox" id="checkBox" onclick="EnableDisableTextBox(this)"> Other (Specify)</p>
<p><input type="text2" id="text" name="incidentClassClinicalVal" disabled="disabled" style="width: 92%"></p>
</div>

How to get selected check box value to a variable in script

I have a html form content with two check boxes like
<p class="text">
<input type="checkbox" value="Yes" id="ques11" name="radiobutton" class="option_1" />
<label for="ques11">True</label>
<span class="hide" id="ans1">Answer: True</span>
<span id="rite11" class="hide"><img class="imgsize" src="images/ans_correct.png"/></span>
<span id="wrong11" class="hide"><img class="imgsize" src="images/ans_wrong.png"/></span> </p>
<p class="text">
<input type="checkbox" value="No" id="ques12" name="radiobutton" class="option_2" />
<label for="ques12">False</label>
<span id="rite12" class="hide"><img class="imgsize" src="images/ans_correct.png"/></span>
<span id="wrong12" class="hide"><img class="imgsize" src="images/ans_wrong.png"/></span> </p>
for this i have written code to get the checkboxes
$(function(){
$('#_submit').on('click', function(){
completedata = 'selected_';
$('input[type="checkbox"]').each(function(){
var quesNo = $(this).closest("div[id^='questionsNo_']").attr('id').split('_');
var chapterId = quesNo[1];
var questionId = quesNo[2];
var optionId = $(this).attr('class').split('_')[1];
var currentAns = $(this).val();
completedata += 'choose'+','+chapterId + ',' + questionId + ',' + optionId + ',' + currentAns + '_';
completedata = completedata.substr(0, completedata.length - 1) + '_selectedEnd';
if(completedata == "selected_selectedEnd"){
document.getElementById("selids").innerHTML="";
}
else {
$('#selids').text(completedata);
}
In this line i have to get which checkbox is checked, how to get that using this script. Please help me how to do that.
var optionId = $(this).attr('class').split('_')[1];
i want which check box is clicked based on class="option_1" or class="option_2".
Try this:
$("input[name='radiobutton']").click(function(){
if($(this).is(':checked'))
{
// checked
}
else
{
// unchecked
}
});

jQuery: Verify If one of multiple required checkboxes is/are checked

I have a form with multiple groups of checkboxes (among other things). Some of these groups are mandatory fields (At least one checkbox needs to be checked within that group).
I am able to tell if a group has a checkbox checked, but I failed to make them mandatory. Also I am need to get one long string with the values of the selected checkbox(es). I would need to have a string where if the user checks, say the first 3 checkboxes from group1, the string to be:
"zero | 1 val | 2 val"
The code is a simplified version of my original. Here is the jFiddle: http://jsfiddle.net/QyY2P/1/
Also, for your convenience I am also including the code here:
jQuery:
function countChecked() {
//Group 1
var n = $("#group1 input:checked").length;
$("#count").text(n + (n <= 1 ? " is" : " are") + " checked!");
$("#group1 input:checked").each(function() {
txt += ($(this).val() + " | ");
$("#selection1").text(txt);
alert($(this).val() + " | ");
});
//Group 2
var n = $("#group2 input:checked").length;
$("#count").text(n + (n <= 1 ? " is" : " are") + " checked!");
$("#group2 input:checked").each(function() {
txt += ($(this).val() + " | ");
$("#selection3").text(txt);
alert($(this).val() + " | ");
});
}
countChecked();
$(":checkbox").click(countChecked);
HTML:
<form>
<div id="group1">
<p> *Please select a box (Mandatory)</p>
<input type="checkbox" name="ckb_unit[]" value="zero" />
<input type="checkbox" name="ckb_unit[]" value="1 val" />
<input type="checkbox" name="ckb_unit[]" value="2 val" />
<input type="checkbox" name="ckb_unit[]" value="3 val" />
<input type="checkbox" name="ckb_unit[]" value="4 val" />
</div>
<div id="group2">
<p>Please select a box</p>
<input type="checkbox" name="ckb_unit[]" value="zero" />
<input type="checkbox" name="ckb_unit[]" value="A" />
<input type="checkbox" name="ckb_unit[]" value="B" />
<input type="checkbox" name="ckb_unit[]" value="C" />
<input type="checkbox" name="ckb_unit[]" value="D" />
</div>
<div id="group3">
<p>*Please select a box (Mandatory)</p>
<input type="checkbox" name="ckb_unit[]" value="zero" />
<input type="checkbox" name="ckb_unit[]" value="1 A" />
<input type="checkbox" name="ckb_unit[]" value="2 B" />
<input type="checkbox" name="ckb_unit[]" value="3 C" />
<input type="checkbox" name="ckb_unit[]" value="4 D" />
</div>
</form>
<!-- For debugging purposes -->
<br/>
<div id="count"></div>
<div id="selection1"></div>
<div id="selection3"></div>
PS. I am a beginner, perhaps you noticed it by my not so elegant coding >_<
You can make it mandatory by checking if n is 0 when the user hits submit and then attracting the user's attention towards it somehow (appending an error message, for example). I'm talking about this n:
var n = $("#group1 input:checked").length;
Looking at JSFiddle, it seems you didn't declare txt as a variable, so this works for me:
//Group 1
var txt = ""; // initialise txt with an empty string, so you can append to it later
var n = $("#group1 input:checked").length;
$("#count").text(n + (n <= 1 ? " is" : " are") + " checked!");
$("#group1 input:checked").each(function() {
txt += ($(this).val() + " | ");
$("#selection1").text(txt);
alert($(this).val() + " | ");
});

Categories

Resources