When Unlimited is checked, remove the input box. That works. However, when the checkbox is unchecked the input box wont show back up.
<script type="text/javascript">
function getQuantity() {
var checkbox = document.getElementById("unlimited");
var qty = document.getElementById("quantityspace");
if(checkbox.checked == true){
qty.style.display = 'none';
}else if(checkbox.checked == false) {
qty.stlye.display = '<input type="text" id="quantity" size="4" value="1" name="quantity" />';
}
}
</script>
<input type="checkbox" id="unlimited" name="unlimited" value="x" onClick="getQuantity(); " /> Unlimited? <span id="quantityspace">or specify:
<input type="text" id="quantity" size="4" value="1" name="quantity" /></span>
qty.stlye.display = '<input type="text" id="quantity"
size="4" value="1" name="quantity" />';
should be:
qty.style.display = 'inline'; // or block
display is a property of the already existing input tag. You don't need to assign the entire tag to the property to make it show up again -- in fact that's dead wrong. Simply assign that property a new valid value for display, like inline, inline-block or block and it will show up again.
In your else if(...) you have:
qty.stlye.display
Do you mean style?
Additionally, you're incorrectly defining the display attribute. It should be a valid value. You probably want it to be:
else if(!checkbox.checked) {
qty.style.display = 'inline'; // or something from the W3C link above
}
Is it just that you've misspelled 'qty.stlye.display'?
Change the qty.stlye.display line to:
qty.style.display = "";
Note that you misspelled "style" there.
You misspelled "style" as "stlye" and you're setting the display style to HTML for some reason. It should be 'inline' or 'block' or whatever it was before you set it to 'none'.
I think what you want is this:
function getQuantity() {
var checkbox = document.getElementById("unlimited");
var qty = document.getElementById("quantityspace");
if(checkbox.checked == true){
qty.innerHTML = '';
}else if(checkbox.checked == false) {
qty.innerHTML = '<input type="text" id="quantity" size="4" value="1" name="quantity" />';
}
}
If I'm correct, you want to put an input in the quantityspace element when the checkbox is not checked.
qty.style.display changes the CSS display property of the span. qty.innerHTML changes the HTML inside the span.
You could do it with .style.display with the following code:
function getQuantity() {
var checkbox = document.getElementById("unlimited");
var qty = document.getElementById("quantityspace");
if(checkbox.checked == true){
qty.style.display= 'none';
}else if(checkbox.checked == false) {
qty.style.display= 'inline';
}
}
Related
I have a form which inserts and retrieves data from a google sheet.
Example:
I have two radio buttons on my form
<input id="Rdio_1" name="RdioSelect" type="radio" class="FirstCheck"
value="1" onchange="RadioValInsert ()"/>
<input id="Rdio_2" name="RdioSelect" type="radio" class="FirstCheck"
value="2" onchange="RadioValInsert ()" />
when the above is clicked the value of the radio button is stored in a text box..the RadioValInsert () does it
<input type="text" id="DatafromRadio" name="DatafromRadio">
I am able to insert this value of 1 or 2 into the corresponding cell in google sheet.
When I want to EDIT it, I retrieve the data and the Textbox value is 1 or 2
The button which retrieves the data has a function to check the corresponding radio button based on the value of the Text box.
function RadioChk() {
var val = document.getElementById("DatafromRadio").value;
if (val == 1) {
document.getElementById("Rdio_1").checked = true;
}
if (val == 2) {
document.getElementById("Rdio_2").checked = true;
}
}
This is not working
Thanks in advance for your help
You are doing your check and uncheck related code inside RadioChk function however you haven't bind click event on radio inputs . If i correctly understood your question , here is how you can select and deselect your radio buttons.
function RadioValInsert() {
console.log('checked');
var val = document.getElementById("DatafromRadio").value;
if(val ==1 || val ==2){
uncheckAll();
document.getElementById("Rdio_"+val).checked = true;
}else{
uncheckAll();
console.log('choose only between 1 or 2');
}
}
function uncheckAll(){
let ele = document.getElementsByName("RdioSelect");
for(var i=0;i<ele.length;i++){
ele[i].checked = false;
}
}
<input id="Rdio_1" name="RdioSelect" type="radio" class="FirstCheck"
value="1" onchange="RadioValInsert ()"/>
<input id="Rdio_2" name="RdioSelect" type="radio" class="FirstCheck"
value="2" onchange="RadioValInsert ()" />
<input type="text" id="DatafromRadio" name="DatafromRadio">
Try this example where radio selection and textbox value changes as per selection/input
document.addEventListener('DOMContentLoaded', function(dce) {
var radios = document.querySelectorAll('[name="RdioSelect"]');
var textbx = document.querySelector('[name="DatafromRadio"]');
radios.forEach(function(r) {
r.addEventListener('click', function(e) {
textbx.value = this.value;
});
});
textbx.addEventListener('input', function(e) {
radios.forEach(function(r) {
r.checked = (r.value === textbx.value);
});
});
var fillTxt = function(txt) {
textbx.value = txt;
textbx.dispatchEvent(new Event('input')); //<-- trigger event
};
fillTxt('2'); //<--- update text box
});
<input id="Rdio_1" name="RdioSelect" type="radio" value="1" />
<input id="Rdio_2" name="RdioSelect" type="radio" value="2" />
<input type="text" id="DatafromRadio" name="DatafromRadio" />
this works only if data is input physically in the text box - in my case the data is retrieved via a function and it populates the text box
In that, just trigger event on textbox
I have a list of four check boxes which are as shown below :
<input type="checkbox" class="checkboxstyle" id="id_peer_educator" value="Peer Educator"/>Peer Educator<br>
<input type="checkbox" class="checkboxstyle" id="id_chw" value="CHW"/>CHW<br>
<input type="checkbox" class="checkboxstyle" id="id_health_provider" value="Health Prvider"/>Health Provider<br>
<input type="checkbox" class="checkboxstyle" id="id_purchase" value="Purchase"/>Purchase<br>
<input type="text" id="CD_Supplr" class="CD_Supplr" name="CD_Supplr" placeholder=" Suppliers : "/>
The first four are check boxes while the last one is a textbox. How can I append data to the text-field Suppliers ? (When it is checked , it should be appended to the text field Supplier, if it is unchecked, then the value should be removed from the text field supplier) .
I tried implementing it the following way :
var CD_Supplr = $('#CD_Supplr').val();
var id_peer_educator = $('#id_peer_educator').val();
var id_chw = $('#id_chw').val();
var id_health_provider = $('#id_health_provider').val();
var id_purchase = $('#id_purchase').val();
$('#id_peer_educator').click(function () {
$('#CD_Supplr').val(CD_Supplr + "," + id_peer_educator;
});
$('#id_chw').click(function () {
$('#CD_Supplr').val(CD_Supplr + "," + id_chw;
});
But it's not working,what's the best way to implement it?
You can use an array to add value when checkbox is checked and remove it when unchecked and use join() function to join the array values by dispay in input.
Hope this helps.
var selected_checkbox=[];
$('.checkboxstyle').change(function()
{
if($(this).is(':checked'))
{
//If checked add it to the array
selected_checkbox.push($(this).val());
}
else
{
//If unchecked remove it from array
for (var i=selected_checkbox.length-1; i>=0; i--)
{
if (selected_checkbox[i] === $(this).val())
selected_checkbox.splice(i, 1);
}
}
$('#CD_Supplr').val(selected_checkbox.join(','));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="checkboxstyle" id="id_peer_educator" value="Peer Educator"/>Peer Educator<br>
<input type="checkbox" class="checkboxstyle" id="id_chw" value="CHW"/>CHW<br>
<input type="checkbox" class="checkboxstyle" id="id_health_provider" value="Health Prvider"/>Health Provider<br>
<input type="checkbox" class="checkboxstyle" id="id_purchase" value="Purchase"/>Purchase<br>
<input type="text" id="CD_Supplr" class="CD_Supplr" name="CD_Supplr" size='50' placeholder=" Suppliers : "/>
Demo
$('.checkboxstyle').on("change",function ()
{
var str ="";
$('.checkboxstyle:checked').each(function()
{
str+= $(this).val()+" ";
});
$('#CD_Supplr').val(str);
});
Add listeners to the change event on the checkboxex, then using match() find out if the value of a checkbox is NOT already there in the CD_Suplr textbox. Then, use the result of this condition to add/remove the checkbox values:
var $target = $('#CD_Supplr');
$('[type="checkbox"]').change(function(){
if($target.val() == ''){
$target.val('Supplier: '); //default text
}
if(!$target.val().match($(this).val())){
var text = $target.val();
$target.val(text + ' ' + $(this).val() + ', ');
} else {
var text = $target.val();
$target.val(text.replace($(this).val()+', ', ''));
}
//make sure the last comma is removed
$target.val($target.val().replace(/\,$/, ''));
});
JSFiddle Demo.
This is hard to describe so I'll try my best.
I have a script working fine, based on the radio button selected, it prints the value to a text box that is disabled for editing. I have to take this one step further...I need that value to then be involved in an addition function, adding the value of the radio button.
This is what I tried and it failed. No errors but doesn't add what I want it to. If I remove the if statements, it works but only prints the initial value of the radio button. I need to add to that value based on what is selected.
edit: adding html as requested.
<center>
Choice1 : <input type="radio" name="region" id="choice1" value="10.25">
Choice2 : <input type="radio" name="region" id="choice2" value="11.25">
Choice3 : <input type="radio" name="region" id="choice3" value="8.25">
</center>
//Enter how many in this box
How many? <input type="text" id="addtl" size="3" maxlength="2"></input> #
//this is the choice, based on radio button, add something to it
<input type="text" id="add_cost" size="2" maxlength="6"></input>
<script>
//print in the box
$('input[name="region"]').change(function(){
$('#add_cost').val($('input[name="region"]:checked').val());
if(add_cost == 11.25) {
add_cost + 4;
}
else if (add_cost == 10.25){
add_cost + 1;
}
else if(add_cost == 8.25){
add_cost + 3;
}
});
</script>
I rewrite your script code if I did not misunderstand your intent;
$('input[name="region"]').change(function() {
var add_cost = parseFloat($('input[name="region"]:checked').val());
if (add_cost == 11.25) {
add_cost += 4;
} else if (add_cost == 10.25) {
add_cost += 1;
} else if (add_cost == 8.25) {
add_cost += 3;
}
$('#add_cost').val(add_cost);
});
You seem to be referencing the add_cost textbox simply by "add_cost". Unless you have declared a variable by that name, you have to keep addressing $("#add_cost").val() to reference its value. Or simply declare such a variable , containing $("#add_cost").val().
$('#add_cost').val($('input[name="region"]:checked').val());
var add_cost = parseFloat($("#add_cost").val());
if(add_cost == 11.25) {
add_cost + 4;
}
I have a small problem with focusout function in IE.
I have two fields with the same class and I wrote an empty validation code in jQuery for that class with focusout.
While I focus out of a field which is empty it shows alert and focus to the same field.
While doing that focus, It shows me alert again and again b'coz of the same class.
What to do?
JS:
$(".emptyValidate").focusout(function() {
var currFocusOut = $(this).attr("inText");
if($(this).val() == ""){
alert(currFocusOut+" should not be Empty");
document.getElementById(currFocusOut).focus();
}
});
Markup :
<input type="text" inText="Name" id="Name" class="emptyValidate "/>
<input type="text" inText="Phone" id="Phone" class="emptyValidate "/>
Working Demo
$(".emptyValidate").focusout(function () {
var currFocusOut = $(this).attr("id");
if ($(this).val() == "") {
alert(currFocusOut + " should not be Empty");
$('#'+currFocusOut).focus();
}
});
Try to use blur function like,
$(".emptyValidate").blur(function() {
var currFocusOut = $(this).attr("inText");
if($(this).val() == ""){
alert(currFocusOut+" should not be Empty");
document.getElementById(currFocusOut).focus();
}
});
Read blur()
Or, custom attribute inText may not work, so you can use data in jquery like
<input type="text" data-inText="Name" id="Name" class="emptyValidate "/>
<input type="text" data-inText="Phone" id="Phone" class="emptyValidate "/>
$(".emptyValidate").focusout(function() { // use blur if not works
var currFocusOut = $(this).data("inText");
if($(this).val() == ""){
alert(currFocusOut+" should not be Empty");
document.getElementById(currFocusOut).focus();
}
});
Read data()
Try inline function like this:
<input type="text" inText="Name" id="Name" class="emptyValidate" onfocusout="myFunction(this)"/>
<input type="text" inText="Phone" id="Phone" class="emptyValidate" onfocusout="myFunction(this)"/>
function myFunction(el){
var currFocusOut = $(el).attr("inText");
if($(el).val() == ""){
alert(currFocusOut+" should not be Empty");
document.getElementById(currFocusOut).focus();
}
}
I've made the checkbox to be default check. How can I uncheck the checkbox automatically if certain textfield is filled. I've thinking of using javascript.
I tried using this
<input type="text" name="commentID" id="commentID" onkeyup="userTyped('skipID', this)"/>
<input type="checkbox" name="skipID" value="N" id="skipID" checked="checked" />
and the javascript
function userTyped(commen, e){
if(e.value.length > 0){
document.getElementById(commen).checked=false;
}else{
document.getElementById(commen).checked=true;
}}
It works but how if i have 3 textfield, and I want the checkbox to be filled only after all textfield is filled.
Just do this:
<input type="checkbox" id="someid" checked="checked"/>
<textarea onchange="if (this.value != '') document.getElementById('someid').checked = false;"></textarea>
if(document.getElementById('yourtextBox').value!=' ')
{
document.getElementById('checbox').checked=false;
}
Try the following code. In this code, each time when you type a character in the textfield, the function will be called and the length of the textfield value is not zero, the checbox will be unchecked and it will be checked while you clear your textfield
//Function get called when you type each letter
function OnChangeTextField(){
//getting the length of your textbox
var myLength = $("#myTextbox").val().length;
if(myLength > 0){
$("#myCheckbox").attr("checked", false);
}else{
$("#myCheckbox").attr("checked", true);
}
}
<input type = "text" id = "myTextbox" onkeyup= "OnChangeTextField();"/>
<input type="checkbox" id = "myCheckbox" value = "true" checked = "checked"/>
$("#comment").on("keyup blur", function () {
$("#box").prop("checked", this.value == "");
});
EDIT: You can also use jQuery
$("#comment").on("keyup blur", function() {
$("#box").prop("checked", this.value == "");
});
Try jQuery, This works for me...