save button disable when all field empty using angular js

save button disable when all field empty using angular js - javascript

When the user did not enter any values, I need to disable my save button.
<form name="user">
<p>User Name </p>
<input type="text" ng-model="user.username"/>
<p>City </p>
<input type="text" ng-model="user.city"/>
<p>Job </p>
<input type="text" ng-model="user.job"/>
<p>Auth Level</p>
<select ng-model="user.level">
<option value="">--Select--</option>
<option value="1"> Level 01</option>
<option value="2"> Level 02</option>
<option value="3"> Level 03</option>
</select>
<a href=""
class="btn btn-primary btn-flat"
ng-click="saveUser(user)"
ng-disabled="">
Save
</a>
</form>
If all form fields empty, i need to disable save button. How I do this

Try this:
<form name="user">
<p>User Name </p>
<input type="text" ng-model="user.username" />
<p>City </p>
<input type="text" ng-model="user.city" />
<p>Job </p>
<input type="text" ng-model="user.job" />
<p>Auth Level</p>
<select ng-model="user.level">
<option value="">--Select--</option>
<option value="1"> Level 01</option>
<option value="2"> Level 02</option>
<option value="3"> Level 03</option>
</select>
<button
class="btn btn-primary btn-flat"
ng-click="saveUser(user)"
ng-disabled="!user.username &&
!user.city &&
!user.job"
>
Save
</button>
</form>

Related

Radio Button's not changing form in Javascript

