We Keep Coding

save button disable when all field empty using angular js

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>

get a item ID by its child (vanilla JS)

I want to check if a form has an option CAD (in 7th level), if it has, then get the form id.
// first level
<form id="15" method="post" action="/open a new page" target="_blank">
//second level- 1
<div>
<input type="hidden" id="CHECK" name="CHECK">
</div>
//secode leve - 2
<table cellpadding="0" cellspacing="0" border="0" width="100%">
// 3rd level
<tbody>
//4th level
<tr>
// 5th level
<td>
<input type="hidden" name="name" value="Frank">
<input type="hidden" name="identifier" value="12345">
<input type="hidden" name="code" value="299 ">
<input type="hidden" name="type" value="060201">
<input type="hidden" name="claim" value="4567">
<input type="hidden" name="departement" value="IT">
<input type="hidden" name="city" value="S25">
<input type="hidden" name="num" value="28936">
<input type="hidden" name="typeClient" value="2">
<input type="hidden" name="numTel" value="4444">
<input type="hidden" name="prod" value="MMM">
<input type="hidden" name="label" value="doc">
//6th level
<select name="docToSeize" style="width:150px" class="form1">
// 7th levle
<option value="11">RAP </option>
<option value="12">CAD </option>
<option value="18">GGO</option>
<option value="1A">HYU</option>
</select>
</td>
<td valign="top">
<input type="submit" class="boutonbleuok" style="cursor: hand" value="ok" onclick="label">
</td>
</tr>
</tbody>
</table>
</form>

You can use the function querySelectorAll to get the options and the function closest to find the parent form.
Array.prototype.forEach.call(document.querySelectorAll('[name="docToSeize"] option'), function(opt) {
if (opt.textContent.trim() === 'CAD') {
console.log(opt.closest('form').getAttribute('id'));
return;
}
});
form {
display: none
}
<form id="15" method="post" action="/open a new page" target="_blank">
//second level- 1
<div>
<input type="hidden" id="CHECK" name="CHECK">
</div>
//secode leve - 2
<table cellpadding="0" cellspacing="0" border="0" width="100%">
// 3rd level
<tbody>
//4th level
<tr>
// 5th level
<td>
<input type="hidden" name="name" value="Frank">
<input type="hidden" name="identifier" value="12345">
<input type="hidden" name="code" value="299 ">
<input type="hidden" name="type" value="060201">
<input type="hidden" name="claim" value="4567">
<input type="hidden" name="departement" value="IT">
<input type="hidden" name="city" value="S25">
<input type="hidden" name="num" value="28936">
<input type="hidden" name="typeClient" value="2">
<input type="hidden" name="numTel" value="4444">
<input type="hidden" name="prod" value="MMM">
<input type="hidden" name="label" value="doc"> //6th level
<select name="docToSeize" style="width:150px" class="form1">
// 7th levle
<option value="11">RAP </option>
<option value="12">CAD </option>
<option value="18">GGO</option>
<option value="1A">HYU</option>
</select>
</td>
<td valign="top">
<input type="submit" class="boutonbleuok" style="cursor: hand" value="ok" onclick="label">
</td>
</tr>
</tbody>
</table>
</form>

Select the form, then select the options inside it and iterate over them.
const form = document.querySelector('form');
const options = [...form.querySelector('select[name=docToSeize]').children];
if (options.some(option => option.textContent.trim() === 'CAD')) console.log(form.id);
<form id="15" method="post" action="/open a new page" target="_blank">
<select name="docToSeize" style="width:150px" class="form1">
<option value="11">RAP </option>
<option value="12">CAD </option>
<option value="18">GGO</option>
<option value="1A">HYU</option>
</select>
</form>

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 />

What's the issue in getting the values from dynamically appended table row fields in post array after submitting the form?

