$(document).ready(function() {
window.buttonType = '';
$("#inlineRadio8").click(function() {
window.buttonType = 'checkbox';
});
$("#inlineRadio9").click(function() {
window.buttonType = 'radio';
});
});
document.write("<input type=window.buttonType name='inlineRadioOptions' id='inlineRadio1' value='Hockey'> ");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="chk2" id="inlineRadio8" value="val2" class="hidden" autocomplete="off">
<input type="radio" name="chk1" id="inlineRadio9" value="val1" class="hidden" autocomplete="off">
There are two button based on button click want to swap the input type.
i.e if this (#inlineRadio8) is clicked than input type should convert to checkbox else if inlineRadio9 is inovked then convert to radio type
This window.buttonType should be availble on the page i.e if i click inlineRadio8 button this variable should have value 'checkbox' if i click inlineRadio9 this should have the value 'radio'
how to achieve the same.
You don't need global variable for this. Just change the input type on the click.
Like :
$(document).ready(function() {
$("#inlineRadio8").on('click', function() {
$("#inlineRadio1").prop('type', 'checkbox');
});
$("#inlineRadio9").on('click', function() {
$("#inlineRadio1").prop('type', 'radio');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="chk1" id="inlineRadio8" value="val2" class="hidden" autocomplete="off">
<input type="radio" name="chk1" id="inlineRadio9" value="val1" class="hidden" autocomplete="off">
<input type='hidden' name='inlineRadioOptions' id='inlineRadio1' value='Hockey'>
Related
for single id i did like this but how to get all id on click of button when check the universal checkbox for all the columns
My Html File:-
<td><input type="checkbox" name="option" value="{{item.customerid}} " required ></td>
<input type="button" value="Transfer" (click)="getclickedevent($event)">
My Javascript file:-
getclickedevent(event) {
let id = $("input:checkbox[name=option]:checked").val();
console.log("The Required checkbox checked is "+ id)
}
make all the id's children of one master id
then use this
var div = // getElementById, etc
var children = div.childNodes;
var elements = [];
for (var i=0; i<div.childNodes.length; i++) {
var child = div.childNodes[i];
if (child.nodeType == 1) {
elements.push(child)
}
}
I hope you don't mind but I took the approach of refactoring your code.
Here is the HTML:
<td>
<input type="checkbox" name="option" value="{{item.customerid}}" required >
</td>
<input type="button" value="Transfer">
<div id='options'>
<br><input name='options' type="checkbox">
<br><input name='options' type="checkbox">
<br><input name='options' type="checkbox">
<br><input name='options' type="checkbox">
<br><input name='options' type="checkbox">
</div>
And here is the jQuery. I used jQuery because you missed native javascript and jQuery in your code:
$('input[type="button"][value="Transfer"]').click( function() {
let id = $("input:checkbox[name=option]").is(':checked');
$('input[name="options"]').each(function() {
this.checked = id;
});
});
You can see it all working here.
You can get all checked checkboxes values inside button click event handler using jquery .map() method like:
var ids = $("input:checkbox[name=option]:checked").map(function(){
return $(this).val();
}).get();
console.log(ids) //==> ['xxx', 'xxx', 'xxx', ...]
This will give a basic array containing all checked checkboxes values.
DEMO:
$("#checkAll").click(function() {
$("input:checkbox[name=option]").prop('checked', this.checked);
var ids = $("input:checkbox[name=option]:checked").map(function() {
return $(this).val();
}).get();
console.log(ids)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="checkAll">Check All
<hr />
<input type="checkbox" name="option" value="1">Item 1
<input type="checkbox" name="option" value="2">Item 2
<input type="checkbox" name="option" value="3">Item3
This should work for you. ↓↓
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<input type="checkbox" onclick="$('input[name*=\'customer_store\']').prop('checked', this.checked);"/> Select / Deselect<br>
<input type="checkbox" name="customer_store[]" value="xyz"/>xyz<br>
<input type="checkbox" name="customer_store[]" value="abc"/>abc<br>
Add ID to your button inputs and call on them as selectors for .click().
Add a function to get the click on the select all button and set all inputs to checked used an added class of option for to select the input elements that are check boxes.
Define an empty array to hold your values. Run your checked values through .each() loop and assign them to the array.
Those values will now live in the options array.
$(document).ready(function() {
$('#selectall').click(function(){
$('.option').prop("checked", true);
});
$('#transfer').click(function() {
var options = [];
$.each($("input[type='checkbox']:checked"), function() {
options .push($(this).val());
});
console.log(options);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="option" type="checkbox" name="option" value="{{item.customerid}}">
<input class="option" type="checkbox" name="option" value="{{item.customerid}}">
<input class="option" type="checkbox" name="option" value="{{item.customerid}}">
<input class="option" type="checkbox" name="option" value="{{item.customerid}}">
<input type="button" id="transfer" value="Transfer">
<input type="button" id="selectall" value="Select All">
I want to echo the textbox value using php. Whatever user types characters in the textbox that as to be displayed in the another textbox as well it as to echo the amount in top As Value is:(Whatever is typed in the textbox)
Here is the screenshot
Here is the Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<?php
if(!empty($_GET['a1']))
{
$selected = $_GET['a1'];
}
else
{
$selected = 'home';
}
if(!empty($_GET['a1']))
{
$selected = $_GET['a1'];
}
else
{
$selected = 'home';
}
?>
<span class="r-text" style="font-weight:bold;">Value is</span>
<form action="" method="post">
<label>
<input type="radio" name="a1" value="100" /> 100
</label>
</br>
<label>
<input type="radio" name="a1" value="200" /> 200
</label>
</br>
<label>
<input type="radio" name="a1" value="300" /> 300
</label>
</br>
<label>
<input type="radio" name="a1" value=" " /> Other
</label>
</br>
<input type="text" name="a1"/>
<br/>
<br/>
Amount
<input type="text" name="a2" />
<br/>
<br/>
</form>
<script>
$('input[type=radio]').click(function(e) {//jQuery works on clicking radio box
var value = $(this).val(); //Get the clicked checkbox value
var check = $(this); //Get the clicked checkbox properties (like ID, value, class etc)
$('.r-text').html('Value is '+value);// The class r-text after clicked checkbox print the line 'This was selected'
});
</script>
<script>
$('input[type=text]').click(function(e) {//jQuery works on clicking radio box
var value = $(this).val(); //Get the clicked checkbox value
var check = $(this); //Get the clicked checkbox properties (like ID, value, class etc)
$('.r-text').html('Value is '+value);// The class r-text after clicked checkbox print the line 'This was selected'
});
</script>
you can set value in textarea when user is typing in another textarea.By using keyup events.
$('input[type=text]').on("keyup",function(){
var value = parseInt($(this).val());
if($.isNumeric($("input[name='a1']:checked").val())){
value = parseInt($("input[name='a1']:checked").val()) +value;
}
$('[name="a2"]').val(value);
$(".r-text").html('Value is '+value);
})
$('input[type=radio]').on("change",function(){
var textBoxVal = parseInt($("input[type='text'][name='a1']").val());
var selectedVal = parseInt($("input[type='radio'][name='a1']:checked").val());
if(!$.isNumeric(textBoxVal)){
textBoxVal = 0;
}
if($.isNumeric(selectedVal )){
textBoxVal = parseInt(selectedVal) +textBoxVal;
}
$('[name="a2"]').val(textBoxVal);
$(".r-text").html('Value is '+textBoxVal);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="r-text" style="font-weight:bold;">Value is</span>
<form action="" method="post">
<label>
<input type="radio" name="a1" value="100" /> 100
</label></br>
<label>
<input type="radio" name="a1" value="200" /> 200
</label></br>
<label>
<input type="radio" name="a1" value="300" /> 300
</label></br>
<label>
<input type="radio" name="a1" value=" " /> Other
</label></br>
<input type="text" name="a1"/><br/><br/>
Amount
<input type="text" name="a2" /><br/><br/>
</form>
Use onKeyup event on text box that contain user input. and fill your required text box.
You can use onblur() function from your HTML tag.
onblur() is a JavaScript function. Display the contents of the text box from this function.
Im getting the result now, but what I want is to Also get the checked input box and put into the input text not just only using on change event in jQuery but also on page loads. As you can see, one of the checkboxes below has been checked but not putting into the input text. Please see my code below:
$(document).ready(function(){
$checks = $(":checkbox");
$checks.on('change', function() {
var string = $checks.filter(":checked").map(function(i,v){
return this.value;
}).get().join(",");
$('#field_results').val(string);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multiple">
<input type="text" id="field_results"/><br>
<input type="checkbox" value="1" checked>1<br>
<input type="checkbox" value="2">2<br>
<input type="checkbox" value="3">3
</div>
<div class="multiple">
<input type="text" id="field_results"/><br>
<input type="checkbox" value="1">1<br>
<input type="checkbox" value="2" checked>2<br>
<input type="checkbox" value="3">3
</div>
You can do this easily like:
$(document).ready(function() {
$checks = $(":checkbox");
$checks.on('change', setResults);
function setResults() {
var string = $checks.filter(":checked").map(function(i, v) {
return this.value;
}).get().join(",");
$('#field_results').val(string);
}
setResults();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="field_results" /><br>
<input type="checkbox" value="1">1<br>
<input type="checkbox" value="2" checked>2<br>
<input type="checkbox" value="3" checked>3
You should set values into input at first, try this:
$(document).ready(function() {
$checks = $(":checkbox");
$('#field_results').val(getCheckedValues());
$checks.on('change', function(){
$('#field_results').val(getCheckedValues());
});
});
function getCheckedValues(){
$checks = $(":checkbox");
var valuse = $checks.filter(":checked").map(function(i, v) {
return this.value;
}).get().join(",");
return valuse;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="field_results"/><br>
<input type="checkbox" value="1" checked>1<br>
<input type="checkbox" value="2">2<br>
<input type="checkbox" value="3" checked>3<br>
<input type="checkbox" value="4">4<br>
<input type="checkbox" value="5" checked>5<br>
The easiest way to do it You can use .trigger() to set default value
$checks.trigger('change');
I have a form here which id like the users to be able to select the radio button to choose a pre-defined amount option, or press the textbox (focus) to select the custom amount. The purpose of the javascript below is to clear the textbox when a predefined amount has been selected. It also allows users to CLICK the textbox (onfocus) to enter a custom amount in the CP_otheramount field (also use the radio button as a fallback).
It all seems to be working except for the onfocus. It works perfectly on load...but try this scenario:
Load the page, click inside the textbox but then decide to change your mind by selecting the value 3 radio button (64)...and then decide to press inside the onfocus textbox amount again... it become disabled and stops you from clicking inside or writing a number in!
Can anyone see the problem here at all? Its strange because it works on Stackoverflow just not on the live site. ANy help would be really appreciated.
Here is what has been created so far:
function activate() {
$('#other').prop('checked', true);
$('#other').trigger('click');
$('#theamount').focus();
}
$('input[name="am_payment"]').on('click', function() {
if ($(this).val() === '') {
$('input[name="CP_otheramount"]').val('');
$('#theamount').removeAttr("disabled");
} else {
$('#theamount').prop("disabled", "disabled");
$('input[name="CP_otheramount"]').val('');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="am_payment" value="3" checked="checked"> <strong>64</strong>
<input type="radio" name="am_payment" value="11" checked="checked"> <strong>100</strong>
<input type="radio" name="am_payment" value="32" checked="checked"> <strong>250</strong>
<input type="radio" value="" name="am_payment" id="other">
<label>Other</label>
<span onclick="activate();"><input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled"/></span>
The problem with your code is that you are checking every radio button without un-checking them.
function activate() {
// $('#other').prop('checked', true); Remove this line;
$('#other').trigger('click');
$('#theamount').focus();
}
$('input[name="am_payment"]').on('click', function() {
if ($(this).val() === '') {
$('input[name="CP_otheramount"]').val('');
$('#theamount').removeAttr("disabled");
} else {
$('#theamount').prop("disabled", "disabled");
$('input[name="CP_otheramount"]').val('');
}
});
And also
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Only check one, or none by Default -->
<input type="radio" name="am_payment" value="3" checked = "checked"> <strong>64</strong>
<input type="radio" name="am_payment" value="11"> <strong>100</strong>
<input type="radio" name="am_payment" value="32"> <strong>250</strong>
<input type="radio" value="" name="am_payment" id="other">
<label>Other</label>
<span onclick="activate();"><input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled"/></span>
UPDATE:
It was working for me but I don't know why it's not working for you, so I rewrote the functions..See if this works for you.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="am_payment" value="3" checked = "checked"> <strong>64</strong>
<input type="radio" name="am_payment" value="11"> <strong>100</strong>
<input type="radio" name="am_payment" value="32"> <strong>250</strong>
<input type="radio" value="" name="am_payment" id="other">
<label>Other</label>
<span id="toggle"><input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled"/></span>
<script>
function activate(){
$('#theamount').attr('disabled',false);
$('#theamount').focus();
$('#other').click();
}
function deactivate(){
$('#theamount').val('');
$('#theamount').attr('disabled',true);
}
$('#toggle').click(function(){
activate();
});
$('input[name="am_payment"]').change(function(){
if($(this).val() != ""){
deactivate();
}else{
activate();
}
});
</script>
I would like to know how to add checkboxes on input type number change.
By default I have :
HTML CODE
<label for checkbox_number>Number of checkboxes :</label>
<input id="checkbox_number" name="checkbox_number" type="number" size="1" maxlength="1" value="1" onkeydown="change_cb()"/>
<input id="checkbox1" type="checkbox" name="checkbox[]" value="cb1">
If I change my checkbox number to 2, I would like javascript/ajax add
<input id="checkbox2" type="checkbox" name="checkbox[]" value="cb2">
Same as if I change my change number to 1, it has to remove one checkbox.
I already did same thing but with table (add one row or remove one row) but here i don't know how to add new element (on my first script I don't add new table, just new row)...
Need help to write my JS function change_cb()
EDIT TO GIVE YOU MY ANSWER
I find how to do this with DADE help (thank you DADE) :
HTML CODE (same)
<label for="cb_number">How many checkboxes ?</label>
<input id="cb_number" name="cb_number" type="number" size="1" maxlength="1" value="1">
<div class="my_cb_result"></div>
jQuery CODE
$(window).ready(function() {
$('#cb_number').on('keyup mouseup', function() {
var number = parseInt($(this).val());
$('input[type="checkbox"]').remove();
$('label[class="to_del"]').remove();
for (var i=1;i<=number;i++) {
var data = '<label for="checkbox" class="to_del">Label of my checkbox</label><input id="checkbox'+i+'" type="checkbox" name="checkbox[]" value="'+i+'">';
}
$('.my_cb_result').append(data);
});
});
JSFiddle with comments
Try this:
var ele = '<input id="checkbox2" type="checkbox" name="checkbox[]" value="cb2">';
document.getElementById("yourElementID").appendChild(ele);
HTML:
<label for checkbox_number>Number of checkboxes :</label>
<input id="checkbox_number" name="checkbox_number" type="number" size="1" maxlength="1" value="0">
<div class="inputs"></div>
JS:
$('#checkbox_number').on('keyup mouseup', function() {
var number = parseInt($(this).val());
$('input[type="checkbox"]').remove();
for (var i=1;i<=number;i++) {
var data = '<input id="checkbox'+i+'" type="checkbox" name="checkbox[]" value="cb'+i+'">';
$('.inputs').append(data);
}
});
JSFiddle with comments
Do you mean if checkbox_number's value is set to "2" that you'd like to render the second checkbox?
If so, you should use onblur or similar on checkbox_number to run a function that will render the new one via a getElementById and appendChild.
IE:
<script type="text/javascript">
function change_cb() {
var secondCheckbox = '<input id="checkbox_number2" name="checkbox_number" type="number" size="1" maxlength="1" value="1" />";
document.getElementById("yourForm").appendChild(secondCheckBox);
}
</script>
<div id="yourForm">
<label for checkbox_number>Number of checkboxes :</label>
<input id="checkbox_number" name="checkbox_number" type="number" size="1" maxlength="1" value="1" onblur="change_cb()"/>
<input id="checkbox1" type="checkbox" name="checkbox[]" value="cb1">
</div>
edit: From what you're posting, you shouldn't need Ajax, by the way.