We have a form on our site (ex. T-Shirt) that changes based on which radio button you select. I wrote a JS function that pairs the mobile dropdown and desktop radio buttons. While visually everything works, the add to cart functionality only works on desktop and not on mobile.
When I ran the forms through a diffchecker, what I noticed was the only lines that changed were the price displayed and the value of the <input type="hidden" name="variation_id" class="variation_id">.
Currently the dropdown adds the attr of checked to the corresponding radio button, which works for display purposes, but I'm learned the form doesn't actually care whether or not the radio button is checked.
I'm not sure what the form is looking for. I've tried passing a click() to the radio input and its also label. I even tried manually changing the .variation_id from say 652 to 653. But nothing changed. The form didn't process.
Are there attributes that JS looks for in a radio button that you can't see in the markup?
Here's a form with one option selected:
<div class="av-woo-purchase-button avia-builder-el-16 el_after_av_hr avia-builder-el-last "><p class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>25.00</span></p>
<form class="variations_form cart" method="post" enctype="multipart/form-data" data-product_id="651" data-product_variations="[{"attributes":{"attribute_size":"Extra Large"},"availability_html":"<p class=\"stock in-stock\">In stock<\/p>\n","backorders_allowed":false,"dimensions":"N\/A","dimensions_html":"N\/A","display_price":25,"display_regular_price":25,"image":{"title":"Madcap-VNeckTee-Grid-Retina","caption":"","url":"https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina.png","alt":"Madcap-VNeckTee-Grid-Retina","src":"https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-450x431.png","srcset":"https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-450x431.png 450w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-300x288.png 300w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-768x736.png 768w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-505x484.png 505w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina.png 960w","sizes":"(max-width: 450px) 100vw, 450px","full_src":"https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina.png","full_src_w":960,"full_src_h":920,"thumb_src":"https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-120x120.png","thumb_src_w":120,"thumb_src_h":120,"src_w":450,"src_h":431},"image_id":"5823","is_downloadable":false,"is_in_stock":true,"is_purchasable":true,"is_sold_individually":"no","is_virtual":false,"max_qty":"","min_qty":1,"price_html":"","sku":"","variation_description":"","variation_id":652,"variation_is_active":true,"variation_is_visible":true,"weight":".3 lbs","weight_html":".3 lbs","step":1,"input_value":1},{"attributes":{"attribute_size":"Large"},"availability_html":"<p class=\"stock in-stock\">In stock<\/p>\n","backorders_allowed":false,"dimensions":"N\/A","dimensions_html":"N\/A","display_price":25,"display_regular_price":25,"image":{"title":"Madcap-VNeckTee-Grid-Retina","caption":"","url":"https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina.png","alt":"Madcap-VNeckTee-Grid-Retina","src":"https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-450x431.png","srcset":"https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-450x431.png 450w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-300x288.png 300w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-768x736.png 768w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-505x484.png 505w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina.png 960w","sizes":"(max-width: 450px) 100vw, 450px","full_src":"https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina.png","full_src_w":960,"full_src_h":920,"thumb_src":"https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-120x120.png","thumb_src_w":120,"thumb_src_h":120,"src_w":450,"src_h":431},"image_id":"5823","is_downloadable":false,"is_in_stock":true,"is_purchasable":true,"is_sold_individually":"no","is_virtual":false,"max_qty":"","min_qty":1,"price_html":"","sku":"","variation_description":"","variation_id":653,"variation_is_active":true,"variation_is_visible":true,"weight":".3 lbs","weight_html":".3 lbs","step":1,"input_value":1}]" current-image="5823">
<table class="variations" cellspacing="0">
<tbody>
<tr>
<td class="label"><label for="size">Size</label></td>
<td class="value">
<div class="desktop-only" id="radio"><div><input type="radio" name="attribute_size" value="Small" id="size_v_Small" disabled="disabled"><label for="size_v_Small">Small</label><input type="hidden" name="radio_variation_id" value="655"><input type="hidden" class="add-to-cart-url" value="https://madcapcoffee.com/?add-to-cart=651&variation_id=655&attribute_size=Small"></div><div><input type="radio" name="attribute_size" value="Medium" id="size_v_Medium" disabled="disabled"><label for="size_v_Medium">Medium</label><input type="hidden" name="radio_variation_id" value="654"><input type="hidden" class="add-to-cart-url" value="https://madcapcoffee.com/?add-to-cart=651&variation_id=654&attribute_size=Medium"></div><div><input type="radio" name="attribute_size" value="Large" id="size_v_Large" checked="checked"><label for="size_v_Large">Large</label><input type="hidden" name="radio_variation_id" value="653"><input type="hidden" class="add-to-cart-url" value="https://madcapcoffee.com/?add-to-cart=651&variation_id=653&attribute_size=Large"></div><div><input type="radio" name="attribute_size" value="Extra Large" id="size_v_Extra Large"><label for="size_v_Extra Large">Extra Large</label><input type="hidden" name="radio_variation_id" value="652"><input type="hidden" class="add-to-cart-url" value="https://madcapcoffee.com/?add-to-cart=651&variation_id=652&attribute_size=Extra+Large"></div></div><a class="reset_variations" href="#">Clear</a> </td>
</tr>
</tbody>
<div class="mobile-only" id="drop"><select id="size"><option>Small</option><option>Medium</option><option>Large</option><option>Extra Large</option></select></div></table>
<div class="single_variation_wrap">
<div class="woocommerce-variation single_variation" style="">
<div class="woocommerce-variation-description">
</div>
<div class="woocommerce-variation-price">
</div>
<div class="woocommerce-variation-availability">
<p class="stock in-stock">In stock</p>
</div>
</div><div class="woocommerce-variation-add-to-cart variations_button woocommerce-variation-add-to-cart-enabled">
<div class="quantity_select" style="float: left;">
<select name="quantity" class="qty" title="Qantity">
<option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div> <button type="submit" class="single_add_to_cart_button button alt">Add to cart</button>
<input type="hidden" name="add-to-cart" value="651">
<input type="hidden" name="product_id" value="651">
<input type="hidden" name="variation_id" class="variation_id" value="653">
</div>
</div>
</form>
</div>
Here's the same form with another option selected:
<div class="av-woo-purchase-button avia-builder-el-16 el_after_av_hr avia-builder-el-last "><p class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>25.00</span></p>
<form class="variations_form cart" method="post" enctype="multipart/form-data" data-product_id="651" data-product_variations="[{"attributes":{"attribute_size":"Extra Large"},"availability_html":"<p class=\"stock in-stock\">In stock<\/p>\n","backorders_allowed":false,"dimensions":"N\/A","dimensions_html":"N\/A","display_price":25,"display_regular_price":25,"image":{"title":"Madcap-VNeckTee-Grid-Retina","caption":"","url":"https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina.png","alt":"Madcap-VNeckTee-Grid-Retina","src":"https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-450x431.png","srcset":"https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-450x431.png 450w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-300x288.png 300w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-768x736.png 768w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-505x484.png 505w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina.png 960w","sizes":"(max-width: 450px) 100vw, 450px","full_src":"https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina.png","full_src_w":960,"full_src_h":920,"thumb_src":"https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-120x120.png","thumb_src_w":120,"thumb_src_h":120,"src_w":450,"src_h":431},"image_id":"5823","is_downloadable":false,"is_in_stock":true,"is_purchasable":true,"is_sold_individually":"no","is_virtual":false,"max_qty":"","min_qty":1,"price_html":"","sku":"","variation_description":"","variation_id":652,"variation_is_active":true,"variation_is_visible":true,"weight":".3 lbs","weight_html":".3 lbs","step":1,"input_value":1},{"attributes":{"attribute_size":"Large"},"availability_html":"<p class=\"stock in-stock\">In stock<\/p>\n","backorders_allowed":false,"dimensions":"N\/A","dimensions_html":"N\/A","display_price":25,"display_regular_price":25,"image":{"title":"Madcap-VNeckTee-Grid-Retina","caption":"","url":"https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina.png","alt":"Madcap-VNeckTee-Grid-Retina","src":"https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-450x431.png","srcset":"https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-450x431.png 450w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-300x288.png 300w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-768x736.png 768w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-505x484.png 505w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina.png 960w","sizes":"(max-width: 450px) 100vw, 450px","full_src":"https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina.png","full_src_w":960,"full_src_h":920,"thumb_src":"https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-120x120.png","thumb_src_w":120,"thumb_src_h":120,"src_w":450,"src_h":431},"image_id":"5823","is_downloadable":false,"is_in_stock":true,"is_purchasable":true,"is_sold_individually":"no","is_virtual":false,"max_qty":"","min_qty":1,"price_html":"","sku":"","variation_description":"","variation_id":653,"variation_is_active":true,"variation_is_visible":true,"weight":".3 lbs","weight_html":".3 lbs","step":1,"input_value":1}]" current-image="5823">
<table class="variations" cellspacing="0">
<tbody>
<tr>
<td class="label"><label for="size">Size</label></td>
<td class="value">
<div class="desktop-only" id="radio"><div><input type="radio" name="attribute_size" value="Small" id="size_v_Small" disabled="disabled"><label for="size_v_Small">Small</label><input type="hidden" name="radio_variation_id" value="655"><input type="hidden" class="add-to-cart-url" value="https://madcapcoffee.com/?add-to-cart=651&variation_id=655&attribute_size=Small"></div><div><input type="radio" name="attribute_size" value="Medium" id="size_v_Medium" disabled="disabled"><label for="size_v_Medium">Medium</label><input type="hidden" name="radio_variation_id" value="654"><input type="hidden" class="add-to-cart-url" value="https://madcapcoffee.com/?add-to-cart=651&variation_id=654&attribute_size=Medium"></div><div><input type="radio" name="attribute_size" value="Large" id="size_v_Large" checked="checked"><label for="size_v_Large">Large</label><input type="hidden" name="radio_variation_id" value="653"><input type="hidden" class="add-to-cart-url" value="https://madcapcoffee.com/?add-to-cart=651&variation_id=653&attribute_size=Large"></div><div><input type="radio" name="attribute_size" value="Extra Large" id="size_v_Extra Large"><label for="size_v_Extra Large">Extra Large</label><input type="hidden" name="radio_variation_id" value="652"><input type="hidden" class="add-to-cart-url" value="https://madcapcoffee.com/?add-to-cart=651&variation_id=652&attribute_size=Extra+Large"></div></div><a class="reset_variations" href="#" style="visibility: visible; display: inline;">Clear</a> </td>
</tr>
</tbody>
<div class="mobile-only" id="drop"><select id="size"><option>Small</option><option>Medium</option><option>Large</option><option>Extra Large</option></select></div></table>
<div class="single_variation_wrap">
<div class="woocommerce-variation single_variation" style="">
<div class="woocommerce-variation-description">
</div>
<div class="woocommerce-variation-price">
</div>
<div class="woocommerce-variation-availability">
<p class="stock in-stock">In stock</p>
</div>
</div><div class="woocommerce-variation-add-to-cart variations_button woocommerce-variation-add-to-cart-enabled">
<div class="quantity_select" style="float: left;">
<select name="quantity" class="qty" title="Qantity">
<option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div> <button type="submit" class="single_add_to_cart_button button alt">Add to cart</button>
<input type="hidden" name="add-to-cart" value="651">
<input type="hidden" name="product_id" value="651">
<input type="hidden" name="variation_id" class="variation_id" value="652">
</div>
</div>
</form>
</div>