I've an HTML form. This form is containing HTML table. The actual HTML table is very large. For your reference I'm showing below the HTML code of a form with table containing only two rows:
<form action="rebates.php" role="form" method="post">
<div style="margin-left: 12px" class="col-xs-4">
<div class="form-group">
<label for="company_name" class="col-lg-4">Manufacturer </label>
<div class="col-lg-7">
<select id="company_name" name="company_name" class="form-control">
<option value="" selected='selected'>Select Manufacturer</option>
<option value="33" >Eywa Solutions</option>
<option value="37" >Amazon</option>
<option value="40" >Test</option>
<option value="42" >RK</option>
<option value="46" >Santa Margherita</option>
</select>
</div>
</div>
</div>
<div style="margin-left: -61px" class="col-xs-4">
<div class="form-group">
<label for="product_id" class="col-lg-3">Product </label>
<div class="col-lg-7">
<select id="product_id" name="product_id" class="form-control">
<option value="" selected='selected'>Select Product</option>
<option value="5" >Chesse</option>
<option value="8" >Laptop an</option>
<option value="9" >Prosecco</option>
</select>
</div>
</div>
</div>
</div>
<br/>
<div class="col-lg-2"></div>
<div class="col-md-8">
<div style="overflow:auto" class="well">
<button style="float:right; margin-bottom: 20px" class="btnAdd" type="button" class="btn btn-default"><i class="icon-plus"></i> Add New Rebate</button>
<br/>
<div class="table-responsive">
<table id="blacklistgrid" class="table table-bordered table-hover table-striped">
<thead>
<tr id="Row1">
<th style="vertical-align:middle" >Pack Of</th>
<th style="vertical-align:middle">Quantity</th>
<th style="vertical-align:middle">Volume</th>
<th style="vertical-align:middle">Unit</th>
<th style="vertical-align:middle">Rebate Amount</th>
</tr>
</thead>
<tbody>
<tr id="Row2">
<td><input type="text" name="pack[]" value="" class="form-control" size="8"/></td>
<td><input type="text" name="quantity[]" value="2" class="form-control" size="8"/></td>
<td><input type="text" name="volume[]" value="750" class="form-control" size="8"/></td>
<td>
<div class="btn-group">
<select name="units[]" class="form-control">
<option value="" selected='selected'>Select Unit</option>
<option value="5" >Microsecond</option>
<option value="7" >oz</option>
<option value="9" >ml</option>
<option value="10" >L</option>
<option value="12" >gms</option>
</select>
</div>
</td>
<td>
<input type="text" name="amount[]" value="3.00" class="form-control" size="9"/>
</td>
</tr>
<tr>
<td><input type="text" name="pack[]" value="" class="form-control" size="8"/></td>
<td><input type="text" name="quantity[]" value="4" class="form-control" size="8"/></td>
<td><input type="text" name="volume[]" value="750" class="form-control" size="8"/></td>
<td>
<div class="btn-group">
<select name="units[]" class="form-control">
<option value="" selected='selected'>Select Unit</option>
<option value="5" >Microsecond</option>
<option value="7" >oz</option>
<option value="9" >ml</option>
<option value="10" >L</option>
<option value="12" >gms</option>
</select>
</div>
</td>
<td><input type="text" name="amount[]" value="7.00" class="form-control" size="9"/></td>
</tr>
</tbody>
</table>
<button style="float:right" class="btnAdd" type="button" class="btn btn-default"><i class="icon-plus"></i> Add New Rebate</button>
</div>
</div> <!-- /span8 -->
<div class="row">
<div class="col-xs-5"></div>
<div style="margin-left: -9px" class="col-xs-5">
<button type="submit" class="btn btn-primary">Preview</button>
</div>
</div>
</div>
</form>
I'm dynamically appending rows to the table by clicking on a button(the button is present in a tag, you can see in above code). The various JQuery code snippets I tried for adding rows dynamically are as follows. All are working:
/*JQuery for appending rows at the end of table*/
<script language="javascript">
$( document ).ready(function() {
$('.btnAdd').click(function () {
var count = 1,
first_row = $('#Row2');
//while (count-- > 0) first_row.clone().appendTo('#blacklistgrid');
while (count-- > 0) first_row.clone().removeAttr('id').appendTo('#blacklistgrid');
//while (count-- > 0) $('#blacklistgrid > tbody:last').append(first_row.clone().removeAttr('id'));
//while (count-- > 0) first_row.clone().appendTo('#blacklistgrid').attr('id','Row' + $('#blacklistgrid tr').length);
});
});
</script>
From above code snippets you can suggest me the most optimum one. Now the issue I'm facing is if I append one or more rows at the end of table, fill data in the textfields of each appended row and submit the form by clicking on Submit button, in $_POST on rebates.php I'm not getting the data from appended rows. I'm getting the data only from the rows which are previously present when the page loads. So can anyone help me in getting the values from the dynamically appended rows also? Thanks for spending some of your valuable time in understanding my issue. Waiting for your precious replies. Still, if you need any further information regarding the question I can provide you the same.
I'm using following jQuery libraries:
<script src="http://localhost/smart-rebate-web/web/js/libs/jquery-1.9.1.min.js"></script>
<script src="http://localhost/smart-rebate-web/web/js/libs/jquery-ui-1.10.0.custom.min.js"></script>
<script src="http://localhost/smart-rebate-web/web/js/libs/bootstrap.min.js"></script>
<script src="http://localhost/smart-rebate-web/web/js/plugins/validate/jquery.validate.js"></script>
<script src="http://localhost/smart-rebate-web/web/js/Application.js"></script>
<script src="http://localhost/smart-rebate-web/web/js/demo/validation.js"></script>

