Develop Reference

Setting default value in dropdown after changing element jQuery

I apologize in advance if this question/issue was brought up or asked. I did not find one of this type.
On button click, I would like to change the data field into a dropdown list that defaults to the value that was present before the change.
$("#edit").on("click", function() {
let food = $("#food");
let foodValue = food.attr("data-food-value");
food.html(`<select>
<option value="1">Fries</option>
<option value="2">Burger</option>
<option value="3">Pizza</option>
</select>`);
$(`#food select option[value="${foodValue}"]`).attr("selected", true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<th>Favorite Food</th>
<td id="food" data-food-value="3">Pizza</td>
</tr>
<tbody>
</table>
<button id="edit">Edit</button>
I want it to default to Pizza on button click, but it defaults to Fries. Any help is greatly appreciated. Thank you in advance.

laravel 5.1 testing dynamic forms

am having a problem testing a laravel 5.1 app forms which have input values that are conditional on other inputs, such that when the page is loaded the second input is disabled, then its enabled after the user chooses an option on a select control (which uses javascript to set the data store of the second select as well as enabling it) allowing them to enter input. The forms work on the browser, but when testing the disabled control isn't enabled even after explicitly selecting/typing in the first in put.
Here's my testing code
$this->visit('/forms/document')->submitForm('submit', ['username' => 'Superuser','password' => 'sample'])
->see('Upload Document')
//test sending blank form
->submitForm('save',['owner' => ''])
->see('Name is Required')
->see('Type is Required')
->see('Owner is Required')
->see('File is Required')
//test sending properly filled form
->type('user', '#type')
->type('1', '#owner')
->type('Test Document', 'name')
->attach(dirname(__FILE__).'/test_document.pdf','file')
->press('save')
->see('Test Document')
->see('Never')
->see(date("M d, Y"));
and a fragment of my form code
<tr>
<td align="right">Attachment Type</td>
<td >
<select name='type' id='type' required='1' dojotype='dijit.form.FilteringSelect'
value='{{$document->type}}'>
<option value=''>Please Select</option>
<option value='user'>System User</option>
<option value='company'>Company Document</option>
<option value='voucher'>Finance Voucher</option>
<option value='pipline'>Sales Voucher</option>
<script type="dojo/method" event="onChange">
children(this,'owner',null,"{{url('/')}}");
</script>
</select>
</td>
</tr>
<tr>
<td align="right">Attached To (Owner)</td>
<td>
<select id='owner' name='owner' dojotype='dijit.form.FilteringSelect' disabled searchattr='name'></select>
</td>
</tr>
<tr>
<td align="center" colspan='2'>
<button name='save' type='submit' dojotype='dijit.form.Button'>Save Document</button>
<button name='new' type='submit' dojotype='dijit.form.Button'>Save and New</button>
</td>
</tr>
finally the javascript
//changing the data store of child from the value of the parent
function children(parent,child,parameters,url)
{
var value = dijit.byId(parent).value.toLowerCase().split(' ')[0];
if(parameters !==null){
parameters = parameters.join('/');
}
var node = dijit.byId(child);
node.set('disabled', false);
node.set('displayedValue', '');
var store = new dojo.data.ItemFileReadStore({url: url+"/store/"+value+"/"+parameters});
node.set('store', store);
}
While working with Integrated (as a separate package) and laravel 5.0 this was not a problem, but after I upgraded to 5.1 (because of multi dimensional form controls testing) the problem cropped up. I have tried everything I can think of but so far no joy. :( please help.

Build a list from one text field into another then select to remove items from list

I want to be able to enter text in the lower text field, click Add to List and have it populate in the text area above. Then if you click the item in the text area you are given the option to remove it. So far I've been able to transfer the value of the text field into the text area but need help beyond that. A working demo can be found online HERE and a JS Fiddle that doesn't work for some reason (can someone tell me why it works locally and elsewhere) JS Fiddle link. This is what I have so far:
HTML:
<div class="table-responsive">
<table class="table table-bordered">
<tbody>
<tr>
<td colspan="2" valign="top">
Problem List:<BR />
<textarea rows="4" cols="50" id="ProbAreaTo" ></textarea><BR />
<button type="button" class="btn btn-default ">Delete Selected Problem</button>
</td>
</tr>
<tr>
<td colspan="2" valign="top"><p>To add a problem to the list, type it in the New Problem text field and then click "Add to List". To remove a problem, click it in the list, then click, "Delete Selected Problem"<P>
<strong>New Problem</strong><P>
<input type="text" id="ProbAreaFrom">
<P>
<button type="button" class="btn btn-default" id="ProbListBtn" onclick="ListProbs();">Add to List</button>
</p>
</td>
</tr>
</tbody>
</table>
</div>
JAVASCRIPT
function ListProbs() {
if (document.getElementById("ProbListBtn").onclick) {
var txt1 = document.getElementById("ProbAreaFrom").value;
ProbAreaTo.value = txt1;
}
}

Sorry but your working demo does not work correctly either. It can only add 1 item, adding a second will just overwrite the first.
Im sorry but a textarea is not the right way to go as you want the area you placed a textarea to be selectable only, not writeable and editable otherwise it voids the purpose of having to add items with a single line textbox.
I would suggest using a select box with a size of say 5 e.g.
<select id="selectbox" name="selectbox" size="5">
</select>
Then, set the css for the selectbox to have overflow:hidden; so it does not display the scroller (You can then set the overflow to auto if the selectbox length is > 5 in javascript)
In javascript on your add button, you can do this:
var x = document.getElementById("selectbox");
var txt1 = document.getElementById("ProbAreaFrom").value;
var option = document.createElement("option");
option.text = txt1
x.add(option);
This will take the textbox value and add it into the selectbox.
You can then easily code a selected item to be removed on the delete button call.

A select box is used to store and remove newly created elements. This code is complete from the example given above, it does remove the element from the select box and also clears the input text box after you click add. Here is a working JS FIDDLE
CSS
#sbox {
overflow: hidden;
width: 200px;
}
HTML
<div class="table-responsive">
<table class="table table-bordered">
<tbody>
<tr>
<td colspan="2" valign="top">
Problem List:<BR />
<select id="sbox" name="selectbox" size="5"></select>
<BR>
<button type="button" class="btn btn-default" onclick="DeleteProbs();">Delete
Selected Problem</button>
</td>
</tr>
<tr>
<td colspan="2" valign="top"><p>Instructions<P>
<strong>New Problem</strong><P>
<input type="text" id="ProbAreaFrom">
<P>
<button type="button" class="btn btn-default" id="ProbListBtn"
onclick="ListProbs();">Add to List</button>
</p>
</td>
</tr>
</tbody>
</table>
</div>
JAVASCRIPT
function ListProbs() {
var x = document.getElementById("sbox");
var txt1 = document.getElementById("ProbAreaFrom").value;
var option = document.createElement("option");
option.text = txt1
x.add(option);
ProbAreaFrom.value="";
}
function DeleteProbs() {
var x = document.getElementById("sbox");
for (var i = 0; i < x.options.length; i++) {
if (x.options[i].selected) {
x.options[i].remove();
}
}
}

Trouble cloning a set of selects dependent on each other

I am trying to create a dynamic table that allows the user to select from around 100 variables. These variables have been split into categories and I have been displaying them in a second select that depends on the user selecting a value in the first select. I have been searching the web for answers and have come up blank. I realize that the clone() call will duplicate all data and for that reason id's are a poor choice for the rows.
Here is what I currently have for HTML:
<body>
<table name='myTable' class="dynatable">
<thead>
<tr>
<th class='idCol' >ID</th>
<th>Category</th>
<th>Metric</th>
<th>Conditional</th>
<th><button class="add">Add</button></th>
</tr>
</thead>
<tbody>
<form name='myForm'>
<tr class="first">
<td class="id idCol"><input type="text" name="id[]" value="0" /></td>
<td><select name='categories' onChange='updatemetrics(this.selectedIndex)' style="width: 260px">
<option selected>--Select Category--</option>
<option value='1'>Customer Experience</option>
<option value='2'>Key Satisfaction Identifiers</option>
<option value='3'>Personnel Costs</option>
<!-- I have cut the rest out for the sake of brevity. -->
</select></td>
<!-- This is the select that populates based on the user's choice. -->
<td><select style="width: 310px"name='metrics'></select></td>
</tr>
</form>
</tbody>
</table>
</body>
The Javascript that I am working with is as follows.
$(document).ready(function() {
var id = 0;
// Add button functionality
$("table.dynatable button.add").click(function() {
id++;
var master = $(this).parents("table.dynatable");
// Get a new row based on the prototype row
var prot = master.find(".prototype").clone(true);
prot.attr("class", "")
prot.find(".id").attr("value", id);
master.find("tbody").append(prot);
});
// Remove button functionality
$("table.dynatable button.remove").live("click", function() {
$(this).parents("tr").remove();
});
});
//script for dynamically populating the metrics select
var metricCategories=document.myForm.categories;
var metricList=document.myForm.metrics;
var metrics=new Array()
metrics[0]=" "
metrics[1]=['Wait time average|waitInLine','Mystery Shopper Scores|mysteryScores']
metrics[2]=['Referral Rate|ref_rate','Facebook Shares|facebook_shares','Twitter Followers|twit_followers','Customer Complaint Calls|comp_calls']
metrics[3]=['Pension Payouts|pension_pay', 'Full Time Employees|ftes', 'Part Time Employees|ptes', 'Contractor Costs|contract_costs']
function updatemetrics(selectedMetricGroup){
metricList.options.length=0
if (selectedMetricGroup>0) {
for (i=0; i<metrics[selectedMetricGroup].length; i++)
metricList.options[metricList.options.length]=new Option(metrics[selectedMetricGroup][i].split("|")[0], metrics[selectedMetricGroup][i].split("|")[i])
}
}
Any help would be appreciated. To reiterate the reason I am asking for help, I need to add/ remove rows that hold select nodes that interact with each other. Thanks in advance.

Display Hidden Tbody Content with OnClick/A Href Tag

I have various hidden tables that become displayed with onChange events. In the content of one of these tables, I would like to put a hyperlink that will take me back to the previously hidden table. So, to begin with, I have:
<table>
<tbody id="option11" style="display: none;">
<tr>
<td>
<p>
<select name="type" onChange="display(this,'option11a','option11b');">
<option>Please select:</option>
<option value= "option11a">Missed Deadline</option>
<option value= "option11b">Application Down</option>
</select>
</p>
</td>
</tr>
</table>
The onChange associated with this table is:
function display(obj,id11a,id11b)
{
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id11a).style.display = 'none';
document.getElementById(id11b).style.display = 'none';
if ( txt.match(id11a) )
{
document.getElementById(id11a).style.display = 'block';
}
if ( txt.match(id11b) )
{
document.getElementById(id11b).style.display = 'block';
}
}
If the user selects option11a, they are presented with:
<table>
<tbody id="option11a" style="display: none;">
<tr>
<tr>
<td><p>1. Identify missing work.</p></td>
<td><p>2. Contact management.</p></td>
</tr>
</tr>
And, if the user selects option11b, they are presented with:
<table>
<tbody id="option11b" style="display: none;">
<tr>
<tr>
<td><p>1. Contact management.</p></td>
<td><p>2. Refer to Missed Deadline instructions.</p></td>
</tr>
</tr>
So- what I'd like to do is this: Place a hyperlink of some sort in the "Refer to Missed Deadline instructions" that, when clicked, displays the table with tbody id option11a once again.
Let me know if I should better clarify. Greatly appreciate all help! Thanks.

You can do this easily with jquery's .last selector.
http://api.jquery.com/last-selector/