displaying divs inside form fields in same line - javascript

can you tell me how to how to make divs inside form to align
providing code below
display: table-cell not working
http://codepen.io/anon/pen/EKwOKa
<div class="form-fields">
<label>Name:</label>
<input type="text" name="name" id="name" class="stored" value="" /><br>
<label>Email:</label>
<input type="email" name="email" id="email" class="stored" value="" /><br>
<label>Message:</label>
<textarea name="message" id="message" class="stored"></textarea><br>
</div>
<div class="upload-image">
<div class="upload-image-preview"></div>
<input type="file" name="file" value="Upload Image" />
</div>

vertical-align: top; will help top alignment.
.form-fields {
display: table-cell;
vertical-align: top;
}

Related

How can I stop these <br>'s using space when I hide the labels?

I have 5 radio buttons, every one, when it is pressed, calls the function that hides/shows the input labels that I need.
I used document.getElementById("id").style.display="none"; and it works, but it still takes space.
I want the inputs of the form to fill the space above them when the elements above them are hidden. I think the problem is the <br> tags to separate the inputs, how can I fix this?
JS function:
function showInsert() {
document.getElementById("id").style.display="none";
document.getElementById("nome").style.display="initial";
document.getElementById("provincia").style.display="initial";
document.getElementById("idLabel").style.display="none";
document.getElementById("nomeLabel").style.display="initial";
document.getElementById("provinciaLabel").style.display="initial";
}
HTML Inputs (are in a form if it matters):
<label for="provincia" id="idLabel">ID:</label><br>
<input type="text" name="id" id="id" placeholder="ID da ricercare" /><br>
<label for="provincia" id="nomeLabel">Nome:</label><br>
<input type="text" name="nome" id="nome" placeholder="Nome da ricercare" /><br>
<label for="provincia" id="provinciaLabel">Provincia:</label><br>
<input type="text" name="provincia" id="provincia" placeholder="Provincia da ricercare" /><br>
<br> is meant to be used for line-breaks in text, not for general layouts.
As an alternative, you could set the form to display: flex; instead:
function showInsert() {
document.getElementById("id").style.display = "none";
document.getElementById("nome").style.display = "initial";
document.getElementById("provincia").style.display = "initial";
document.getElementById("idLabel").style.display = "none";
document.getElementById("nomeLabel").style.display = "initial";
document.getElementById("provinciaLabel").style.display = "initial";
}
form {
display: flex;
flex-direction: column;
width: 200px;
}
<form>
<label for="provincia" id="idLabel">ID:</label>
<input type="text" name="id" id="id" placeholder="ID da ricercare" />
<label for="provincia" id="nomeLabel">Nome:</label>
<input type="text" name="nome" id="nome" placeholder="Nome da ricercare" />
<label for="provincia" id="provinciaLabel">Provincia:</label>
<input type="text" name="provincia" id="provincia" placeholder="Provincia da ricercare" />
</form>
<button onclick="showInsert()">Show Insert</button>
If you always either hide or show the radio button and the label together, wrap the two in a <span> tag:
<span id="idGroup">
<label for="provincia" id="idLabel">ID:</label><br>
<input type="text" name="id" id="id" placeholder="ID da ricercare" /><br>
</span>
Now document.getElementById("idGroup").style.display="none"; will remove the radio button, label, and line break tags.

What is the vanilla JavaScript equivalent of this jquery snippet of code

The code is meant to toggle a form between register and login. Want to write it in plain javascript.
$('.message a').click(function(){
$('form').animate({height: "toggle", opacity: "toggle"}, "slow");
});
html Code
<div class="form">
<form class="register-form">
<input type="text" placeholder="first name" />
<input type="text" placeholder="last name" />
<input type="password" placeholder="password" />
<input type="text" placeholder="email address" />
<input type="text" placeholder="mobile number" />
<button>create</button>
<p class="message">Already registered? Sign In</p>
</form>
<form class="login-form">
<input type="text" placeholder="Email" />
<input type="password" placeholder="Password" />
<button>login</button>
<p class="message">Not registered? Create an account</p>
</form>
</div>
Js for now
const formToggle = document.querySelector('.message a');
I expect the forms to be swapped when the form toggle is clicked
If you can do the transition with css, you could do something like:
var btn = document.querySelector('.btn');
var form = document.querySelector('.form');
btn.onclick = function() {
form.classList.toggle('closed');
}
form {
max-height: 300px;
opacity:1;
overflow:hidden;
transition: all 1s;
}
form.closed{
opacity:0;
max-height: 0px;
}
<form class="form">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
</form>
<button class="btn">click</button>

Hiding billing section when "same as shipping address" checkbox is clicked?