Here is what i tested and works fine:
the .html file :
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$( document ).ready(function() {
var first_row = $('#Row2').clone();
$('.btnAdd').click(function () {
var count = 1;
first_row.clone().removeAttr('id').appendTo('#blacklistgrid');
});
});
</script>
</head>
<body>
<form action="formdata.php" role="form" method="post">
<div style="margin-left: 12px" class="col-xs-4">
<div class="form-group">
<label for="company_name" class="col-lg-4">Manufacturer </label>
<div class="col-lg-7">
<select id="company_name" name="company_name" class="form-control">
<option value="" selected='selected'>Select Manufacturer</option>
<option value="33" >Eywa Solutions</option>
<option value="37" >Amazon</option>
<option value="40" >Test</option>
<option value="42" >RK</option>
<option value="46" >Santa Margherita</option>
</select>
</div>
</div>
</div>
<div style="margin-left: -61px" class="col-xs-4">
<div class="form-group">
<label for="product_id" class="col-lg-3">Product </label>
<div class="col-lg-7">
<select id="product_id" name="product_id" class="form-control">
<option value="" selected='selected'>Select Product</option>
<option value="5" >Chesse</option>
<option value="8" >Laptop an</option>
<option value="9" >Prosecco</option>
</select>
</div>
</div>
</div>
</div>
<br/>
<div class="col-lg-2"></div>
<div class="col-md-8">
<div style="overflow:auto" class="well">
<button style="float:right; margin-bottom: 20px" class="btnAdd" type="button" class="btn btn-default"><i class="icon-plus"></i> Add New Rebate</button>
<br/>
<div class="table-responsive">
<table id="blacklistgrid" class="table table-bordered table-hover table-striped">
<thead>
<tr id="Row1">
<th style="vertical-align:middle" >Pack Of</th>
<th style="vertical-align:middle">Quantity</th>
<th style="vertical-align:middle">Volume</th>
<th style="vertical-align:middle">Unit</th>
<th style="vertical-align:middle">Rebate Amount</th>
</tr>
</thead>
<tbody>
<tr id="Row2">
<td><input type="text" name="pack[]" value="" class="form-control" size="8"/></td>
<td><input type="text" name="quantity[]" value="2" class="form-control" size="8"/></td>
<td><input type="text" name="volume[]" value="750" class="form-control" size="8"/></td>
<td>
<div class="btn-group">
<select name="units[]" class="form-control">
<option value="" selected='selected'>Select Unit</option>
<option value="5" >Microsecond</option>
<option value="7" >oz</option>
<option value="9" >ml</option>
<option value="10" >L</option>
<option value="12" >gms</option>
</select>
</div>
</td>
<td>
<input type="text" name="amount[]" value="3.00" class="form-control" size="9"/>
</td>
</tr>
<tr>
<td><input type="text" name="pack[]" value="" class="form-control" size="8"/></td>
<td><input type="text" name="quantity[]" value="4" class="form-control" size="8"/></td>
<td><input type="text" name="volume[]" value="750" class="form-control" size="8"/></td>
<td>
<div class="btn-group">
<select name="units[]" class="form-control">
<option value="" selected='selected'>Select Unit</option>
<option value="5" >Microsecond</option>
<option value="7" >oz</option>
<option value="9" >ml</option>
<option value="10" >L</option>
<option value="12" >gms</option>
</select>
</div>
</td>
<td><input type="text" name="amount[]" value="7.00" class="form-control" size="9"/></td>
</tr>
</tbody>
</table>
<button style="float:right" class="btnAdd" type="button" class="btn btn-default"><i class="icon-plus"></i> Add New Rebate</button>
</div>
</div> <!-- /span8 -->
<div class="row">
<div class="col-xs-5"></div>
<div style="margin-left: -9px" class="col-xs-5">
<button type="submit" class="btn btn-primary">Preview</button>
</div>
</div>
</div>
</form>
</body>
</html>
formdata.php
<?php
print_r($_POST);
?>
Sample data returned :
Array
(
[company_name] =>
[product_id] => 5
[pack] => Array
(
[0] => a
[1] => b
[2] => c
[3] => d
)
[quantity] => Array
(
[0] => 2
[1] => 4
[2] => 2
[3] => 2
)
[volume] => Array
(
[0] => 750
[1] => 750
[2] => 750
[3] => 750
)
[units] => Array
(
[0] => 7
[1] => 5
[2] => 7
[3] => 7
)
[amount] => Array
(
[0] => 3.00
[1] => 7.00
[2] => 3.00
[3] => 3.00
)
)
As you can see, it adds all the informations you are appending with jQuery

