I need one help.I need to check the radio button and set its value using Javascipt/Jquery.I am explaining my code below.
<input type="radio" name="answer_type0" id="answer_type0" value="" onClick="selectScale();">Male
<button type="button" id="btn">Edit</button>
<script >
document.getElementById('btn').onclick=function(){
var qdata='123';
$('#answer_type0[value="' + qdata + '"]').prop('checked', true).trigger('click');
//$('#answer_type0').prop("checked",true);
console.log('checked',$("#answer_type0").prop("checked"));
}
function selectScale(){
console.log('value');
}
</script>
On the above code when user will click on Edit button the radio button should check and the click should trigger. But in my case its not happening like this. Here the plunkr is present.Please help me.
Try like this.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
</head>
<body>
<input type="radio" name="answer_type0" id="answer_type0" value="" onClick="selectScale();">Male
<button type="button" id="btn">Edit</button>
<script >
$(document).ready(function(){
document.getElementById('btn').onclick=function(){
$('#answer_type0').prop("checked",true);
}
function selectScale(){
console.log('value');
}
});
</script>
</body>
</html>
Here is answer
<input type="radio" name="answer_type0" id="answer_type0" value="" onClick="selectScale();">Male
<button type="button" id="btn">Edit</button>
<script>
document.getElementById('btn').onclick = function() {
var qdata = '0';
$('[name=answer_type' + qdata + ']').prop('checked', true).trigger('click');
console.log('checked', $("#answer_type0").prop("checked"));
}
function selectScale() {
var qdata = '0';
$('[name=answer_type' + qdata + ']').val('some_value');
console.log('some_value');
}
</script>
Related
Suppose a function trigger on Click button
<!DOCTYPE HTML>
<html lang="en">
<!--getElementsByTagName.html-->
<head>
<title>getElementsByTagName.html</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href="getElementsByTagName.css"/>
<script type="text/javascript">
//<![CDATA[
function getData(){
inputTag=document.getElementsByTagName("input");
divOutput=document.getElementById("output");
alert(inputTag.length);//length of input Tag
for(i=0;i<inputTag.length-1;i++){
if((inputTag[i].value=="") || (inputTag[i+1].value=="")){
alert("Please Enter Value");
}else{
a=inputTag[i].value;
b=inputTag[i+1].value;
}
}
$("#output").css("display","block");
divOutput.innerHTML="<strong>"+a+"<\/strong>";
divOutput.innerHTML+="<br\/>"+"<strong>"+b+"<\/strong>";
}//end function
//]]>
</script>
</head>
<body>
<form action="">
<fieldset>
<legend>Example getElementsByTagName</legend>
<label>Name</label>
<input type="text" id="txtName"/>
<label for="txtName">Password</label>
<input type="password" id="txtPassword"/>
<button type="button" onclick="getData()">
Submit
</button>
</fieldset>
<div id="output">
</div>
</form>
</body>
</html>
Is this right?? $("#output").css("display","block");
This code not working i.e. after click on submit button it doesn't show the output div?
Add this code:
$( "#output" ).on( "click", function() {
this.css("display", "block");
});
I have a code-
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function testFunction(){
var stringCode = '#abc[0][0]';
console.log(stringCode);
result = $(stringCode).val();
console.log(result);
}
</script>
</head>
<body>
<input type="hidden" id="abc[0][0]" value="5" readonly="true/">
<input type="button" onClick="testFunction()"/>
</body>
</html>
My Main problem is-
When i click the button and look to browser console so i get undefined
as result of console.log(result). How to fix it so the code can show 5
as the result not undefined ?
Thank you.
You can do it like below (In jquery which is used in your code):-
function testFunction(){
result = $('input[id ="abc[0][0]"]').val();
console.log(result);
}
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<input type="hidden" id="abc[0][0]" value="5" readonly="true/">
<input type="button" onClick="testFunction()" value = "ClickMe!"/>
</body>
</html>
Note:-
This is called [attribute=value] selector
Check all available different selectors
If things are simple then try simple way
function testFunction(){
var f = document.getElementById("abc[0][0]");
result = f.value;
console.log(result);
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="hidden" id="abc[0][0]" value="5" readonly="true/">
<input type="button" onClick="testFunction()" value = "ClickMe!"/>
</body>
</html>
Below is my code. The text is not changing when I select the checkbox.
The text for the checkbox should change but it is not.
<html>
<head>
<title>OX</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$('#checkbox1').on('change', function () {
window.alert(5 + 6);
if ($('#checkbox1').is(':checked')) {
window.alert(5 + 6);
$("#description").html("Your Checked 1");
} else {
$("#description").html("No check");
}
});
</script>
</head>
<body>
<input type="checkbox" value="0" id="checkbox1" name=""/> Answer one <br/></input>
<span id="description"> Hi Your Text will come here </span>
</body>
</html>
use try to load Jquery and most of other JS frameworks before the end of body tags and use to bind all Jquery code in $(document).ready function
Edited code:
<html>
<head>
<title>OX</title>
</head>
<body>
<input type="checkbox" value="0" id="checkbox1" name=""/>
<label for="">Answer one</label> <br/>
<span id="description"> Hi Your Text will come here </span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#checkbox1').on('change', function () {
window.alert(5 + 6);
if ($('#checkbox1').is(':checked')) {
window.alert(5 + 6);
$("#description").html("Your Checked 1");
} else {
$("#description").html("No check");
}
});
});
</script>
</body>
</html>
What is happening is that your script is trying to operate before the DOM is loaded. How can you catch a checkbox that isn't even loaded on the page yet. The simple solution is to use document.ready handler such as $( document ).ready() which will allow you to do just that.
I have a working example with the addition of this code as well below. Run it and have a look.
<html>
<head>
<title>OX</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#checkbox1').on('change', function() {
window.alert(5 + 6);
if ($('#checkbox1').is(':checked')) {
window.alert(5 + 6);
$("#description").html("Your Checked 1");
} else {
$("#description").html("No check");
}
});
});
</script>
</head>
<body>
<input type="checkbox" value="0" id="checkbox1" name="" />Answer one
<br/>
</input>
<span id="description"> Hi Your Text will come here </span>
</body>
</html>
I have a basic addition calculator that looks like this:
<!DOCTYPE html>
<html ng-app>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js">
</script>
</head>
<body>
<input type="number" ng-model="input1" /> + <input type="number" ng-model="input2" /> = <input type="number" ng-model="input1 + input2" />
</body>
</html>
Which looks like this:
2 + 3 = 5
I now have a requirement to make the third input editable and when changed it changes the value in the first input so that the numbers add up. So in the above example, supposing I change 5 to 6 it will look like this:
3 + 3 = 6
But because the model of the third input is a calculation I can't edit it. Please can someone advise how can I make it so that all three inputs are editable and yet still perform the required calculation?
You will need to respond to the ng-change event of the inputs on a controller
<html ng-app="app">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js">
</script>
</head>
<body ng-controller="ctrl">
<input type="number" ng-model="input1" ng-change="calc()"/> + <input type="number" ng-model="input2" ng-change="calc()"/> = <input type="number" ng-model="result" ng-change="recalc()" />
</body>
<script type="text/javascript">
angular.module('app',[]).controller('ctrl',function($scope){
$scope.recalc = function(){
$scope.input1 = $scope.result - $scope.input2;
};
$scope.calc = function(){
$scope.result = $scope.input1 + $scope.input2;
}
});
</script>
</html>
Another approach :D
<!DOCTYPE html>
<html ng-app>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js">
</script>
</head>
<body>
<input type="number" ng-model="input1" ng-change="answ1=input1+input2" /> +
<input type="number" ng-model="input2" ng-change="answ1=input1+input2" /> =
<input type="number" ng-model="answ1" ng-change="input1=answ1-input2" />
</body>
</html>
When edited any of the boxes it reflect the change...
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Addition is not working in JavaScript
In an attempt to learn some java script, I'm trying to build a simple system that adds values when buttons are clicked..
The following code works, but will only add the hardcoded value of +100, can anyone help me change this code so it adds the value nested in the id="add" button?
<html>
<head>
<title>Input tutorial</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script language="javascript">
$(function () {
$("#add").click(function() {
$("#total").val(parseInt($("#total").val()) + 100)
});
});
</script>
</head>
<body>
<input type="button" value="12" id="add">
<input type="button" value="14" id="total">
</body>
</html>
Any help would be great! Thank you.
Just replace the hardcoded value of 100 by the value you want:
$("#total").val(parseInt($("#total").val()) + parseInt($("#add").val()) )
<html>
<head>
<title>Input tutorial</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script language="javascript">
window.onload = function() {
$('#add').bind('click', function () {
$("#total").val(parseInt($("#total").val()) + parseInt($("#add").val()) + 100);
});
}
</script>
</head>
<body>
<input type="button" value="12" id="add">
<input type="button" value="0" id="total">
</body>
</html>