JQuery Mobile CSS Text Input - javascript

Here is a JSFiddle:
http://jsfiddle.net/5Lz3zd9y/7/
HTML:
<div class="ui-bar ui-bar-a ui-widget-content">dog</div>
<input class="blankLettersMobile" type="text" value="" size="1" maxlength="1">
<input class="givenLettersMobile" type="text" value="e" disabled>
<input class="blankLettersMobile" type="text" value="" size="1" maxlength="1">
<input class="blankLettersMobile" type="text" value="" size="1" maxlength="1">
<input class="blankLettersMobile" type="text" value="" size="1" maxlength="1">
<input type="text" value="sign in">
CSS:
.givenLettersMobile {
width: 40px;
height: 40px;
text-align:center;
font-style:italic;
font-weight:bold;
text-decoration:underline;
line-height: 50%;
}
.blankLettersMobile {
width: 40px;
height: 40px;
text-align:center;
font-style:italic;
line-height: 50%;
}
In regards to the JSFiddle using JQuery Mobile, I'm trying to figure out how to get all the text input boxes aligned left to right instead of stacked top to bottom while also trying to reduce the width of the text input boxes (without affecting the width of other input boxes like username, password, etc...). Something more like how these text input boxes behave from the desktop version of the website:
Any thoughts on how to accomplish this?

input[type='text'].givenLettersMobile
{
width: 40px !important;
height: 40px !important;
text-align:center !important;
}

Here is what worked for me:
http://jsfiddle.net/5Lz3zd9y/43/
html:
<div class="ui-bar ui-bar-a ui-widget-content">dog</div>
<ul class="letters">
<li>
<input type="text" value="" size="1" maxlength="1">
</li>
<li>
<input type="text" value="e" size="1" disabled>
</li>
<li>
<input type="text" value="" size="1" maxlength="1">
</li>
<li>
<input type="text" value="" size="1" maxlength="1">
</li>
<li>
<input type="text" value="" size="1" maxlength="1">
</li>
</ul>
<input type="text" value="sign in">
CSS:
.letters li {
display: inline-block;
}

Related

Trying to get my radio buttons to line up

Alright so I'm doing a freecodecamp project of a survey. The codepen that
they want your survey to function like is this
https://codepen.io/freeCodeCamp/pen/VPaoNP. I currently have mine looking
like https://codepen.io/anon/pen/qvQLZx.
my css
#title {
text-align:center;
}
#description {
text-align:center
}
#survey-form {
text-align:center;
}
.leftsidequestions {
display:inline-block
margin:auto;
text-align:right;
}
#number {
width:9%;
}
My problem right now is that I want
my radio buttons lined up like they do in their codepen. Also it wouldnt be
bad if I could figure out how to line up my other questions like theirs. They
have the text to the left and then the buttons/boxes to the right with a
divide in the middle but I can't figure out how to do this.
So far I've tried vertically aligning them and and display blocking and
inlineblocking them.
Do like this yourinputs will be in one column check below example.
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<div id="main">
<h1 id="title">Survey Form</h1>
<p id="description">Favourite Wu-Tang Things</p>
<div class="leftsidequestions">
<form id="survey-form">
<label id="name-label" for="name">Name:</label>
<input type="name" id="name" required placeholder="Name"><br>
<br>
<label id="email-label" for="email">Email:</label>
<input type="email" id="email" required placeholder="Email"><br>
<br>
<label id="number-label" for="age">  Age: </label>
<input type="number" id="number" min="1" max="100" placeholder="Age"><br><br>
Favourite Wu-Tang Album:
<select id="dropdown">
<option value="1">Enter the Wu-Tang (36 Chambers)</option>
<option value="2">Wu-Tang Forever</option>
<option value="3">The W</option>
<option value="4">Iron Flag</option>
<option value="5">8 Diagrams</option>
<option value="6">A Better Tomorrow</option>
<option value="7">Once Upon a Time in Shaolin</option>
</select><br><br>
Favourite Member<br>
<div class="inputs"><input type="radio" name="member" value"rza">Rza
<br><input type="radio" name="member" value"gza">Gza
<br><input type="radio" name="member" value"odb">Ol Dirty Bastard
<br><input type="radio" name="member" value"Methodman">Method-Man<br>
<input type="radio" name="member" value"Raekwon">Raekwon
<br><input type="radio" name="member" value"U-God">U-God
<br><input type="radio" name="member" value"Masta">Masta Killa
<br><input type="radio" name="member" value"Ghostface">Ghostface Killah
</div>
</div>
</form>
</div>
first add one div with class name "inputs" and wrap your inputs inside this. and add this css class
body
#title {
text-align:center;
}
#description {
text-align:center
}
#survey-form {
text-align:center;
}
.leftsidequestions {
display:inline-block
margin:auto;
text-align:right;
}
#number {
width:9%;
}
.inputs {
display: flex;
flex-direction: column;
width: 200px;
margin: auto;
}
and see it then in your code.
Following their example, for every line they wrapped content on the left and right each in div elements that they set to inline-block. Like this:
.left,
.right {
display: inline-block;
width: 45%;
}
.left {
text-align: right;
}
.right {
text-align: left;
}
input {
margin: 5px;
}
<div class="left">
<label id="name-label" for="name">Name:</label>
</div>
<div class="right">
<input type="name" id="name" required placeholder="Name" />
</div>
<div class="left">
<label id="email-label" for="email">Email:</label>
</div>
<div class="right">
<input type="email" id="email" required placeholder="Email" />
</div>

