Develop Reference

View the value of selected radio button in an input field

As you can see in the above image. I have set of radio buttons, shown as picture. My client wanted to see picture instead of radio buttons. What also he wants is when user click an image (radio button), the value of that button should get displayed in the textarea field below. So user can see the value of selected radio button and also he should be able to edit it before he click save.
So user see what he selected and he can can also type before save.
I am using Jquery for this. So when user click the radio button, I capture the value the text of what user clicked and save in variable. Than I set the value of textarea field to that variable.
All works but the problem is when user select something and type something, and than if he click another picture, the field does not clear.
Question:
How I can copy the clicked value of clicked image and show in field and also allow user to type and if he click another image the field should become clear.
Here is my code
HTML
<div class="text-center">
<h4>Select reason</h4>
<form id="timer-reason">
<div class="row">
<div class="col-md-12">
<?php
while ($row = mysqli_fetch_assoc($timer_reasons)) {
?>
<label class="select-reason" value="<?php echo $row['description_tmr']; ?>" id="<?php echo $row['id_tmr']; ?>">
<input type="hidden" id="reason-id" value="<?php echo $row['id_tmr']; ?>">
<input type="radio" name="ReasonSelect" value="<?php echo $row['description_tmr']; ?>" />
<img src="../../css/timer-reasons/<?php echo $row['image_tmr']; ?>" style="width:30%;" class="TimerReason">
</label>
<?php
}
?>
<div class="form-group">
<textarea class="form-control" id="reason" value="" rows="2"></textarea>
</div>
</div>
</div>
</div>
JQUERY
$('input:radio').click(function() {
var reasonvalue=$(this).attr("value");
$("#reason").text(reasonvalue);
});

This is due to how the browser displays textarea's value that is supplied by putting text between the opening / closing tags, setting innerText / textContent
<textarea>Value between tags</textarea>
And a value supplied by the value property.
<textarea id="reason"></textarea>
document.getElementById('reason').value = "Value by property";
You can set the innerText / textContent multiple times, but as soon as it gets a set value property, which also happens when the user starts typing, changing the innerText / textContent will no longer change the visible text shown. The actual property is changed though.
var reasonTextarea = document.getElementById('reason');
var tcBtn = document.getElementById('tcTest');
var tcBtn2 = document.getElementById('tcTest2');
var propBtn = document.getElementById('propTest');
tcBtn.addEventListener('click',function(){
reason.textContent = "textContent set";
});
tcBtn2.addEventListener('click',function(){
reason.textContent = "textContent set again";
});
propBtn.addEventListener('click',function(){
reason.value = "value property set, now try typing something and/or hitting the change by textContent button again.";
});
<textarea id="reason" rows=5 cols=40>Test value 1</textarea>
<button id="tcTest">Click to change value by textContent</button>
<button id="tcTest2">Click to change value by textContent again</button>
<button id="propTest">Click to change value by property</button>
And this is what is happening with your code, you use jQuery's .text() method which changes the textContent of the textarea. Which will work as long as you never set the value property or the user never types in the textarea.
To combat this you should change the value of the textarea by changing the value property instead of the textContent property.
jQuery('#reason').val('New value');

Try this:
$(function () {
$('[name=ReasonSelect]') // bind event on all inputs with name RadioSelect
.on('change', function() { // on a change execute the function
var v = $('[name=ReasonSelect]:checked'); // get the selected value
$("#reason").val( v ); // put the value in #reason.
});
});

Try Below code. It Should work
$('input[type=radio]').click(function() {
var reasonvalue = $(this).attr("value");
$("#reason").val(reasonvalue);
});

Disable all checkboxs when one checkbox is checked