How would I make it so that when the "Same as shipping address" checkbox is clicked, the billing address section will be hidden? I've been stuck on this for awhile now and decided to come here for help. Thank you very much in advance!
(posting some words here since I can't post due to having more code than text so ignore this part)
I attached a snipped below of my code so hopefully this helps:
.checkbox-custom, .radio-custom {
margin: 0 auto;
width: 40%;
opacity: 0;
position: absolute;
}
.checkbox-custom, .checkbox-custom-label, .radio-custom, .radio-custom-label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
}
.checkbox-custom-label, .radio-custom-label {
position: relative;
}
.checkbox-custom + .checkbox-custom-label:before, .radio-custom + .radio-custom-label:before {
content: '';
background: #fff;
border: 1px solid #717171;
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
padding: 2px;
margin-right: 10px;
text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
content: "\f00c";
font-family: 'FontAwesome';
font-size: 20px;
color: #a1cdad;
}
.radio-custom + .radio-custom-label:before {
border-radius: 50%;
}
.radio-custom:checked + .radio-custom-label:before {
content: "\f00c";
font-family: 'FontAwesome';
font-size: 20px;
color: #a1cdad;
}
<form class="form1">
<h6>Shipping Address</h6>
<div class="input-box">
<input type="text" id="first-name" placeholder="John" data-type="name"/>
<label for="first-name"><p>First Name</p></label>
</div>
<div class="input-box">
<input type="text" id="last-name" placeholder="Smith" data-type="name"/>
<label for="last-name"><p>Last Name</p></label>
</div>
<div class="input-box">
<input type="text" id="phone-number" placeholder="555-555-555" data-type="number"/>
<label for="phone-number"><p>Phone Number</p></label>
</div>
<div class="input-box">
<input type="text" id="company" placeholder="Company" data-type="name"/>
<label for="company"><p>Company Name</p></label>
</div>
<div class="input-box">
<input type="text" id="address" placeholder="123 Main Street" data-type="text"/>
<label for="address" data-type="name"><p>Address</p></label>
</div>
<div class="input-box">
<input type="text" id="city" placeholder="Everytown" data-type="text"/>
<label for="city" data-type="name"><p>City</p></label>
</div>
<div class="input-box">
<select id="card-type">
<option><p>Texas</p></option>
<option><p>Louisiana</p></option>
<option><p>New Mexico</p></option>
<option><p>Oklahoma</p></option>
</select>
<label for="card-type"><p>State</p></label>
</div>
<div class="input-box">
<input type="text" id="zip" placeholder="12345" data-type="text"/>
<label for="zip" data-type="text"><p>Address</p></label>
</div>
<div class="input-box">
<select id="card-type">
<option><p>United States</p></option>
</select>
<label for="card-type"><p>Country</p></label>
</div>
<div class="input-box">
<input type="text" id="email" placeholder="johnsmith#gmail.com" data-type="email"/>
<label for="email"><p>Email Address</p></label>
</div>
</form>
<form class="form2">
<h6>Billing Address</h6>
<div>
<input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox" checked>
<label for="checkbox-1" class="checkbox-custom-label">Same as shipping address</label>
</div>
<div class="input-box">
<input type="text" id="first-name" placeholder="John" data-type="name"/>
<label for="first-name"><p>First Name</p></label>
</div>
<div class="input-box">
<input type="text" id="last-name" placeholder="Smith" data-type="name"/>
<label for="last-name"><p>Last Name</p></label>
</div>
<div class="input-box">
<input type="text" id="phone-number" placeholder="555-555-555" data-type="number"/>
<label for="phone-number"><p>Phone Number</p></label>
</div>
<div class="input-box">
<input type="text" id="company" placeholder="Company" data-type="name"/>
<label for="company"><p>Company Name</p></label>
</div>
<div class="input-box">
<input type="text" id="address" placeholder="123 Main Street" data-type="text"/>
<label for="address" data-type="name"><p>Address</p></label>
</div>
<div class="input-box">
<input type="text" id="city" placeholder="Everytown" data-type="text"/>
<label for="city" data-type="name"><p>City</p></label>
</div>
<div class="input-box">
<select id="card-type">
<option><p>Texas</p></option>
<option><p>Louisiana</p></option>
<option><p>New Mexico</p></option>
<option><p>Oklahoma</p></option>
</select>
<label for="card-type"><p>State</p></label>
</div>
<div class="input-box">
<input type="text" id="zip" placeholder="12345" data-type="text"/>
<label for="zip" data-type="text"><p>Address</p></label>
</div>
<div class="input-box">
<select id="card-type">
<option><p>United States</p></option>
</select>
<label for="card-type"><p>Country</p></label>
</div>
<div class="input-box">
<input type="text" id="email" placeholder="johnsmith#gmail.com" data-type="email"/>
<label for="email"><p>Email Address</p></label>
</div>
</form>
I would recommend removing the div you have around the checkbox in the billing address. After this, you should be able to target .input-box when the checkbox has been checked. I have added a small example to help. You can add display: none or take the route I have depending on your accessibility needs. If you are wondering the ~ you see in the example it targets all siblings following the checkbox. I hope this helps :)
.checkbox-custom:checked ~.input-box {
visibility: hidden;
opacity: 0;
}
<form class="form2">
<h6>Billing Address</h6>
<input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox" checked>
<label for="checkbox-1" class="checkbox-custom-label">Same as shipping address</label>
<div class="input-box">
<input type="text" id="first-name" placeholder="John" data-type="name" />
<label for="first-name"><p>First Name</p></label>
</div>
<div class="input-box">
<input type="text" id="first-name" placeholder="John" data-type="name" />
<label for="first-name"><p>First Name</p></label>
</div>
</form>
1.the dom 'Same as shipping address' isn't inside 'form2',it should between 'form1' and 'form2',like this,'....'same as shipping adress''.otherwise ,u can not toggle show the content.
2. add onChange event on the 'same as shipping address' checkbox, if the value is checked,u can add class on the '' ,the class content is 'display:none'

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