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>

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

Display html5 input value in a window alert and save the value in a .txt [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I want two function first to display all the input value together in a window alert by clicking Display button and the second is to save this value in a .txt format by Clicking Submit with JavaScript Or PHP.
This is my Html code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<form action="action_page.php">
ID:<br>
<input type="number" name="ID" id="ID">
<br>
Password:<br>
<input type="password" name="password" id="password">
<br>
First name:<br>
<input type="text" name="first name" id="first name">
<br>
last name:<br>
<input type="text" name="last name" id="last name">
<br>
Prmotion:<br>
<select name="promo" id="promo">
<option value="1">1 anne</option>
<option value="2">2 anne</option>
<option value="3">3 anne</option>
<option value="4">4 anne</option>
<option value="5">5 anne</option>
</select><br>
Date de Naissance:<br>
<input type="date" name="birthday" id="birthday">
<br>
Email:<br>
<input type="email" name="mail" id="mail">
<br>
Telephone:<br>
<input type="tel" name="telephone" id="telephone">
<br>
Sport Prefere:<br>
<input type="checkbox" name="sport" value="Natation"> Natation<br>
<input type="checkbox" name="sport" value="Soccer" checked> Soccer<br>
<input type="checkbox" name="sport" value="Tennis" checked> Tennis<br>
Sex:<br>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
<br>
Option:<br>
<select name="Option">
<option value="Telecom">Telecom</option>
<option value="Multi">multimedia</option>
<option value="Logi">Logiciel</option>
</select><br>
Comment:<br>
<textarea name="comment" id="comment"></textarea><br>
<input type="submit" value="Display">
<input type="submit" value="Submit">
</form>
</body>
</html>

You can use serializeArray method to create array of objects in form then display it in the alert.
To submit the form data you can use ajax.
Then in your php file action_page.php put the below code which will save the post values in a text file.
if($_SERVER['REQUEST_METHOD'] == 'POST'){
$myfile = fopen("hello.txt", "a") or die("Unable to open file!");
$txt = json_encode($_POST);
fwrite($myfile, $txt);
fclose($myfile);
}
$("#display").on("click", function() {
//alert($('form').serializeArray());
var fields = $('form').serializeArray();
var data = [];
jQuery.each(fields, function(i, field) {
data.push(field.value);
});
alert(data);
return false;
});
$("#submit").on("click", function() {
var fields = $('form').serialize();
var data = [];
$.ajax({
type: 'POST',
data: fields,
url: "action_page.php",
success: function(result) {
alert(result);
}
});
return false;
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div id="results"></div>
<form action="">
ID:
<br>
<input type="number" name="ID" id="ID">
<br>Password:
<br>
<input type="password" name="password" id="password">
<br>First name:
<br>
<input type="text" name="first name" id="first name">
<br>last name:
<br>
<input type="text" name="last name" id="last name">
<br>Prmotion:
<br>
<select name="promo" id="promo">
<option value="1">1 anne</option>
<option value="2">2 anne</option>
<option value="3">3 anne</option>
<option value="4">4 anne</option>
<option value="5">5 anne</option>
</select>
<br>Date de Naissance:
<br>
<input type="date" name="birthday" id="birthday">
<br>Email:
<br>
<input type="email" name="mail" id="mail">
<br>Telephone:
<br>
<input type="tel" name="telephone" id="telephone">
<br>Sport Prefere:
<br>
<input type="checkbox" name="sport" value="Natation">Natation
<br>
<input type="checkbox" name="sport" value="Soccer" checked>Soccer
<br>
<input type="checkbox" name="sport" value="Tennis" checked>Tennis
<br>Sex:
<br>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
<br>Option:
<br>
<select name="Option">
<option value="Telecom">Telecom</option>
<option value="Multi">multimedia</option>
<option value="Logi">Logiciel</option>
</select>
<br>Comment:
<br>
<textarea name="comment" id="comment"></textarea>
<br>
<input type="submit" id="display" value="Display">
<input type="submit" id="submit" value="Submit">
</form>
</body>
</html>

Form multiplication

I need these two fields to be multiplied together based on selected form options.
Okay so it works without all the extra fields but once i added the rest of the form the calculation stopped working. :(
<form action="mailer.php" data-validate="parsley" method="post" >
<p><strong>Full Name<span class="red">*</span></strong></p>
<input name="cf_name" data-required="true" class="send" type="text" />
<p><strong>Email Address<span class="red">*</span></strong></p>
<input name="cf_email" data-required="true" data-type="email" class="send" type="text" />
<p><strong>Cellphone No.<span class="red">*</span></strong></p>
<input name="cf_cell" data-required="true" class="send" type="text" />
<p><strong>Instrument Type<span class="red">*</span></strong></p>
<select name="cf_instrument" size="1" class="option" >
<option value="Piano">Piano</option>
<option value="Vocals">Vocals</option>
<option value="Guitar">Guitar</option>
<option value="Bass">Bass</option>
<option value="Flute">Flute</option></select>
<p><strong>Lesson Type<span class="red">*</span></strong></p>
<select name="cf_package_type" id="cf_package_type" size="1" class="option">
<option value="100">Beginner Lesson - R100</option>
<option value="130">Advanced Lesson - R130</option>
<option value="160">Professional Lesson - R160</option></select>
<p><strong>No. of Lessons<span class="red">*</span></strong></p>
<select id="number-of-lessons" name="cf_number" size="1" class="option" onchange='test()'>
<option name="1" value="1" selected="selected">1</option>
<option name="2" value="2">2</option>
<option name="3" value="3">3</option>
<option name="4" value="4">4</option></select>
<script src="js/datepair.js"></script>
<p><strong>Lesson Date & Time<span class="red">*</span></strong></p>
<p class="datepair" data-language="javascript">
<input type="text" name="cf_booking_date" class="date start" data-required="true" />
<input type="text" name="cf_start_time" class="time start" data-required="true" /> to
<input type="text" name="cf_end_time" class="time end" data-required="true" /></p>
<script src="js/datepair.js"></script>
<p id="lesson-2" class="datepair" data-language="javascript">
<input type="text" name="cf_booking_date" class="date start" data-required="true" />
<input type="text" name="cf_start_time" class="time start" data-required="true" /> to
<input type="text" name="cf_end_time" class="time end" data-required="true" /></p>
<script src="js/datepair.js"></script>
<p id="lesson-3" class="datepair" data-language="javascript">
<input type="text" name="cf_booking_date" class="date start" data-required="true" />
<input type="text" name="cf_start_time" class="time start" data-required="true" /> to
<input type="text" name="cf_end_time" class="time end" data-required="true" /></p>
<script src="js/datepair.js"></script>
<p id="lesson-4" class="datepair" data-language="javascript">
<input type="text" name="cf_booking_date" class="date start" data-required="true" />
<input type="text" name="cf_start_time" class="time start" data-required="true" /> to
<input type="text" name="cf_end_time" class="time end" data-required="true" /></p>
<!-- HIDDEN FIELD - HONEYPOT ANTI_SPAM -->
<input id="website" class="using" name="website" type="text" />
<!-- END -->
<input name="Submit" class="submit" value="Book Now" type="submit" /></form>
<input type="text" value="100" disabled="disabled" id="result">
Corrected JS used:
<script type="text/javascript">
$("select").change(function(){
var val1 = + ($("#cf_package_type").val());
var val2 = + ($("#number-of-lessons").val());
$("#result").val(val1*val2);
});
</script>
I know i'm probably very off-track but if someone could please help me with this it would be a life-saver!
Here's the JS fiddle to help you - http://jsfiddle.net/GuBPL/10/
Thank you.

Try with following code:
<p><strong>Lesson Type<span class="red">*</span></strong></p>
<select id="cf_package_type" name="cf_package_type" size="1" class="option">
<option value="100">Beginner Lesson - R100</option>
<option value="130">Advanced Lesson - R130</option>
<option value="160">Professional Lesson - R160</option>
</select>
<p><strong>No. of Lessons<span class="red">*</span></strong></p>
<select id="number-of-lessons" name="cf_number" size="1" class="option">
<option value="1" selected="selected">1</option>
<option name="2" value="2">2</option>
<option name="3" value="3">3</option>
<option name="4" value="4">4</option>
</select>
<input type="text" disabled="disabled" id="result">
And JS:
$(document).ready(function(){
$("#number-of-lessons").change(function(){
var val1 = parseInt($("#cf_package_type").val());
var val2 = parseInt($(this).val());
$("#result").val(val1*val2);
});
});
What's changed ?
First select got id="cf_package_type" attribute, which is used to get its value with:
$("#cf_package_type").val()
Removed onchange='test()' because we do it with jQuery:
$("#number-of-lessons").change()
Get value of second select with:
$(this).val()
because we work on it already.
parseInt used just to be sure, we use integers, not strings.
Edit:
To calculate result on page load, use:
$(document).ready(function(){
var calculate = function(){
var val1 = parseInt($("#cf_package_type").val());
var val2 = parseInt($('#number-of-lessons').val());
$("#result").val(val1*val2);
};
$("#number-of-lessons").change(calculate);
calculate();
});

You use $('.select') while the elements have class name option,
You should use change event instead of keyup
you use $('.cf_package_type') while it's a name, not class attribute
http://jsfiddle.net/GuBPL/4/
$(document).ready(function(){
$(".option").change(function(){
var val1 = +$("[name=cf_package_type]").val();
var val2 = +$("[name=cf_number]").val();
$("#result").val(val1*val2);
});
});