I am simply trying to get a price shown, to update on an onchange event. Right now, this is only just showing me both values of the onchange ids I'd just like to have someone click a check box and then it updates the price that was already shown to the new value.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
</head>
<body>
<table>
<tr>
<td>
<input type="checkbox" id="extras" value="25.00" onChange="calc()">
</td>
<td>
<input type="checkbox" id="rush" value="35.00" onChange="calc()">
</td>
<td>
<input id="total" type="text" value="90.00" />
</td>
</tr>
</table>
</body>
<script type='text/javascript'>
function calc() {
var extras = document.getElementById('extras').value;
var rush = document.getElementById('rush').value;
var result = document.getElementById("total");
result.value = extras + rush;
}
</script>
</html>
You can do:
$('input[type=checkbox]').change(function () {
var val = parseFloat(this.value),
totalVal = parseFloat($('#total').val());
if (this.checked) {
$('#total').val((totalVal + val).toFixed(2));
} else {
$('#total').val((totalVal - val).toFixed(2));
}
});
Fiddle Demo
a non jquery solution could be to check for checked value. You also need to convert the value which is text to float otherwise it won't be a valid sum but just concatenation of strings.
var extrasCB = document.getElementById('extras');
var extras = 0;
if(extrasCB.checked) {
extras = parseFloat( extrasCB.value );
}
Related
For convenience I'm giving the script and the html in one place (instead of separate .js file). After selecting any check checkboxes if I click the "edit" link then the alert keeps repeating in a loop and the no of selected checkboxes are reported as 0 1 2 3 4 5 .... in successive occurences. Anybody's help in this matter will be appreciated.
<!doctype html>
<html>
html>
<head>
<title>Cities</title>
<script type="text/javascript" src="jquery-3.2.1/jquery-3.2.1.min.js"></script>
<script type = "text/javascript">
var jq = jQuery.noConflict();
var ids = new Array();
jq(document).ready(function () {
jq("#edit").click(function(){
jq('input[name="cid"]:checked').each(function() {
ids.push(parseInt(jq(this).val()));
}); // end checked each
if(ids.length > 0)
alert(ids.length + " cities selected \n"+"their names: "+ids);
else
alert("Please select one or more rows to edit.");
}); // end #edit click
}); // end document ready
function setCityUpdateAction(){
jq("#edit").click();
}
</script>
</head>
<body>
<form name="myform">
<table border=1px>
<tr><th></th>select<th>CityID</th><th>City</th></tr>
<tr><td><input type="checkbox" name="cid" value=1></td>
<td>1</td><td>London</td></tr>
<tr><td><input type="checkbox" name="cid" value=2></td>
<td>1</td><td>New York</td></tr>
<tr><td><input type="checkbox" name="cid" value=3></td>
<td>1</td><td>Paris</td></tr>
<tr><td></td><td></td><td><a id="edit" href="#" onclick="setCityUpdateAction();">edit</a></tr>
</table>
</form>
</body>
</html>
You already have click event handler when you write jq("#edit").click. So you need to get rid of onclick event handler in the <a> tag.
So, it should look like this:
<a id="edit" href="#" >edit</a>
Additionally, you can get rid of function as well due to click event handler already set. So remove below function.
setCityUpdateAction() {
jq("#edit").click();
}
try this:
<!doctype html>
<html>
<head>
<title>Cities</title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type = "text/javascript">
var jq = jQuery.noConflict();
jq(document).ready(function () {
jq("#edit").click(function(){
var ids = new Array();
jq('input[name="cid"]:checked').each(function() {
ids.push(parseInt(jq(this).val()));
}); // end checked each
if(ids.length > 0)
alert(ids.length + " cities selected \n"+"their names: "+ids);
else
alert("Please select one or more rows to edit.");
setCityUpdateAction()
}); // end #edit click
}); // end document ready
function setCityUpdateAction(){
jq("#edit").click();
}
</script>
</head>
<body>
<form name="myform">
<table border=1px>
<tr><th></th>select<th>CityID</th><th>City</th></tr>
<tr><td><input type="checkbox" name="cid" value=1></td>
<td>1</td><td>London</td></tr>
<tr><td><input type="checkbox" name="cid" value=2></td>
<td>1</td><td>New York</td></tr>
<tr><td><input type="checkbox" name="cid" value=3></td>
<td>1</td><td>Paris</td></tr>
<tr><td></td><td></td><td><a id="edit" href="#">edit</a></tr>
</table>
</form>
</body>
</html>
First declare the ids array inside the jq("#edit").click event, second remove the onclick from a tag and call the setCityUpdateAction function inside your jq("#edit").click event.
I hope this will help you.
Make sure you reset the ids array, Also serialize the form values,
Make sure you name every inputfield! It can be achieved with serializeArray() like this:
var $form = $(form).serializeArray();
$.each($form, function(i, field) {
...
});
Javascript
var jq = jQuery.noConflict();
jq(document).ready(function () {
jq("#edit").click(function(){
var $form = jq(myform).serializeArray();
var ids = new Array();
jq.each($form, function(i, field) {
ids.push(parseInt(field.value)+"-"+field.name);
});
if($form.length > 0)
alert($form.length + " cities selected \n"+"their names: "+ids);
else
alert("Please select one or more rows to edit.");
}); // end #edit click
}); // end document ready
HTML
<form name="myform">
<table border=1px>
<tr><th></th>select<th>CityID</th><th>City</th></tr>
<tr><td><input type="checkbox" name="london" value=1></td>
<td>1</td><td>London</td></tr>
<tr><td><input type="checkbox" name="newyork" value=2></td>
<td>2</td><td>New York</td></tr>
<tr><td><input type="checkbox" name="paris" value=3></td>
<td>3</td><td>Paris</td></tr>
<tr><td></td><td></td><td><a id="edit" href="javascript:;">edit</a></tr>
</table>
</form>
See here how it is done: jsFiddle
I am creating a form where the user can add fields one after the other. For each field I am setting a "remove" button. Each field is in a table, so I give a random id to the table, and pass this id to a removing function doing: $(random-id).remove().
The strange thing is that jQuery is removing all of the tables created by the user, as if the id is not taken into account
Why that can be?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
function delete_field(id)
{
$("#"+id+"").remove();
}
function add_form_field()
{
id = Math.random();
html = '<table id='+id+'>\
<tr><td>Label </td></tr>\
</table>\
\
<button onclick=delete_field('+id+')>remove</button>';
$("form").append(html);
}
</script>
</head>
<body>
<form>
</form>
<button onclick=add_form_field()> Add a field </button>
</body>
</html>
Don't use Math.random, rather increment a number and create ID like: #tab_NN.
Add an ID to your Form Element id=myForm
Delegate click events to dynamically generated delete buttons using .on()
While removing the table that matched the button data-* attribute, delete the button too using .add( this ) (where this stays for the clicked button)
var id = 0;
function delete_field(event){
event.preventDefault();
$("#tab_"+ $(this).data("remove")).add(this).remove();
}
function add_form_field(){
id += 1;
var html = '<table id="tab_'+ id +'">'+
'<tr><td>Label</td></tr>'+
'</table>'+
'<button data-remove="'+id+'" class="remove">remove</button>';
$("#myForm").append(html);
}
$('#addField').on('click', add_form_field);
$('#myForm').on('click', '.remove', delete_field);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm"></form>
<button id="addField"> Add a field </button>
The code above allows you to have changes in the future markup cause it targets a specific ID, but in case your DELETE buttons will always be exactly after table than you can do it without assigning ID's, by simply using .prev("table"):
http://jsbin.com/wuqati/1/edit
function delete_field(event){
event.preventDefault();
$(this).prev("table").add(this).remove();
}
function add_form_field(){
var html = '<table>'+
'<tr><td>Label</td></tr>'+
'</table>'+
'<button class="remove">remove</button>';
$("#myForm").append(html);
}
$('#addField').on('click', add_form_field);
$('#myForm').on('click', '.remove', delete_field);
Math.random() produces a floating point number less than 1 which is invalid for an id. You can use a global variable to keep count of the rows created. Keep in mind that a CSS ID can not start with a digit. So append the number to a string before using it as an ID.
<script>
function delete_field(id)
{
$("#"+id+"").remove();
}
tableID = 1;
function add_form_field()
{
id = 'table-'+tableID;
html = '<table id='+id+'>\
<tr><td>Label </td></tr>\
</table>\
\
<button onclick=delete_field('+id+')>remove</button>';
$("form").append(html);
tableID++;
}
</script>
Why not simplify this by doing something like below.
$(".remover").click(function() {
$(this).parent().remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="text" placeholder="input One"/> <input type="button" class="remover" value="remove" />
</td> </tr>
<tr>
<td>
<input type="text" placeholder="input Two"/> <input type="button" class="remover" value="remove" />
</td> </tr>
<tr>
<td>
<input type="text" placeholder="input Three"/> <input type="button" class="remover" value="remove" />
</td> </tr>
</table>
This question already has answers here:
Accessing Elements Inside iframe and body Tags with JavaScript
(2 answers)
Closed 10 years ago.
I write the code. Where I am trying to write a form which is having a long list of radio button content inside 'iframe' like below:
<form name="iframeform" method="POST" action="http://localhost/cgi-bin/run">
<tr>
<td><iframe id="macList" src="http://localhost/macinfo" style="width:1000px;height:160px">
</iframe></td>
</tr>
<tr>
<input type="hidden" name="macaddr" value="">
<td><input type="submit" name="macselect" value="Continue" id="stdbtn" onclick="getIframeContent()"></td>
</tr>
</form>
'iframe' is pointing to macinfo page is having code like below:
<html>
<body>
<table>
<tr>
<td><input type=radio name=mac value=E8:B7:48:7B:C0:4A>abc.example.com</td>
</tr>
<tr>
<td><input type=radio name=mac value=00:17:08:5A:81:CF>xyz.cisco.com</td>
</tr>
....
</table>
</body>
</html>
How can I write "getIframeContent()" function to fetch the value of selected radio button? please help..
Long story short. To access iframe document use .contentWindow.document, i.e.:
document.getElementById('macList').contentWindow.document
And an example code:
<html>
<head>
<script type="text/javascript">
function getIframeContent(){
var myIFrame = document.getElementById('macList');
var myIFDoc = myIFrame.contentWindow.document;
var myRadios = myIFDoc.getElementsByName("mac");
var checkedItemValue = "";
for(var i=0; i<myRadios.length; i++) {
if (myRadios[i].checked) {
checkedItemValue = myRadios[i].value;
}
}
if (checkedItemValue) {
alert(checkedItemValue);
} else {alert('Select address');}
}
</script>
</head>
<body>
<iframe id="macList" src="..."
style="width:600px;height:160px">
</iframe>
<input type="submit" onclick="getIframeContent();">
</body>
</html>
You will have to get the array of mac using document.getElementsByName and loop over them:
var allRadios = document.getElementsByName("mac");
var checkedItem;
for(var i=0; i<allRadios.length; i++) {
if (allRadios[i].checked) {
checkedItem = allRadios[i];
alert('Found checked radio button');
}
}
You could then pass checkedItem to your getIframeContent function.
Edit
You could share the checkedItem variable across two pages by using window
window.checkedItem = allRadios[i];
I want to create a table that can auto calculate some values for each fields for each rows. I found these jquery calculator, I would like to ask how am I going to use it incase I'll be using jstl forEach, how can I use this so I would it can auto calculate what ever user entered on a field for each rows.. Thanks..
<html>
<head>
<script type="text/javascript" src="js/jquery-latest.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
$(document).ready(function()
{
$('input').change(function()
{
var ProductUnitVal = parseInt($('#product-unit-val').val());
var TotalUnitSales = parseInt($('#total-unit-sales').val());
var answer = ProductUnitVal * TotalUnitSales;
$('#sales-val').html('$' + answer);
});
});
</script>
</head>
<body>
Unit Value <input type="text" id="product-unit-val" /><br />
Unit Sales <input type="text" id="total-unit-sales" /><br />
<span id="sales-val"></span>
</body>
</html>
Make it row based. When an input changes, look for the closest row (tr) which finds the scope of the elements. Then search just that scope (i.e. the row) for the various elements. Note, I changed from id to class for the 3 items.
<table id="thetable">
<tr>
<td>
Unit Value <input type="text" class="product-unit-val" />
</td>
<td>
Unit Sales <input type="text" class="total-unit-sales" />
</td>
<td><span class="sales-val"></span></td>
</tr>
</table>
And then your script:
$(document).ready(function()
{
$('#thetable input').change(function()
{
var $row = $(this).closest('tr');
var ProductUnitVal = parseInt($row.find('.product-unit-val').val());
var TotalUnitSales = parseInt($row.find('.total-unit-sales').val());
var answer = ProductUnitVal * TotalUnitSales;
$row.find('.sales-val').html('$' + answer);
});
});
Here is my code :
<body>
<div align="center">
<b>A<input type="checkbox" name="a" id="check" value="a"></b>
<b>B<input type="checkbox" name="b" id="check" value="a"></b>
<b>B<input type="checkbox" name="c" id="check" value="c"></b>
<b>D<input type="checkbox" name="d" id="check" value="d"></b>
</div>
<table align="center">
<tr>
<td>Text:</td>
<td><input type="text" name="text" id="text"></td>
</tr>
</table>
</body>
I'm trying that: if (more than one) checkbox is selected (or checked) that value will be assigned into the checkbox like "abcd" or "acd" or "bd".For that I have written jQuery
<script type="text/javascript">
$(document).click(function(){
if($("#check").attr('checked')){
$("#text").val(("#check").val());
}
});
</script>
able to print one txtbox value at a time,but not able to put all checked value in the textbox at a time.
Where I am going wrong ??Any inputs will appreciated.
I may have not understood you correctly, but does this fiddle help you? http://jsfiddle.net/XwGJ9/1/
The change is the javascript:
var $textInput = $('#text');
var $checkBox = $('#checkboxes');
$('input').click(function(){
populateTextInput();
});
function populateTextInput () {
// empty text input
$textInput.val('');
// print out all checked inputs
$checkBox.find('input:checked').each(function() {
$textInput.val( $textInput.val() + $(this).val() );
});
}
Edit: updated
Use this code
$('.check').click(function(){
$("#text").val('');
$(".check").each(function(){
if($(this).prop('checked')){
$("#text").val($("#text").val()+$(this).val());
}
});
});
With this HTML (use class instead of id for abcd)
<div align="center">
<b>A<input type="checkbox" name="a" class="check" value="a"></b>
<b>B<input type="checkbox" name="b" class="check" value="b"></b>
<b>B<input type="checkbox" name="c" class="check" value="c"></b>
<b>D<input type="checkbox" name="d" class="check" value="d"></b>
</div>
<table align="center">
<tr>
<td>Text:</td>
<td><input type="text" name="text" id="text"></td>
</tr>
</table>
Also I encourage to use CSS instead of align="center"
See live, running demo
So I think you're wanting to append the values together in the textbox. In that case, do:
<script type="text/javascript">
$(document).click(function(){
if($("#check").attr('checked')){
var textBoxVal = $("#text").val()+$("#check").val(); // Concatenate the existing textbox value with the checkbox value.
// Load the resulting value into new var textBoxVal.
$("#text").val(textBoxVal); // Load the new value into the textbox.
}
});
</script>
I used native JS just to make it clearer what I'm doing.
had used something like this.. might help you
var checkeditems = $('input:checkbox[name="check[]"]:checked')
.map(function() {
return $(this).val()
})
.get()
.join(",");
$("#text").val(checkeditems);
If you just want no multiples of a,b,c,d at one time, the onclick is per checkbox
var boxes = $("input:checkbox");
boxes.each(function(idx,elem){
elem.onclick=function(event){
var choices = "";
boxes.each(function(idx,elem){
choices += elem.checked ? elem.name:"";
});
$('#text').val(choices);
}
});