my code is :
<input type="checkbox" name="area" id="area" value="0">Some Text1</input>
<input type="checkbox" name="area" id="area" value="80">Some Text2</input>
and javascript code is
function calc(){var textValue1 = document.getElementById('quantity').value;
var textValue2 = document.getElementById('area').value;
document.getElementById('cost').value = textValue1 * textValue2 ; }
but it isn't working.
Try this:
valueChange = function(item){
alert(item.value);
}<form name="form1" method="post" action=" insert_data.php">
Delivery Location
<input onChange="valueChange(this)" type="checkbox" name="area" id="area" value="0">Inside city </input>
<input onChange="valueChange(this)" type="checkbox" name="area" id="area" value="80">Outside city </input>
</form>Sample example by using JQuery...
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$( "#target" ).submit(function( event ) {
$('input[name="vehicle"]:checked').each(function() {
console.log(this.value);
});
return false;
});
});
</script>
</head>
<body>
<form id='target' action="/action_page.php">
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The problem is that id attributes should be unique. In your case you have 2 elements with id="area" which confuses the document.getElementById() method. You can use a selector query to achieve what you want. There's not need for additional libraries such as jQuery.
Here's a working example:
function calculate () {
var selected = document.querySelector('[name="area"]:checked')
if (!selected) {
alert('Please select a value')
return
}
var quantity = 5 // you can get this from a different place
alert('Final value: ' + selected.value * quantity)
}
document.getElementById('submit').addEventListener('click', calculate)<form name="form1" method="post" action=" insert_data.php">
Delivery Location
<input type="checkbox" name="area" id="inside" value="0">Inside city </input>
<input type="checkbox" name="area" id="outside" value="80">Outside city </input>
<button id="submit">Calculate</button>
</form>try the below JS code in console. you can use it as per the events u want
var checkedValue = null;
var inputElements = document.getElementsByName('area');
for(var i=0; inputElements[i]; ++i){
if(inputElements[i].checked){
checkedValue = inputElements[i].value;
break;
}
}