HTML, JS random code generator is not working [duplicate]

This question already has answers here:
JavaScript code to stop form submission
(14 answers)
Stop form submit with native javascript
(3 answers)
prevent form submission (javascript)
(3 answers)
Closed 4 years ago.
So I have this code for this class project that I am doing I have my random number generator attach to the current flow submit button and the results of the random number generator are supposed to go in the water main information placeholder. The numbers do pop up for a split second but then they disappear. What am I doing wrong?
function refreshPage() {
document.getElementById("ref").value = Math.floor(Math.random() * 70000) + 10000;
}
body {
background: #87CEEB;
color: #fff;
}
.header {
font-size: 20px;
text-align: center;
}
<form name="" class="">
<fieldset>
<div style="text-align:center; padding:.5em; margin-bottom:2em;">
<span style="border:1px solid #ccc;text-align:center; font-size:2em;background:#0099FF;padding:.5em; clear:both;">
National Water Company</span><br/>
</br><span style="border:1px solid #ccc;text-align:center; font-size:20px;background:#0099FF; padding:.5em; clear:both;">
System Damage Tracking, Water Loss Reporting. Leakage and Pipes Damage Reporting</span>
</div>
<div style="text-align:left; padding:.5em; margin-bottom:2em; width:40%; float:left;">
<span style="width:1em; font-size:1.5em;">Water Main Information</span>
<input id="ref" type="text" name="" style=" font-size:1.5em; width:160px;" /><br/>
<input type="submit" name="" style="font-size:1.5em;background:#0099FF" Value="current flow" onClick="refreshPage()" />
</div>
<div style="text-align:left; padding:.5em; margin-bottom:2em;">
<span style="width:10px; font-size:1.5em;">Customer Consumption </span>
<input type="text" name="" placeholder="Name" style=" font-size:1.5em; width:160px;" />
<input type="text" name="" placeholder="Address" style=" font-size:1.5em; width:160px;" />
<input type="text" name="" placeholder="Location" style=" font-size:1.5em; width:160px;" /><br/>
<input type="submit" name="" placeholder="" style="font-size:1.5em;background:#0099FF" Value="History" />
</div>
<div style="text-align:left; padding:.5em; margin-bottom:2em; width:50%; float:left;">
<span style="width:1em; font-size:1.5em;">Request Incident</span>
<input type="text" name="" placeholder="Name" style=" font-size:1.5em; width:150px;" />
<input type="text" name="" placeholder="Phone" style=" font-size:1.5em; width:150px;" />
<input type="text" name="" placeholder="Location" style=" font-size:1.5em; width:150px;" /><br/>
<input type="submit" name="" placeholder="" style="font-size:1.5em;background:#0099FF" Value="History" />
</div>
<div style="text-align:left; padding:.5em; margin-bottom:2em;">
<span style="width:1em; font-size:1.5em;">Differencing Data</span>
<input type="text" name="" placeholder="00,000 l" style=" font-size:1.5em; width:160px;" /><br/>
<input type="submit" name="" style="font-size:1.5em;background:#0099FF" Value="History" />
</div>
</fieldset>
</form>