Because clicking on the radio input whose .val() matches the selected option's .text(), I just passed a .click() from the option to its matching radio button.

Reset after ajax call in web2py

How to reset the section of form after an ajax call ?
My code:
<div id="new2"> <label>Information : </label> <br>
Target: <br> <input type = "text" name="target" id="x"> <br>
Aspects: <br> <input type = "text" name="aspect" id="y" > <br>
<label>Overall Sentiment :</label>
<select name ="overall_senti" id="def" >
<option value="">None</option>
<option value="Neutral">Neutral</option>
<option value="Positive">Positive</option>
<option value="Negative">Negative</option>
</select> <br>
<input type="button" onclick="ajax('{{=URL('default','create_new')}}',['target','aspect','overall_senti'],':eval')" ; document.getElementById('x').reset() value="submit1">
</div>

My form won't Submit - is this because I have a Div in the form?

I am trying to create a form which has a select input at the top, and when 2 of 3 options are selected the rest of the form appears to be filled in. This works, however the back and submit buttons don't work now. I can't figure out why this is, I am thinking that it might have something to do with not being allowed to have DIVs within a form, but I always thought you could?
My Code is below, any advice on how to get the submit and back button to work??
<div class="form">
Does the Claimant have a PAB/CAB? <br><br>
<select id="PABandCAB" required onchange="showDiv(this)">
<option value="select" disabled selected>Please Select</option>
<option value="Confirmed">Confirmed</option>
<option value="Confirmed">Potential</option>
<option value="NotRequired">Not Required</option>
</select> <br><br><br>
<form action="InternalRef4.html">
<div id="hidden_div">
<hr> <br>
Title:
<select name="title"required>
<option value="Miss">Miss</option>
<option value="Ms">Ms</option>
<option value="Mrs">Mrs</option>
<option value="Mr">Mr</option>
<option value="Dr">Dr</option>
</select> <br><br>
First Name:
<input type="text" name="fname"required><br> <br>
Surname:
<input type="text" name="sname"required><br> <br>
Address:
<select name="Address"required>
<option value="Same">Same As Claimant</option>
<option value="other">Other</option>
</select><br> <br>
Representative Address Line 1:
<input type="text" name="HALine1"><br> <br>
Representative Address Line 2:
<input type="text" name="HALine2"><br> <br>
Representative Address Town/City:
<input type="text" name="HATownorCity"><br> <br>
Representative Address County:
<input type="text" name="HACounty"><br> <br>
Representative Address Post Code:
<input type="text" name="HAPostCode"><br> <br>
National Insurance Number:
<input type="text" name="NINO"><br><br>
Date of Birth:
<input type="date" name="DOB"><br><br>
Contact Number - Home:
<input type="text" name="ContactNumHome"><br> <br>
Contact Number - Mobile:
<input type="text" name="ContactNumMobile"><br> <br>
Contact Number - Other:
<input type="text" name="ContactNumOther"><br> <br>
Unacceptable Customer Behaviour (UCB): <br>
No <input type="radio" name="UCBNO" value="No" checked><br>
Yes <input type="radio" name="UCBYes" value="Yes"><br> <br>
</div>
<input type="button" value="Back"/>
<input type="submit">
</form>
</div>
<script>
var select = document.getElementById('PABandCAB'),
onChange = function(event) {
var shown = this.options[this.selectedIndex].value == "Confirmed";
document.getElementById('hidden_div').style.display = shown ? 'block' : 'none';
};
if (window.addEventListener) {
select.addEventListener('change', onChange, false);
} else {
select.attachEvent('onchange', function() {
onChange.apply(select, arguments);
});
}
</script>

