Jquery Index reporting wrong index - javascript

Html:
<!DOCTYPE html>
<html>
<head>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="radioButtonSet">
<input type="radio" id="radio-value" name="dataChange" value="value" checked="checked" ><label for="radio-value">Value</label>
<input type="radio" id="radio-percentage" name="dataChange" value="percent" ><label for="radio-percentage">Percentage</label>
</div>
</body>
</html>
Javascript:
$("input[type=radio][name=dataChange]").on("change", function(){
console.log($("input[type=radio][name=dataChange]").filter(":checked").index())
});
I expect the indices to be 0 and 1, but they are 0 and 2. Why?
Demo: http://jsbin.com/xifutarumu/edit?html,js,console,output

From the docs: "If no argument is passed to the .index() method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements."
<div id="radioButtonSet">
<input type="radio" id="radio-value" name="dataChange" value="value" checked="checked" >
<label for="radio-value">Value</label>
<input type="radio" id="radio-percentage" name="dataChange" value="percent" >
<label for="radio-percentage">Percentage</label>
</div>
The radio-percentage input is the third of its siblings, and therefore has an index of two.

Passing this as the context for index() seems to produce the desired results. shrug
$("input").index(this);
See http://jsbin.com/wuzoxocura/1/edit?html,js,console,output

It is showing correctly index as
0:first input
1:label just after 1 input
2:second input

Related

Cannot read properties of null (reading 'value') error occurs when trying to validate the user input

I am getting an error when trying to check if an input field is empty or not. I tried the function with First Name input Field but not working.
I am trying to check if the First Name input field is empty the input border should turn red if not the border should stay the same.
HERE IS MY CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercise 2</title>
<script type="text/javascript">
function validateField(fieldID){
check = document.getElementById("fieldID");
if(check.value.length == 0){
check.style.borderColor ="red";
}
}
</script>
</head>
<body>
<h1>Flight Reservation</h1>
<form method="POST" action="">
<label for="userFirstName">First Name:</label><br>
<input type="text" name="userName" id="userFirstName" onblur="validateField(userFirstName);">
<br>
<label for="userLastName">Last Name:</label><br>
<input type="text" name="userLast"id="userLastName">
<br>
<label>class:</label>
<label for="businessRadio">Business</label>
<input type="radio" name="ticketType" id="businessRadio">
<label for="economyRadio">Economy</label>
<input type="radio" name="ticketType" id="economyRadio">
<br>
<label for="wheelchair">Wheelchair</label>
<input type="checkbox" name="wheelchair" id="wheelchair">
<br>
<label for="passengers">Passengers:</label>
<input type="number" name="passengers" id="Passengers">
<br>
<input type="submit" name="Send" >
<input type="reset" name="Cancel">
</form>
</body>
</html>
You are passing fieldId and then trying to access with "" which actually converts the fieldId to a string. I have fixed the issue, please check the code below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercise 2</title>
<script type="text/javascript">
function validateField(fieldID){
check = document.getElementById(fieldID);
if(check.value.length == 0){
check.style.borderColor ="red";
}
}
</script>
</head>
<body>
<h1>Flight Reservation</h1>
<form method="POST" action="">
<label for="userFirstName">First Name:</label><br>
<input type="text" name="userName" id="userFirstName" onblur="validateField('userFirstName');">
<br>
<label for="userLastName">Last Name:</label><br>
<input type="text" name="userLast"id="userLastName">
<br>
<label>class:</label>
<label for="businessRadio">Business</label>
<input type="radio" name="ticketType" id="businessRadio">
<label for="economyRadio">Economy</label>
<input type="radio" name="ticketType" id="economyRadio">
<br>
<label for="wheelchair">Wheelchair</label>
<input type="checkbox" name="wheelchair" id="wheelchair">
<br>
<label for="passengers">Passengers:</label>
<input type="number" name="passengers" id="Passengers">
<br>
<input type="submit" name="Send" >
<input type="reset" name="Cancel">
</form>
</body>
</html>
The error occurs when you are trying to get check.value.length when check === null. So this sentences it's returning null value:
check = document.getElementById("fieldID");
Try to change that line to:
check = document.getElementById(fieldID);
Because you are writting a literal string, not using the variable.
There are two problems with the above code:
1: change below line of code
check = document.getElementById("fieldID");
to
check = document.getElementById(fieldID);
2: use string literals to pass id of the field to funtion called onblur
onblur="validateField(userFirstName);"
replace above line with
onblur="validateField('userFirstName');"

Select / Deselect All Checkboxes using jQuery in Thymeleaf

