Input boxes not spaced when viewport is resized (bootstrap) - javascript

I'm currently creating a sign up form using bootstrap and I was making the first name and last name text boxes inline but when I resize the browser by compacting it, the display of both text boxes seem to stick? I've tried using inline-block and also margin but it'll affect the others too which would look odd. Here is an sample. (You'd have to zoom-out to see the effect.)
http://jsfiddle.net/5ghc1r18/6/
<div class="container">
<div class="wrapper">
<div class="row">
<div style="overflow:auto;width:90%" class="col-lg-10">
<form id="form" action="welcome.php" class="form-horizontal" method="POST">
<h1 class="text-center">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>Sign Up
</h1>
<div class="form-group">
<div class="col-lg-6">
<input id="firstname" type="text" placeholder="First Name" name="fname" class="form-control" pattern="[A-Z][a-zA-Z]*" required/>
</div>
<div class="col-lg-6">
<input id="lastname" type="text" placeholder="Last Name" name="lname" class="form-control" required/>
</div>
</div>
<div class="form-group">
<div class="col-lg-12">
<input type="email" placeholder="Email Address" name="email" class="form-control" required/>
</div>
</div>
<div class="form-group">
<div class="col-lg-12">
<input type="text" placeholder="Mobile" name="mobile" class="form-control" required/>
</div>
</div>
<div class="form-group">
<div class="col-lg-12">
<label for="day">Date of Birth:</label>
<div id="date1" class="datefield">
<input id="day" type="tel" onkeypress="return isNumberKey(event)" maxlength="2" placeholder="DD" />/
<input id="month" type="tel" onkeypress="return isNumberKey(event)" maxlength="2" placeholder="MM" />/
<input id="year" type="tel" onkeypress="return isNumberKey(event)" maxlength="4" placeholder="YYYY" />
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-12">
<select name="gender" class="form-control" required>
<option value="">Select one</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Others">I'm not sure</option>
</select>
</div>
</div>
<div class="form group">
<div style="width:100%">
<button type="submit" class="btn btn-success btn-block"> <i class="fa fa-plus"></i> Sign up!</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Thanks for the help!

The problem in your HTML is here
<div class="form-group">
<div class="col-lg-6">
put <div class="form-group"> inside the <div class="col-lg-6"> currently you are doing opposite.
e.g;
<div class="col-lg-6">
<div class="form-group">
<input id="firstname" type="text" placeholder="First Name" name="fname" class="form-control" pattern="[A-Z][a-zA-Z]*" required/>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<input id="lastname" type="text" placeholder="Last Name" name="lname" class="form-control" required/>
</div>
</div>

You can give margin to the input boxes:
input[type="text"] {
margin: 10px auto;
}

Related

Drop down menu in contact form behaving bizzarely

I cannot post the code snippet here on Stackoverflow as it hits well past the limit of 30,000 characters so I have added it to jsfiddle as an alternative:
https://jsfiddle.net/c0ffee/n9ct2zms/1/
<!--====== Form Section ======-->
<section class="blog-area p-t-130 p-b-130">
<div class="container-lg">
<div class="row justify-content-center">
<div class="col-xl-7 col-lg-8">
<div class="contact-form-area m-t-md-100">
<div class="common-heading tagline-boxed m-b-40">
<span class="tagline">Send Us Message</span>
<h2 class="title">Have Any Questions ? <br> Let’s Start to Talk</h2>
</div>
<div class="contact-form-v2">
<form>
<div class="input-field m-b-30">
<input type="text" id="firstName" placeholder="First Name" name="name" required="">
<label for="fullName">Required</label>
</div>
<div class="input-field m-b-30">
<input type="text" id="phoneNumber" placeholder="Phone Number" name="phone" required="">
<label for="phoneNumber">Required</label>
</div>
<div class="input-field m-b-30">
<input type="text" id="phoneNumber" placeholder="Phone Number" name="phone" required="">
<label for="phoneNumber">Business Name</label>
</div>
<div class="input-field m-b-30">
<input type="text" id="phoneNumber" placeholder="Phone Number" name="phone" required="">
<label for="phoneNumber">Phone Number</label>
</div>
<div class="input-field m-b-30">
<input type="email" id="emailAddress" placeholder="Email Address" name="email" required="">
<label for="emailAddress">Email</label>
</div>
<div class="input-field m-b-30">
<input type="text" id="subject" placeholder="I Would Like To Discuses " name="subject" required="">
<label for="subject">Subject</label>
</div>
<div class="input-field m-b-30">
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="input-field textarea-field m-b-30">
<textarea id="message" placeholder="Message" name="message"></textarea>
</div>
</div>
<div class="input-field">
<button type="submit" class="template-btn">Send Message <i class="fas fa-arrow-right"></i></button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<!--====== Form Section ======-->
The issue I am running into is that the dropdown menu doesn't list all the options and it seems like the options are hidden behind the other contact form elements and I am not sure why it is doing that.
Can anyone please take a look and advise as to what I am missing here?

