We Keep Coding

AngularJS: disable button when input fields are empty

I have a dropdown menu, two input text box, and a submit button. I want the submit button to be disabled until dropdown item is selected AND both input boxes are filled. I looked at several examples including this one and this one but none of these are working for me. Below is my code. Thanks
<form name="myForm">
Select an option:
<select id="dropDown" name="dropDown" ng-model="data.dropDown" >
** content for dropDown menu, populating it by using Django
</select>
From Date:
<input type="text" id="dateFrom" ng-model="data.date1" />
To Date:
<input type="text" id="dateTo" ng-model="data.date2" />
<button id="submit" ng-click="submitRequest()" ng-disabled="!(!!data.dropDown && !!data.date1 && !!data.date2)">Submit </button>
</form>
I also tried this method below:
<form name="myForm">
Select an option:
<select id="dropDown" name="dropDown" ng-model="data.dropDown" >
** content for dropDown menu, populating it by using Django
</select>
From Date:
<input type="text" id="dateFrom" ng-model="data.date1" required/>
To Date:
<input type="text" id="dateTo" ng-model="data.date2" required />
<button id="submit" ng-click="submitRequest()" ng-disabled="myForm.$invalid">Submit </button>
</form>
So initially when the page loads and all fields are empty by default, the Submit button is disabled and the problem is that after all three fields are filled, it doesn't get enabled. Thanks

Your second method works for me (utilizing myForm.$invalid) if I add required to the dropdown element. I've created a plunkr you can play with here.
<form name="myForm">
Select an option:
<select id="dropDown" name="dropDown" ng-model="data.dropDown" required>
<option>red</option>
<option>blue</option>
<option>green</option>
</select><br/>
From Date:
<input type="text" id="dateFrom" ng-model="data.date1" required/><br/>
To Date:
<input type="text" id="dateTo" ng-model="data.date2" required /><br/>
<button id="submit" ng-click="submitRequest()" ng-disabled="myForm.$invalid">Submit</button>
</form>
Note: I used Angular 1.4 in the plunkr as you did not specify which version of Angular you are working with.
Edit: OP stated that issue was created by using JQuery's datepicker. May I suggest using angular-ui boostrap datepicker? Plunker example - Angular-UI Bootstrap docs

Why dont you use ng-disabled="myForm.myName.$pristine" because pristine will check for each variable inserted in textboxes
please check small example here..
ng pristine example

Passing innerhtml of a label to a variable in PHP

I want to pass the inner html of a label in HTML form to a variable in PHP via POST method. but I don't know how to do so. Here is my code .
<select id="ops" name="select" onChange="myfunction(this)">
<option>PIck item </option>
<option value="pepsi">pepsi</option>
<option value="coke">coke</option>
<option value="fanta">Fanta</option>
</select><br><br>
<label id="lb" style="display:none" >Qty</label>
<input type="text" name='qtytext' id="num" style="display:none" placeholder="Quantity" onKeyUp="return validateform()" onSelect="return validateform()" onFocus="myfun2()" required/ >
<label id="lb2" style="display:none" name='price' > </label>
I want to pass the innerHTML of the above Label to a variable in PHP. InnerHtml has been already set by JS .

If you set the label via JS, you should set the value of another input field in the form simultaneously:
<form>
<input type="hidden" name="labelContent" value="theValueToSet" />
</form>

When updating innerHTML of label, put the value in a hidden form input. And, finally post the form to the server.

Consider using a form or AJAX to post the values and get those value on your action page by var_dump( $_POST );

Can POST and GET be combined within a single input type?

I have a form running a shopping cart style application on my site. To add items, I POST values to a form using a submit button. To remove items, I have to use a GET command.
What I want to do is to limit the selection possibilities - as you select one option, others are removed. For instance, if I have three options: Apples, Oranges, Bananas you are only able to select one.
Apples
Oranges
Bananas
If you select Apples, I want to post the value "Apples" whilst using a GET command to remove "Bananas" and "Oranges".
Currently I am doing this to post the values:
<form method="post">
<fieldset>
<input type="hidden" name="jcartToken" value="<?php echo $_SESSION['jcartToken'];?>" />
<input type="hidden" name="id" value="Apples" />
<input type="hidden" name="name" value="Apples" />
<input type="hidden" name="color" value="red" />
<input type="hidden" name="shape" value="round" />
<div id="apples" >
<input type="submit" name="my-add-button" class="add" value="&nbsp"/>&nbsp Apples
</div>
</fieldset>
</form>
And to remove the items I do this:
remove Bananas and Oranges
Is there a way to do both at the same time? I have tried doing an onclick event like this:
<div id="Apples" >
<input type="submit" name="my-add-button" class="add" value="&nbsp" onclick="location.href='index.php?jcartRemove[]=Bananas&jcartRemove[]=Oranges';" />&nbsp Apples
</div>
and I have also tried to use an action at the start of the form
But neither of these work - they will still submit the new item, but will not remove the item. Any idea of a good way to do both together?

