html multi <select> array in PHP post - html

<form>
<input class="date-pick" type="text" value="2010/08/02" name="date" />
<table id="events_selection">
<tr>
<td>
<img src="/admin/ajax/image.php?filename=/media/immagini/danieledaniela/1.jpg&maxw=200" />
<select name="1">
<option value="0"> NESSUN EVENTO </option>
<option value="5">anelli</option>
<option value="8">ballo</option>
<option value="6">cerimonia in chiesa</option>
<option value="13">dettagli</option>
<option value="9" selected="selected"><strong>festa</strong></option>
<option value="4">gli sposi</option>
<option value="1">la sposa</option>
<option value="3">lancio del riso</option>
<option value="2">lo sposo</option>
<option value="11">preparazione sposa</option>
<option value="10">preparazione sposo</option>
<option value="7">ristorante</option>
<option value="12">varie</option>
</select>
</td>
<td>
<img src="/admin/ajax/image.php?filename=/media/immagini/danieledaniela/30.jpg&maxw=200" />
<select name="31">
<option value="0"> NESSUN EVENTO </option>
<option value="5">anelli</option>
<option value="8">ballo</option>
<option value="6">cerimonia in chiesa</option>
<option value="13">dettagli</option>
<option value="9">festa</option>
<option value="4">gli sposi</option>
<option value="1">la sposa</option>
<option value="3">lancio del riso</option>
<option value="2">lo sposo</option>
<option value="11">preparazione sposa</option>
<option value="10">preparazione sposo</option>
<option value="7">ristorante</option>
<option value="12">varie</option>
</select>
</td>
</tr>
</table>
</form>​​​​​​​​
HI, in a situation like this (which is an example, there are many selects and other inputs) posting this form would give a $_POST like this
array {
date => "2010/08/09"
input1 => "bla"
input3 => "bla2"
//list of selection
1 => 2
2 => 4
3 => 5
//ends list of selection
input 4 => "bla4"
}
Can I directly from the HTML form put the <select>s in seperate array since they represent a grouped array?
array {
date => "2010/08/09"
input1 => "bla"
input3 => "bla2"
//list of selection
array {
1 => 2
2 => 4
3 => 5
}
//ends list of selection
input 4 => "bla4"
}
Thanks!

This:
<select name="selection[1]">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="selection[2]">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
Would return:
'selection' => array(1 => 1, 2 => 1)
Guess that's what you're looking for? :-)

Related

is it possible to write an es6 onChange arrow function?

What's the correct syntax for the onChange es6 function?
function myEvent(e){
console.log(e.target)
}
<select onChange=(event)=>{console.log(event.target)}>
<option value="5"> 5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
<select onChange={console.log(event.target)}>
<option value="5"> 5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
<select onChange="myEvent(event)">
<option value="5"> 5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
<select onChange=function(){console.log("hello"))>
<option value="5"> 5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
I was just wondering if it was possible to have a multi line function embedded in the html. Appears the answer is n
You can. The value of the on* attributes become the body of a function. Therefore you can define a function inline but you also have to call it.
For example:
<select onChange="function foo(){
console.log('hello')
}
foo();">
<option value="5"> 5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
<!-- as IIFE -->
<select onChange="(function(){console.log('hello')}())">
<option value="5"> 5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
<!-- of course that works with arrow functions too -->
<select onChange="(() => {console.log('hello')
console.log('goodbye')})()">
<option value="5"> 5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
Try sending the event as a parameter to the js function and use it there
const onChangeHandler = (e) => {
const selectedValue = e.target.value;
console.log(selectedValue)
}
<select onChange="onChangeHandler(event)">
<option value="5"> 5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
Inline javascript context you can do
ARROW Function
<select onchange="(() => console.log(event.target.value))()">
REACTJS Context
check curly braces and event.target.value
<select onChange={(event) => console.log(event.target.value) }>
<option value="5"> 5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
<select onChange={(event) => {console.log(event.target.value)} }>
<option value="5"> 5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
This is not an actual answer but a demonstration that the task at hand can be done in a much easier way.
document.body.onchange=e=>{
console.log(e.target.value)
}
<select>
<option> 5</option>
<option> 6</option>
<option>15</option>
</select>
<select>
<option> 5</option>
<option> 7</option>
<option>15</option>
</select>
<select>
<option> 5</option>
<option> 8</option>
<option>15</option>
</select>
<select>
<option> 5</option>
<option> 9</option>
<option>15</option>
</select>

