I have the below code wherein enabling and disabling of text box is not working:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TEST</title>
<!-- JQuery 1.12.3 JS -->
<script src="../js/jquery-1.12.3.min.js"></script>
</head>
<body>
<table>
<tr>
<td><label class="control-label">Mode</label></td>
<td>
<label><input type="radio" name="payMode" value="cash" checked>Cash</label>
<label><input type="radio" name="payMode" value="cheque">Cheque</label>
</td>
</tr>
<tr>
<td><label>Cheque No</label></td>
<td><input type="number" name="chequeNo" pattern="^[0-9]" min="0" step="1" class="form-control" placeholder="Enter Cheque No" disabled></td>
</tr>
<tr>
<td><label>Cheque Date</label></td>
<td><input type="date" name="chequeDate" class="form-control" placeholder="Enter Cheque Date" disabled></td>
</tr>
</table>
<script>
<script>
$(':radio[name=payMode]').change(function () {
var prop = this.value == 'cash';
$('input[name=chequeNo], input[name=chequeDate]').prop({ disabled: prop, required: !prop });
});
</script>
</body>
</html>
Basically I am trying to enable 2 textboxes based on the radio click. Enable Cheque No and Cheque Date textbox if the user selects the Pay Mode as Cheque. If the user selects cash then disable the 2 textboxes. Please advice
You have two starting script tags, the inner script tag will cause a javascript error.
EDIT
Here is the link to the JSFiddle that proves it, I only removed the duplicate tag. Sometimes the simple answers are the best :)
https://jsfiddle.net/0k98xnch/
<script>
$(':radio[name=payMode]').change(function () {
var prop = this.value == 'cash';
$('input[name=chequeNo], input[name=chequeDate]').prop({ disabled: prop, required: !prop });
});
</script>
Example below shows when user change "payMode" radio button, Enable Cheque No and Cheque Date textbox if the user selects the Pay Mode as Cheque. If the user selects cash then disable and empty the 2 textboxes.
$("input[name=payMode]").on("change", function(){
if($(this).val() == "cheque"){
$("input[name=chequeNo], input[name=chequeDate]").attr("disabled", false);
}else{
$("input[name=chequeNo], input[name=chequeDate]").val("").attr("disabled", true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TEST</title>
<!-- JQuery 1.12.3 JS -->
<script src="../js/jquery-1.12.3.min.js"></script>
</head>
<body>
<table>
<tr>
<td><label class="control-label">Mode</label></td>
<td>
<label><input type="radio" name="payMode" value="cash" checked>Cash</label>
<label><input type="radio" name="payMode" value="cheque">Cheque</label>
</td>
</tr>
<tr>
<td><label>Cheque No</label></td>
<td><input type="number" name="chequeNo" pattern="^[0-9]" min="0" step="1" class="form-control" placeholder="Enter Cheque No" disabled></td>
</tr>
<tr>
<td><label>Cheque Date</label></td>
<td><input type="date" name="chequeDate" class="form-control" placeholder="Enter Cheque Date" disabled></td>
</tr>
</table>
</body>
</html>
Related
I have code using AngularJS for search text.
But can't display rows in the table and search is not working well.
HTML
<html ng-app="myModule">
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="Scripts/angular.js" type="text/javascript"></script>
<script src="Scripts/Script.js" type="text/javascript"></script>
<link href="Styles.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div ng-controller="myController">
<input type="text" placeholder="Search name" ng-modle="searchText.name" />
<input type="text" placeholder="Search city" ng-modle="searchText.city" />
<input type="checkbox" ng-model="exactMatch" /> Exact match
<br /> <br />
<table>
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Salary</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees | filter:searchText:exactMatch">
<td>{{employee.name}}</td>
<td>{{employee.gender}}</td>
<td>{{employee.salary}}</td>
<td>{{employee.city}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Javascript
var myApp = angular.module("myModule",[])
.controller("myController", function ($scope){
var employees = [
{name:"Ben", gender:"Male", salary:55500.00, city:"London"},
{name:"Thomas", gender:"Male", salary:56000.00, city:"Melbourne"},
{name:"Lin", gender:"Male", salary:78000.00, city:"Texas"},
{name:"Ben", gender:"Male", salary:85000.00, city:"Sydney"},
{name:"Ben", gender:"Male", salary:44000.00, city:"Singapore"}
];
$scope.employees = employees;
});
jsfiddle
What are wrong?
Thanks
You have a couple issues:
1) You've not included ng-app (in the jsfiddle)
2) You've misspelled ng-model in a couple places
Here is your code working on jsbin:
http://jsbin.com/tahiwocuvu/edit?html,css,js,output
All you need to do is spell model correctly: http://jsfiddle.net/Lvc0u55v/10785/
<input type="text" placeholder="Search name" ng-model="searchText.name" />
<input type="text" placeholder="Search city" ng-model="searchText.city" />
You need to include the ng-app tag correctly (missing from your fiddle), either from the jsfiddle options or in your code. In order to make your search working, use the correct spelling of ng-model. Also remember to include AngularJS in your fiddle from the JavaScript options. Here is a working fork of your code.
You misspelled the ng-model(ng-modle)
<input type="text" placeholder="Search name" ng-model="searchText.name" />
<input type="text" placeholder="Search city" ng-model="searchText.city" />
You are misspelled
<input type="text" placeholder="Search name" ng-model="searchText.name" />
<input type="text" placeholder="Search city" ng-model="searchText.city" />
I am having an issue getting jquery timepicker change event to trigger. I need to update a field immediately after selecting a time. Here is the code thus far
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Deploment Management</title>
<link rel="stylesheet" type="text/css" href="style/tabs.css">
<link rel="stylesheet" type="text/css" href="style/style.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.4/jquery.timepicker.min.css">
<link href="http://code.jquery.com/ui/1.10.4/themes/vader/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.4/jquery.timepicker.min.js"></script>
<script>
$(function(){
$('#time').timepicker({
timeFormat: 'h:mm p',
interval: 15,
dynamic: true,
dropdown: true,
scrollbar: true
});
$('#time').on('change', function() {
var x = document.getElementByName("time").value;
document.getElementById('d_time').value = "Maintenance Tonight - " +x;
});
});
</script>
</head>
<body>
<table>
<tr>
<td class="right">Scheduled Time:</td>
<td>
<input type="text" name="time" class="full" id="time" />
</td>
</tr>
<tr>
<td class="right">Email Subject:</td>
<script>
function subject() {
if (document.getElementById('default').checked) {
document.getElementById('default_subject').style.display = 'block';
document.getElementById('custom_subject').style.display = 'none';
}
else if (document.getElementById('custom').checked) {
document.getElementById('custom_subject').style.display = 'block';
document.getElementById('default_subject').style.display = 'none';
}
}
</script>
<td>
<input type="radio" onclick="javascript:subject();" id="default" name="radio" checked value="default">Default Subject
<input type="radio" onclick="javascript:subject();" id="custom" name="radio" value="custom">Custom Subject
</td>
</tr>
<tr>
<td/>
<td>
<div id="subject_field">
<div id="default_subject" style="display:block" name="default">
<input name="default" id="d_time" value="" readonly="readonly"/>
</div>
<div id="custom_subject" style="display:none" name="custom">
<input name="custom" />
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
This is abbreviated code but it should still do what I am trying to get it to do. What I need it to do is on a time select the inpute with the ID d_time should update the default value as described in the above function but for some reason I can't get it to trigger. Before I was using a select option for the time and it was working fine, this method I am clueless.
I don't use javascript or jquery often, a little help would be appreciated. I read the documentation on the change event but it didn't really help.
Thanks in advance.
You can trigger your action thanks to the "changeTime" event of timepicker.js (doc). Btw, your timepicker.js version was old.
So you can try this :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Deploment Management</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.6/jquery.timepicker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.6/jquery.timepicker.js"></script>
<script>
$('document').ready(function(){
$('#time').timepicker();
$('#time').on('changeTime', function() {
var x = $("#time").val();
$('#d_time').val("Maintenance Tonight - " +x);
});
});
</script>
</head>
<body>
<table>
<tr>
<td class="right">Scheduled Time:</td>
<td>
<input type="text" name="time" class="full" id="time" />
</td>
</tr>
<tr>
<td class="right">Email Subject:</td>
<script>
function subject() {
if ($('#default').is(':checked')) {
$('#default_subject').css('display','block');
$('#custom_subject').css('display','none');
}
else if ($('#custom').is(':checked')) {
$('#custom_subject').css('display','block');
$('#default_subject').css('display','none');
}
}
</script>
<td>
<input type="radio" onclick="subject();" id="default" name="radio" checked value="default">Default Subject
<input type="radio" onclick="subject();" id="custom" name="radio" value="custom">Custom Subject
</td>
</tr>
<tr>
<td/>
<td>
<div id="subject_field">
<div id="default_subject" style="display:block" name="default">
<input name="default" id="d_time" value="default" readonly="readonly"/>
</div>
<div id="custom_subject" style="display:none" name="custom">
<input name="custom" type="text" value="custom"/>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
put the on change function on a document ready
$( document ).ready(function() {
$('#time').on('change', function() {
var x = document.getElementByName("time").value;
document.getElementById('d_time').value = "Maintenance Tonight - " +x;
});
}
the thing is that the element is not created in the time you fire the functon so you need to wait untill the document is ready or put this function at the end of the document.
$(function(){
$('#time').timepicker({
timeFormat: 'h:mm p',
interval: 15,
dynamic: true,
dropdown: true,
scrollbar: true
});
$('#time').on('change', function() {
var x = document.getElementsByName("time")[0].value;
document.getElementById('d_time').value = "Maintenance Tonight - " +x;
});
});
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.4/jquery.timepicker.min.css">
<link href="http://code.jquery.com/ui/1.10.4/themes/vader/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.4/jquery.timepicker.min.js"></script>
<table>
<tr>
<td class="right">Scheduled Time:</td>
<td>
<input type="text" name="time" class="full" id="time" />
</td>
</tr>
<tr>
<td class="right">Email Subject:</td>
<script>
function subject() {
if (document.getElementById('default').checked) {
document.getElementById('default_subject').style.display = 'block';
document.getElementById('custom_subject').style.display = 'none';
}
else if (document.getElementById('custom').checked) {
document.getElementById('custom_subject').style.display = 'block';
document.getElementById('default_subject').style.display = 'none';
}
}
</script>
<td>
<input type="radio" onclick="javascript:subject();" id="default" name="radio" checked value="default">Default Subject
<input type="radio" onclick="javascript:subject();" id="custom" name="radio" value="custom">Custom Subject
</td>
</tr>
<tr>
<td/>
<td>
<div id="subject_field">
<div id="default_subject" style="display:block" name="default">
<input name="default" id="d_time" value="" readonly="readonly"/>
</div>
<div id="custom_subject" style="display:none" name="custom">
<input name="custom" />
</div>
</div>
</td>
</tr>
</table>
try this
$('#time').on('change', function() {
var x = document.getElementsByName("time")[0].value;
document.getElementById('d_time').value = "Maintenance Tonight - " +x;
});
because getElementByName is not function use getElementsByName instead with index of first element
I have looked at many other topics on here that are similar to my problem but none of the answers work for me.
I am trying to call a javascript function when a button is clicked but it does nothing.
I hvae tried changing the call to onclick="javascript:ClearFields();" and onclick="ClearFields()" and it doesn't work either.
I have to use a button (not submit) calling javascript
My jsp code is:
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
</head>
<body>
<!-- if the user is logged in then we need to render one version of the page
consequently if the user is logged out we need to render a
different version of the page -->
<script type="text/javascript">
function ClearFields() {
document.getElementById("num1").value = "";
document.getElementById("num2").value = "";
document.getElementById("operator").value = "+";
}
</script>
<c:choose>
<c:when test="${empty user}">
<p>
${msg} <br/>
Would you like to log in? <br/>
Sign in or register <br/>
</p>
</c:when>
<c:otherwise>
<p>
Welcome ${user.email}
<p/>
<p><h1>Calculator</h1></p>
<!-- form of basic input types -->
<form action="/" method="post">
<table border="0">
<tr><td>
Number 1: <input type="text" name="num1" value="${ans}"/><br/>
</td><td>
Number 2: <input type="text" name="num2" /><br/>
</td></tr>
<tr><td colspan=2 align=center>
<select name="operator">
<option value="+"> + </option>
<option value="-"> - </option>
<option value="*"> * </option>
<option value="/"> / </option>
</select>
</td></tr>
<tr><td align=center>
<!-- Button to submit the form to the servlet when clicked -->
<input type="submit" value="Calculate"/><br/>
</td>
<td align=center>
<input type="button" onclick="ClearFields();" value="Clear"/><br/>
<!-- <input type="button" onclick="ClearFields();" value="Clear"/><br/> -->
</td></tr>
<tr><td colspan=2>
<h1> ${msg}</h1>
</td></tr>
</table>
</form>
<p>
You can signout here
</p>
</c:otherwise>
</c:choose>
</body>
</html>
The generated html is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
</head>
<body>
<!-- if the user is logged in then we need to render one version of the page
consequently if the user is logged out we need to render a
different version of the page -->
<script type="text/javascript">
function ClearFields() {
document.getElementById("num1").value = "";
document.getElementById("num2").value = "";
document.getElementById("operator").value = "+";
}
</script>
<p>
Welcome test#example.com
<p/>
<p><h1>Calculator</h1></p>
<!-- form of basic input types -->
<form action="/" method="post">
<table border="0">
<tr><td>
Number 1: <input type="text" name="num1" value=""/><br/>
</td><td>
Number 2: <input type="text" name="num2" /><br/>
</td></tr>
<tr><td colspan=2 align=center>
<select name="operator">
<option value="+"> + </option>
<option value="-"> - </option>
<option value="*"> * </option>
<option value="/"> / </option>
</select>
</td></tr>
<tr><td align=center>
<!-- Button to submit the form to the servlet when clicked -->
<input type="submit" value="Calculate"/><br/>
</td>
<td align=center>
<input type="button" onclick="ClearFields();" value="Clear"/><br/>
</td></tr>
<tr><td colspan=2>
<h1> Welcome to the Calculator</h1>
</td></tr>
</table>
</form>
<p>
You can signout here
</p>
</body>
</html>
Any ideas where I am going wrong?
Could it just be that the page is no resubmitting? It seems to be.
Your JavaScript:
document.getElementById("num1").value = "";
Your HTML:
<input type="text" name="num1" value=""/>
getElementById gets an element by its id, and your element doesn't have any id. You need to add an id attribute.
For some reason, my code seems to ignore the fact that when a date is selected using the jQuery date picker, it should re-enable my "save changes" button. If I change a value in any of the other input boxes it seems to work just fine. I can't seem to quite figure this out and wrap my head around the problem.
<!doctype html>
<html>
<head>
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
$('.check input').keyup(function() { $('#save').attr('disabled', false); });
$( "#save" ).click(function() { $('#save').attr('disabled', true); });
});
</script>
</head>
<body>
<table class="check">
<tr>
<td><input type="text" id="txt1" value="text1"></td>
<td><input type="text" id="txt2" value="text2"></td>
<td><input type="text" id="txt3" value="text3"></td>
</tr>
<tr>
<td><input type="text" id="txt4" value="text4"></td>
<td><input type="text" id="txt5" value="text5"></td>
<td><input type="text" id="txt6" value="text6"></td>
</tr>
<tr>
<td><input type="text" id="txt7" value="text7"></td>
<td><input type="text" id="txt8" value="text8"></td>
<td><input type="text" id="datepicker" />Date Picker</td>
</tr>
</table>
<input id="save" type="button" value="save changes" disabled>
</body>
</html>
Use .onSelect and .prop().
the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.
$("#datepicker").datepicker({
onSelect: function () {
$('#save').prop('disabled', false);
}
});
could you please help me with this code?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to Daily News</title>
<script type="text/javascript" src="Scripts.js">
</script>
<link href="homepage.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="body">
<div class="header">
<img id="header-image" src="news_logo.png" />
<form id="login-form" action="customerLogin.html" method="post" onsubmit="return validate(this)">
<table>
<tr>
<td><label for="loginid">Login:</label></td>
<td id="login-form"><input id="login-boxes" type="text" id="loginid"></td>
<td><label for="pword">Password:</label></td>
<td id="login-form"><input id="login-boxes" type="password" id="pword"></td>
</tr>
<tr>
<td></td>
<td id="login-buttons"><input type="submit" value=" Sign In ">
<input type="reset" value="Clear form">
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
My Javascript is:
function validate(loginForm)
{
var booValid = true;
var strErrorMessage = "";
var minLength=5;
var maxLength=10;
if(loginForm.pword.value.length < minLength)
{
strErrorMessage = "password must at least 5 characters\n";
booValid=false;
}
if(loginForm.pword.value.length > maxLength)
{
strErrorMessage = "pasword must not more than 10 characters\n";
booValid=false;
}
if(loginForm.loginid.value.indexOf("#") == -1)
{
strErrorMessage = "please enter an e-mail address as your login name\n";
booValid=false;
}
if(!booValid)
{
alert(strErrorMessage);
}
return booValid;
}
I couldn't figure out what was with this code, it doesn't seem to read from javascript at all.
I have no idea why it does not. I've also tried to use only Login Form and javascript then it works and when i put everything together then it doesn't work.
You probably want to replace every id= with class=
Instead of your later ids you want to use name
<input id="login-boxes" type="text" id="loginid">
<input id="login-boxes" type="password" id="pword">
to
<input class="login-boxes" type="text" name="loginid">
<input class="login-boxes" type="password" name="pword">
Try to change :
<input id="login-boxes" type="password" id="pword">
to
<input id="login-boxes" type="password" name="pword">
and
<input id="login-boxes" type="password" id="pword">
to
<input id="login-boxes" type="password" name="pword">