I am trying to add the function of selecting and deselecting all fields. What I have now doesn't work for me and I don't know why? Does anyone know why?
.....
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://igoradamenko.github.io/awsm.css/css/awsm.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title>Report</title>
<script>
$("#selectAll").click(function() {
$("input[type=checkbox]").prop("checked", $(this).prop("checked"));
});
</script>
</head>
....
<label for='selectAll'><input id="selectAll" type="checkbox">Select All </label>
<input checked="checked" type="checkbox">Test</label>
<label th:each="item : ${userConfig.isEnableMap}">
<input checked="checked" type="checkbox" th:text="${item.key}" th:field="*{isEnableMap['__${item.key}__']}"/>
</label>
I added changes and it works now
<script>
$(document).ready(function () {
$("#selectAll").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
});
</script>
You can try :
$("input[type=checkbox]").prop("checked",true);

Get option name attribute value to input

I want to get the name attribute value to an input(#currency_sym).
HTML:
<select id="cur_rate" onchange="changeFunc();">
{{#each currencies}}
<option name="{{this.symbol}}">{{this.currency}}</option>
{{/each}}
</select>
<input type="text" id="currency_sym">
Javascript function:
function changeFunc() {
$('#currency_sym').val($(".currateopt").attr("name"));
}
When I tried selecting various options values. But it always shows only one symbol. What is the problem there?
To get the name of the selected option, change your function as follows:
function changeFunc() {
$('#currency_sym').val($("#cur_rate").find("option:selected").attr("name"));
}
You can use option:selected to target the selected option from the passed element:
Demo:
function changeFunc(el) {
$('#currency_sym').val($(el).find('option:selected').attr("name"));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="curratesec" id="cur_rate" onchange="changeFunc(this);">
<option selected disabled>--Select Currency--</option>
<option class="currateopt" id="id1" value="1"
name="symbol1">Dollar</option>
<option class="currateopt" id="id2" value="2"
name="symbol2">Pound</option>
<input type="text" id="currency_sym" name="currency_sym">
</select>
You can try
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="test.js"></script>
</head>
<body>
<button type="button" id="test" name="test" onclick="myFunction(this);">Click Me!</button>
</body>
</html>
test.js
function myFunction(obj){
alert(obj.name)
}
OR
var obj = document.getElementById("test");
alert(obj.name);
Regards

Angularjs radio buttons become multiple selected

I am learning angular and use radio button in my program. I found a problem that I can't explain it.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<script src="bower_components/angular/angular.min.js"></script>
</head>
<body ng-app = "myApp">
<div class="container" ng-controller="myController">
<div><p style="margin: 30px auto"></p></div>
<label class="radio-inline" ng-repeat = "name in names" for = "{{name}}">
<input type="radio" ng-model="my.favorite" ng-value="name" id="{{name}}" name="favorite"></input>
{{name}}
</label>
<p>Your favorite is {{my.favorite}}</p>
<div>
<select ng-model="choosenone" ng-options="method.value as method.label for method in contactMethods">
<option value="">Tel or Email</option>
</select>
<p>You choose {{choosenone}}</p>
</div>
</div>
<script type="text/javascript">
angular.module('myApp',[])
.controller("myController",['$scope','$log',function ($scope,$log) {
//radio choices
$scope.names = ['pizza', 'unicorns', 'robots'];
$scope.my = { favorite: 'unicorns' };
//select chocices
$scope.contactMethods = [{value:"tel",label:"Tel."},{value:"email",label:"Email"}];
$scope.choosenone;
}]);
</script>
</body>
</html>
This code works fine, but if I make $scope.my in the javascript code equal to an empty string or undefined, and make the ng-model on the radio input HTML tag equal to "my", then the radio buttons can be mutiple selected. What's the reason?
<label class="radio-inline" ng-repeat="name in names" for="{{name}}">
<input type="radio" ng-model="my.favorite" ng-value="name" id="{{name}}" name="favorite" />
{{name}}
</label>
Probably because they all have the same id - change that. So for example id="{{name}}-$index" and it will work the way you want. If you keep the same name, only one of them can be selected.

dynamic javascript/php form with radios creating a second field

I'm having a little 'teething' problem here is my code so far
<form name="job_app">
Source?<br/>
<input type="radio" name="source" value="GAZ" id="GAZ" /> Stonoway Gazette <br/>
<input type="radio" name="source" value="JCP" id="JCP" /> Job Center <br/>
<input type="radio" name="source" value="WOM" id="WOM" /> Word of Mouth <br/><br/>
<script language="text/JavaScript">
if (document.job_app.source.GAZ.checked){
document.write='Issue <br/><input type="text" name="issue" /><br/><br/>';
}
else if (document.job_app.source.JCP.checked){
document.write='Ref <br/><input type="text" name="ref" /><br/><br/>';
}
//word of mouth has no additional input so there is no if statement for it
</script>
</form>
what i want this to do is create (or unhide) the issue or ref text box depending on which radio button is selected without creating multiple text boxes.
sorry for any inconvenience if this is a rookie mistake, i have never worked with java before nor a language like it.
This is the working code as of 07:15 26/05/2012 as thanks to Amy McCrobie.
It has undergone some edits since Amy's version (see below) i have moved all scripts above the form to make adding the next few fields easier, added a statement for word of mouth, omitted <head> as that is part of index.php and meta.php while this is for form.php, added a spacer and made the function name more specific.
index.php
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<?php
include './meta.php';
?>
</head>
<?php
/*if(isset($_POST['submit'])){
include './submit.php';
}
else{*/
include './form.php';
//}
?>
</html>
meta.php
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<meta http-Equiv="Cache-Control" Content="no-cache" />
<meta http-Equiv="Pragma" Content="no-cache" />
<meta http-Equiv="Expires" Content="0" />
<title>job_app</title>
<link rel="StyleSheet" type="text/css" href="./style.css"/>
form.php
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#issueEl").hide();
$("#refEl").hide();
});
function showHide_source(){
if (document.getElementById('GAZ').checked)
{
document.getElementById('issueEl').style.display = 'block';
document.getElementById('refEl').style.display = 'none';
document.getElementById('src_spEl').style.display = 'none';
}
if (document.getElementById('JCP').checked)
{
document.getElementById('issueEl').style.display = 'none';
document.getElementById('refEl').style.display = 'block';
document.getElementById('src_spEl').style.display = 'none';
}
if (document.getElementById('WOM').checked)
{
document.getElementById('issueEl').style.display = 'none';
document.getElementById('refEl').style.display = 'none';
document.getElementById('src_spEl').style.display = 'block';
}
}
</script>
<form name="job_app" action="" method="post">
Source?<br/>
<input type="radio" name="source" value="GAZ" id="GAZ" onChange="showHide_source()" /> Stonoway Gazette <br/>
<input type="radio" name="source" value="JCP" id="JCP" onChange="showHide_source()" /> Job Center <br/>
<input type="radio" name="source" value="WOM" id="WOM" onChange="showHide_source()" /> Word of Mouth <br/><br/>
<div class="hideable" id="issueEl">Issue <br/><input type="text" name="issue" /><br/><br/></div>
<div class="hideable" id="refEl">Ref <br/><input type="text" name="ref" /><br/><br/></div>
<div class="hideable" id="src_spEl"></div>
rest of form
<input...
.../>
</form>
style.css
div.hideable{
height: 62px;
}
Try this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta http-Equiv="Cache-Control" Content="no-cache">
<meta http-Equiv="Pragma" Content="no-cache">
<meta http-Equiv="Expires" Content="0">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#issueEl").hide();
$("#refEl").hide();
});
</script>
<title>Test</title>
</head>
<body>
<form name="job_app" action="" method="post">
Source?<br/>
<input type="radio" name="source" value="GAZ" id="GAZ" onChange="showHide()" /> Stonoway Gazette <br/>
<input type="radio" name="source" value="JCP" id="JCP" onChange="showHide()" /> Job Center <br/>
<input type="radio" name="source" value="WOM" id="WOM" onChange="showHide()" /> Word of Mouth <br/><br/>
<div id="issueEl">Issue <br/><input type="text" name="issue" /><br/><br/></div>
<div id="refEl">Issue <br/><input type="text" name="ref" /><br/><br/></div>
</form>
<script type="text/javascript">
function showHide(){
if (document.getElementById('GAZ').checked)
{
document.getElementById('issueEl').style.display = 'block';
document.getElementById('refEl').style.display = 'none';
}
if (document.getElementById('JCP').checked)
{
document.getElementById('issueEl').style.display = 'none';
document.getElementById('refEl').style.display = 'block';
}
}
</script>
</body>
</html>
I would suggest jQuery, it's not hard to learn, in fact I find it much easier than basic javascript
also I would go the route of two textboxes that are hidden, and then showing them via jQuery
as it stands now I think if the user checks one radio button and then the other two text boxes will appear
and with jQuery added (which is as easy as including the sript at the top of your page your code would be more like this...
<form name="job_app">
Source?<br/>
<input id="GAZ" type="radio" name="source" value="GAZ" id="GAZ" /> Stonoway Gazette <br/>
<input id="JCP" type="radio" name="source" value="JCP" id="JCP" /> Job Center <br/>
<input id="WOM" type="radio" name="source" value="WOM" id="WOM" /> Word of Mouth <br/><br/>
Issue <br/><input id="issue" type="text" name="issue" /><br/><br/>
Issue <br/><input id="ref" type="text" name="ref" /><br/><br/>
<script language="text/JavaScript">
$("#issue").css("display","none");
$("#ref").css("display","none");
if ($("#GAZ").checked){
$("#issue").css("display","inline");
$("#ref").css("display","none");
}
if ($("#JCP").checked){
$("#issue").css("display","none");
$("#ref").css("display","inline");
}
//word of mouth has no additional input so there is no if statement for it
</script>
</form>

Categories