Technically, yes, but it's a hack:
<form method="post" action="foo.php?x=y">
<input type="text" name="a" value="b" />
</form>
If the form is set to POST, then any <input> and <textarea> within the form will go as POST data, but any query strings you place into the action's url will show up at the server as GET data:
$_GET['x'] -> 'y'
$_POST['a'] => 'b'
$_POST['x'] => undefined index
But note that clicking a link that's inside a <form> does NOT submit the form. it's like clicking any other link and will just go to the new address.

You can use $_REQUEST. As per the php documentation, quoted as follows:
An associative array that by default contains the contents of $_GET, $_POST and $_COOKIE
As above, you can then use the following hack:
<form method="post" action="foo.php?x=y">
<input type="text" name="a" value="b" />
</form>
EDIT: If both of the GET and POST requests work individually, it is possible that your PHP is where the problem lies - You haven't posted it, so I can't see where the issue could be. You could just put together some javascript to fire the remove request then fire the add request when clicked:
jQuery("input[name|='my-add-button']").click(function() {
var addform = jQuery(this);
event.preventDefault();
$.get("index.php?jcartRemove[]=Bananas&jcartRemove[]=Oranges", function(data) {
addform.submit();
});
});

AJAX form elements processing

This is probably a stupid way of doing what I want to do, so a more elegant solution to the bigger problem is definitely appreciated! However, the specific problem I am encountering is this:
I am processing a form with javascript. The form structure is as follows:
Name (text, also hidden value)
Preference (checkbox): Green, Purple (user can check both)
Time (Dropdown): AM, PM, Midnight
<FORM>
<SECTION>
Jane Doe:
<INPUT type="hidden" name="user[]" id="user[]" value="Jane_Doe" />
<INPUT type="checkbox" name="preference[]" id="preference[]" value="green" /> <INPUT type="checkbox" name="preference[]" id="preference[]" value="purple" />
<SELECT name="time[]" id="time[]">
<OPTION value="AM">AM</OPTION>
<OPTION value="PM">PM</OPTION>
<OPTION value="Midnight">Midnight</OPTION>
</SELECT>
</SECTION>
<SECTION>
John Jacob:
<INPUT type="hidden" name="user[]" id="user[]" value="John_Jacob" />
<INPUT type="checkbox" name="preference[]" id="preference[]" value="green" /> <INPUT type="checkbox" name="preference" id="preference" value="purple" />
<SELECT name="time[]" id="time[]">
<OPTION value="AM">AM</OPTION>
<OPTION value="PM">PM</OPTION>
<OPTION value="Midnight">Midnight</OPTION>
</SELECT>
</SECTION>
<INPUT type="button" Value="SUBMIT" onclick="function(form_script)"/>
</FORM>
Depending on a prior action by the user, a list of names is generated, with Preference and Time needing to be filled in.
The form is then submitted and a mySQL table will be populated according to the user's response using PHP coding.
I am currently at a loss to how to store the form responses with Javascript. As you can see from the coding, each <SECTION> contains the exact same coding structure.
Ideally, I'd like to store each form element within an array, (e.g. user['Jane_Doe', 'John_Jacob']) when the form is submitted, and pass that to the php script. But, I'm not sure how to create these arrays from the form elements, and would appreciate help.
I hope my question is clear.
Alternatively, if there are better ways of processing this form without using javascript arrays, I would definitely be interested in the solution!

assuming the id of your form is "form", to grab all the data from the form you will need to do this (you will need to include jquery to be able to perform this action) :
var form_data = $("#form").serialize();

change value of 2 fields depending on dropdown and radio button selection

I am trying to replicate the sort of functionality which is present on this website. The price, mentioned above the 'Get a Protective Plan' button, updates with respect to different options selected from the dropdown and the radio button selected.
Now I have a form which has 2 read-only input field's for 'Price' and 'Price-2' and I want the value of those fields to be updated depending on the selection of the dropdown options and the radio button by the user. So basically, the values of the read-only input fields, which needs to be updated, will be an addition of the values of the selected dropdown option and the radio button.
Here's a rough example of the form which I've created along with the dropdown and the radio buttons:
<form action="#" method="post">
<label>Last Name*</label>
<input type="text" name="lastname" value="" required="true">
<select id="p1">
<option value="1">$1</option>
<option value="2">$2</option>
<option value="3">$3</option>
<option value="4">$4</option>
<option value="5">$5</option>
</select>
<input id="p2" type="radio" name="price2" value="50">$50<br/>
<input id="p2" type="radio" name="price2" value="100">$100
<label>Price</label>
<input type="text" name="Price" readonly="readonly" value="">
<input type="text" name="Price-2" readonly="readonly" value="">
<input type="submit" value="Submit">
</form>
So in this form if I select the second option from the dropdown whose value is '2' and then I select the first radio button whose value is '50', I'd want the value of the 'Price' and the 'Price-2' fields to automatically become '$52'. I know this can be achieved using jQuery but I cannot really figure out how as I am still learning it. Looking forward to get a solution. Thanks.

you can accomplish using JQuery,
Here is a Fiddle Demo for your desired result.