im like two days fighting against this, and i wish some1 can help
im using a PHP that generats 4 checkboxes
<form method="post" class="car_booking_form" >
<div class="booking-item-price-calc">
<div class="row row-wrap">
<div class="col-md-<?php echo esc_attr($col) ?> singe_cars" data-car-id="<?php the_ID()?>">
<?php $list = get_post_meta(get_the_ID(),'cars_equipment_list',true); ?>
<?php
if(!empty($list)){
foreach($list as $k=>$v){
$v['cars_equipment_list_price'] = apply_filters('st_apply_tax_amount',$v['cars_equipment_list_price']);
$price_unit = isset($v['price_unit'])? $v['price_unit']: '';
$price_unit_html='';
switch($price_unit)
{
case "per_hour":
$price_unit_html=__('/hour',ST_TEXTDOMAIN);
break;
case "per_day":
$price_unit_html=__('',ST_TEXTDOMAIN);
break;
default:
$price_unit_html=__('',ST_TEXTDOMAIN);
break;
}
echo '<div class="checkbox">
<label>
<input class="i-check equipment" data-price-unit="'.$price_unit.'" data-title="'.$v['title'].'" data-price="'.$v['cars_equipment_list_price'].'" type="checkbox" />'.$v['title'].'
<span class="pull-right">'.TravelHelper::format_money($v['cars_equipment_list_price']).''.$price_unit_html.'</span>
</label>
</div>';
}
}
?>
if i hade 4 normal labels i could give theme Ids and use a JS script, now the Checkboxs gets generated automatically and i dont know how to manage it so when a Checkbox is checked the other 3 gets disabled
thanks and sorry for my bad EN

There is no problem with the use of radios or checkboxes. If you want to make a group of radios, then you need to add them the same NAME.
Since you can change the HTML generated by your script, then you can add a name to your radio/checkbox.
If you want to make it with checkboxes, then change the part of your script that generates the html to this:
echo '<div class="checkbox">
<label>
<input class="i-check equipment equipment-disabling-checkbox" data-price-unit="'.$price_unit.'" data-title="'.$v['title'].'" data-price="'.$v['cars_equipment_list_price'].'" type="checkbox" />'.$v['title'].'
<span class="pull-right">'.TravelHelper::format_money($v['cars_equipment_list_price']).''.$price_unit_html.'</span>
</label>
</div>';
Here we add a class equipment-disabling-checkbox to know what/which checkbox disable.
Then, supposing that you want an INDEPENDENT checkbox to disable all of them, add it out of your foreach loop.
// Disable all other checkboxes
echo '<div class="checkbox">
<label>
<input class="i-check equipment" type="checkbox" id="disable-equipment-checkboxes" /> Disable all
</label>
</div>';
Here we define a "disable all" checkbox.
and add this to your JQuery handlers:
$(document).on("change", "#disable-equipment-checkboxes", function() {
if ( $(this).prop('checked') ) {
$(".equipment-disabling-checkbox").prop('disabled', true);
} else {
$(".equipment-disabling-checkbox").prop('disabled', false);
}
});
And here we handle the change event of the "disable all" checkbox and enable/disable the other checkboxes.
If you want another solution, explain yourself better please.
P.D.: I made a fiddle for you: https://jsfiddle.net/s6fe9/559/
EDIT: To cover the needs of Omar properly:
Change the HTML echo to this:
echo '<div class="checkbox">
<label>
<input class="i-check equipment equipment-unique-checkbox" data-price-unit="'.$price_unit.'" data-title="'.$v['title'].'" data-price="'.$v['cars_equipment_list_price'].'" type="checkbox" />'.$v['title'].'
<span class="pull-right">'.TravelHelper::format_money($v['cars_equipment_list_price']).''.$price_unit_html.'</span>
</label>
</div>';
This will add a class name to all the unique checkboxes.
Then, add this piece of code to your JQuery handlers:
$(document).on("change", ".equipment-unique-checkbox", function() {
if ( $(this).prop('checked') ) {
$(".equipment-unique-checkbox").prop('checked', false);
$(this).prop('checked', true);
} else {
$(".equipment-unique-checkbox").prop('checked', false);
$(this).prop('checked', false);
}
});
And here we uncheck all of them, and check the selected one.
Notice that the repeated line that unchecks all of them is needed in both parts of the if condition to work properly.
Here you have another fiddle :)
https://jsfiddle.net/s6fe9/561/
P.D.: I realized that the code for the HTML edit were broken somehow. So I updated it.

Try this if it works:
$('input[type="checkbox"]').is('checked',function(e){
e.preventDefault();
$( "input[type='checkbox']").attr( "disabled", true);
$(this).removeAttr('disabled');
});