How to Show/Hide the Div using Button

First, i wanted to automatically hide div part, then if i click the add guardian button. It will show the div part. Here's my code. Thankyou in Advance. Also i indicate my script here. Please check, thankyouuu!
<div align="right">
<button onClick="toggle_div_fun('guardian');" type="button" class="btn btn-icon btn-primary icon-left">Add Guardian<i class="fa fa-plus"></i></button>
</div>
<!-- Add Guardian -->
<div class="row" id="guardian">
<h4 class="title-well">Guardian</h4>
<div class="checkbox">
<label> <input id="chkGuardian" type="checkbox">DECEASED
</label>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianFirstName"><span
class="text-danger">*</span> First Name</label> <input
rv-value="applicant:personalInformation:guardianFirstName"
class="form-control input-lg" name="guardianFirstName" id="guardianFirstName"
data-validate="required" placeholder="Enter First Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianMiddleName"><span
class="text-danger">*</span> Middle Name</label> <input
class="form-control input-lg" name="guardianMiddleName"
rv-value="applicant:personalInformation:guardianMiddleName"
id="guardianMiddleName" data-validate="required"
placeholder="Enter Middle Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianLastName"><span
class="text-danger">*</span> Last Name</label> <input
rv-value="applicant:personalInformation:guardianLastName"
class="form-control input-lg" name="guardianLastName" id="guardianLastName"
data-validate="required" placeholder="Enter Last Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianNationality"><span
class="text-danger">*</span> Nationality</label> <input
rv-value="applicant:personalInformation:guardianNationality"
class="form-control input-lg" name="guardianNationality" id="guardianNationality"
data-validate="required" placeholder="Enter Nationality" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="dateOfBirth"><span
class="text-danger">*</span> Date of Birth</label>
<div class="input-group">
<input id="dateOfBirth" name="dateOfBirth"
rv-value="applicant:personalInformation:guardianDateOfBirth | date"
type="text" class="form-control input-lg datepicker" data-parsley-required="true" data-parsley-group="wizard-step-4">
<div class="input-group-addon">
<i class="entypo-calendar"></i>
</div>
</div>
</div>
</div>
<div id="guardianDeceased">
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianHomeNumber"><span
class="text-danger">*</span> Home Number</label> <input
rv-value="applicant:personalInformation:guardianHomeNumber"
class="form-control input-lg" name="guardianHomeNumber" id="guardianHomeNumber"
data-validate="required" placeholder="Enter Home Number" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianMobileNumber"><span
class="text-danger">*</span> Mobile Number</label> <input
rv-value="applicant:personalInformation:guardianMobileNumber"
class="form-control input-lg" name="guardianMobileNumber" id="guardianMobileNumber"
data-validate="required" placeholder="Enter Mobile Number" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="inputEmail" class="control-label"><span
class="text-danger">*</span>Email</label> <input
rv-value="applicant:personalInformation:guardianEmailAddress"
type="email" class="form-control input-lg" name="inputEmail" id="inputEmail"
placeholder="Email" data-validate="required" data-parsley-required="true" data-parsley-group="wizard-step-4">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="checkbox col-sm-12">
<label> <input id="guardianCurrentAddress" type="checkbox">Address same as Current Address
</label>
</div>
</div>
</div>
<div id="guardianAdd">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="guardianStreetAddress"><span
class="text-danger">*</span> Street Address</label> <input
rv-value="applicant:personalInformation:guardianStreetAddress"
class="form-control input-lg" name="guardianStreetAddress" id="guardianStreetAddress"
data-validate="required" placeholder="Enter Street Address" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianCity">City</label>
<select
rv-value="applicant:personalInformation:permanentAddress:guardianCity"
type="text" class="form-control input-lg ref-city" name="guardianCity"
id="guardianCity" data-validate="required">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianProvince">Province</label>
<select
rv-value="applicant:personalInformation:permanentAddress:guardianProvince"
type="text" id="guardianCity" name="guardianCity"
class="form-control input-lg ref-province">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianCountry"><span class="text-danger">*</span>Country</label>
<select
rv-value="applicant:personalInformation:guardianCountry"
name="guardianCountry" class="form-control input-lg ref-country"
id="guardianCountry">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianPostalCode"><span class="text-danger">*</span>Zip Code</label>
<input class="form-control input-lg"
rv-value="applicant:personalInformation:guardianPostalCode"
name="guardianPostalCode" id="guardianPostalCode"
data-validate="required" placeholder="Zip Code" />
</div>
</div>
</div>
</div>
<!-- End Guardian -->
<script type="text/javascript">
function toggle_div_fun(id){
var divelement = document.getElementById(id);
if(divelement.style.display == 'none')
divelement.style.display == 'block';
else
divelement.style.display == 'none';
}
</script>
Since you're using Bootstrap, just use the collapse component..
<div align="right">
<button data-toggle="collapse" data-target="#guardian" type="button" class="btn btn-icon btn-primary icon-left">Add Guardian<i class="fa fa-plus"></i></button>
</div>
<!-- Add Guardian -->
<div class="row collapse" id="guardian">
...
Demo: http://www.codeply.com/go/0jvcrckYOL
A tiny error in your code, you had == where you need a single =
if(divelement.style.display == 'none')
divelement.style.display = 'block';
else
divelement.style.display = 'none';
function toggle_div_fun(id){
var divelement = document.getElementById(id);
if(divelement.style.visibility == 'hidden')
divelement.style.visibility = 'visible';
else
divelement.style.visibility = 'hidden';
}
<div align="right">
<button onClick="toggle_div_fun('guardian');" type="button" class="btn btn-icon btn-primary icon-left">Add Guardian<i class="fa fa-plus"></i></button>
</div>
<!-- Add Guardian -->
<div class="row" id="guardian">
<h4 class="title-well">Guardian</h4>
<div class="checkbox">
<label> <input id="chkGuardian" type="checkbox">DECEASED
</label>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianFirstName"><span
class="text-danger">*</span> First Name</label> <input
rv-value="applicant:personalInformation:guardianFirstName"
class="form-control input-lg" name="guardianFirstName" id="guardianFirstName"
data-validate="required" placeholder="Enter First Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianMiddleName"><span
class="text-danger">*</span> Middle Name</label> <input
class="form-control input-lg" name="guardianMiddleName"
rv-value="applicant:personalInformation:guardianMiddleName"
id="guardianMiddleName" data-validate="required"
placeholder="Enter Middle Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianLastName"><span
class="text-danger">*</span> Last Name</label> <input
rv-value="applicant:personalInformation:guardianLastName"
class="form-control input-lg" name="guardianLastName" id="guardianLastName"
data-validate="required" placeholder="Enter Last Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianNationality"><span
class="text-danger">*</span> Nationality</label> <input
rv-value="applicant:personalInformation:guardianNationality"
class="form-control input-lg" name="guardianNationality" id="guardianNationality"
data-validate="required" placeholder="Enter Nationality" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="dateOfBirth"><span
class="text-danger">*</span> Date of Birth</label>
<div class="input-group">
<input id="dateOfBirth" name="dateOfBirth"
rv-value="applicant:personalInformation:guardianDateOfBirth | date"
type="text" class="form-control input-lg datepicker" data-parsley-required="true" data-parsley-group="wizard-step-4">
<div class="input-group-addon">
<i class="entypo-calendar"></i>
</div>
</div>
</div>
</div>
<div id="guardianDeceased">
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianHomeNumber"><span
class="text-danger">*</span> Home Number</label> <input
rv-value="applicant:personalInformation:guardianHomeNumber"
class="form-control input-lg" name="guardianHomeNumber" id="guardianHomeNumber"
data-validate="required" placeholder="Enter Home Number" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianMobileNumber"><span
class="text-danger">*</span> Mobile Number</label> <input
rv-value="applicant:personalInformation:guardianMobileNumber"
class="form-control input-lg" name="guardianMobileNumber" id="guardianMobileNumber"
data-validate="required" placeholder="Enter Mobile Number" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="inputEmail" class="control-label"><span
class="text-danger">*</span>Email</label> <input
rv-value="applicant:personalInformation:guardianEmailAddress"
type="email" class="form-control input-lg" name="inputEmail" id="inputEmail"
placeholder="Email" data-validate="required" data-parsley-required="true" data-parsley-group="wizard-step-4">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="checkbox col-sm-12">
<label> <input id="guardianCurrentAddress" type="checkbox">Address same as Current Address
</label>
</div>
</div>
</div>
<div id="guardianAdd">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="guardianStreetAddress"><span
class="text-danger">*</span> Street Address</label> <input
rv-value="applicant:personalInformation:guardianStreetAddress"
class="form-control input-lg" name="guardianStreetAddress" id="guardianStreetAddress"
data-validate="required" placeholder="Enter Street Address" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianCity">City</label>
<select
rv-value="applicant:personalInformation:permanentAddress:guardianCity"
type="text" class="form-control input-lg ref-city" name="guardianCity"
id="guardianCity" data-validate="required">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianProvince">Province</label>
<select
rv-value="applicant:personalInformation:permanentAddress:guardianProvince"
type="text" id="guardianCity" name="guardianCity"
class="form-control input-lg ref-province">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianCountry"><span class="text-danger">*</span>Country</label>
<select
rv-value="applicant:personalInformation:guardianCountry"
name="guardianCountry" class="form-control input-lg ref-country"
id="guardianCountry">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianPostalCode"><span class="text-danger">*</span>Zip Code</label>
<input class="form-control input-lg"
rv-value="applicant:personalInformation:guardianPostalCode"
name="guardianPostalCode" id="guardianPostalCode"
data-validate="required" placeholder="Zip Code" />
</div>
</div>
</div>
</div>
<!-- End Guardian -->
here I'm giving you the short demo. prefer below is your example. where you have to toggle DIV with class " Your_Class ".
HTML
<div class="Your_Class">
"Your Content"
</div>
<button onClick="toggle_div_fun('guardian');" type="button" class="btn btn-icon btn-primary icon-left">Add Guardian<i class="fa fa-plus"></i></button>
CSS
.Your_Class { display:none;}
.Your_Class.active { display:block;}
JS
$(".btn-primary").click(function(){
if($(".Your_Class").hasClass('active')) {
$(this).removeClass('active');
}
else
{
$(this).addClass('active');
}
});

