Develop Reference

dropdown options change based on another dropdowns choices

I have a form that has several dropdowns. I need to make the second dependent on the value of the first. I have a Codepen that shows four dropdowns. The first does not change but the selects 2, 3, and 4 show the intended options I want.
Here is a listing of what option of dropdown 1 leads to the second.
new -> input-2
client -> input-3
admin -> input-4
I am doing this in OpenCart in a MVC so I am a little confused if this all is done in the view file or do I need to have some of this done in the controller, and if so how? I do believe JavaScript would be able to help here but not really sure how to implement that. My code pen is:
https://codepen.io/anon_guy/pen/pdbYad
<form action="/action_page.php">
<select name="Input-1">
<option value="*"></option>
<option value="new">new</option>
<option value="client">client</option>
<option value="admin">admin</option>
</select>
<select name="Input-2">
<option value="sign-up">Sign Up</option>
</select>
<select name="Input-3">
<option value="upgrade">upgrade</option>
<option value="stats">stats</option>
</select>
<select name="Input-4">
<option value="view-accounts">view all</option>
<option value="add">add</option>
<option value="remove">remove</option>
</select>
<input type="submit">
</form>

Multiple onchange="this.form.submit()" on one page not working

I have two forms both using select so my values are within dropdown. I want to be able to submit the two forms without the use of submit buttons.
The first form submits using the onchange="this.form.submit()"
method. However, the second form doesn't submit when an option selected.
How do I make each form submit using onchange="this.form.submit()"?
//This form submits using onchange="this.form.submit()"
<select class="clientselect" name="clientlist" id="clientlist" onchange="this.form.submit()">
<option value="">All Clients</option>
<? echo makeClientList($conn); ?>
</select>
//This for does'nt sybmit using onchange="this.form.submit()"
<select class="clientselect" name="filterstatus" id="filterstatus" onchange="this.form.submit()">
<option value="">Filter by Status</option>
<? echo getStatus($conn); ?>
</select>

If you give each form a name attribute then you can reference that in your onchange, for example:
onchange="document.form1.submit()"
You'll need to change form1 for the name of each form

Prevent Blank Select in Angular

I updating a form to angular. The selects in it are not generated by angular. I am using angular to add some interactivity and submit the form. I am having an issue where angular is adding a blank select to the element. Is there a way of preventing this without having angular generate the select?
<select name="inventory_status" ng-model="formData.inventory_status">
<option ng-selected="true" ng-value="1">Active</option>
<option ng-value="2">Discontinued</option>
<option ng-value="3">Special Order</option>
<option ng-value="4">Pre-Order</option>
</select>
The above code produces this:
<select name="inventory_status" ng-model="formData.inventory_status" ng-init="sortorder='1'" class="ng-pristine ng-valid ng-touched"><option value="? undefined:undefined ?"></option>
<option ng-selected="true" ng-value="1" value="1" selected="selected">Active</option>
<option ng-value="2" value="2">Discontinued</option>
<option ng-value="3" value="3">Special Order</option>
<option ng-value="4" value="4">Pre-Order</option>
</select>
My hope is to not have this produced:
<option value="? undefined:undefined ?"></option>
Additionally I would like to not have to use angular to generate the dropdown although if that is the only option I could. This only happens when I set this field to ng-model. I am setting it to ng-model because I want to use angular to submit the form.
Thanks in advance.

Set $scope.formData.inventory_status = 1 or whatever value you want selected and it will not show the empty option, plus you don't need ng-selected if you set the value.

Dynamically change text in php

hey guys i am building a form in which i want when a user select an option from the dropdown menus a text to be displayed and calculate the price.
The dropdown menu is:
<select id="recipient" name="recipient" tabindex="6" class="selmenu">
<option value="staff">Site Staff</option>
<option value="editor">Editor-in-Chief</option>
<option value="technical">Tech Department</option>
<option value="pr">Public Relations</option>
<option value="support">General Support</option>
</select>
and the other dropdown menu is:
<select id="recipient" name="recipient" tabindex="6" class="selmenu">
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
<option value="four">4</option>
<option value="five">5</option>
</select>
What i want to do is when the user selects something from the first and the second menu i want a textfield to change dynamically... can anyone point me the way?

only ajax/jquery could do that in combination of php step might be...
onchange of any dropdown make a ajax request to php script.
return the json response from php script
use this response to either manipulate your form or display data on page.

you don't need to use php for this, it can all be done with jquery/javscript
an example using jquery is below (i had to rename your second select as you had re-used an ID):
$('.selmenu').change(function() {
$('#output').text($('#recipient option:selected').text() + ' ' + $('#recipient2 option:selected').text());
})
output is the id of your textbox.
on a select value being changed, output will be filled with the selected value in both select controls

Select options are getting separated from select box when the div above it is hidden

I have a validation message under a input. When a user inputs a message in the input and then selects an option from the select box the validation message hides and the select options get separated from the select box. I'm looking for a way to keep the options directly under the select box.
Thanks in advance.
Here is some quick code.
<input type='text' id='message'/>
<div id='msg'>add your message</div>
<select name="schools" id="schools" value="School" title="School">
<option value="">School</option>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">Three</option>
</select>
$('#message').blur(function () {
$('#msg').fadeOut();
});
Here is a fiddle http://jsfiddle.net/5qbEM/29/.
Looks like this is a chrome bug.