populate multiple select from mysql database prestashop - javascript

I want to create a multiple select with add/remove button and the values in that multiple select i want to fetch from mysql query. my question is how will i populate the result of query in to select lists value?
my code is as follows: Product.tpl
<form>
<fieldset>
<form name="formName1">
<select name="selectfrom" id="select-from" multiple size="5" >
<option value="1?>">Item1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
<option value="4">Item 4</option>
</select>
Add »
« Remove
<select name="selectto" id="select-to" multiple size="5">
<option value="5">Item 5</option>
<option value="6">Item 6</option>
<option value="7">Item 7</option>
</select>
<input type="button" onClick="myFunction()" value="Submit form">
</fieldset>
</form>
and my php file code is :
public function products_configure($url){
$productsel = "Select id_product,name from ". _DB_PREFIX_ ."product_lang";
$products = Db::getInstance()->executeS($productsel);
foreach($products as $product){
$productintid = $product['id_product'];
$productintname = $product['name'];
}
$this->context->smarty->assign(array(
'url' => $url
));
return $this->fetchTemplate('/views/templates/back/products.tpl');
}
can anyone pls tell how will i use $productintname to option value in tpl file.

Related

Custom html validation for select

I have a select element like this:
<select name="select">
<option value="opt1">Select One Value Only</option>
<option value="opt2">Type 2</option>
<option value="opt3">Type 3</option>
</select>
and I want user to select a option e.g. opt2, opt3... but opt1,
how to to use html 5 validation to valid the select?
I think the only way to add the validation here is to set the default option value to an empty string and add required attribute to select element. Now you can click on submit button to see the validation:
<form>
<label >Choose an option:</label>
<select name="select" required>
<option value="" disabled selected>Select One Value Only</option>
<option value="opt2">Type 2</option>
<option value="opt3">Type 3</option>
</select>
<input type="submit">
</form>
The issue here is that when you set a value to the default option to something other than empty string the validation infers it as a valid value has been already selected, thus the validation is not triggered at that point.
You can do something like the following:
<select name="select">
<option value="opt1" selected disabled>Select One Value Only</option>
<option value="opt2">Type 2</option>
<option value="opt3">Type 3</option>
</select>
In the snippet above, the opt1 is selected by default. The user can only select opt2 or opt3, but once they do that then they cannot selecte opt1, hope this is the behaviour you're looking for.
Try Using:
<select name="select" required>
<option value="opt1" selected="selected" disabled>Select One Value Only</option>
<option value="opt2">Type 2</option>
<option value="opt3">Type 3</option>
</select>

Connecting two Combo-boxes with html and js