Form validation is not working properly when clicking submit button?

For the 1st code while clicking submit button without filling any text it is showing as "Please fill out this field".
For the 2nd code it is not showing or submitting code while clicking submit button. I need submit button to show "Please fill out this field" while clicking on it.
<!------------------1st html code------------>
<html>
<body>
<section id="contact-page">
<div class="container">
<div class="center" style="padding-top: 100px; border-bottom-width: 10px;padding-bottom: 50px;">
<h2>Drop Your Message</h2>
<p class="lead"><b><em>Education is the most powerful weapon we can use to change the world</em></b></p>
</div>
<div class="row contact-wrap" style="margin-top:00px;">
<form action="sendemail.php" data-ajax="false" method="post" class="form">
<div class="col-sm-5 col-sm-offset-1">
<div class="form-group">
<label for="Name">Name *</label>
<input type="text" id="Name" name="name" class="form-control" required="required" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="Email">Email *</label>
<input type="email" id="Email" name="email" class="form-control" required="required" placeholder="Enter email-id">
</div>
<div class="form-group">
<label for="phone">Phone *</label>
<input type="tel" id="phone" name="phone" pattern="^\d{4}\d{3}\d{3}$" class="form-control" required="required" placeholder="Enter number">
</div>
<div class="form-group">
<label for="Subject">Subject *</label>
<input type="text" id="Subject" name="subject" class="form-control" required="required" placeholder="Enter subject">
</div>
</div>
<div class="col-sm-5">
<div class="form-group">
<label for="Message">Message *</label>
<textarea name="message" id="Message" name="Message" required="required" class="form-control" rows="9" placeholder="Enter message"></textarea>
</div>
<div class="form-group">
<button type="submit" name="submit" class="btn btn-primary btn-lg" required="required">Submit Message</button>
</div>
</div>
</form>
</div>
<!--/.row-->
</div>
<!--/.container-->
</section>
<!--/#contact-page-->
</body>
</html>
<!-----------------------------------1st code completed------------>
<!---------------------2nd html code--------->
<html>
<body>
<div class="row">
<div class="col-sm-8">
<div class="contact-form">
<h2 class="title text-center">Get In Touch</h2>
<div class="status alert alert-success" style="display: none"></div>
<form id="main-contact-form" class="contact-form row" name="Enquiry-form" method="post" action="sendemail.php" data-ajax="false" style="margin-bottom: 0px;">
<div class="form-group col-md-6" style="padding-left: 30px;">
<input type="text" name="Name" id="Name" class="form-control" placeholder="Name" required="required">
</div>
<div class="form-group col-md-6">
<input type="tel" pattern="^\d{4}\d{3}\d{3}$" id="phone" name="phone" class="form-control" required="required" placeholder="Contact Number" style="width: 387px;">
</div>
<div class="form-group col-md-12">
<form name="myform" action="">
<input type="radio" id="radiobutton1" value="text1" style="margin-left: 15px; margin-right: 5px;" />
<input type="text" id="profession1" enabled="enabled" placeholder="Category of the Business if Self-employ" style="margin-left: 15px; width: 349px;" />
<input type="radio" id="radiobutton2" value="text2" style="margin-left: 30px;margin-right: 5px;" />
<input type="text" id="profession2" disabled="disabled" placeholder="Company name if Employee" style="margin-left: 15px; width: 345px;" />
</form>
</div>
<script>
var radiobutton1 = document.getElementById('radiobutton1');
var radiobutton2 = document.getElementById('radiobutton2');
radiobutton1.onchange = function() {
radiobutton2.checked = !this.checked;
document.getElementById('profession1').disabled = !this.checked;
document.getElementById('profession2').disabled = this.checked;
};
document.getElementById('radiobutton2').onchange = function() {
radiobutton1.checked = !this.checked;
document.getElementById('profession2').disabled = !this.checked;
document.getElementById('profession1').disabled = this.checked;
};
</script>
<div class="form-group col-md-4" style="width: 236px;">
<input type="text" name="productid" id="productid" class="form-control" required="required" placeholder="Product Id" style="width: 236px;">
</div>
<div class="form-group col-md-4" style="width: 269px; padding-left: 45px;">
<input list="Category" id="producttype " name="producttype" class="form-control" required="required" placeholder="Product Type" style="width: 269px;">
<datalist id="Category">
<option value="Consumer Products">
<option value="Cosmetics">
<option value="Food Products">
<option value="Energy Drinks">
</datalist>
</div>
<div class="form-group col-md-4" style="width: 236px; padding-left: 73px;">
<input type="text" name="Productquantity" id="Productquantity" class="form-control" required="required" placeholder="Product Quantity" style="width: 236px;">
</div>
<div class="form-group col-md-6">
<input type="email" name="Email" id="Email" class="form-control" required="required" placeholder="Email">
<br>
<textarea name="Message" id="Message" required="required" class="form-control" rows="5" placeholder="Comment Here" style="height: 114px;"></textarea>
</div>
<div class="form-group col-md-6" style="height: 144px;">
<textarea name="Shippingaddress" id="Shippingaddress" class="form-control" rows="5" placeholder="Shipping Address" required="required" style="height: 179px;"></textarea>
</div>
<div class="form-group col-md-12" style="padding-right: 0px; padding-left: 330px;">
<button type="submit" name="submit" class="btn btn-primary btn-lg" style="padding-left: 25px;" required="required">Submit Message</button>
</div>
</form>
</div>
</div>
</body>
</html>
<!-----------------------------------2nd html code completed----------->
Here in the 2nd example you are using nested form.Try removing the nested form and It will work