How to search first x digits typing them inside <select> <option>

I have this code but imagine it takes 'options' from a database with tousands of lines. How if I want to choose 0010 or 02ff typing it?
<label for="select">Choose:</label>
<select id="select">
<option value="">--Please choose an option--</option>
<option value="0000">0000</option>
<option value="0100">0100</option>
<option value="0010">0010</option>
<option value="0001">0001</option>
<option value="02fe">02fe</option>
<option value="02ff">02ff</option>
<option value="03fe">03fe</option>
</select>

CakePHP 3 - populate select dropdown with data from custom table

So I started looking at CakePHP, and I'm just doing a few test cases to see if CakePHP will cater for all my needs.
I have a custom table (Table name: roles):
id role sub_site
1 Role 1 0
2 Role 2 0
3 Role 3 0
4 Role 4 0
5 Role 1 1
In my controller (User controler) I have the following code based on all the feedback here.
$this->loadModel("roles");
$rolesList = $this->roles->find('list', array(
'conditions' => array('sub_site' => '0'),
'fields' => array('id', 'role')
));
$this->set(compact('rolesList'));
I have the following in the view
$this->Form->input('role', array('label'=>false,
'div'=>false,
'type'=>'select',
'empty'=>'-- select one --',
'options'=>$rolesList));
Yet the output looks like this:
<select name="role" required="required" id="role">
<option value="">-- select one --</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
All I want is the output as follows:
<select name="role" required="required" id="role">
<option value="">-- select one --</option>
<option value="1">Role 1</option>
<option value="2">Role 2</option>
<option value="3">Role 3</option>
<option value="4">Role 4</option>
</select>
Please indicate what is wrong here as this is suppose to be simple to just populate?
I am getting results using this method. In my controller:
$articles = TableRegistry::get('Transfers');
$make=$articles->find('list', ['keyField' => 'id','valueField' => 'make']);
$this->set('make',$make);
and then in view:
echo $this->Form->input('make',['type'=>'select','options'=>$make ,'empty'=>'-Select Make-','class'=>'form-control','templateVars'=>['class'=>'col-md-4']]);
Hope you will get results.

How do I list all value= options in an html (aspx) page

