I was just wondering how do Print the selected radio value to the text box dynamically, so that the value in the text box matches the value of the corresponding selected radio button, using javascript? Any help is greatly appreciated, I'm just starting out with javascript and am finding it tough!
p.s. I am only familiar with javascript so sorry to the people who helpfully posted JQuery solutions! I do appreciate it!
HTML Code:
<h2>Configuration</h2>
<div>
<input type ="radio" id="gtmanual" name="car" value="277790.00" checked="checked" >
<label for ="gtmanual">GT Manual - € 27,7790.00 </label>
<br>
<input type ="radio" id="gtauto" name="car" value="28,500.00" >
<label for ="gtauto">GT Automatic - € 28,500.00 </label>
<br>
<input type ="radio" id="gtsmanual" name="car" value="32,450.00">
<label for ="gtsmanual">GT-S Manual - € 32,450.00 </label>
<br>
<input type ="radio" id="gtmanual" name="car" value="33,155.00">
<label for ="gtsauto">GT-S Auto - € 33,155.00 </label>
<br>
<div class="col-sm-4">
<input type="text" id="total" readonly>
</div>
</div>
And here is the javascript code:
var total=0
var carcost=0
gtmanual=document.getElementById("gtmanual")
gtmanual=document.getElementListner("click" calculateCar, false);
window.onload=function calculateCar() {
var mycar=document.getElementByName("car");
for (var i=0; i<mycar.length; i++)
{
if (mycar[i].checked) {
carcost = parseFloat(mycar[i].value);
break;
}
var total+= total+carcost=0;
}
document.getElementById("total").value=total;
}
try this code.this is in javascript as per your requirement
<html>
<head>
</head>
<script>
function getvalue(temp)
{
document.getElementById("total").value=temp.value;
}
</script>
<h2>Configuration</h2>
<div>
<input type ="radio" id="gtmanual" name="car" value="277790.00" onclick="getvalue(this)">
<label for ="gtmanual">GT Manual - € 27,7790.00 </label>
<br>
<input type ="radio" id="gtauto" name="car" value="28,500.00" onclick="getvalue(this)">
<label for ="gtauto">GT Automatic - € 28,500.00 </label>
<br>
<input type ="radio" id="gtsmanual" name="car" value="32,450.00" onclick="getvalue(this)">
<label for ="gtsmanual">GT-S Manual - € 32,450.00 </label>
<br>
<input type ="radio" id="gtmanual" name="car" value="33,155.00" onclick="getvalue(this)">
<label for ="gtsauto">GT-S Auto - € 33,155.00 </label>
<br>
<div class="col-sm-4">
<input type="text" id="total" readonly>
</div>
</div>
I have created what you wanted but its done with jQuery:
Link to the full working demo - http://jsfiddle.net/b7YNp/
jQuery:
$('input[name="car"]').change(function(){
$('#total').val($('input[name="car"]:checked').val());
});
Here is your solution: http://jsfiddle.net/webcarvers/DU2AZ/
JS
$(document).ready(function(){
$("#total").attr("value", $("input:radio[name='car']:checked").val());
$("input").on('click', function(){
$("#total").attr("value", $("input:radio[name='car']:checked").val());
});
});
you can do by this simple JS-
example : click here
var rad = document.getElementsByName('car');
var value = null;
for(var i = 0; i < rad.length; i++) {
rad[i].onclick = function() {
value=document.querySelector('input[name="car"]:checked').value;
document.getElementById('total').value=value ;
};
}
Related
I am trying to use the innerHTML method on an input tag and all i get back is a blank string. Here is the code i am useing.
javascript
function setName(ID){
document.getElementById('searchtitle').innerHTML = "Enter " + ID.innerHTML;
}
HTML
<input type="radio" name="searchtype" id="test" value="name" onclick="setName(this)">Last Name</input><br/>
<input type="radio" name="searchtype" value="phonenumber" onclick="setName(this)">Phone Number</input><br/>
<label for="inputfield" id="searchtitle" style="font-size:2em;">Enter Last Name</label><br/>
<input type="text" name="inputfield" id="inputfield" style="font-size:2em;"></input>
What is supposed to happen is depending on which radio button I pick the label for the input box should change. I can make the label.innerHTML=radio.value but the values are named for my php code and not formated nicely(ie. phonenumber vs. Phone Number) this is why I am trying to use the innerHTML of the radio button.
Any help I could get would be greatly appriciated.
you should embed input inside of label tag. input tag should closed by />. It's semantic HTML. When you do this clicking on label activate the input. InnerHTML only works for label then. It will return you label value.
<label for="inputfield" id="searchtitle" style="font-size:2em;">Enter Last Name
<input type="text" name="inputfield" id="inputfield" style="font-size:2em;" />
</label>
JavaScript:
console.log(document.getElementById('searchtitle').innerHTML); // returns 'Enter Last Name'
If you want the value of an input tag, you want to use .value.
First, add labels around your inputs. Second, use getName(this.parentNode). Finally, call innerText instead of innerHtml.
<html>
<head>
<script>
function setName(el){
document.getElementById('searchtitle').innerHTML = "Enter " + el.innerText;
}
</script>
</head>
<body>
<label><input type="radio" name="searchtype" value="name" onclick="setName(this.parentNode)"/>Last
Name</label><br/>
<label><input type="radio" name="searchtype" value="phonenumber" onclick="setName(this.parentNode)"/>Phone
Number</label><br/>
<label for="inputfield" id="searchtitle" style="font-size:2em;">Enter Last Name</label><br/>
<input type="text" name="inputfield" id="inputfield" style="font-size:2em;"></input>
</body>
</html>
Complete edit.
Ok, I figured out what you were looking for. First off, you've got to fix your HTML (don't put text inside of an input... and don't next an input inside of a label).
<label for="test">Last Name</label>
<input type="radio" name="searchtype" id="test" value="name" onclick="setName(this)" />
<br/>
<label for="test2">Phone Number</label>
<input type="radio" id="test2" name="searchtype" value="phonenumber" onclick="setName(this)" />
<br/>
<label for="inputfield" id="searchtitle" style="font-size:2em;">Enter Last Name</label>
<br/>
<input type="text" name="inputfield" id="inputfield" style="font-size:2em;" />
JavaScript (in Jquery, for brevity):
function setName(elem)
{
$('#searchtitle').html('Enter ' + $('label[for="'+elem.id+'"]').html());
}
You have closed the Input tag improperly with </input>
this should be
<input type="radio" name="searchtype" id="test" value="name" onclick="setName(this)"/>Last Name<br/>
<input type="radio" name="searchtype" value="phonenumber" onclick="setName(this)"/>Phone Number<br/>
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.
I want to get the value from radio button that we have choose then multiple with the number in grossSalary. The result will be display on a textbox called epf. There are an error happening, the form only get 0.09 value even we choose 11% radio button.
Here is my javascript
<script>
function get(percent)
{
var percent = document.getElementById('percent').value;
var grossSalary= document.getElementById('grossSalary').value;
var epf = parseFloat(percent)*parseFloat(grossSalary);
epf = epf.toFixed(2);
document.getElementById('epf').value = epf;
}
</script>
Here is my form coding:
<div class="form-group">
<label>Gross Salary</label>
<input type="text" class="form-control" id="grossSalary" name="gross_salary">
</div>
<div class="form-group">
<label>EPF</label>
<input type="radio" id="percent" name="percent" value="0.09" onclick="get(this.value)">9%
<input type="radio" id="percent" name="percent" value="0.11" onclick="get(this.value)">11%
<input type="text" id ="epf" class="form-control" name="epf" >
</div>
</form>
You could use the name instead of the id (because id has to be unique). Also, with jQuery, you could use the change event.
i.e. :
HTML :
<div class="form-group">
<label>Gross Salary</label>
<input type="text" class="form-control" id="grossSalary" name="gross_salary">
</div>
<div class="form-group">
<label>EPF</label>
<input type="radio" name="percent" value="0.09">9%
<input type="radio" name="percent" value="0.11">11%
<input type="text" id ="epf" class="form-control" name="epf" >
</div>
JS :
$("input[name=percent]").change(function() {
var percent = $(this).val();
var grossSalary= $("#grossSalary").val();
var epf = parseFloat(percent)*parseFloat(grossSalary);
$("#epf").val(epf.toFixed(2));
});
Here is the working example on JSFiddle.
Hope it helps.
EDIT Don't forget to include jQuery source in your html file :
One file template :
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="form-group">
<label>Gross Salary</label>
<input type="text" class="form-control" id="grossSalary" name="gross_salary">
</div>
<div class="form-group">
<label>EPF</label>
<input type="radio" name="percent" value="0.09">9%
<input type="radio" name="percent" value="0.11">11%
<input type="text" id ="epf" class="form-control" name="epf" >
</div>
<script>
$("input[name=percent]").change(function() {
var percent = $(this).val();
var grossSalary= $("#grossSalary").val();
var epf = parseFloat(percent)*parseFloat(grossSalary);
$("#epf").val(epf.toFixed(2));
});
</script>
When you are using JS or Jquery than always remember one key point that:
id: used for single selection
class: used for multiple selection
In your case you are using same id for different tags, in that case it returns the first matching html value.
So to get rid of this, you have to use class and iterate over them and get the values.
i have a complex div with input field somewhat like this
<input type="text" name="firstname">
<input type="text" name="lastname">
<input type="text" name="email">
<input type="text" name="address">
<div id="section_toClone">
<input type="text" name="tree[tree1][fruit]">
<input type="text" name="tree[tree1][height]">
<input type="checkbox name tree[tree1][color] value="green">Green </input>
<input type="checkbox name tree[tree1][color] value="yellow">yellow </input>
</div>
<button id="add_more"> Add </button>
now when someone click on add i want something like this to happen
<input type="text" name="tree[tree1][fruit]">
<input type="text" name="tree[tree1][height]">
<input type="checkbox name tree[tree1][color] value="green">Green </input>
<input type="checkbox name tree[tree1][color] value="yellow">yellow </input>
<input type="text" name="tree[tree2][fruit]">
<input type="text" name="tree[tree2][height]">
<input type="checkbox name tree[tree2][color] value="green">Green </input>
<input type="checkbox name tree[tree2][color] value="yellow">yellow </input>
<input type="text" name="tree[tree3][fruit]">
<input type="text" name="tree[tree3][height]">
<input type="checkbox name tree[tree3][color] value="green">Green </input>
<input type="checkbox name tree[tree3][color] value="yellow">yellow </input>
and so on..... but my script only clone doesnt change the value of tree from tree1 to tree2 to tree3 and so on.... here is my jquery script
$('#add_more').click(function(){
$("#section_toClone").clone(true).insertBefore("#add_more").find('input').val("").val('');
});
how do i increment that automatically?? i want to mention one more thing in actual html code. it has more then 3 input and 3 checkbox field
Don't even bother putting the numbers into the array keys. Just let PHP take care of it itself:
<input name="tree[fruit][]" value="foo" />
<input name="tree[fruit][]" value="bar" />
<input name="tree[fruit][]" value="baz" />
Any [] set which DOESN'T have an explicitly specified key will have one generated/assigned by PHP, and you'll end up with
$_POST['tree'] = array(
0 => 'foo',
1 => 'bar',
2 => 'baz'
);
As long as your form is generated consistently, browsers will submit the fields in the same order they appear in the HTML, so something like this will work:
<p>#1</p>
<input name="foo[color][]" value="red"/>
<input name="foo[size][]" value="large" />
<p>#2</p>
<input name="foo[color][]" value="puce" />
<input namke="foo[size][]" value="minuscule" />
and produce:
$_POST['color'] = array('red', 'puce');
| |
$_POST['size'] = array('large', 'minuscule');
But if you start mixing the order of the fields:
<p>#3</p>
<input name="foo[color][]" value="red"/>
<input name="foo[size][] value="large" />
<p>#4</p>
<input namke="foo[size][] value="minuscule" />
<input name="foo[color][] value="puce" />
$_POST['color'] = array('red', 'puce');
/
/
$_POST['size'] = array('minuscule', 'large');
Note how they're reversed.
I wouldn't post this without feeling a bit ashamed of how bad it is written, but the following solution does the trick. Badly.
var treeCount = 1;
$('#add_more').click(function(){
$("#section_toClone")
.clone(true)
.insertBefore("#add_more")
.find('input')
.val('')
.each(function(key,element){
var $element = $(element),
oldName = $element.attr('name'),
newName;
if(oldName){
newName = oldName.replace(/tree[0-9]+/, 'tree'+(treeCount+1));
$element.attr('name', newName);
}
else {
treeCount--;
}
})
.promise().done(function(){
treeCount++;
});
});
(please don't shoot me)
I have the javascript portion working (cut off bottom portion of it to reduce code length) when I manually put in the numbers however, I'm struggling with putting my javascript together with my html. I tried stealing bits of code to get it to work, ultimately I'd like to just have one button that says "Get Pricing" that passes the 4 variables quantity, colors, logoSheet, and margin to the respective javascript variables.
<form>
<br>
<label id="_quantity" >Quantity</label>
<input type="number" id="quantity" maxlength="254" data-hint="" name="quantity" required/>
<br>
<label id="_colors" ># of Colors</label>
<input type="number" id="colors" maxlength="254" data-hint="" name="colors" required/>
<br>
<label id="_logoSheet" ># Logo's per Sheet</label>
<input type="number" id="logoSheet" maxlength="254" data-hint="" name="logoSheet" required/>
<br>
<label id="_margin" >Margin %</label>
<input type="number" id="margin" maxlength="254" data-hint="" name="margin" required/>
<br>
<input type="submit" class="fb-button-special" id="fb-submit-button" value="submit" />
</form>
<button onclick="myFunction()">Get Pricing</button>
<p>Total Shirt Only:</p> <p id="totalShirtOnly"></p>
<p>Total Sheet Cost:</p> <p id="totalSheetCost"></p>
<p>Price Per Sheet:</p> <p id="costOfSheets"></p>
<p>Total Price:</p> <p id="totalPrice"></p>
<p>Net Profit:</p> <p id="netProfit"></p>
</center>
<script>
function myFunction()
{
var quantity = document.getElementById('quantity.value');
var colors = document.getElementById('colors.value');
var logoSheet = document.getElementById('logoSheet.value');
var margin = document.getElementById('margin.value');
var shirtCost = 2.43;
var sheetShipping = 15.0;
var marginPercent = margin/100;
var totalCost = 0.0;
var costOfSheets = 0.0;
</script>
</body>
</html>
I don't know which JavaScript variables you're referring to and if you're using jQuery or not but here's how to get values of HTML elements:
// With jQuery
var colors = $("#colors").val();
// w/o jQuery
var margin = document.getElementById("margin").value
Is this what you were looking for?