I tried to make this span button toggle hide / show an element it is not a parent of. Is it possible or does it have to be a parent of the element it is trying to toggle .show()/.hide() ?
HTML:
<div id="log_reg">
<span class="btn" id="Log">Log In</span>
<span class="btn" id="Reg">Register</span>
</div>
<div id="log_box">
<table>
<form name="login" action="logsys.php" method="post">
<tr>
<td>Username:</td>
<td><input type="text" name="user" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="pass" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Log In" /></td>
</tr>
</form>
</table>
</div>
jQuery:
$(document).ready(function(){
$("#log_box").hide();
$("log").click(function(){
$("#log_box").show();
});
});
Your selector is incorrect. Its Log and You missed #
Use
$("#Log").click(function () {
$("#log_box").show();
});
Related
I'm trying to fetch the value of a checked radio button by using foreach, but it shows undefine.
The code looks like this:
<form name="exitEmp" ng-submit=submit(exitEmp) novalidate>
<table>
<tr>
<th>S.No</th>
<br />
<th>Factors</th>
<th>Poor</th>
<th>Average</th>
<th>Above Average</th>
<th>Good</th>
<th>Excellent</th> </tr>
<div >
<div>
<tr ng-if="feedback.qtype=='radio'" ng-repeat="feedback in empratingquestion" >
<td>1</td>
<td>{{feedback.question}}</td>
<td><input type="radio" value={{feedback.value}} ng-model="feedback.value.selected"></td>
<td><input type="radio" ></td>
<td><input type="radio"></td>
<td><input type="radio"></td>
<td><input type="radio"></td>
</tr>
</div>
</div>
</div>
</table>
<div class="clearfix"></div>
<div class="center">
<input type="submit" value="submit">
</div>
</form>
here is controller:
$scope.selectedItems=[];
$scope.submit=function(form) {
angular.forEach($scope.empratingquestion,function(feedback){
if(feedback.value.selected){
$scope.selectedItems.push(feedback.value);
}
})
alert($scope.selectedItems)
}
Show empratingquestion object.. Put your code in jsfiddle or some other.
try this..
<label class="radio-button" ng-repeat="feedback in empratingquestion">
<input type="radio" ng-model="feedback.name" name="evaluatorOptions" ng-value="{{feedback.name}}">{{feedback.name}}
</label>
I can't get this code block to work properly:
<script>
function Message(){
document.getElementById("sname").innerHTML = document.getElementById("name").value;
}
</script>
</head>
<body>
<form>
<table>
<tr>
<td style="width:20%">User Name:</td>
<td><input type="text" id="name" name="name" /></td>
</tr>
<tr><td>Password:</td><td><input type="password" name="password"/></td></tr>
<tr>
<td style="text-align:right">
<input type="submit" onclick="Message()"/>
</td>
</tr>
</table>
</form>
<div>
<p>Hi <span id="sname">0</span></p>
</div>
</body>
Try this
</head>
<body>
<form onsubmit="event.preventDefault();">
<table>
<tr>
<td style="width:20%">User Name:</td>
<td><input type="text" id="name" name="name" /></td>
</tr>
<tr><td>Password:</td><td><input type="password" name="password"/></td></tr>
<tr>
<td style="text-align:right">
<input type="submit" onclick="Message()"/>
</td>
</tr>
</table>
</form>
<div>
<p>Hi <span id="sname">0</span></p>
</div>
<script>
function Message(){ document.getElementById("sname").innerHTML = document.getElementById("name").value; return false;}
</script>
</body>
That's a submit button. Make type='button' instead.
Solution #1
function Message(){
event.preventDefault();
document.getElementById("sname").innerHTML = document.getElementById("name").value;
}
<form>
<table>
<tr>
<td style="width:20%">User Name:</td>
<td><input type="text" id="name" name="name" /></td>
</tr>
<tr><td>Password:</td><td><input type="password" name="password"/></td></tr>
<tr>
<td style="text-align:right">
<input type="submit" onclick="Message()"/>
</td>
</tr>
</table>
</form>
<div>
<p>Hi <span id="sname">0</span></p>
</div>
Solution #2 you can just use button instead of input.
function Message(){
document.getElementById("sname").innerHTML = document.getElementById("name").value;
}
<form>
<table>
<tr>
<td style="width:20%">User Name:</td>
<td><input type="text" id="name" name="name" /></td>
</tr>
<tr><td>Password:</td><td><input type="password" name="password"/></td></tr>
<tr>
<td style="text-align:right">
<button type="button" onclick="Message()"/>Click me</button>
</td>
</tr>
</table>
</form>
<div>
<p>Hi <span id="sname">0</span></p>
</div>
Hope it helps!
I have a table with the details of the student. These fields are readonly field and can be edited on clicking the edit button. But I am having problem to select all the input fields of that row at once on clicking the edit button.
Here is my html code
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Checklist</th>
<th>Id</th>
<th>Student Name</th>
<th>Address</th>
<th>Phone</th>
<th>Class</th>
<th colspan="2">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" id="editCheck" class="btn1" />
<input type="checkbox" id="deleteCheck" />
</td>
<td>1</td>
<td><input type="text" class="form-control item" readonly="readonly" /></td>
<td><input type="text" class="form-control item" readonly="readonly" /></td>
<td><input type="text" class="form-control item" readonly="readonly" /></td>
<td>12</td>
<td><button type="button" class="btn btn-info btn-xs" id="btn1">Edit</button></td>
<td><button type="button" class="btn btn-danger btn-xs" id="dbtn1">Delete</button></td>
</tr>
<tr>
<td>
<input type="checkbox" id="editCheck" class="btn2" />
<input type="checkbox" id="deleteCheck" />
</td>
<td>1</td>
<td><input type="text" class="form-control item" readonly="readonly" /></td>
<td><input type="text" class="form-control item" readonly="readonly" /></td>
<td><input type="text" class="form-control item" readonly="readonly" /></td>
<td>12</td>
<td><button type="button" class="btn btn-info btn-xs" id="btn2">Edit</button></td>
<td><button type="button" class="btn btn-danger btn-xs" id="dbtn2">Delete</button></td>
</tr>
</tbody>
</table>
And here is the jquery. I have made the checkbox selected on pressing the edit button.
$(document).ready(function(){
$('.btn.btn-info.btn-xs').click(function(){
var newClass = $(this).attr('id');
$('.'+newClass).prop('checked','true');
});
});
</script>
You can simply add this into your click handler
$(this).closest('tr').find('input').removeAttr('readonly');
Which finds the tr containing the clicked button, locates all of its input elements, and removes their readonly attribute.
Live example: http://jsfiddle.net/zxsq0m5n/
Incidentally, you could use the same trick to locate your checkbox, negating the need to tie it together with the edit button using id/class
$('.btn.btn-info.btn-xs').click(function(){
var $tr = $(this).closest('tr')
$tr.find('input:checkbox').first().prop('checked','true');
$tr.find('input').removeAttr('readonly');
});
Live example: http://jsfiddle.net/zxsq0m5n/1/
$('.btn.btn-info.btn-xs').on('click', function (e) {
var $btn = $(e.currentTarget),
newClass = '.' + $btn.attr('id');
$btn
.parents('tr')
.find(newClass).prop('checked', true)
.end()
.find('input').removeAttr('readonly');
});
You can update your code to following
Logic - Get the tr row i.e. parent of parent of input -> tr -> td -> button. Then for that row find all the input and remove the attribute. Please note you can add conditions if required
$('.btn.btn-info.btn-xs').click(function(){
var newClass = $(this).attr('id');
$('.'+newClass).prop('checked','true');
$(this).parent().parent().find("input").each(function(){
$(this).removeAttr("readonly");
});
});
I'm making a form with a submit button to check login and a link to make a new user!
I'm coding this with:
<script language="javascript">
function new_user()
{
document.getElementById("login").value='registo';
}
</script>
<form id="frmLogin" name="frmLogin" method="post" action="#">
<table>
<tr>
<td><label for="username">Nome do utilizador</label></td>
<td><input type="text" name="username" id="username" /></td>
</tr>
<tr>
<td><label for="password">Palavra-passe</label></td>
<td><input type="text" name="password" id="password" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="OK" id="OK" value="Submit"/></td>
</tr>
<tr>
<td><input type="hidden" name="login" id="login" value="login"/></td>
<td>Novo Utilizador</td>
</tr>
</table>
</form>
I want to use a hidden field to know if the user pressed the button or the link.
To make the code smaller I'd like to use this code instead:
<form id="frmLogin" name="frmLogin" method="post" action="#">
<table>
<tr>
<td><label for="username">Nome do utilizador</label></td>
<td><input type="text" name="username" id="username" /></td>
</tr>
<tr>
<td><label for="password">Palavra-passe</label></td>
<td><input type="text" name="password" id="password" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="OK" id="OK" value="Submit"/></td>
</tr>
<tr>
<td><input type="hidden" name="login" id="login" value="login"/></td>
<td>Novo Utilizador</td>
</tr>
</table>
</form>
Can anyone explain me why this doesn't work?
You might be having a quote clash in the definition of the onclick event handler. Your browser is interpreting it as onclick="document.getElementById(".
Try enclosing the argument of the document.getElementById sentence in single quotes.
onclick="document.getElementById('login').value='registo';document.frmLogin.submit();">
You can use it as below
<td>Novo Utilizador</td>
use single quote for getElementById that will solve it.
In my html page, there exists a link to sign up and a div which holds the signup form.
<img src="images/logo2.png" alt="LOGO">
<div>
<form method="POST" action="signup.php">
<table>
<tr>
<td>First Name</td>
<td><input type="text" name="fname"></input></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" name="lname"></input></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email"></input></td>
</tr>
<tr>
<td>Re-enter Email</td>
<td><input type="text" name="remail"></input></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="pwd"></input></td>
</tr>
<tr>
<td>Confirm Password</td>
<td><input type="text" name="cpwd"></input></td>
</tr>
<tr>
<td>Birthday</td>
<td><input type="text" name="bday"></input></td>
</tr>
<tr>
<td>Sex</td>
<td><input type="text" name="sex"></input></td>
</tr>
<tr>
<td><input type="submit" value="Signup"></input></td>
<td><input type="button" value="Cancel"></input></td>
</tr>
</table>
</form>
</div>
I need to scroll down to the div when the user clicks on the signup link.
Can somebody plz explain how to do that.
Thanx in advance....
To use just HTML, you can use an anchor tag.
<div><a id='form'></a>
<form method="POST" action="signup.php">
...
</div>
Then your link will be the following: Click here to sign up
Explanation: That link goes to the a anchor tag with the id of form.
Use the following,
<img src="images/logo2.png" alt="LOGO">
Sign Up
<div id="test">
<form method="POST" action="signup.php"> ... </form>
</div>
By using simple HTML,using anchor tag you can scroll page to your SignUp div.
"#" in href is used to redirect within the page.
Hope this helps
Sign Up
<div id="mySignUpDiv">
</div>