Do you have no access to that foreach loop at all? If you do, you can try something along these lines using radio buttons:
echo '<div class="checkbox">
<label>
<input type="radio" value="' . $price_unit . '" name="price" />' . $v['title'] . '
<span class="pull-right"></span>
</label>
</div>';
Keeping in mind, the above is just a stripped down version of yours so you may need to add in all your data variables.

how to change button value through user input

the scenario is like i have a button when it appends onto the page it creates an object with some properties of that object and add that object in an array now the thing i want to do is having that button value and change it to what user want but at the same time it should update in array[object{button{value:''}}] . i tried but what it does is it over writes all button objects and i want every object to have its own value please help me thorugh this
if (ui.draggable.data('type') == "button")
{
document.getElementById('buttonDiv').style.display = "block";
btn_id++;
$( "<br><input type='submit' class='btn' id='btn-"+btn_id+"' value='buttonsss'>" ).text(ui.draggable.text()).appendTo( this ).click(function()
{
var color= button['button'].color=$('#btn_color').val();
var Bcolor= button['button'].Bcolor=$('#btn_bcolor').val();
$(this).css('color',color);
$(this).css('background',Bcolor);
var value= $(this).val($('#btn_value').val());
value= button['button'].value=$('#btn_value').val();
$("#btn_remove").click(function(){
$(this).remove();
arr.splice(ui.draggable.data('type'),1);
document.getElementById('buttonDiv').style.display = "none";
});
});
var button = {
button: {
type: 'button',
color: 'white',
width: '15px',
backgroundcolor:'white',
value: ' My Button',
id:'btn-"'+btn_id+'"',
control:'button',
name:'',
label:'My Button',
type:'',
status:'',
style:'',
left:'',
center:'',
right:'',
}
}
var objectName = "button";
arr.push(button);
//for changing button properties form
<div id="buttonDiv" style="display:none;" class="answer_list" >
color:<br>
<input id="btn_color" type="text" name="color">
<br>
background-color:<br>
<input id="btn_bcolor" type="text" name="Bcolor">
<br>
value:<br>
<input id="btn_value" type="text" value="buttonname" placeholder="set your name">
<br>
Update component:<br>
<input id="update" type="button" value="update"/>
<br>
Remove component:<br>
<input id="btn_remove" type="button" value="remove"/>
</div>
kindly guide me through it would of great help thanks and i hope that everyone can get what iam trying to say.

I was going to leave this as a comment but it became too big.
In your code you mix jQuery selectors with pure Javascript selectors, i.e. document.getElementById('your-id') can all be replaced by $('#your-id'). And then you can do $('#buttonDiv').css('display', 'block') instead.
The other thing is, when you use jQuery syntax $('...'), you are selecting something based on CSS (it expects CSS classes, ids and other related CSS identifiers, like HTML elements tags) therefore your $( "<br><input type='submit' class='btn' id='btn-"+btn_id+"' value='buttonsss'>" ).text() will not find a jQuery object where you can invoke the text method.
However, there is one exception: when you use immediately after the appendTo method like this:
$( "<br><input type='submit' class='btn' id='btn-"+btn_id+"' value='buttonsss'>").appendTo("#buttonDiv")
Or, if you just want to move an existing object inside the buttonDiv then you can do:
$( "#btn_bcolor").appendTo($("#buttonDiv"));
After you do the desired corrections in your code and add the missing variables, people can help you better, and you can use jQuery inside the snippet in your question by selecting it in the dropdown menu of the snippet window at the top.

Jquery - Append value to Paragraph

I have 4 groups of data that are tied to a click-bind event. I'm trying to add the value from a hidden field contained within each group to a paragraph later in the page, so that when the checkbox is clicked from one or more groups of data, the value from the hidden field displays within the paragraph area.
I'd also like to get it so that when the checkbox is unclicked, it removes the value from the paragraph, but for now I'm just trying to get the value to display when the checkbox is clicked.
Here's what I've tried:
This is the hidden field within the group of data that stores the value:
<input id="servicename_<?php echo $i;?>" name="servicename_<?php echo $i;?>"
type="hidden" value="<?php echo $service->PRODUCT;?>"></input>
This is the click-bind event:
$('input[id^=ckNow_]').each(function(){
$(this).bind('click',function(){
if($(this).prop('checked'))
{
var servicename = '#servicename_'+$(this).attr('value').split("_");
ServiceName += servicename;
$('#lblServiceName').append($(ServiceName));
EDIT to add the checkbox that is within each group:
<input type="checkbox" id="ckNow_<?php echo $i;?>" name="ckNow[<?php echo $i;?>]">
</input>
And then the paragraph text:
<p id="lblServiceName">Service Name
<input type="hidden" id="servicename" value="0"></input>
</p>
What am I doing wrong and how can I fix it? All responses are very appreciated and I'm completely open to any and all suggestions. Thank you.

Try
<p id="lblServiceName">Service Name
<span></span>
<input type="hidden" id="servicename" value="0"></input>
</p>
then
jQuery(function ($) {
var $checks = $('.group-data input[name^="ckNow["]').change(function () {
var vals = $checks.filter(':checked').map(function () {
return $(this).closest('.group-data').find('input[id^=servicename_]').val()
}).get();
$('#lblServiceName span').text(vals.join(', '))
})
})
Demo: Fiddle

How to remove a particular div tag and reset its content using javascript

Code below contains certain tags in all four.
Image-1
here is the code :
<div style='background-color:YellowGreen;height:20px;width:100%;margin-top:15px;font-weight: bold;'>
Delegate(s) details: </div>
<div style="border:1px solid black;"><br/>
<div id="delegates">
<div id="0">
Name of the Delegate:
<input name='contact_person[]' type='text' size="50" maxlength="50" />
Designation:
<select name='delegate_type_name[]' class='delegate_type'>
<option value='select'>Select</option>
<option value='Main'>Main</option>
</select>
</div><br/>
</div>
<div>
<input type="button" name="more" value="Add More Delegates" id="add_more" />
<br />
<br />
</div>
</div>
In the above code on line 5 where <div id="0"> changes to value 1 in script that I mentioned in "add_more"
And the javascript for "add_more" is given below
jQuery('#add_more').click(function(){
var id = jQuery('#delegates > div:last').attr('id');
var temp = "<div id='"+(parseInt(id)+parseInt('1'))+"'> Name of the Delegate: <input type='text' size='50' maxlength='50' name='contact_person[]' /> Designation:";
temp += "<select name='delegate_type_name[]' class='delegate_type additional_delegate'><option value='select'>Select</option><option value='Additional'>Additional</option><option value='Spouse'>Spouse</option></select> <input type='button' name='rem' value='Remove' id='remove' /></div><br/>";
jQuery('#delegates').append(temp);
});
In the javascript code above I have added a remove button in the temp+ variable
<input type='button' name='rem' value='Remove' id='remove' />
Image-2 shows the remove button every time I click on "Add more Delegates" button.
In the image-2 I click on Add More Delegates button it shows the "remove" button on the right of drop down select list.
I want a jQuery function for remove button, so that when I click on remove it should remove <div id="1"> and also reset content before removing the div tag. Below image-3 is the output that I want when I click on remove button.
code that I tried was this from some reference is this
jQuery('#remove').click(function(){
var id = jQuery('#delegates > div:last').attr('id').remove();
});
but no luck.
Thanks.

You can't give an element id that is only a number, it must be #mydiv1, #mydiv2 or something similar, i.e. beginning with a letter not a number.

For starters your markup is a total mess. There is no way you should be using for layout purposes. Read up on tableless layouts and css.
The first thing you need to change is the id's of your div. An id cannot start with a numeric. I suggest naming the first div delegate0. Secondly, you are adding a remove button on every new row with the same id - all id's on a page should be unique so i suggest you change this to class="remove".
As for your question, it really boils down to needing to add a jQuery handler to the remove buttons using the .livedocs method.
This is as simple as:
jQuery('.remove').live('click',function(){
$(this).closest('div').remove();
});
Also, you need to keep a running counter of the id of the items added, and increment this every time a new row is added.
var nextDelegate = 1;
jQuery('#add_more').click(function(){
... your code here
nextDelegate++;
});
Also, I removed the superfluous <br/> after each div.
Live example: http://jsfiddle.net/cb4xQ/