I am trying to create two columns of text boxes which should look like something like the following image:
But it looks something like this:
I used the following code:
HTML
<!DOCTYPE html>
<html>
<head>
<title>DHTML with jQuery</title>
<link rel="stylesheet" href="../css/styles.css">
</head>
<body>
<button id="btnStart">start</button>
<div id="container"></div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="../js/script.js"></script>
</body>
</html>
HTML from the DOM inspector
<html><head>
<script src="/iScorecard/resources/js/jquery.1.10.2.min.js"></script><style type="text/css"></style>
</head>
<body>
<button id="btnStart" style="display: none;">start</button>
<div id="container">
<input type="text" id="txtPlayerId1" placeholder="player 1">
<input type="text" id="txtPlayerId11" placeholder="0">
<input type="text" id="txtPlayerId2" placeholder="player 2">
<input type="text" id="txtPlayerId12" placeholder="0">
<input type="text" id="txtPlayerId3" placeholder="player 3">
<input type="text" id="txtPlayerId13" placeholder="0">
<input type="text" id="txtPlayerId4" placeholder="player 4">
<input type="text" id="txtPlayerId14" placeholder="0">
<input type="text" id="txtPlayerId5" placeholder="player 5">
<input type="text" id="txtPlayerId15" placeholder="0">
<input type="text" id="txtPlayerId6" placeholder="player 6">
<input type="text" id="txtPlayerId16" placeholder="0">
<input type="text" id="txtPlayerId7" placeholder="player 7">
<input type="text" id="txtPlayerId17" placeholder="0">
<input type="text" id="txtPlayerId8" placeholder="player 8">
<input type="text" id="txtPlayerId18" placeholder="0">
<input type="text" id="txtPlayerId9" placeholder="player 9">
<input type="text" id="txtPlayerId19" placeholder="0">
<input type="text" id="txtPlayerId10" placeholder="player 10">
<input type="text" id="txtPlayerId110" placeholder="0">
<input type="text" id="txtPlayerId11" placeholder="player 11">
<input type="text" id="txtPlayerId111" placeholder="0"></div>
<script type="text/javascript" src="/iScorecard/resources/js/dataTextBoxes.js"></script>
<link rel="stylesheet" href="/iScorecard/resources/css/style.css">
</body></html>
JS
function createTextBoxes(event, txtBoxCount) {
var iCounter = 0,
playerText = null,
scoreText = null;
for (iCounter = 0; iCounter < txtBoxCount; iCounter++) {
playerText = document.createElement('input');
scoreText = document.createElement('input');
$(playerText).attr('type', 'text');
$(scoreText).attr('type', 'text');
$(playerText).attr('id', 'txtPlayerId' + (iCounter + 1));
$(scoreText).attr('id', 'txtPlayerId1' + (iCounter + 1));
$(playerText).attr('placeholder', 'player ' + (iCounter + 1));
$(scoreText).attr('placeholder', '0');
$('#container').append(playerText);
$('#container').append(scoreText);
}
}
$("#btnStart").on('click', function(event) {
createTextBoxes(event, 11);
$("#btnStart").hide();
});
How should I modify the code to create the list of text boxes as shown in the mockup screen.
Yo can accomplish this using css. I can will give you 3 options.
Option 1 - Using only css (with inline-block)
<style type="text/css">
#container{
width:500px;
}
#container input[type="text"]{
display:inline-block;
width:40%;
margin-left:5%;
}
</style>
Above css will make all the input type=text elements as inline-block and take the input width as 40% from parent container. Even you change the main container width. inner elements won't affect. it will always show as two columns
Option 2 - Using only css (with float)
<style type="text/css">
#container{
width:500px;
border:1px solid red;
}
#container input[type="text"]{
display:block;
float:left;
width:40%;
margin-left:5%;
}
.clearfix{
clear: both;
}
.clearfix:before,
.clearfix:after{
display: table;
content: "";
}
.clearfix:after{
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
</style>
In HTML I am adding extra class for the container DIV
<div id="container" class="clearfix">
This option is using float instead of inline-block. Here I have added an extra class .clearfix whenever we do a float we need to clear it after the floating elements. otherwise it will affect for below elements as well
Option 3 - Adding specific class to the player input box and score input box
<style type="text/css">
#container{
width:500px;
}
#container .player,
#container .score{
display:inline-block;
width:40%;
margin-left:5%;
}
</style>
<script type="text/javascript">
function createTextBoxes(event, txtBoxCount) {
var iCounter = 0,
playerText = null,
scoreText = null;
for (iCounter = 0; iCounter < txtBoxCount; iCounter++) {
playerText = document.createElement('input');
scoreText = document.createElement('input');
$(playerText).attr('type', 'text');
$(scoreText).attr('type', 'text');
$(playerText).attr('id', 'txtPlayerId' + (iCounter + 1));
$(scoreText).attr('id', 'txtPlayerId1' + (iCounter + 1));
$(playerText).attr('placeholder', 'player ' + (iCounter + 1));
$(scoreText).attr('placeholder', '0');
$(playerText).attr('class', 'player');
$(scoreText).attr('class', 'score');
$('#container').append(playerText);
$('#container').append(scoreText);
}
}
</script>
Related
After click on submit button I get the result in innerhtml. I need to copy the results using the copy button. Please help me out....
Script mentioned below :enter link description here
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
.form-row{
margin-bottom:18px;
}
div {
background-color: lightblue;
width: 650px;
padding: 35px;
}
<!--<div> I don't think that you really want this here -->
</style>
</head>
<body>
<script type="text/javascript">
function getDisplay(){
var items=document.getElementsByName('acs');
var selectedItems="";
for(var i=0; i<items.length; i++){
if(items[i].type=='checkbox' && items[i].checked==true)
selectedItems+=items[i].value+"\n";
}
document.getElementById("display").innerHTML = "Valid ID,POA docs received, "+"Profile Edited :"+selectedItems+", releasing.";
}
function getclear(){
document.getElementById("display").innerHTML = "";
var items = document.getElementsByName('acs');
for (var i = 0; i < items.length; i++) {
if (items[i].type == 'checkbox') items[i].checked = false;
}
}
</script>
<div id="whole">
<font size="4">Profile Edited :</font>
<p>
<input type="checkbox" name="acs" value="Name" style="height:18px; width:18px;" ><font size="3"> Name</font>
<input type="checkbox" name="acs" value="Address" style="height:18px; width:18px;"><font size="3"> Address</font>
<input type="checkbox" name="acs" value="DOB" style="height:18px; width:18px;"><font size="3"> DOB</font>
<input type="checkbox" name="acs" value="No" style="height:18px; width:18px;"><font size="3"> No</font>
</p>
<p>
<button onclick="getDisplay();" style="height:30px; width:100px" >Submit</button>
<button onclick="getclear();" style=" height:30px; width:100px" >Clear</button>
<button onclick="getCopy();" style=" height:30px; width:100px" >Copy</button>
</p>
</div>
<font size="5">Notes:</font>
<div id="display"></div>
</body>
</html>
It is a bit tricky, because as it is not a TextElement you can not select() it as a text.
So what we do here is to get the innerText of the div element, then we create a Textarea element an we append the value, then we can select() it and copy it to the clipboard, here you have the working code:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
.form-row{
margin-bottom:18px;
}
div {
background-color: lightblue;
width: 650px;
padding: 35px;
}
<!--<div> I don't think that you really want this here -->
</style>
</head>
<body>
<script type="text/javascript">
function getDisplay(){
var items=document.getElementsByName('acs');
var selectedItems="";
for(var i=0; i<items.length; i++){
if(items[i].type=='checkbox' && items[i].checked==true)
selectedItems+=items[i].value+"\n";
}
document.getElementById("display").innerHTML = "Valid ID,POA docs received, "+"Profile Edited :"+selectedItems+", releasing.";
}
function getclear(){
document.getElementById("display").innerHTML = "";
var items = document.getElementsByName('acs');
for (var i = 0; i < items.length; i++) {
if (items[i].type == 'checkbox') items[i].checked = false;
}
}
function copyToClipBoard() {
var str = document.getElementById('display').innerText;
var el = document.createElement('textarea');
el.value = str;
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
};
</script>
<div id="whole">
<font size="4">Profile Edited :</font>
<p>
<input type="checkbox" name="acs" value="Name" style="height:18px; width:18px;" ><font size="3"> Name</font>
<input type="checkbox" name="acs" value="Address" style="height:18px; width:18px;"><font size="3"> Address</font>
<input type="checkbox" name="acs" value="DOB" style="height:18px; width:18px;"><font size="3"> DOB</font>
<input type="checkbox" name="acs" value="No" style="height:18px; width:18px;"><font size="3"> No</font>
</p>
<p>
<button onclick="getDisplay();" style="height:30px; width:100px" >Submit</button>
<button onclick="getclear();" style=" height:30px; width:100px" >Clear</button>
<button onclick="copyToClipBoard();" style=" height:30px; width:100px" >Copy</button>
</p>
</div>
<font size="5">Notes:</font>
<div id="display"></div>
</body>
</html>
Ok, I think this is what you want...
Javascript:
function copyToClipboard() {
document.querySelector('#display').select();
document.execCommand('copy');
}
And I couldn't figure out how to take it from anything but an input, so if you do this, and then style the input with no borders so it doesn't look like an input...
<button id="copyToClipboard" onclick="copyToClipboard()" style=" height:30px; width:100px" >Copy</button>
<input id = "display" name="exampleClipboard" style="width:500px; border: none;" type="text">
I played around with the first answer and couldn't get it to work for me either. So I tried it this way. Note: I'm giving you a function that creates a dialog for testing. The actual function is shown below. But I switched to a textarea instead of a div which may not be quite what you want.
function innerHtmlTest() {
var html='<textarea rows="2" cols="40" id="display" style="border:none;">This is just a text string.</textarea>';
html+='<br /><input type="button" value="Copy" onClick="getHtml();" />';
html+='<br /><textarea rows="2" cols="40" id="dsply" placeholder="Paste Here"></textarea>';
html+='<script>function getHtml(){ document.getElementById("dsply").select();document.execCommand("copy");}</script>';
var userInterface=HtmlService.createHtmlOutput(html);
SpreadsheetApp.getUi().showModelessDialog(userInterface, "Copy");
}
function getHtml(){
document.getElementById("display").select();
document.execCommand("copy");
}
So perhaps you would like to change to a text area instead of a div. I use this technique with text boxes a lot but never tried it before with a div.
I am trying to build a form that will calculate average pay. Very simply the calculation needs to be x/y = z. I would like it to autocomplete and not need to submit a form. This is what I have so far, I got close but I am going to insert the code onto a Weebly website and it could not read it. Any help would be massively appreciated!
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function calculate(output1)
{
var result = (input1/input2);
document.getElementById("output1").value = result;
}
</script>
<style type="text/css">
body { font-family:Cambria; font-size:18px; line-height:28px; margin:0; padding:0;}
.container
input { border:1px solid #eee; }
.container p label { width:180px; float:left; }
p { clear:both; }
</style>
</head>
<body>
<form name="day calculator" method="post" action="">
<div class="container">
<p><font color="black"><b><label>Weekly Pay : </label></b><input type="number" name="input1" value=""/></p>
<p><font color="black"><b><label>Days Worked : </label></b><input type="number" name="input2" value="" onBlur="calculate(this.value);"/></p>
<p><font color="red"><b><label>Average Pay : </label><input type="number" name="output1" id="output1"></b></p>
</div>
</form>
</body>
</html>
OK. There are a number of issues here.
First, your javascript is referring to the HTML element, not it's value.
you need to add ids to the inputs and ensure that you convert the values to numbers.
This might help:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function calculate()
{
var input1Val = Number(document.getElementById("input1").value);
var input2Val = Number(document.getElementById("input2").value);
var result = (input1Val/input2Val);
document.getElementById("output1").value = result;
}
</script>
<style type="text/css">
body { font-family:Cambria; font-size:18px; line-height:28px; margin:0; padding:0;}
.container
input { border:1px solid #eee; }
.container p label { width:180px; float:left; }
p { clear:both; }
</style>
</head>
<body>
<form name="day calculator" method="post" action="">
<div class="container">
<p><font color="black"><b><label>Weekly Pay : </label></b><input type="number" id="input1" name="input1" value=""/></p>
<p><font color="black"><b><label>Days Worked : </label></b><input type="number" id="input2" name="input2" value=""/></p>
<p><font color="red"><b><label>Average Pay : </label><input type="number" name="output1" id="output1"></b></p>
<input type="button" value="Go!" onclick="calculate()">
</div>
</form>
</body>
</html>
Following code will work. You have to watch out the difference to understand the problem in your code.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function calculate(input2)
{
var input1 = document.getElementById("input1").value;
var result = (input1/input2);
document.getElementById("output1").value = result;
}
</script>
<style type="text/css">
body { font-family:Cambria; font-size:18px; line-height:28px; margin:0; padding:0;}
.container
input { border:1px solid #eee; }
.container p label { width:180px; float:left; }
p { clear:both; }
</style>
</head>
<body>
<form name="day calculator" method="post" action="">
<div class="container">
<p><font color="black"><b><label>Weekly Pay : </label></b><input type="number" id="input1" name="input1" value=""/></p>
<p><font color="black"><b><label>Days Worked : </label></b><input type="number" name="input2" value="" onBlur="calculate(this.value);"/></p>
<p><font color="red"><b><label>Average Pay : </label><input type="number" name="output1" id="output1"></b></p>
</div>
</form>
</body>
</html>
I'm working on a homework assignment where we have to make a simple calculator in JavaScript. Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Calculator</title>
<style>
div{
display: inline-block;
}
#first{
float: left;
position: relative;
top: 65px;
}
#fieldset{
width: 70px;
{
#second{
}
#compute{
position: relative;
{
</style>
<script>
window.onload = function(){
alert('Welcome to the JavaScript Calculator!');
};
function compute() {
var firstValue = document.getElementById("first").value;
var secondValue = document.getElementById("second").value;
var output;
if (document.getElementById("plus").checked === true)
{
output = firstValue + secondValue;
}
else if (document.getElementById("minus").checked === true)
{
output = firstValue - secondValue;
}
else if (document.getElementById("times").checked === true)
{
output = firstValue*secondValue;
}
else if (document.getElementById("divide").checked === true)
{
output = firstValue/secondValue;
}
return output;
}
</script>
</head>
<body>
<header>
<h1>Simple Calculator</h1>
</header>
<form>
<div id="first">
First value: <input type="text" name="FirstValue" />
</div>
<div id="fieldset">
<fieldset id=radio>
<label for="plus">+</label>
<input type="radio" id="plus" name="type" value="plus" checked/><br>
<label for="minus">-</label>
<input type="radio" id="minus" name="type" value="minus"/><br>
<label for="times">x</label>
<input type="radio" id="times" name="type" value="times"/><br>
<label for="divide">÷</label>
<input type="radio" id="divide" name="type" value="divide"/>
</fieldset>
</div>
<div id="second">
Second value: <input type="text" name="SecondValue" />
</div>
<div id="compute">
<button type="button" onclick = "compute();">Compute</button>
</div>
Result:
</form>
</body>
</html>
The calculator won't run, and I think that has something to do with how I've set it up to return. Does returning output print it to the screen? If not, how do I get this to happen? Please help! Thanks.
There was a few things you needed to do.
You needed to get the value inserted into the textbox, not the value of the div.
You also needed to convert the input from a string to a number using parseInt.
Returning the output won't show it on the screen. Instead of returning the output, you needed to add it to the page as an answer by using innerHTML.
Run the code snippet below to see it in action.
<html>
<head>
<meta charset="utf-8" />
<title>Calculator</title>
<style>
div{
display: inline-block;
}
#first{
float: left;
position: relative;
top: 65px;
}
#fieldset{
width: 70px;
{
#second{
}
#compute{
position: relative;
}
</style>
<script>
window.onload = function(){
alert('Welcome to the JavaScript Calculator!');
};
function compute() {
var firstValue = parseInt(document.getElementById("firstValue").value);
var secondValue = parseInt(document.getElementById("secondValue").value);
var output;
if (document.getElementById("plus").checked === true)
{
output = firstValue + secondValue;
}
else if (document.getElementById("minus").checked === true)
{
output = firstValue - secondValue;
}
else if (document.getElementById("times").checked === true)
{
output = firstValue*secondValue;
}
else if (document.getElementById("divide").checked === true)
{
output = firstValue/secondValue;
}
document.getElementById("result").innerHTML = "Result: " + output;
return output;
}
</script>
</head>
<body>
<header>
<h1>Simple Calculator</h1>
</header>
<form>
<div id="first">
First value: <input id="firstValue" type="text" name="FirstValue" />
</div>
<div id="fieldset">
<fieldset id=radio>
<label for="plus">+</label>
<input type="radio" id="plus" name="type" value="plus" checked/><br>
<label for="minus">-</label>
<input type="radio" id="minus" name="type" value="minus"/><br>
<label for="times">x</label>
<input type="radio" id="times" name="type" value="times"/><br>
<label for="divide">÷</label>
<input type="radio" id="divide" name="type" value="divide"/>
</fieldset>
</div>
<div id="second">
Second value: <input id="secondValue" type="text" name="SecondValue" />
</div>
<div id="compute">
<button type="button" onclick="compute();">Compute</button>
</div>
<div id="result">
Result:
</div>
</form>
</body>
</html>
Following is the code of my jsp where there are two input fields regNo and studentName.
I want the user to enter only numbers in regNo field. It should not contain any spaces and the length of the digits should be only 12.
I added the check for characters and I added CSS and now my Search button isn't working.
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<style>
#mycontainer, h1, h3 {
text-align:center;
}
form {
display:inline-block;
}
#errorMsgNumber {
display: none;
background: brown;
color: white;
}
</style>
<script>
var regNoField = document.getElementById('regNo');
var regNoMessage = document.getElementById('regNoErrorMsgNumber');
var inputFieldsButton = document.getElementById('inputFields');
regNoField.addEventListener('keydown', onChange);
function onChange(e) {
if (e.keyCode < 48 || e.keyCode > 57) {
regNoMessage.style.display = 'block'
};
if(/^\d+$/.test(regNoField.value)) {
inputFieldsButton.disabled = false;
} else {
inputFieldsButton.disabled = true;
}
}
$(document).ready(function(){
$('#inputFields').click(function(event){
if (document.getElementById('regNo').value !=""){
$("#number").submit();
}else if(document.getElementById('studentName').value !=""){
$("#name").submit();
}
});
});
</script>
</head>
<body>
<div id="mycontainer">
<form method="post" action="number" id="number">
<div id="regNoErrorMsgNumber">Only numbers are allowed</div>
<div style="text-align: center;" >
<!-- //TODO: Only number, no spaces, no special symbol and 12 digit check-->
<input width="20" type="text" data-validation="numbers" id="regNo" name="regNo" size="30" maxLength="50" placeholder="Enter Register Number"> OR
</div>
</form>
<form method="post" action="name" id="name">
<input type="text" id="studentName" name="studentName" size="30" maxLength="50" placeholder="Enter Student Name"></input>
</form>
</div>
<div style="text-align: center;">
<input id="inputFields" type="button" value="Search" />
</div>
</body>
I made little modification in your code. It was the ordering of javascript code. I have put your java script code after the elements. Now it will work.
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<style>
#mycontainer, h1, h3 {
text-align:center;
}
form {
display:inline-block;
}
#errorMsgNumber {
display: none;
background: brown;
color: white;
}
</style>
</head>
<body>
<div id="mycontainer">
<form method="post" action="number" id="number">
<div id="regNoErrorMsgNumber">Only numbers are allowed</div>
<div style="text-align: center;" >
<!-- //TODO: Only number, no spaces, no special symbol and 12 digit check-->
<input width="20" type="text" data-validation="numbers" id="regNo" name="regNo" size="30" maxLength="50" placeholder="Enter Register Number"> OR
</div>
</form>
<form method="post" action="name" id="name">
<input type="text" id="studentName" name="studentName" size="30" maxLength="50" placeholder="Enter Student Name"></input>
</form>
</div>
<div style="text-align: center;">
<input id="inputFields" type="button" value="Search" />
</div>
</body>
<script>
var regNoField = document.getElementById('regNo');
var regNoMessage = document.getElementById('regNoErrorMsgNumber');
var inputFieldsButton = document.getElementById('inputFields');
regNoField.addEventListener('keydown', onChange);
function onChange(e) {
if (e.keyCode < 48 || e.keyCode > 57) {
regNoMessage.style.display = 'block'
};
if(/^\d+$/.test(regNoField.value)) {
inputFieldsButton.disabled = false;
} else {
inputFieldsButton.disabled = true;
}
}
$(document).ready(function(){
$('#inputFields').click(function(event){
if (document.getElementById('regNo').value !=""){
$("#number").submit();
}else if(document.getElementById('studentName').value !=""){
$("#name").submit();
}
});
});
</script>
You can do one more thing instead of referring the jquery from website itself you can refer the google hosting look at the link for the benefit http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/
I'm trying to replace these two text nodes with each other. It suppose to be like a correction verification. What its suppose to do is to see if the input is correct after you focus on another input.
This is the html
<body>
<form action="" method="post" name="myform">
<fieldset>
<legend>Lab Group Form</legend>
<label for="first_name">First Name:</label>
<br/>
<input id="first_name" type="text" name="first_name_text" value="" onblur="validatefirst()" />
<br/><br/>
</fieldset>
</form>
<div class="one" id="one"/>
<div class="two" id="two"/>
</body>
function validatefirst() {
if (document.myform.first_name.value.length > 0) {
var one = document.createTextNode("Correct");
var one_container = document.getElementById("one");
} else {
var two = document.createTextNode("Incorrect.");
var two_container = document.getElementById("two");
two_container.appendChild(two);
}
}
this is the css file:
.one {
color:#000;
position:absolute;
top:400px;
}
.two{
color:#000;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
position: absolute;
top:400px;
}
So if you can help me out that will be great. Please no jquery. Thank you
I'm not sure quite what you're trying to accomplish with the function-within-a-function. The following does something, not sure if it's what you want or not:
<html>
<head>
<style>
.one {
color:#000;
position:absolute;
top:200px;
}
.two{
color:#000;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
position: absolute;
top:200px;
}
</style>
</head>
<body>
<form action="" method="post" name="myform">
<fieldset>
<legend>Lab Group Form</legend>
<label for="first_name">First Name:</label>
<br/>
<input id="first_name" type="text" name="first_name_text" onchange="validatefirst()" />
<br/><br/>
</fieldset>
</form>
<div class="one" id="one"/>
<div class="two" id="two"/>
</body>
<script>
function validatefirst() {
if (document.getElementById("first_name").value.length > 0) {
var one = document.createTextNode("Correct");
var one_container = document.getElementById("one");
one_container.appendChild(one);
} else {
var two = document.createTextNode("Incorrect.");
var two_container = document.getElementById("two");
two_container.appendChild(two);
}
}
</script>
</body>
</html>