I have created two custom fields on woocommerce checkout page. First Field is text and second is multicheckbox. I want both fields to show output on same page using Onchange event.
Text Field code is
<p class="form-row form-row-wide wooccm-field wooccm-field-wooccm11 wooccm-type-text validate-required woocommerce-validated" id="billing_wooccm11_field" data-priority="50">
<label for="billing_wooccm11" class="">Other NAME <abbr class="required" title="required">*</abbr></label>
<span class="woocommerce-input-wrapper">
<input type="text" class="input-text wooccm-required-field" name="billing_wooccm11" id="billing_wooccm11" placeholder="" value="" data-required="1">
</span>
</p>
I have used this code to display value of text field
<script>
document.getElementById("billing_wooccm11").onchange = function() {myFunction()};
function myFunction() {
var input = document.getElementById("billing_wooccm11").value;
document.getElementById("demo").innerHTML = input;
}
</script>
<p id="demo"></p>
It is working and showing value as required. But second field which is multicheckbox is not working
Multicheckbox field code is
<p class="form-row form-row-wide wooccm-field wooccm-field-wooccm14 wooccm-type-multicheckbox validate-required" id="billing_wooccm14_field" data-priority="130">
<label for="billing_wooccm14" class="">PROGRAMME <abbr class="required" title="required">*</abbr></label>
<span class="woocommerce-input-wrapper">
<span class="woocommerce-multicheckbox-wrapper" data-required="1">
<label><input type="checkbox" name="billing_wooccm14[]" value="one"> One</label>
<label><input type="checkbox" name="billing_wooccm14[]" value="two"> Two</label>
<label><input type="checkbox" name="billing_wooccm14[]" value="three"> Thress</label>
<label><input type="checkbox" name="billing_wooccm14[]" value="Four"> four</label>
</span>
</span>
</p>
I want to display text of checkbox just like text field. So when any checkbox is checked its value should appear and if user unchecked it, its text should also disappear.
I have a way to go about this, let's say we have these two input checkbox buttons. first, you must iterate through the buttons you have using the name attribute.
<input type="checkbox" class="myinput" name="input_check" value="one">
<input type="checkbox" class="myinput" name="input_check" value="two">
then for the js code:
document.querySelector('[name="input_check"]').onchange = function() {myFunction()};
function myFunction(){
var checkbox = document.querySelectorAll('.myinput');
for(let i=0; i<checkbox.length; i++)
if (checkbox[i].checked)
document.getElementById('demo').innerHtml = checkbox[i].value;
}
I hope this works for you :)
Related
Is there option for radio button to be auto selected when visitor enter text in another input form? I have searched for it, but without success.
I have this form with 3 radio buttons, they allow users to choose size, last radio button is for custom size (width and height). Under last radio button there is text input to input custom height and width.
<form action="#" method="post">
<label for="original-size">Original
<input type="radio" id="original_size" name="size" value="original" checked="checked">
</label>
<label for="medium-size">Medium
<input type="radio" id="medium-size" name="size" value="medium">
</label>
<label for="custom-size">Custom
<input type="radio" id="custom-size" name="size" value="custom">
</label>
<input id="custom-width" type="number" name="custom-width" placeholder="Custom width">
<label for="custom-width">custom width</label>
and
<input id="custom-height" type="number" name="custom-height" placeholder="Custom height">
<label for="custom-height">custom height</label>
<br>
<button name="submit" type="submit">Submit</button>
</form>
How to select custom-size radio input if user click on custom-width or custom-height text input? Is there option without java script, if not, small code of java script would be fine (I am not using jQuery)?
Managed to dig up this, is this what you are looking for?
<form>
<p>Original: <input type="text"></p>
<p>Medium: <input type="text"></p>
<div id="customWrapper">
<p>Custom: <input type="radio" id="customSize"></p>
<p>Custom Width: <input type="text"></p>
<p>Custom Height: <input type="text"> </p>
</div>
</form>
const div = document.getElementById('customWrapper');
// When the custom width or custom height are clicked on
div.addEventListener('focus', (event) => {
document.getElementById('customSize').checked = true;
}, true);
// When clicked somewhere out of the form
div.addEventListener('blur', (event) => {
document.getElementById('customSize').checked = false;
}, true);
https://jsfiddle.net/mLvt9ubz/
It basically searches for any input inside the div, when it's event changes then something happens.
In this case the radio button with an ID get's the attribute selected.
The issue is:
I have four radio buttons and a check box.
Two radio buttons are with one name and two with another.
The last radio buttons with same name appear only when the check box is checked.
What I want is add the value of first radio button and the value of radio button that appears after the checkbox is checked.
So how do I total the two values using javascript or any other technique. I need it asap as I am working on a project. I need that to be done as in a shopping cart. It means if the user selects another radio button then the value of earlier one should be subtracted and the value of new one added.
<script>
// get list of radio buttons with name 'size'
var sz = document.forms['de'].elements['type'];
// loop through list
for (var i=0, len=sz.length; i<len; i++) {
sz[i].onclick = function() { // assign onclick handler function to each
// put clicked radio button's value in total field
var m=this.form.elements.total.value = this.value;
};
}
var sa = document.forms['de'].elements['glass'];
// loop through list
for (var i=0, len=sa.length; i<len; i++) {
sa[i].onclick = function() { // assign onclick handler function to each
// put clicked radio button's value in total field
var n=this.form.elements.total1.value = this.value;
};
}
$(document).ready(function () {
$('.a').hide();
$('#checkb').click(function () {
var $this = $(this);
if ($this.is(':checked')) {
$('.a').show();
} else {
$('.a').hide();
}
});
});
</script>
<form action="sum.php" method="post" name="de">
<fieldset>
<table align="center">
<tr><td align="center" colspan="100sp"><label><input type="radio" name="type" value="200" />Ordinary (Rs. 200)</label>
<tr><td align="center" colspan="100sp"><label><input type="radio" name="type" value="500" />Original (Rs. 500)</label>
<tr><td colspan="100sp"><label>Do You want a screen guard or a tempered glass?</label><input type="checkbox" name="screen" value="yes" id="checkb" />
<tr><td align="center" colspan="100sp"><label class="a"><input type="radio" class="a" name="glass" value="100" />Screen Guard (Rs. 100)</label>
<tr><td align="center" colspan="100sp"><label class="a"><input type="radio" class="a" name="glass" value="200" />Tempered Glass (Rs. 200)</label>
</table>
<p><label>Repair: Rs. <input type="text" name="total" value="0" readonly="readonly" /></label></p>
<p><label>Glass: Rs. <input type="text" name="total1" value="0" readonly="readonly" /></label></p>
<p><label>Total: Rs. <input type="text" name="total2" value="0" readonly="readonly" /></label></p>
</fieldset>
</form>
You can do this with the Jquery event Change(). I have added ID names to the input text elements and this Jquery lines:
Check the comments for each line.
$(document).ready(function() {
//HIDE AND SHOW EXTRA OPTIONS
$('.a').hide();
$('#checkb').change(function() {
$('.a').toggle();
});
//CHECK WHEN ANY RADIO INPUT CHANGES
$('fieldset').on('change','input[type=radio]',function(){
//Get the Value and wich field text will change
var value = $(this).attr('value'),
target = $(this).attr('name');
$('#'+target).val(value);
//Show the total
var total = parseInt($('#type').val(),10) + parseInt($('#glass').val(),10);
$('#total').val(total);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<fieldset>
<label>
<input type="radio" name="type" value="200" />Ordinary (Rs. 200)</label>
<br>
<label>
<input type="radio" name="type" value="500" />Original (Rs. 500)</label>
<br>
<input type="checkbox" name="screen" value="yes" id="checkb" />
<label>Do You want a screen guard or a tempered glass?</label>
<br>
<label class="a">
<input type="radio" class="a" name="glass" value="100" />Screen Guard (Rs. 100)</label>
<br>
<label class="a">
<input type="radio" class="a" name="glass" value="200" />Tempered Glass (Rs. 200)</label>
<br>
<p>
<label>Repair: Rs.
<input type="text" id="type" name="total" value="0" readonly="readonly" />
</label>
</p>
<p>
<label>Glass: Rs.
<input type="text" id="glass" name="total1" value="0" readonly="readonly" />
</label>
</p>
<p>
<label>Total: Rs.
<input type="text" id="total" name="total2" value="0" readonly="readonly" />
</label>
</p>
</fieldset>
</form>
You can do it by using a facility given by jquery. Please check the below code
<input type="radio" class="myradio" name="radio" id="r1" data-value="test1"/>
<input type="radio" class="myradio" name="radio" id="r1" data-value="test1"/>
<script type="text/javascript">
var total = 0;
$('.myradio').on('click',function(){
//Here you can get the checkbox value from data-value attribute
alert($(this).data('value');
//Total the Values
total = total + $(this).data('value');
});
</script>
In above code you can easily get the data from checkbox when it is clicked...
I want to show the text next to radio buttons in another element when the buttons are clicked.
My HTML:
<p>
<input type="radio" value="1" name="General">
I need a simple template
</p>
<p>
<input type="radio" value="2" name="General">
I need a simple template based
</p>
<p>
<input type="radio" value="3" name="General">
I need a simple template based type
</p>
I want to show the result in an element with the class display, so something like:
$('.display').val();
I tried this:
$('.display').val($('input[type=radio]:checked').closest('p').html());
I'm going to guess that what you want to do is put the text associated with the selected radio button in the .display element. If so, with your current HTML, you can use .text on the parent element to get the text, and then probably .text (not .val) on the .display element to show it (it would be .val if .display were a form field):
$("input[name=General]").on("click", function() {
var text = $(this).closest('p').text();
$(".display").text(text);
});
<p>
<input type="radio" value="1" name="General">
I need a simple template
</p>
<p>
<input type="radio" value="2" name="General">
I need a simple template based
</p>
<p>
<input type="radio" value="3" name="General">
I need a simple template based type
</p>
<p class="display"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
But, it's better to use label elements so the user can click on the words as well as the actual radio button:
$("input[name=General]").on("click", function() {
var text = $(this).closest('label').text();
$(".display").text(text);
});
<p>
<label>
<input type="radio" value="1" name="General">
I need a simple template
</label>
</p>
<p>
<label>
<input type="radio" value="2" name="General">
I need a simple template based
</label>
</p>
<p>
<label>
<input type="radio" value="3" name="General">
I need a simple template based type
</label>
</p>
<p class="display"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
This is the solution of the problem with getting the associated text of check Box in separate Line when the name is same.
HTML Code-
<p><input name="SiteLayoutDesign" value="5" type="checkbox"> I do not need any unique graphics designed (0 Hours)</p>
<p><input name="SiteLayoutDesign" value="6" type="checkbox"> I will supply images (0 Hours)</p>
<p><input name="SiteLayoutDesign" value="7" type="checkbox"> I have a template but it needs minor customization (0 Hours)</p>
<p><input name="SiteLayoutDesign" value="8" type="checkbox"> I need a template customized (0 Hours)</p>
<p><input name="SiteLayoutDesign" value="9" type="checkbox"> I would like a custom design created for my site (0 Hours)</p>
jQuery Code-
$(document).ready(function(){
$('input').click(function(){
var $check = $('input[type=checkbox]:checked');
$check.each(function(){
var id = $(this).val();
var did = $('input[type=checkbox][value='+id+']:checked').closest('p').text();
});
});
});
The did variable store the associated text with respect to value of that checkBox.
I need a JavaScript that can insert an attribute to a field and also remove it when the user deselects the field.
Here is the code I'm using for the radio select:
<script>
$(document).ready(function() {
$("input[name$='sel']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#sel" + test).show();
});
if (test == "CreditCard") {
$("#card").addClass("validate[custom[card]] text-input");
} else {
$("#card).removeClass("validate[custom[card]] text-input");
}
});
</script>
Field code:
<table><tr><td>
<p>
Credit/Debit Card<lable style="margin-right:1px;"></lable><input type="radio" name="sel" id="sel" value="CreditCard" />
</p>
<p>
Paypal<input type="radio" id="sel" name="sel" value="Paypal" />
</p>
<p>
Wire Transfer<input type="radio" id="sel" name="sel" value="WireTransfer" />
</p>
<!====================================================================================>
</td><td>
<!====================================================================================>
<div id="selCreditCard" class="desc">
<label for="card"><strong>Card Number<font color=red size=3> *</font></strong></label>
<input name="card" type="text" id="card" value="" style="width:85px;" />
</div>
<!====================================================================================>
<div id="selPaypal" class="desc" style="display: none;margin-left:20px;margin-top:1px;margin-bottom:1px;">
paypal
</div>
<!====================================================================================>
<div id="selWireTransfer" class="desc" style="display: none;margin-left:20px;margin-top:0px;margin-bottom:-5px;">
Transfer
</div>
<!====================================================================================>
</td></tr></table>
This is the attribute that needs to be inserted to the "card" input field:
class="validate[custom[card]] text-input"
When the user selects the radio with the value CreditCard, the attribute will be inserted to the input field, and when the user deselects the radio with the value CreditCard the attribute will be removed.
Link for fiddle:
FIDDLE
telexper, there are lots of wrong things in your code, and unfortunatelly i dont have the time to explain right now.
but i will leave a working code for you here: http://jsfiddle.net/RASG/DSrLS/
just click "Credit/Debit Card" and the class nowitsadded wil be added to the input field, which will turn red.
HTML
<input type="radio" id="sel1" name="sel"> Credit/Debit Card
<br>
<input type="radio" id="sel2" name="sel"> Paypal
<br>
<input type="radio" id="sel3" name="sel"> Wire Transfer
<br>
<br>
<div id="selCreditCard" class="desc">
Card Number <input name="card" type="text" id="card" value="">
</div>
JS
$('#sel1').click(function() { $('#card').addClass('nowitsadded') })
CSS
.nowitsadded {background-color: red}
For input style "text", I have a javascript function such as:
document.getElementById("dds1").onkeyup = function() {
updateIt();
};
Now, what if I had a checkbox? What would the code look like? What about for radio buttons? What would I use to get values (for the checkbox, either checked or not checked. and for the radio buttons, I'd like to get which button is clicked).
Here is code for the radio button:
<li id="foli517" class=" ">
<label class="desc" id="shippingChoice" for="Field517_0">
Shipping Options
</label>
<div>
<input id="shippingChoice" name="Field517" type="hidden" value="" />
<span>
<input id="shipping1" name="Field517" type="radio" class="field radio" value="$2.00 Shipping Fee" tabindex="13" checked="checked" />
<label class="choice" for="Field517_0" >
$2.00 Shipping Fee</label>
</span>
<span>
<input id="Field517_1" name="Field517" type="radio" class="field radio" value="I will pick up the items (free shipping)" tabindex="14" />
<label class="choice" for="Field517_1" >
I will pick up the items (free shipping)</label>
</span>
</div>
</li>
For the checkbox:
document.getElementById("checkBox").onclick = function() {
var isChecked = this.checked;
//whatever
};
For the radio button:
document.getElementById("radioButton").onclick = function() {
var clickedId = this.id;
//whatever
};