I am trying to separate multiselect with two side in different html.
In Main.html put select name from[].
Another sub.html put select name to[].
Then, my main.html using iframe to display sub.html.
My quection is, how can I passing selected value in Main Frame Value to iframe
Here is my Main.html code (from[]) https://jsfiddle.net/mouseshop318/yv7fdpj7/21/
<div class="col-xs-5">
<select name="from[]" class="form-control" size="8" multiple="multiple">
<option value="1">Item 1</option>
<option value="2">Item 5</option>
<option value="2">Item 2</option>
<option value="2">Item 4</option>
<option value="3">Item 3</option>
</select>
</div>
<iframe src ="sub.html"></iframe>
sub.html code (to[])
https://jsfiddle.net/mouseshop318/khqkv628/6/
<div class="col-xs-5">
<select name="to[]" id="search_to" class="form-control" size="8" multiple="multiple"></select>
</div>
js
jQuery(document).ready(function($) {
$('.multiselect').multiselect();
});
ref:http://crlcu.github.io/multiselect/examples/data-options.html
Related
I have a dropdown which I took from here, https://www.w3schools.com/HOWTO/howto_custom_select.asp and that works okay in html:
<div class="custom-select">
<select>
<option value="0">Select</option>
<option value="0">07.30 - 68.30</option>
<option value="0">07.30 - 98.30</option>
</select>
</div>
But I need to create this in JavaScript with the click event of button:
function addRow(btn) {
document.querySelector("#content").insertAdjacentHTML(
"afterbegin",
`<tr>
<td>${btn.id}</td>
<td>
<div class="custom-select">
<select>
<option value="0">IS</option>
<option value="1">IS 1</option>
<option value="2">IS 2</option>
</select>
</div>
</td>
</tr>`
);
}
But when I do it like this, the dropdown doesnt open anymore. So when I write inside of the javascript, I see the element is like in DOM:
<td>
<div class="custom-select">
<select>
<option value="0">IS</option>
<option value="1">IS 1</option>
<option value="2">IS 2</option>
</select>
</div>
</td>
But in html it is like:
<div>
<div class="custom-select">
<select>
<option value="0">IS</option>
<option value="1">IS 1</option>
<option value="2">IS 2</option>
</select>
<div class="select-selected">IS</div><div class="select-items select-hide"><div>IS 1</div><div>IS 2</div></div></div>
</div>
So I dont know why it doesn add ISIS 1IS 2 automatically.
Do you know why?
Thanks.
You haven't closed the .custom-select <div> tag. Could be the cause of the issue
I want to use swig (it is my templating engine) to insert JavaScript so that the following shows only when the select option 'other' is chosen.
<div class="form-group">
<select class="custom-select">
<option selected>Select Switch Manufacturer</option>
<option value="cisco">Cisco</option>
<option value="netgear">NetGear</option>
<option value="d-link">D-link</option>
<option value="tp-link">TP-link</option>
<option value="hewlett-packard">Hewlett-Packard</option>
<option value="linksys">Linksys</option>
<option value="allied">Allied</option>
<option value="brocade">Brocade</option>
<option value="other">Other</option>
</select>
This is the code I want to only show when the user selects the 'other' option in the code above. How can I do this with Javascript / swig?
<div class="form-group">
<input type="text" class="form-control" id="switch-manufacturer" placeholder="Switch Manufacturer">
</div> <!-- Switch Manufacturer other input only show when above 'other' is selected -->
I made a pen for you.
https://codepen.io/anon/pen/WZENjo
You just need to use the value property of the <select> element.
I used a button to call the function, you can use whatever you want, including adding an onclick to the <select> element, which would look something like this.
<div class="form-group">
<select class="custom-select" id="sel" onclick="foo()">
<option selected>Select Switch Manufacturer</option>
<option value="cisco">Cisco</option>
<option value="netgear">NetGear</option>
<option value="d-link">D-link</option>
<option value="tp-link">TP-link</option>
<option value="hewlett-packard">Hewlett-Packard</option>
<option value="linksys">Linksys</option>
<option value="allied">Allied</option>
<option value="brocade">Brocade</option>
<option value="other">Other</option>
</select>
I'm trying to use multiple select option in my html page
I'm using materialized css
I used the below code
But it is not working
Can anyone help me with this please
<select multiple size='6' name='list[ ]'>
<option>One</option>
<option>Two</option>
<option selected>Three</option>
<option>Four</option>
<option>Five</option>
<option selected>Six</option>
</select>
Check your syntax.
If you are using materialize css, it should work.
http://materializecss.com/forms.html
Go to "select" and check syntax.
<div class="input-field col s12">
<select multiple>
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Multiple Select</label>
</div>
Also initialize select by adding
$(document).ready(function() {
$('select').material_select();
});
I have a simple HTML form that is posting to a URL like this...
<form>
<select name="option_dropdown">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
</select>
<input class="textinput1" type="text"></input>
<input class="textinput2" type="text"></input>
<input class="textinput2" type="text"></input>
</form>
This generates a URL like this www.example.com/?option_dropdown=option1 when submitted, it does not include the text input boxes as they do not have a name attatched to them.
What I would like to do is add some logic to the text inputs that will choose one depending on its content and then include that parameter when the form is submitted.
Is javascript the way to achieve this?
You ask for javascript way so you can try this.
In order to identify 3 textboxes i've given id's to them.
<form>
<select name="option_dropdown">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
</select>
<input class="textinput1" id='txt1' type="text"></input>
<input class="textinput2" id='txt2' type="text"></input>
<input class="textinput2" id='txt3' type="text"></input>
<input type='submit' id='submit'>
</form>
on submitting this form script will add name property to any of the 3 text boxes based on a logic of yours. so only that textbox content will be submitted.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
/* Any logic which select the textbox to be submitted */
id='txt1'; // it can be txt2 or txt3
$("#submit").click(function(){
$("#"+id).attr("name","text");
});
});
</script>
1.Create a PHP file in the same directory as the html.
2.Edit your form to point to that php file and name your text fields so you could refer to them.
<form method="post" action="formTester.php">
<select name="option_dropdown">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
</select>
<input name="textinput1" class="textinput1" type="text"></input>
<input name="textinput2" class="textinput2" type="text"></input>
<input name="textinput3" class="textinput2" type="text"></input>
</form>
3. In your file formTester.php
<?php
// define variables and and get data from the text fields
$text1= $_POST["textinput1"];
$text2= $_POST["textinput2"];
$text3= $_POST["textinput3"];
// Now you can manipulate the data however you want ..add it to database, trim, validate etc
?>
Hope it helps,
Best
<form>
<select name="option_dropdown">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
</select>
<input type="text" class="textinput1" name="textinput[]" value="input1" />
<input type="text" class="textinput2" name="textinput[]" value="input2" />
<input type="text" class="textinput3" name="textinput[]" value="input3" />
</form>
One option is to stack your values in an array and parse it on the backend. This removes the need for JavaScript.
<form>
<select name="option_dropdown">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
</select>
<input type="text" class="textinput1" name="textinput[]"></input>
<input type="text" class="textinput2" name="textinput[]"></input>
<input type="text" class="textinput3" name="textinput[]"></input>
</form>
I need to show the submit button on many forms on the same page only if one option from a select is selected.
I have:
<form id="1">
<input type="text">
<select>
<option value="">Select one value</option>
<option value="1">value 1</option>
<option value="2">value 2</option>
</select>
<input type="submit">
</form>
and
<form id="2">
<input type="text">
<select>
<option value="">Select one value</option>
<option value="1">value 1</option>
<option value="2">value 2</option>
</select>
<input type="submit">
</form>
so, I need to show the submit button only if an option of the select is selected
Thanks!!!
This a working example with you html http://jsfiddle.net/g188o5eg/
$('select').on('change', function(){
if($(this).val() != ''){
$(this).parent().find('input[type="submit"]').show();
} else {
$(this).parent().find('input[type="submit"]').hide();
}
});
It will work with all forms on your site :)
Try something like this (would work with multiple select boxes (uses the nearest submit):
<form>
<input type="text">
<select class="select">
<option value="">Select one value</option>
<option value="1">value 1</option>
<option value="2">value 2</option>
</select>
<input type="submit" class="submitbutton">
<script type="text/javascript">
$('.submitbutton').hide();
$('.select').click(function() {
$(this).closest('.submitbutton').show();
});
</script>