Styling Dynamic Rows - Fluid

I have a small set of rows for a program i'm creating. Im trying to create a set of fields that a user can fill in, some time we need more rows than one so i created a javascript dynamically add row set.
I'm trying to style the fields for a fluid layout (between a pc and tablet). Im having difficulty getting them to work with both layout sizes. Secondly if i try to add headings (of some description) to the rows i can never get them to line up at all.
Any Suggestions? I have a link to some of my code here --> https://jsfiddle.net/c92qvuxe/
<div id="materials">
<!-- Start of Table -->
<form name="Add_Units" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">
<fieldset>
<div id="row">
<input name="Page_0" type="text" value=""/>
<input name="Weight_0" type="text" value=""/>
<select name="Finish_0">
<option value="Gloss">Gloss</option>
<option value="Silk">Silk</option>
<option value="Matt">Matt</option>
<option value="Offset">Offset</option>
<option value="NCR">NCR</option>
</select>
<input name="PaperName_0" type="text" value=""/>
<input name="Grain_0" type="text" value=""/>
<select name="Size_0">
<option value="SRA3">SRA3</option>
<option value="SRA2">SRA2</option>
<option value="SRA1">SRA1</option>
<option value="B2">B2</option>
<option value="B1">B1<option>
</select>
<input name="Supplier_0" type="text" value=""/>
<input name="Stock_0" type="checkbox" value="1"/>
<input name="SheetQty_0" type="text" value=""/>
</div>
<div id="newrow" style="display: none;">
<input name="Page_" type="text" value="" size="5" maxlength="55" />
<input name="Weight_" type="text" value="" size="10" maxlength="55" />
<select name="Finish_">
<option value="Gloss">Gloss</option>
<option value="Silk">Silk</option>
<option value="Matt">Matt</option>
<option value="Offset">Offset</option>
<option value="NCR">NCR</option>
</select>
<input name="PaperName_" type="text" value="" size="10" maxlength="55" />
<input name="Grain_" type="text" value="" size="10" maxlength="55" />
<select name="Size_">
<option value="SRA3">SRA3</option>
<option value="SRA2">SRA2</option>
<option value="SRA1">SRA1</option>
<option value="B2">B2</option>
<option value="B1">B1<option>
<input name="Supplier_" type="text" value="" size="10" maxlength="55" />
<input name="Stock_" type="checkbox" value="1" size="10" />
<input name="SheetQty_" type="text" value="" size="10" maxlength="55" />
</div>
<p>
<input type="button" id="add_row()" onclick="add_row()" value="Add Row" />
<!--<input type="submit" name="Add_Unit" value="Save Units" />-->
</p>
<p> </p>
</fieldset>
</form>
<br />