Javascript Radio Validate using For Loop

Validate the radio button list by adding a for loop???
I cannot figure out how to create a for loop to validate my subscriptions for the HTML radio buttons; Free, Basic, Premium.
Line 39 for JS problem.
Line 128 for HTML reference.
See snippet below:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>javascript form validation</title>
<script type="text/javascript">
function checkme() {
//alert("function fires");
var error = "";
if(document.getElementById('myname').value == "") {
error = "Please enter your name.\n";
}
if(document.getElementById('state').selectedIndex==0) {
error += "Please choose a state.\n";
}
if(document.getElementById('address').value== "") {
error += "Please complete address.\n";
}
if(document.getElementById('city').value== "") {
error += "Please complete city.\n";
}
if(document.getElementById('zip').value== "") {
error += "Please complete address.\n";
}
if(document.getElementById('phone').value== "") {
error += "Please enter phone number.\n";
}
if(document.getElementById('email').value== "") {
error += "Please enter email.\n";
}
if(document.getElementById('comments').value== "") {
error += "Please enter comments.\n";
}
if(!document.getElementById('radio')!=null){
error += "Please select subscription.\n";
// ????
}
if(!document.getElementById('terms')!=null){
error += "Please accept terms.\n";
}
// Do not add logic below this comment
if(error=="") {
return true;
}
else {
alert(error);
return false;
}
}
</script>
<!-- styles for form -->
<style type="text/css">
fieldset {width: 400px;}
/* zero ul and li */
fieldset ul, fieldset li{
border:0; margin:0; padding:0; list-style-type:none;
}
/* li is a block level element. give margin bottom for spacing. */
fieldset li
{
margin-bottom: 10px;
}
/* label is a inline element. convert to inline block to prevent wrapping to next line but still apply width. */
fieldset label{
width:140px;
display: inline-block;
}
/* set radio button labels back to default */
label.radios
{
width:100%;
display: inline;
}
/* take lblnotes out of document flow, aligns to top */
#lblnotes {float: left;}
</style>
</head>
<body>
<fieldset>
<legend>Sign-up Form</legend>
<form id="the_form" name="the_form" action="FormProcessor.html" method="get" onsubmit="return checkme();">
<ul>
<li><label for="myname">Name</label>
<input type="text" name="myname" id="myname" size="30" />
</li>
<li><label for="address">Street Address</label>
<input type="text" name="address" id="address" size="30" />
</li>
<li><label for="city">City</label>
<input type="text" name="city" id="city" size="30" />
</li>
<li><label for="state">State</label>
<select name="state" id="state">
<option value="none">choose a state</option>
<option value="MN">Minnesota</option>
<option value="WI">Wisconsin</option>
</select>
</li>
<li><label for="zip">Zip</label>
<input type="text" name="zip" id="zip" size="30" />
</li>
<li><label for="phone">Phone Number</label>
<input type="text" name="phone" id="phone" size="30" />
</li>
<li><label for="email">Email</label>
<input type="text" name="email" id="email" size="30" />
</li>
<li><label for="comments" id="lblnotes">Commments</label>
<textarea name="comments" id="comments" cols="20" rows="5"></textarea>
</li>
<li><label>Subscription</label> <label for="free" class="radios">Free</label>
<input type="radio" name="subscription" id="free"/>
<label for="basic" class="radios">Basic</label>
<input type="radio" name="subscription" id="basic"/>
<label for="premium" class="radios">Premium</label>
<input type="radio" name="subscription" id="premium"/>
</li>
<li>
<label for="terms">Do you agree to terms?</label>
<input type="checkbox" name="terms" id="terms"/>
</li>
<li><label for="submit"> </label>
<button type="submit" id="submit">Send</button> </li>
</ul>
</form>
</fieldset>
</body>
</html>
You may use the name of the radio button instead:
var radiobuttons = document.getElementsByName(radioButtonName);
for(var opt in radiobuttons ) {
//validate...
}
Simplest approach would be to set required attribute at input, textarea, select elements
var elems = document.forms["the_form"]
.querySelectorAll("input:not([type=submit]), select, textarea");
for (var i = 0; i < elems.length; i++) {
elems[i].setAttribute("required", true)
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>javascript form validation</title>
<script type="text/javascript">
</script>
<!-- styles for form -->
<style type="text/css">
fieldset {width: 400px;}
/* zero ul and li */
fieldset ul, fieldset li{
border:0; margin:0; padding:0; list-style-type:none;
}
/* li is a block level element. give margin bottom for spacing. */
fieldset li
{
margin-bottom: 10px;
}
/* label is a inline element. convert to inline block to prevent wrapping to next line but still apply width. */
fieldset label{
width:140px;
display: inline-block;
}
/* set radio button labels back to default */
label.radios
{
width:100%;
display: inline;
}
/* take lblnotes out of document flow, aligns to top */
#lblnotes {float: left;}
</style>
</head>
<body>
<fieldset>
<legend>Sign-up Form</legend>
<form id="the_form" name="the_form" action="FormProcessor.html" method="get" onsubmit="return checkme();">
<ul>
<li><label for="myname">Name</label>
<input type="text" name="myname" id="myname" size="30" />
</li>
<li><label for="address">Street Address</label>
<input type="text" name="address" id="address" size="30" />
</li>
<li><label for="city">City</label>
<input type="text" name="city" id="city" size="30" />
</li>
<li><label for="state">State</label>
<select name="state" id="state">
<option value="none">choose a state</option>
<option value="MN">Minnesota</option>
<option value="WI">Wisconsin</option>
</select>
</li>
<li><label for="zip">Zip</label>
<input type="text" name="zip" id="zip" size="30" />
</li>
<li><label for="phone">Phone Number</label>
<input type="text" name="phone" id="phone" size="30" />
</li>
<li><label for="email">Email</label>
<input type="text" name="email" id="email" size="30" />
</li>
<li><label for="comments" id="lblnotes">Commments</label>
<textarea name="comments" id="comments" cols="20" rows="5"></textarea>
</li>
<li><label>Subscription</label> <label for="free" class="radios">Free</label>
<input type="radio" name="subscription" id="free"/>
<label for="basic" class="radios">Basic</label>
<input type="radio" name="subscription" id="basic"/>
<label for="premium" class="radios">Premium</label>
<input type="radio" name="subscription" id="premium"/>
</li>
<li>
<label for="terms">Do you agree to terms?</label>
<input type="checkbox" name="terms" id="terms"/>
</li>
<li><label for="submit"> </label>
<button type="submit" id="submit">Send</button> </li>
</ul>
</form>
</fieldset>
</body>
</html>
You can iterate over the radio buttons with the name subscriptions to find which if any is checked. Check the sample here (getRadioVal function): http://www.dyn-web.com/tutorials/forms/radio/get-selected.php

Failed to Produce Result in Html5 and CSS?

Here is my html code and css code but i am failed to format this code all textboxes should align vertically but its not giving me proper result.Can someone please help me to correct this code:
<div id="wrapper" class="wrapperClass">
<fieldset>
<legend class="regLagendClass">Registration Form</legend>
<form id="registrationForm" method="Post" action="https://www.google.com.pk/">
<div class="divClass">
<label for="firstName" class="labelClass">First Name:</label>
<input type="text" name="fName" class="textboxClass" id="firstName" placeholder="Your First Name"/>
</div>
<div class="divClass">
<label for="lastName" class="labelClass">Last Name:</label>
<input type="text" name="lName" id="lastName" class="textboxClass" placeholder="Your Last Name"/><br>
</div>
<div class="divClass">
<label for="userName" class="labelClass">User Name:</label><br>
<input type="text" name="userName" id="userName" class="textboxClass" placeholder="Your User Name" required/><br>
</div>
<div class="divClass">
<label for="password" class="labelClass">Password:</label><br>
<input type="password" id="password" name="password" class="textboxClass" placeholder="Type Password" required/><br>
</div>
<div class="divClass">
<label for="cPassword" class="labelClass">Confirm Password:</label><br>
<input type="password" id="cPassword" name="cPassword" class="textboxClass" placeholder="Retype Password"/><br>
</div>
<div class="divClass">
<label for="gender" class="labelClass">Choose Gender:</label>
<select name="gender" class="textboxClass">
<option>Male</option>
<option>Female</option>
</select>
</div>
<div class="divClass">
<label class="labelClass" for="dob">Date of Birth:</label><br>
<input type="datetime" id="dob" class="textboxClass" placeholder="Your Date of Birth"/><br>
</div>
<div class="divClass">
<label for="country" class="labelClass">Country:</label><br>
<input type="text" id="country" class="textboxClass"/><br>
</div>
<div class="divClass">
<input type="submit" value="Sign Up">
</div>
</form>
</fieldset>
</div>
CSS:
.wrapperClass
{
width:650px;
height: 700px;
margin-left: 300px;
margin-right: 300px;
}
.divClass
{
margin-top: 10px;
margin-left: 5px;
margin-right: 5px;
}
.labelClass
{
width: 75px;
display: inline;
}
.textboxClass
{
padding-left: 3px;
width:300px;
height:20px;
margin-left: 100px;
display: inline;
}
My code should work as this image :
Check this out http://jsfiddle.net/kabeer182010/gd4Xe/.
If you just replace 'display: inline' with 'display: inline-block' and remove all <br> tags this works fine.
display: inline
causes your element to become wrappable. The width and height properties are disregarded in this context. If you do want to use them, you basically want a boxed display. You can either use block (which can not flow next to eachother) or inline-block (which can).
So basically change your last 2 CSS classes to:
.labelClass
{
width: 75px;
display: inline-block;
}
.textboxClass
{
padding-left: 3px;
width:300px;
height:20px;
margin-left: 100px;
display: inline-block;
}
Give .textboxClass a float right
.textboxClass
{
padding-left: 3px;
width:300px;
height:20px;
display: inline;
float:right;
}
Should do the trick

Javascript function to focus() on next form element not working

Aaargh. I've written a simple HTML page with a form on it to take in a phone number. I put in a Javascript function that makes the focus jump to the next form box once it's full. Everything seems perfect.
However, for some reason it is not working. I can't see why since I've created a nearly identical file with only the form and the function and it works! So something in this particular file is blocking it but after 30 minutes of tinkering I can't figure out what.
<html>
<head>
<script type="text/javascript">
function moveToNext(curr, next) {
if(curr.value.length == curr.getAttribute("maxlength"))
next.focus();
}
</script>
<title> Enter Phone Number </title>
<style type="text/css">
#content {
background:url(images/content-bg-rpt.gif) repeat;
margin: 0 auto;
height: 300px;
width: 500px;
}
#formArea {
margin-top: 50px;
width: 250px;
margin-left: auto;
margin-right: auto;
}
#submit {
position: relative;
}
.formInput { /* These are the input styles used in forms */
background: #f7f7f7 url(../img/input.gif) repeat-x;
border: 1px solid #d0d0d0;
margin-bottom: 6px;
color: #5f6c70;
font-size: 16px;
font-weight: bold;
padding-top: 11px;
padding-bottom: 11px;
padding-left: 11px;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<div id="formArea">
<form name="enterPhone" id="enterPhone" action="phoneresult.php" method="GET">
<input onkeyup="moveToNext(this, document.enterPhone.d345.formInput))" type="text" class="formInput" maxlength="3" size="3" name="d012" id="d012"></input>
<input onkeyup="moveToNext(this, document.enterPhone.d345))" type="text" name="d345" class="formInput" maxlength="3" size="3" id="d345"></input>
<input type="text" class="formInput" maxlength="4" size="4" name="d6789"></input>
<input id="submit" value="Enter" type="submit"></input>
</form>
</div>
</div>
</div>
</body>
</html>
Two things:
For each opening parenthesis, you need exactly one closing parenthesis. The onkeyup attribute of your inputs has two closing parentheses and one opening one.
Pass the HTML element directly, not .formInput.
This solves both issues for me:
<input onkeyup="moveToNext(this, document.enterPhone.d345)" type="text" class="formInput" maxlength="3" size="3" name="d012" id="d012"></input>
<input onkeyup="moveToNext(this, document.enterPhone.d6789)" type="text" name="d345" class="formInput" maxlength="3" size="3" id="d345"></input>
Fixed your code with this jsFiddle example
HTML
<div id="container">
<div id="content">
<div id="formArea">
<form name="enterPhone" id="enterPhone" action="phoneresult.php" method="GET">
<input onkeyup="moveToNext(this, document.getElementsByName('d345'))" type="text" class="formInput" maxlength="3" size="3" name="d012" id="d012"></input>
<input onkeyup="moveToNext(this, document.getElementsByName('d6789'))" type="text" name="d345" class="formInput" maxlength="3" size="3" id="d345"></input>
<input type="text" class="formInput" maxlength="4" size="4" name="d6789"></input>
<input id="submit" value="Enter" type="submit"></input>
</form>
</div>
</div>
</div>
JavaScript
function moveToNext(curr, next) {
if (curr.value.length == parseInt(curr.getAttribute("maxlength"), 10)) next[0].focus();
}
In your JS you were making a comparison between an integer and a string (curr.value.length == curr.getAttribute("maxlength")). In your HTML you weren't selecting the element properly with document.enterPhone.d345.formInput.
Try giving this a shot:
JS
function moveToNext(curr, next) {
if (curr.value.length >= curr.maxLength) {
document.getElementById(next).focus();
}
}
HTML
<form name="enterPhone" id="enterPhone" action="phoneresult.php" method="GET">
<input onkeyup="moveToNext(this, 'd345')" type="text" class="formInput" maxlength="3" size="3" name="d012" id="d012"/>
<input onkeyup="moveToNext(this, 'd6789')" type="text" name="d345" class="formInput" maxlength="3" size="3" id="d345"/>
<input type="text" class="formInput" maxlength="4" size="4" name="d6789" id="d6789"/>
<input id="submit" value="Enter" type="submit"/>
</form>
http://jsfiddle.net/JZxPR/
try this, replace three input tags with the code below:
<input onkeyup="moveToNext(this, document.enterPhone.d345)" type="text" class="formInput" maxlength="3" size="3" name="d012" id="d012"></input>
<input onkeyup="moveToNext(this, document.enterPhone.d6789)" type="text" name="d345" class="formInput" maxlength="3" size="3" id="d345"></input>
<input type="text" class="formInput" maxlength="4" size="4" name="d6789" id="d6789"></input>

Categories

Resources