Angular Select ng-model doesnt bind to scope

I have the following form:
<form role="form" class="form-validation" ng-submit="profilCtrl.saveProfile()">
<div class="form-group">
<label class="control-label">Fornavn</label>
<input type="text" placeholder="John Hansen" class="form-control" ng-model="profile.firstname" name="name" value="{{profilCtrl.profile.firstname}}" required>
</div>
<div class="form-group">
<label class="control-label">Efternavn</label>
<input type="text" placeholder="John Hansen" class="form-control" ng-model="profile.lastname" name="name" value="{{profilCtrl.profile.lastname}}" required>
</div>
<div class="form-group">
<label class="control-label">Addresse</label>
<input type="text" placeholder="Mosebakken 12 2830 virum" class="form-control" ng-model="profile.address" name="address" value="{{profilCtrl.profile.address}}" required>
</div>
<div class="form-group">
<label class="control-label">Jobprofil</label>
<select class="form-control" ng-model="selectedTitle" ng-options="item as item.name for item in titles"></select>
</div>
<div class="form-group">
<label class="control-label">Telefon Number</label>
<input type="text" placeholder="12345678" class="form-control" name="phone" value="{{profilCtrl.profile.phone}}" required ng-model="profile.phone">
</div>
<div class="form-group">
<label class="control-label">Afdeling</label>
<select class="form-control" ng-model="selectedDivision" ng-options="division as division.name for division in divisions" required>
</select>
</div>
<div class="form-group">
<label class="control-label">Fødselsdag</label>
<input type="text" placeholder="04-04-1989" class="form-control" name="cpr" ng-model="profile.cpr" value="{{profilCtrl.profile.cpr}}" required>
</div>
<div class="form-group">
<label class="control-label">Vigtig information</label>
<textarea class="form-control" rows="3" placeholder="Dette er vigtigt for min leder at vide!" name="info" ng-model="profile.description">{{profile.description}}</textarea>
</div>
<div class="margiv-top-10">
<button type="submit" href="#" class="btn green-haze">
<i class="fa fa-check"></i>
</button>
</div>
</form>
Everything in this form works expect the two selects:
<select class="form-control" ng-model="selectedTitle" ng-options="item as item.name for item in titles"></select>
And:
<select class="form-control" ng-model="selectedDivision" ng-options="division as division.name for division in divisions" required>
Unlike the others are these not linked to the profile object and should instead be saved in $scope.selectedTitle and $scope.selectedDivision
However once i submit the form both of these are undefined.
Can anyone tell me why this might be happening