Why does this select form not work in Firefox?

I have a form on my site that uses Bootstrap 3. It works just fine in IE, Chrome and Safari but for some reason the drop down option element at the end of the form will not work in Firefox. I have tried on different operating systems. The selected option will not 'stay'in the drop down field. Can anyone give me a clue?
<!--------The signup form------->
<form name="signupform" id="signupform" onsubmit="return false;" class="form-signin">
<div class="form">
<div class="form-group">
<input id="username" type="text" class="form-control" onblur="checkusername()"
onkeyup="restrict('username')" maxlength="16" placeholder="Username">
<br>
<span id="unamestatus"></span>
<br>
<input id="email" type="text" class="form-control" placeholder="Email" onfocus="emptyElement('status')"
onkeyup="restrict('email')" maxlength="88">
<br>
<input id="pass1" type="password" class="form-control" placeholder="Create Password" onfocus="emptyElement('status')"
maxlength="100">
<br>
<input id="pass2" type="password" class="form-control" placeholder="Retype Password" onfocus="emptyElement('status')"
maxlength="100">
<br>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Choose the type of account you want">
<select id="accounttype" class="form-control" onfocus="emptyElement('status')"></a>
<option value="" disabled selected>
Choose Account Type
</option>
<option value="b">
I am an artist
</option>
<option value="a">
I am looking for artists
</option>
</select>
</br>
<br>
<button id="signupbtn" onclick="signup()" class="btn btn-success pull-right">
Create Account
</button>
<br>
<span id="status" style="color: white"></span>
</form>
<!--------End of form------->

You the opening of a select element nested inside an anchor (a) which is invalid markup.
You also have two missing closing div tags before the end of the form.
Also, disabled is not a valid attribute for an option tag.
Correctly formatting your code makes these errors easier to find
<form name="signupform" id="signupform" onsubmit="return false;" class="form-signin">
<div class="form">
<div class="form-group">
<input id="username" type="text" class="form-control" onblur="checkusername()"
onkeyup="restrict('username')" maxlength="16" placeholder="Username">
<br>
<span id="unamestatus"></span>
<br>
<input id="email" type="text" class="form-control" placeholder="Email" onfocus="emptyElement('status')"
onkeyup="restrict('email')" maxlength="88">
<br>
<input id="pass1" type="password" class="form-control" placeholder="Create Password" onfocus="emptyElement('status')"
maxlength="100">
<br>
<input id="pass2" type="password" class="form-control" placeholder="Retype Password" onfocus="emptyElement('status')"
maxlength="100">
<br>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Choose the type of account you want">
<select id="accounttype" class="form-control" onfocus="emptyElement('status')">
</a> <!-- ^^ select element inside anchor ^^ -->
<option value="" disabled selected> <!-- <-- disabled should be on select element, not option -->
Choose Account Type
</option>
<option value="b">
I am an artist
</option>
<option value="a">
I am looking for artists
</option>
</select>
</br>
<br>
<button id="signupbtn" onclick="signup()" class="btn btn-success pull-right">
Create Account
</button>
<br>
<span id="status" style="color: white"></span>
</div>
</div>
</form>

Im unsure what the <a> is for but it the cause of the specific problem, changing to below will make it work
<select id="accounttype" class="form-control" onfocus="emptyElement('status')">
<option value="" disabled selected>
Choose Account Type
</option>
<option value="b">
I am an artist
</option>
<option value="a">
I am looking for artists
</option>
</select>

We Keep Coding

JavaScript is the programming language of the Web.

save button disable when all field empty using angular js - javascript

Related

Radio Button's not changing form in Javascript

Reset after ajax call in web2py

My form won't Submit - is this because I have a Div in the form?

Styling Dynamic Rows - Fluid

Why does this select form not work in Firefox?

Categories

Resources