I am trying to make these two combo-boxes join each other. But, my problem is, that my second combo-box cannot change if I select the category.
This is what I've done.
HTML CODE
<!-- language: lang-html -->
<label for="JenisBarang">Jenis Barang</label>
<br>
<select id="JenisBarang" name="JenisBarang">
<option value="0" selected="selected">Mouse</option>
<option value="1">Keyboard</option>
<option value="2">Webcam</option>
</select>
<br>
<label for="PilihBarang">Pilih Barang</label>
<br>
<select id="PilihBarang_0" name="PilihBarang_0" style="display: inline;">
<option value="1">Asus GX-1000</option>
<option value="2">Logitech M238 Edisi : Burung Hantu</option>
<option value="3">Logitech M238 Edisi : Astronot</option>
<option value="4">Logitech M238 Edisi : Musang</option>
<option value="5">Logitech M238 Edisi : Kera</option>
<option value="6">Lenovo N700</option>
<option value="7">Asus Gladius</option>
</select>
<select id="PilihBarang_1" name="PilihBarang_1" style="display: none;">
<option value="1">Logitech K400r</option>
<option value="2">Logitech MK240</option>
<option value="3">Asus GK2000</option>
</select>
<select id="PilihBarang_2" name="PilihBarang_2" style="display: none;">
<option value="1">Lenovo Webcam</option>
<option value="2">Logitech C920</option>
</select>
<br>
Java Script CODE
<script>
function change_product(evt)
{
var JenisBarang=document.getElementById('JenisBarang'),whichstate;
whichstate=JenisBarang.options[state.selectedIndex].value;
for(var i=0;i<JenisBarang.options.length;i++)
document.getElementById('PilihBarang_'+i).style.display=(i==whichstate ? 'inline':'none');
}
</script>
Dictionary
JenisBarang means the category ex Mouse
PilihBarang means the items ex Mouse Logitech M185
Can you check the following Code. use value specify options in the second combo box. It is a simple code hope nothing to explain.. I have placed couple of comments.
$("#comboBox1").change(function() {
if ($(this).data('options') === undefined) {
/* Get all the options in second Combo box*/
$(this).data('options', $('#comboBox2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#comboBox2').html(options);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select name="comboBox1" id="comboBox1">
<option value="0">Please Select</option>
<option value="1">Mouse</option>
<option value="2">Keyboard</option>
<option value="3">WebCam</option>
</select>
<!-- Second Combo Box-->
<select name="comboBox2" id="comboBox2">
<option value="1">Mouse Model 1</option>
<option value="1">Mouse Model 2</option>
<option value="1">Mouse Model 3</option>
<option value="2">Keyboard model 1</option>
<option value="2">Keyboard model 2</option>
<option value="2">Keyboard model 3</option>
<option value="3">webcam model 1</option>
<option value="3">webcam model 2</option>
</select>
Edit : JS Fiddle link JS Fiddle

HTML Form that creates a string [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
This is kind of an odd one. Long story short, I'm trying to add strings together using dropdown lists but I'm not quite sure how to go about it and searching for answers has borne no fruit.
I've tried any number of combinations of jquery, java, and HTML but nothing works yet
Example:
Selection 1: first-string
Selection 2: second-string
Selection 3: third string
I also need it to display the result of this on screen somewhere (I was trying to run a function via a button that would add the strings together and display them in a text box but it would only add numbers, not strings)
EDIT: I felt i'd fundementaly misunderstood...well just about everything I tried which is why I didn't share the code. But here we go:
It is suggested you install a color picker to pair with this software
base = "000000";
eye = "FFFFFF";
nose = "000000";
m1c = "FFF000";
m2c = "00FFFF";
species = 1
m1 = 0
m2 = 0
function feli() {
var m1 = document.getElementById("textbox1").value;
var answer = "http://www.felisfire.com/demo.php?s="+species+"&b"="+"base"+"&e="+"eye"+"&n="+"nose"+"&m1="+"m1"+"&m1c="+"m1c"+"&m2="+"m2"+"&m2c="+"m2c";
var textbox3 = document.getElementById('textbox3');
textbox3.value=answer;
}
</script>
Species
<select name=species id=species>
<option value="1">Felidae</option>
<option value="3">Aquus</option>
<option value="8">Scalae</option>
<option value="5">Zerda</option>
<option value="6">Chetae</option>
<option value="10">Aurae</option>
<option value="7">Igneo</option>
<option value="9">Lycreon</option>
<option value="4">Iuridon</option>
<option value="2">Xano</option>
</select>
Marking 1
<select name=m1 onChange = "m1 = this.value">
<option value="1">None</option>
<option value="12">Accents</option>
<option value="41">Anubis (p)</option>
<option value="13">Appaloosa</option>
<option value="15">Back Spots</option>
<option value="124">Badger</option>
<option value="44">Ball Python</option>
</select>
Marking 2
<select name=m1 onChange = "m2 = this.value">
<option value="1">None</option>
<option value="12">Accents</option>
<option value="41">Anubis (p)</option>
<option value="13">Appaloosa</option>
<option value="15">Back Spots</option>
<option value="124">Badger</option>
<option value="44">Ball Python</option>
</select>
<input type="submit" name="button" id="button1" onclick="feli" value="Design!" />
<input type="text" name="textbox3" id="textbox3" readonly="true"/>
</div>
It's simple to combine the string using JQuery.
$("input").on("change", function () {
$('#combine').val(($('#str1').val() +" "+ $('#str2').val()));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="str1" />
<input type="text" id="str2" />
<input type="text" id="combine" />
Hope it helps.
This code works.
If your HTML looks like this.
<select name="">
<option value="">thisis 1</option>
<option value="">thisis 2</option>
<option value="">tisis 3</option>
<option value="">thisis 4</option>
<option value="">thisis 5</option>
</select>
<select name="">
<option value="">thisis 1</option>
<option value="">thisis 2</option>
<option value="">thisis 3</option>
<option value="">thisis 4</option>
<option value="">thisis 5</option>
</select>
<select name="">
<option value="">thisis 1</option>
<option value="">thisis 2</option>
<option value="">thisis 3</option>
<option value="">thisis 4</option>
<option value="">thisis 5</option>
</select>
<textarea name="" id="resulter" cols="30" rows="10"></textarea>
and you jQuery would look like this.
<script>
$(function(){
$('select').change(function(){
// Get the selected option text
var getText = $(this).find('option:selected').text();
// Get the current textarea text
var areaText = $('#resulter').text();
// Concatenate the selected and area text together
$('#resulter').text(areaText + getText);
});
});
</script>

Getting multiple data from multiple select boxes'

I've got next situation:
I have multiple select boxes (that can select multiple choices) and i need that in php to be processed.
A code is next:
<select name="selectusers[]" multiple>
<option value="1">John</option>
<option value="2">Smith</option>
</select>
<select name="selectusers[]" multiple>
<option value="1">John</option>
<option value="2">Smith</option>
</select>
<input type="submit" value="Send" />
So now, in PHP I do the general foreach
<?php
foreach($select_users as $users){
...
}
?>
But each time I do foreach loop, and i print_r($select_users); inside of foreach, it gives me same result like:
Array([0]=>Array([0]=>30)[1]=>Array([0]=>33))
Array([0]=>Array([0]=>30)[1]=>Array([0]=>33))
What should I do?
Thank you.
You need to change the name of your select:
<select name="selectusers[]" multiple>
<option value="1">John</option>
<option value="2">Smith</option>
</select>
<select name="selectusers2[]" multiple>
<option value="1">John</option>
<option value="2">Smith</option>
</select>
<input type="submit" value="Send" />
Try this.

set a particular listbox item as selected in html through jsp

i m new to jsp, what want to do is:
to set a listbox item as selected in html from jsp
in abc.jsp
<%
try
{
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connection conn = DriverManager.getConnection("jdbc:odbc:dsnName","","");
Statement stmt=conn.createStatement();
String query="select * from tablen1 where id=1";
ResultSet rset=stmt.executeQuery(query);//suppose only one record is selected or fetched
String data=rset.getString(2);//i want this value to be shown in listbox of html form as selected when that form get opened
..............
......
%>
<form>
.......
......
<select name="paper" onBlur="f_papper();" >
<option value="">---SELECT---</option>
<option value="value1">item1</option>
<option value="value2">item2</option>
<option value="value3">item3</option>
<option value="value4">item4</option>
<option value="value5">item5</option>
<option value="value6">item6</option>
<option value="value7">item7</option>
</select>
</form>
plz tell me how can i make a listbox item as selected according to my need..
Any help would be greatly appreciated!
You can use below < select > of before < /body >
<script>
document.getElementById('paper').value = '<%= data %>';
</script>
as suggested by #s3ib
OR
<select name="paper" onBlur="f_papper();" >
<option value="">---SELECT---</option>
<option value="value1" <%if("value1".equals(data)out.print("selected='selected'");%>>item1</option>
<option value="value2" <%if("value2".equals(data)out.print("selected='selected'");%>>item2</option>
...
</select>
The above code is ideal if you are generating the options using loop
<select name="paper" id="paper" onBlur="f_papper();" >
<option value="">---SELECT---</option>
<option value="value1">item1</option>
<option value="value2">item2</option>
<option value="value3">item3</option>
<option value="value4">item4</option>
<option value="value5">item5</option>
<option value="value6">item6</option>
<option value="value7">item7</option>
</select>
<script>
$('#paper').val('<%= data %>');
</script>
This would be one way of doing it using jQuery.
EDITED:
Or if you dont want to use jQuery, you can use pure JavaScript also like that:
<script>
document.getElementById('paper').value = '<%= data %>';
</script>
<select name="paper" >
<option value="">---SELECT---</option>
<option value="value1" selected="">item1</option> //this value selected
<option value="value2" >item2</option>
<option value="value3">item3</option>
<option value="value4">item4</option>
<option value="value5">item5</option>
<option value="value6">item6</option>
<option value="value7">item7</option>
</select>
this tips may help you...

Categories

Resources