I am working off a .NET website that has a bunch of webforms. The user types in their data via a browser and the submitted data is pushed a SQL Server database.
I am trying to analyze the data in the database but am struggling because there is no code book which shows me what the codes 1, 2, 3 etc represent.
Is there some relatively simple tool in Javascript or something that I can use to extract all the options in the dropdown list and tell me how they are coded ? For instance, by right-clicking on the source code I can see that for Mode: there are three options: 1=Research, 2=Test and 3=Non-Research.
I've got a couple of hundred of these things so I do not really want to do this by hand...
I am thinking there are some tools (hopefully online, maybe JSFiddle) that can do this automatically.
I have copied a snippet of the HTML below. I do not know if it helps but the page uses:
bootstrap.js
jquery.js
some CSS
<tr>
<th class="newpatient-label">Mode:
</th>
<td>
<select name="ctl00$cphBody$fvPatient$modeDropDownList" id="cphBody_fvPatient_modeDropDownList">
<option selected="selected" value="1">Research</option>
<option value="3">Non-Research</option>
<option value="2">Test</option>
</select>
</td>
</tr>
<tr>
<th class="newpatient-label">Condition:</th>
<td>
<select name="ctl00$cphBody$fvPatient$ddlCondition" id="cphBody_fvPatient_ddlCondition">
<option value="1">Active</option>
<option selected="selected" value="2">Inactive</option>
</select>
</td>
</tr>
<tr>
<th class="newpatient-label">Alternate ID:
</th>
<td>
<input name="ctl00$cphBody$fvPatient$alternateIdTextBox" type="text" value="097175EM" id="cphBody_fvPatient_alternateIdTextBox" />
<span id="cphBody_fvPatient_rfvPatientCmsId" style="display:none;">*</span>
</td>
</tr>
<tr>
<th class="newpatient-label">Alias:</th>
<td>
<input name="ctl00$cphBody$fvPatient$aliasTextBox" type="text" value="4159714811" id="cphBody_fvPatient_aliasTextBox" />
</td>
</tr>
<tr>
<th class="newpatient-label">Preferred Language:
</th>
<td colspan="1">
<select name="ctl00$cphBody$fvPatient$languageDropDown" id="cphBody_fvPatient_languageDropDown">
<option value="3">Amharic </option>
<option value="4">Arabic </option>
<option value="5">Brazilian Portuguese </option>
<option value="6">Burmese </option>
<option value="7">Chin </option>
<option value="8">Chuukese </option>
<option value="9">Dari </option>
<option selected="selected" value="1">English </option>
<option value="10">French </option>
<option value="11">German </option>
<option value="12">Greek </option>
<option value="13">Haitian </option>
<option value="14">Hindi </option>
<option value="15">Hmong </option>
<option value="16">Ilocano </option>
<option value="17">Indonesian </option>
<option value="18">Italian </option>
<option value="20">Japanese </option>
<option value="19">Jarai </option>
<option value="21">Karen </option>
<option value="22">Khmer </option>
<option value="23">Korean </option>
<option value="24">Kurdish </option>
<option value="25">Lao </option>
<option value="26">Malayalam </option>
<option value="27">Marshallese </option>
<option value="28">Nepali </option>
<option value="29">Oromo </option>
<option value="46">Other </option>
<option value="30">Persian </option>
<option value="31">Polish </option>
<option value="32">Punjabi </option>
<option value="33">Romanian </option>
<option value="34">Rundi </option>
<option value="35">Russian </option>
<option value="36">Serbian </option>
<option value="2">Spanish </option>
<option value="37">Swahili </option>
<option value="38">Swedish </option>
<option value="39">Tagalog </option>
<option value="40">Tamil </option>
<option value="41">Thai </option>
<option value="42">Tigrinya </option>
<option value="43">Traditional Chinese </option>
<option value="44">Urdu </option>
<option value="45">Vietnamese </option>
</select>
if you have the HTML you can do it with jquery like this.
variable html contains the html you provided
Demo
$(function() {
var tmpHTML = $(html);
var vals = [];
//get all existing SELECT menus
tmpHTML.find("select").each(function(index, itm) {
var opts = [];
//loop through each of the menu's options
$(this).find("option").each(function(i, opt) {
if (opt.text!== '') {
opts.push({
value: opt.value,
text: opt.text
});
}
});
//push the menu along with its options into an array
vals.push({
id: itm.id,
options: opts
});
});
console.log(vals);
});
vals contains the list of menus along with their options

HTML Form first dropdown auto change the second dropdown options

I have this code on the first dropdown:
<td align="left" style="padding-bottom:10px">
<select name="category" id="category">
<option selected value="Please Select">Please Select</option>
<option value="Cars">Cars</option>
<option value="Trucks">Trucks</option>
<option value="Motorcycles">Motorcycles</option>
<option value="Boats">Boats</option>
</select>
</td>
and i also have a second category with different colors for the previous option.
For example:
If i select Cars the second dropdown will appear to select "Red", "Green" or "Blue" but if i select Trucks the second dropdown will appear to select "Black" or "White" options only.
Both second dropdown options will go to the same column (Subcategory) in the mySQL DB so no Car can have the value "Black" on Subcategory column or no Truck can have the value "Red" on Subcategory column.
Thanks
Working example: http://jsfiddle.net/7YeL6/4/
Given this structure:
<select name="category" id="category">
<option selected value="Please Select">Please Select</option>
<option value="Cars">Cars</option>
<option value="Trucks">Trucks</option>
<option value="Motorcycles">Motorcycles</option>
<option value="Boats">Boats</option>
</select>
<div>
<select name="category2" id="truck" class="second">
<option value="white">white</option>
<option value="black">black</option>
</select>
<select name="category2" id="car" class="second">
<option value="red">red</option>
<option value="green">green</option>
<option value="blue">blue</option>
</select>
</div>
You could use jQuery .change function:
$("#category").change(function () {
var str = "";
str = $("select#category option:selected").text();
if(str == "Trucks"){
$("select.second").not("#truck").hide();
$("#truck").show();
$("#truck").fadeIn(1000);
}
else if(str == "Cars"){
$("select.second").not("#car").hide();
$("#car").show();
$("#car").fadeIn(1000);
}
})
CSS
#category2{
display: none;
}