I want to create message box like this, which has pink background color
And when display that message box, page is not dark.
Thank you.
If you are using bootstrap:
<div class="alert alert-dismissible alert-danger">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
Here is a Bootply as an example.
For jQuery, to get a message box, you can use this
There are many ways:
Use bootstrap model
Check this w3schools link
Or try jquery dialog box:
HTML:
<div id="dialog">
<table>
<tr>
<td >Question</td>
<td colspan="2">Yes/No</td>
</tr>
<tr>
<td>Question 1</td>
<td><input name="Input1" style="text-align:center;" type="radio" /></td>
<td><input name="Input1" style="text-align:center;" type="radio" /></td>
</tr>
<tr>
<td>Question 2</td>
<td><input name="Input2" style="text-align:center;" type="radio" /></td>
<td><input name="Input2" style="text-align:center;" type="radio" /></td>
</tr>
</table>
</div>
jQuery:
$(document).ready(function() {
$("#dialog").dialog();
});
Check this link
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 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();
});
I have a form with a show/hide input box element. When I submit the form the page refreshes
and it returns to default state with all but the first input box hidden. What I want is to keep all boxes that were show prior to submission still visible after submission. is this possible?
function show(id){
if (document.getElementById(id+"-link").style.display=="none") {
document.getElementById(id+"-link").style.display="block";
document.getElementById(id+"-input").style.display="block";
}
}
<html>
<form action='form.html' method='POST'>
<table>
<tr>
<td><input type="text" id="a1" name="em_1"></td>
<td>and</td>
</tr><tr>
<td><input type="text" id="b1-input" name="em_2" style="display:none"></td>
<td><a href="#null" style="display:none" id="b1-link"
onclick="show('c1')">and</a></td>
</tr><tr>
<td><input type="text" id="c1-input" name="em_3" style="display:none"></td>
<td><a href="#null" style="display:none" id="c1-link"
onclick="show('d1')">and</a></td>
</tr><tr>
<tr>
<td><input type='submit' name='submit'></td>
</tr>
</table>
</form>
</html>
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>
I am using the following code to make a certain section of my form show or hide depending on the selection of the radio buttons. However, if I leave the page and come back to it (I leave the page to fill out other sections of the form that are then placed back on the main form) the state of the radio button selection isn't remembered even if the user already made a selection and filled out the fields. Have I done something wrong with my Jquery?
Code for Jquery radio button hide/show:
$(document).ready(function() {
$("[name=delvchoice]").change(function(){
$("#list").toggle($("[name=delvchoice]").index(this)===1);
});
});
HTML code of the page for the radio buttons:
<div>
<table>
<tr>
<td>Will the above items be delivered by your department to the Surplus Warehouse?</td>
<td><input type="radio" name="delvchoice" property="delvchoice" value="Yes"/>Yes</td>
<td><input type="radio" name="delvchoice" property="delvchoice" value="No"/>No</td>
</tr>
</table>
</div>
HTML code for the hide/show section:
<div id="list" style="display: none;">
<div>
<table>
<tr>
<td>Should you choose to have Physical Plant Support Services deliver the items for your department you must provide an
account number for the labor charge:</td>
</tr>
</table>
<table>
<tr>
<td>Account Number :</td>
<logic:notEmpty name="SurplusSaveForm" property="acctno1" scope="session">
<td>
<table border="0">
<tr>
<td><bean:write name="SurplusSaveForm" property="acctno1" scope="session"/>-
<bean:write name="SurplusSaveForm" property="acctno2" scope="session"/>-
<bean:write name="SurplusSaveForm" property="acctno3" scope="session"/>-
<bean:write name="SurplusSaveForm" property="acctno4" scope="session"/>
</td>
</tr>
</table>
</td>
</logic:notEmpty>
<logic:empty name="SurplusSaveForm" property="acctno1" scope="session">
<td><html:text size="2" property="acctno1" maxlength="2" onkeyup="nextbox(this,'acctno2');"/>-
<html:text size="2" property="acctno2" maxlength="2" onkeyup="nextbox(this,'acctno3');"/>-
<html:text size="5" property="acctno3" maxlength="5" onkeyup="nextbox(this,'acctno4');"/>-
<html:text size="3" property="acctno4" maxlength="3" onkeyup="nextbox(this,'acctno4');"/>
</td>
</logic:empty>
<td><b><html:submit property="btn_findAccount">Search for and choose</html:submit><br>your Account</b></td>
</tr>
</table>
</div>
css-tricks has a nice screencast on forms storage if you want to check it out.
http://css-tricks.com/video-screencasts/96-localstorage-for-forms/