set inputs within a targeted div to 'required' when a link is clicked jquery

This is what I've got so far. Trying to have the inputs (and selects) set to 'required' when the links (/w radios) are clicked. Here's a link to the jsfiddle: http://jsfiddle.net/swdmedia/ZR3A7/1/
$(".persnl").click(function(){
var myTab = $(this).find("a").attr("href");
// alert(myTab);
$(this).find(':radio').prop('checked',true);
// alert('clicked');
$(myTab).each(function() {
$('input[type=text]').prop("required", true);
});
return false;
});

To validate the select values, give it a value="" (where you show "--Please Select--"). and add to select class="required".
Credits: Validate select box
Also, remember to remove the required attribute of the other tabs, when you check a different radiobutton.
EDIT: your click event triggers if you click on the button or the link, but when you click on the button it doesn't stay clicked. So, you should change the selector to $(".persnl>a") (however, it looks weird changing a radiobutton clicking on a link, so you might want to change that).

This was what I ended up coming up with with. There's a fair bit more going on as there are multiple sets of this tabs/divs within separate containers on any given page. The solution is for a Shopify account where the shop sells monogrammed items, hence the reliance on javascript for doing this.
$(".persnl").click(function(){
var myTab = $(this).find("a").attr("href");
// alert(myTab);
var parId = $(".persnl").closest("div").attr("id");
// alert(parId);
$(this).find(':radio').prop('checked',true);
// alert('clicked');
$('input[type=text]').val('');
$('option').prop("selected", false);
$('input[type=text], select').prop("required", false);
$(myTab).find('input[type=text], select').prop("required", true);
return false;
});
Below is the html that goes with it:
<form action="">
<div>
<h3>Select your personalization type</h3>
</div>
<div id="tabs" class="ui-tabs">
<ul class="ui-tabs-nav clearfix">
<li class="persnl">No Personalization<input type="radio" name="properties[Personalization]" class="hidden" value="No Personalization" checked /></li>
<li class="persnl">Single Initial<input type="radio" name="properties[Personalization]" class="hidden" value="Single Initial"/></li>
<li class="persnl">3 Initials<input type="radio" name="properties[Personalization]" class="hidden" value="3 Initials"/></li>
<li class="persnl">Text<input type="radio" name="properties[Personalization]" class="hidden" value="Text"/></li>
</ul>
<hr/>
<div id="tabs-1" class="ui-tabs-panel">
<p>No personalization options.</p>
</div><!--/.tabs-1-->
<div id="tabs-2" class="ui-tabs-panel">
<h4>Single Initial Options</h4>
<div class="clearfix">
<label for="sFonts" class="label">Font:</label>
<select id="sFonts" name="properties[Single Font]" class="inline">
<option value="">--Please Select--</option>
<option value="Blackboard" selected>Blackboard</option>
<option value="Classic">Classic</option>
</select>
<div>» View Fonts</div>
</div>
<div class="clearfix">
<label for="single" class="label">Single Letter:</label> <input type="text" id="single" class="inline uppercase single" name="properties[Single]" maxlength="1" size="1" />
</div>
<div class="clearfix">
<label for="sThread" class="label">Thread Color:</label>
<select id="sThread" name="properties[Single Thread]" class="inline">
<option value="">--Please Select--</option>
<option value="Aqua Blue">Aqua Blue</option>
<option value="Black">Black</option>
<option value="Brown">Brown</option>
</select>
<div>» View Thread Colors</div>
</div>
</div><!--/#tabs-2-->
<div id="tabs-3" class="ui-tabs-panel">
<h4>3 Initials Options</h4>
<div class="clearfix">
<label for="tFonts" class="label">Font:</label>
<select id="tFonts" name="properties[Initials Font]" class="inline">
<option value="">--Please Select--</option>
<option value="Blackboard">Blackboard</option>
<option value="Circle">Circle</option>
<option value="Classic">Classic</option>
</select>
<div>» View Fonts</div>
</div>
<div class="clearfix">
<label for="monogram1" class="label">First Name Initial:</label> <input type="text" class="inline uppercase single" id="monogram1" name="properties[Initials1]" maxlength="1" size="1" /><br/>
<label for="monogram2" class="label">Midle Name Initial:</label> <input type="text" class="inline uppercase single" id="monogram2" name="properties[Initials2]" maxlength="1" size="1" /><br/>
<label for="monogram3" class="label">Last Name Initial:</label> <input type="text" class="inline uppercase single" id="monogram3" name="properties[Initials3]" maxlength="1" size="1" />
</div>
<div class="clearfix">
<label for="monoFormat" class="label">Monogram Format:</label>
<select id="monoFormat" name="properties[Monogram Format]" class="inline">
<option value="">--Please Select--</option>
<option value="Female">Female (First, Last, Middle) Order</option>
<option value="Male">Male (First, Middle, Last) Order</option>
</select>
</div>
<div class="clearfix">
<label for="monoThread" class="label">Thread Color:</label>
<select id="monoThread" name="properties[Initials Thread]" class="inline">
<option value="">--Please Select--</option>
<option value="Aqua Blue">Aqua Blue</option>
<option value="Black">Black</option>
<option value="Brown">Brown</option>
</select>
<div>» View Thread Colors</div>
</div>
</div><!--/.tabs-3-->
<div id="tabs-4" class="ui-tabs-panel">
<h4>Text Options</h4>
<div class="clearfix">
<label for="textFonts" class="label">Font:</label>
<select id="textFonts" name="properties[Text Font]" class="inline">
<option value="">--Please Select--</option>
<option value="Blackboard">Blackboard</option>
<option value="Classic">Classic</option>
<option value="Cottilion">Cottilion</option>
</select>
<div>» View Fonts</div>
</div>
<div class="clearfix">
<label for="word" class="label">Text:</label> <input type="text" id="word" name="properties[Word]" maxlength="18" size="18" class="inline" /> <em>(18 character limit)</em>
</div>
<div class="clearfix">
<label for="textThread" class="label">Thread Color:</label>
<select id="textThread" name="properties[Text Thread]" class="inline">
<option value="">--Please Select--</option>
<option value="Aqua Blue">Aqua Blue</option>
<option value="Black">Black</option>
<option value="Brown">Brown</option>
<option value="Yellow">Yellow</option>
</select>
<div>» View Thread Colors</div>
</div>
</div><!--/.tabs-4-->
</div><!--/#tabs-->