Multiple required fields in angular JS

I have a new profile form that has multiple required fields, email, password and confirm password. The submit button is set to be disabled if the form is in invalid state. I believe that form should remain in invalid state until user has filled in all the required fields. To my surprise, angular checks my first field only. If it is alone in valid state, submit button gets activated, regardless of states of other fields. I am using angular 1.0.7. What is the reason behind this behavior ?
<form name='newProfileForm' ng-submit="formSubmit(newProfileForm.$valid)" novalidate>
<fieldset>
<legend>Login Information</legend>
</fieldset>
<!-- NAME -->
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="user.mail" required>
<p ng-show="newProfileForm.email.$invalid && newProfileForm.email.$dirty">Please enter valid email.</p>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" name="pass" required/>
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" class="form-control" required/>
</div>
<fieldset>
<legend>Personal Details</legend>
</fieldset>
<div class="form-group">
<label>Title</label>
<select class="span3">
</select>
</div>
<div class="form-group">
<label>First Name</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label>Contact Number</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label>Date of Birth</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label>Address</label>
<textarea rows="3"></textarea>
</div>
<div class="form-group">
<label>Country</label>
<select class="span3">
</select>
</div>
<div class="form-group">
<label>State</label>
<select class="span3">
</select>
</div>
<div class="form-group">
<label>City</label>
<select class="span3">
</select>
</div>
<div class="form-group">
<label>Pin Code</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label>Gender</label>
<select class="span3">
<option label="Male" value="Male"/>
<option label="Female" value="Female"/>
</select>
</div>
<div class="form-group">
<label>Field of Interest</label>
<input type="text" class="form-control"/>
</div>
<!-- SUBMIT BUTTON -->
<button type="submit" class="btn btn-primary" ng-disabled="newProfileForm.$invalid">Submit</button>
</form>
You forgot to give ng-model to your password and confirm password field. Do it like
<input type="password" class="form-control" name="pass" ng-model="pass" required/>
<input type="password" class="form-control" name="confirmpass" ng-model="confirmpass" required/>

Categories