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" />
Related
I've been studying Angular.js for my term exams and was working on the following code related to Angular.js forms.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular-csp.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<title>Practical 12</title>
</head>
<body>
<div ng-app="formApp" ng-controller="formCtrl">
<form name="festForm" novalidate ng-submit="sendForm(x)">
<h2>Registration form for tech event</h2>
<table>
<tr>
<td>
<label for="fname">First Name</label>
<input type="text" name="fname" id="fname" ng-model="x.fname" >
<!-- <span ng-show="festForm.fname.$error.required">*enter first name</span> -->
</td>
</tr>
<tr>
<input type="submit" value="SUBMIT">
</tr>
</table>
</form>
<p>{{userdata}}</p>
</div>
<script>
var app=angular.module("formApp",[])
app.controller("formCtrl",function($scope){
$scope.userdata="";
$scope.sendForm=function(fest){
$scope.msg="Form Validated"
$scope.userdata=angular.copy(fest);
console.log(fest)
}
})
</script>
</body>
</html>
Following is the output of the following code
I am not able to understand the flow how my argument fest passed in the sendform function gets converted into javascript object.
I want to "Hide" the table during the starting of page, which is working using $(document).ready(function(){$("#result").hide();});
But I also want to "show" the table once the submit button is clicked, which is not working.
This is the PHP file, as I have to add more PHP code afterwards. Same result if I change this to HTML thou.
<!DOCTYPE html>
<html lang ="en">
<head>
<title> Show Specific </title>
<meta charset = "utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<script>
$(document).ready(function(){
$("#result").hide();
});
$(document).ready(function(){
$("#button").click(function(){
$("#result").show();//result
});
});
</script>
</head>
<body>
<hr>
<div id="appointment">
<form>
Test ID: <input type="text" name="testID" /> <br><br>
First Name : <input type="text" name="First_Name" /> <br><br>
Last Name : <input type="text" name="Last_Name" /> <br><br>
<input id="submit" type="button" value="Submit" ><br><br>
</form>
</div>
<div id="result">
<table>
<tr>
<th>Test ID</th>
</tr>
<tr>
<th>First Name </th>
</tr>
<tr>
<th>Last Name</th>
</tr>
</table>
</div>
<hr>
<div id="footer">
<footer> Copyright © ALL RIGHTS ARE RESERVED. </footer>
</div>
</body>
</html>
If you look carefully, the id of your input button is submit not button as you have written on your jQuery event handler.
Change your script to this one:
<script>
$(document).ready(function(){
$("#result").hide();
$("#submit").click(function(){
$("#result").show();//result
});
});
</script>
Also: it is not necessary for you to have two $(document).ready() methods. Just implement one, and then add your function inside.
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>
I know this is a very elementary question, but I am on a tight time crunch to get this project done. I am using the JQuery plugin CloneYa and after you clone the form fields I want to be able to change the form names by appending the clone count.
<!DOCTYPE html>
<html>
<head>
<title>jQuery CloneYa demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<h2>Simple Cloning</h2>
<form class="form" method="get" action="panel_test_simple.html">
<div id="animate-clone">
<div class="toclone">
<p>
<input type="text" name="name" id="sname" />
<label for="name">Name</label>
</p>
<p>
<input type="text" name="email" id="semail" />
<label for="email">E-mail</label>
</p>
<p >
<input type="text" name="web" id="sweb" />
<label for="web">Website</label>
</p>
clone
delete
</div>
</div>
<p class="submit">
<input type="submit" value="Save" />
</p>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="jquery-cloneya.js"></script>
<script>
$('#animate-clone').cloneya({
limit : 5,
valueClone : false,
dataClone : true,
deepClone : true,
clonePosition : 'after',
serializeID : true,
defaultRender : false,
preserveChildCount: true
})
.on('after_clone.cloneya', function (event, toclone, newclone) {
// alert(toclone.attr('id'));
});
</script>
</body>
</html>
I'm trying to code a checkbox that must be checked in order for the "Submit" button on a form to be enabled. I first tried using a linked file to no avail; now even inserting the script doesn't seem to work. Can anyone help? The entire code for the page is posted below. Thanks in advance!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script type="text/javascript" src="includes/imagetransition.js"></script>
<script type="text/javascript" src="includes/checkenabledisable.js"></script>
<script type="text/javascript">
var checker = document.getElementById('acknowledgment');
var sendbtn = document.getElementById('submitmessage');
// when unchecked or checked, run the function
checker.onchange = function(){
if(this.checked){
sendbtn.disabled = false;
} else {
sendbtn.disabled = true;
}
}
</script>
<title>Contact Us</title>
</head>
<body>
<div class="page-wrapper">
<div id="header">
<img src="images/img1.jpg" name="slideshow" width="70%" height="200" alt="headerimage.gif"><br>
Previous |
Auto/Stop |
Next</div>
<br><br>
<aside class="sidebar">
<div id="vmenu">
<ul>
<li class="sideli">Home</li>
<li class="sideli">Areas</li>
<li class="sideli">Profiles</li>
<li class="sideli">Contact Us</li>
</ul>
</div>
</aside>
<section class="main">
We will review your submission and contact you, usually within 72 hours.</p>
<form action="actionemail.php" method="post">
<table class="emailtable">
<tr><td><label for="name" class="emaillabel">Name: </label></td><td><input type="text" name="fullname" size="50" value="Name" style="width: 290px;" /></td></tr>
<tr><td><label for="phone" class="emaillabel">Phone: </label></td><td><input type="text" name="phone" size="20" value="Phone" style="width: 290px;" /></td></tr>
<tr><td><label for="email" class="emaillabel">Email: </label></td><td><input type="text" name="email" size="50" value="Email" style="width: 290px;" /></td></tr>
<tr><td><label for="comment" class="emaillabel">Issue: </label></td><td><textarea rows="3" cols="26" name="comment" value="Tell Us More" style="width: 290px; height: 55px"></textarea></td></tr>
</table><br>
<input id="acknowledgment" type="checkbox" name="acknowledgment" value="1" /><label for="acknowledgment">I acknowledge that there may be a delay in responding to this request.</label><br>
<br><input id="submitmessage" type="submit" name ="submitmessage" value="Send Email" disabled />
</form>
</section>
</div>
</body>
</html>
Your function is not "listening" for an onchange event.
Use this instead. Notice I changed the checkbox to have an onclick event.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script type="text/javascript" src="includes/imagetransition.js"></script>
<script type="text/javascript" src="includes/checkenabledisable.js"></script>
<script type="text/javascript">
function enableSubmitButton() {
if (document.getElementById("acknowledgment").checked == true)
document.getElementById("submitmessage").disabled = false;
}
</script>
<title>Contact Us</title>
</head>
<body>
<div class="page-wrapper">
<div id="header">
<img src="images/img1.jpg" name="slideshow" width="70%" height="200" alt="headerimage.gif"><br>
Previous |
Auto/Stop |
Next</div>
<br><br>
<aside class="sidebar">
<div id="vmenu">
<ul>
<li class="sideli">Home</li>
<li class="sideli">Areas</li>
<li class="sideli">Profiles</li>
<li class="sideli">Contact Us</li>
</ul>
</div>
</aside>
<section class="main">
We will review your submission and contact you, usually within 72 hours.</p>
<form action="actionemail.php" method="post">
<table class="emailtable">
<tr><td><label for="name" class="emaillabel">Name: </label></td><td><input type="text" name="fullname" size="50" value="Name" style="width: 290px;" /></td></tr>
<tr><td><label for="phone" class="emaillabel">Phone: </label></td><td><input type="text" name="phone" size="20" value="Phone" style="width: 290px;" /></td></tr>
<tr><td><label for="email" class="emaillabel">Email: </label></td><td><input type="text" name="email" size="50" value="Email" style="width: 290px;" /></td></tr>
<tr><td><label for="comment" class="emaillabel">Issue: </label></td><td><textarea rows="3" cols="26" name="comment" value="Tell Us More" style="width: 290px; height: 55px"></textarea></td></tr>
</table><br>
<input id="acknowledgment" type="checkbox" name="acknowledgment" value="1" onclick="enableSubmitButton()"><label for="acknowledgment">I acknowledge that there may be a delay in responding to this request.</label><br>
<br><input id="submitmessage" type="submit" name ="submitmessage" value="Send Email" disabled />
</form>
</section>
</div>
</body>
</html>
You should place the javascript below the definition of the items. HTML is interpreted linearly. This means that the Javascript is executed in the beginning when no items is known as "acknowledgement"
put some function name inside a script
<script type="text/javascript">
function checker()
{
var checker = document.getElementById('acknowledgment');
var sendbtn = document.getElementById('submitmessage');
// when unchecked or checked, run the function
checker.onchange = function(){
if(this.checked){
sendbtn.disabled = false;
} else {
sendbtn.disabled = true;
}
}
}
</script>
and then you will call function in button onClick event
<form action="actionemail.php" method="post">
<br><input id="submitmessage" type="submit" name ="submitmessage" value="Send Email" disabled onclick="checker();"/>