I have a multiple select. How can make, that all options will be selected always? Or how make a selecting all options ob submit. I have only class of select(not ID).
I think you can even write your replacement line like this:
$(".someClass option").attr("selected", "selected");
to avoid the .each() loop.
Here's a slight modific to Kitsched's code to ensure that you're able to select the button/select control if you only have the class and not the id.
<html id="html">
<body id="body">
<script src="file:\\\D:\Sidharth\javascript\jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
function SelectAll() {
$(".someClass").children().each(function () { $(this).attr("selected", "selected"); });
}
$(".clickme").bind("click", SelectAll);
});
</script>
<input type="submit" class="clickme" />
<select multiple="yes" class="someClass">
<OPTION VALUE="1" id="one">Option 1</OPTION>
<OPTION VALUE="2" id="two">Option 2</OPTION>
<OPTION VALUE="3" id="three">Option 3</OPTION>
<OPTION VALUE="4" id="four">Option 4</OPTION>
</select>
</div>
</body>
</html>
If you've IDs for either button or select just replace the . with # in script. For e.g. if button's id is clickme instead of class just use #clickme instead of .clickme.
Hope this is what you're looking for.
I'm not 100% sure that this is what you're asking for, but here it goes:
<SELECT MULTIPLE="yes" ID="multipleSelect">
<OPTION VALUE="1" SELECTED="selected">Option 1</OPTION>
<OPTION VALUE="2" SELECTED="selected">Option 2</OPTION>
<OPTION VALUE="3" SELECTED="selected">Option 3</OPTION>
<OPTION VALUE="4" SELECTED="selected">Option 4</OPTION>
<OPTION VALUE="5" SELECTED="selected">Option 5</OPTION>
<OPTION VALUE="6" SELECTED="selected">Option 6</OPTION>
</SELECT>
<INPUT TYPE="submit" ID="submit" value="Go!"/>
For the dynamic option (with jQuery):
$("#submit").click(function() {
$("#multipleSelect option").each(function() {
$(this).attr("selected", "selected");
});
});
Untested.
Good luck.
Related
Okay so for example I have declared a custom value in a select for for example
<select id="something">
<option value="1" data="01"></option>
<option value="2" data="02"></option>
<option value="3" data="03"></option>
<option value="4" data="04"></option>
</select>
For some reason I cannot use the value attribute here. I need to use data attribute to extract the value. I tried using jquery as below:
var dataString = {
clicks: $("#clicks").val($(this).find(':selected').attr('data'))
};
But this is not returning the result as expected. In console its showing too much recursion. I am not getting the value of the data attribute here (01, 02, 03 etc). Please help.
I would recommend you to use data-* prefixed attribute which can be accessed using .data()
console.log($("#something option:selected").data("value"))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="something">
<option value="1" data-value="01"></option>
<option value="2" data-value="02"></option>
<option value="3" data-value="03"></option>
<option value="4" data-value="04"></option>
</select>
Try this code
<select id="selectNo">
<option value="1" data-no="01">1</option>
<option value="2" data-no="02">2</option>
<option value="3" data-no="03">3</option>
<option value="4" data-no="04">4</option>
</select>
And Jquery
$("#selectNo").change(function () {
alert($(this).find(':selected').data("no"));
});
Output
I assume this is your dropdown. Try the following:
$("#clicks").val($(this).find('option:selected').attr('data'));
$('#something').change(function(e) {
//var id = $(this).val();
$('#something :selected').each(function(){
var value = $(this).data('id');
alert(value);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="something">
<option value="1" data-id="01"></option>
<option value="2" data-id="02"></option>
<option value="3" data-id="03"></option>
<option value="4" data-id="04"></option>
</select>
Try to use like below.
var option = $("#something option:selected").attr("data-value");
Exp:
$("#something").change(function () {
console.log($("#something option:selected").attr("data-value"))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="something">
<option value="1" data-value="01">01</option>
<option value="2" data-value="02">02</option>
<option value="3" data-value="03">03</option>
<option value="4" data-value="04">04</option>
</select>
I have few select dropdown working nicely with selectize.js. On form post, it appears it only send the last option selected. So for example, if the user select's: A, B, C in the form post var_dump($_POST); only C appears. Same is the case with other select.
I went through the documentation and searched online but not able to rectify, I am sure its something really trivial but till I know, I don't know :(
Would greatly appreciate any help! Thank you!
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://brianreavis.github.io/selectize.js/js/selectize.js"></script>
<?php
if(isset($_POST["save"])){
echo '<pre>';
print_r($_POST);
echo '</pre>';
}
?>
<form action="" method="post">
<label>Select Class(s)</label>
<select multiple id="classname" name="classname[]" required class="form-control">
<option value="1">NUR</option>
<option value="2">KG</option>
<option value="3">PREP</option>
<option value="4">I</option>
<option value="5">II</option>
</select>
<label>Subjects</label>
<select multiple id="subjects" name="subjects[]" required class="form-control">
<option value="1">English</option>
<option value="2">EVS</option>
<option value="3">Maths</option>
<option value="4">Science</option>
<option value="5">Social</option>
</select>
<label>Examinations</label>
<select multiple="multiple" id="exams" name="exams[]" required="true" class="form-control">
<option value="1">Formative Assessment I</option>
<option value="2">Formative Assessment II</option>
<option value="3">Formative Assessment III</option>
<option value="4">Formative Assessment IV</option>
<option value="5">Annual</option>
</select>
<input type="submit" name="save" value="save" />
</form>
<script>
$(document).ready(function () {
$('#exams').selectize({
hideSelected: 'true'
});
$('#subjects').selectize({
hideSelected: 'true'
});
$('#classname').selectize({
hideSelected: 'true'
});
});
</script>
I have this select button:
<form method="post">
<label>
<select id="label" name="challengeX" style="margin-top:150px;">
<option selected value="0"> Global Statistics </option>
<option value="1">Challenge 1</option>
<option value="2">Challenge 2</option>
<option value="3">Challenge 3</option>
</select>
</label>
</form>
In the same page, few lines bellow, I have:
<div id="challenge">
<?php
$Ch = $_POST['challengeX'];
echo "Challenge: ".$Ch;
showSomething($Ch,1,1);
?>
</div>
But when I change the option, it didn't change the post value.
$Ch = $_POST['challengeX'];
won't get value until you submit the form. Add a submit button to your form.
<form method="post" action="">
<label>
<select id="label" name="challengeX" style="margin-top:150px;">
<option selected value="0"> Global Statistics </option>
<option value="1">Challenge 1</option>
<option value="2">Challenge 2</option>
<option value="3">Challenge 3</option>
</select>
</label>
<input type="submit" value="Submit">
</form>
And access the form values in the same page only if the form is submitted.
<div id="challenge">
<?php
if(isset($_POST)) // checks whether any value is posted
{
$Ch = $_POST['challengeX'];
echo "Challenge: ".$Ch;
showSomething($Ch,1,1);
}
?>
</div>
you need to submit form on change of dropdown.
Change html like this:
<form method="post">
<label>
<select id="label" name="challengeX" style="margin-top:150px;" onchange="this.form.submit()">
<option selected value="0"> Global Statistics </option>
<option value="1">Challenge 1</option>
<option value="2">Challenge 2</option>
<option value="3">Challenge 3</option>
</select>
</label>
</form>
for your php execution you can try like this:
<div id="challenge">
<?php
if($_SERVER['REQUEST_METHOD'] == 'POST') {
$Ch = $_POST['challengeX'];
echo "Challenge: ".$Ch;
showSomething($Ch,1,1);
function showSomething($Ch,1,1){
//do your stuff
}
}
?>
</div>
PHP runs on the server and delivers HTML (or other data) to the browser.
If you want to process the form data with PHP then you must include it in a new HTTP request (typically by submitting the form) and have PHP generate a new page using that data.
Alternatively, if you want to process the data on the client then you will need to use a programming language that is supported in the browser. Unless you want to start using plugins (or browser specific technologies), that limits you to JavaScript. You can bind a change event listener to the select element and then manipulate the DOM with the results.
In the way you can use Javascript. If you dont want to use any server like PHP or something
<form method="post">
<label>
<select id="label" name="challengeX" style="margin-top:150px;">
<option selected value="0"> Global Statistics </option>
<option value="1">Challenge 1</option>
<option value="2">Challenge 2</option>
<option value="3">Challenge 3</option>
</select>
<input type="submit" /> /* add this line */
</label>
</form>
By Javascript
<select id="label" name="challengeX" style="margin-top:150px;" onChange="getSelect(this)">
<option selected value="0"> Global Statistics </option>
<option value="1">Challenge 1</option>
<option value="2">Challenge 2</option>
<option value="3">Challenge 3</option>
</select>
<div id="resultSelect"></div>
<script>
function getSelect(thisValue){
document.getElementById('resultSelect').innerHTML=thisValue.options[thisValue.selectedIndex].text;
}
</script>
I am having problem in my search box, actually i have created a search box for multiple selection and it is working properly,
<input type="text" name="search" size=15 maxlength=15 placeholder = "Gene Symbol"/>
<select name="table[]" size = "0" multiple>
<option selected="selected"></option>
<option value="infla_info">Inflammation</option>
<option value="diet_info">diet</option>
<option value="obesity_info">obesity</option>
<option value="stress_info">stress</option>
<option value="athero_info">atherosclerosis</option>
<option value="retino_info">Diabetic Retinopathy</option>
<option value="nephro_info">Diabetic Nephropathy</option>
<option value="neuro_info">Diabetic Neuropathy</option>
</select>
<input type="Submit" name="Submit" value="Gene Search"/>
after this i want to add one more option select all, by which it should show all the records or tables containing query gene.
please help me
try this
Jquery Code:
$('#selectall').click(function() {
$('#countries option').prop('selected', true);
});
Live Demo :
http://jsfiddle.net/3nUPF/177/
You can achieve this using jQuery :
EDIT :- You can select multiple value by pressing Ctrl button of your keyboard and you can get those value using print_r($_POST['countries']);
<select name="countries" id="countries" MULTIPLE size="8">
<option value="all">Select all</option>
<option value="UK">UK</option>
<option value="US">US</option>
<option value="Canada">Canada</option>
<option value="France">France</option>
<option value="India">India</option>
<option value="China">China</option>
</select>
jQuery :
<script>
$(document).ready(function()
{
$('#countries').change(function() {
if($(this).val() == 'all')
{
$('#countries option').prop('selected', true);
}
});
});
</script>
Working Demo
I run a simple form collecting 4 values, three of the values are listed in a dropdown. I'm wondering if I can write the values selected by a user to my mysql table prior to submitting the form.
The form looks like this:
<form id="search" action="" method="POST">
<input id="field1" type="text" name="to" value="">
<select name="day">
<option value="">Day</option>
<option value="1"> 1</option>
<option value="2"> 2</option>
<option value="3"> 3</option>
</select>
<select name="cym">
<option selected="" value="">Month</option>
<option value="2012-12">December 2012</option>
<option value="2013-01">January 2013</option>
<option value="2013-02">February 2013</option>
</select>
<select name="nights">
<option value="">Nights</option>
<option value="1"> 1</option>
<option value="2"> 2</option>
<option value="3"> 3</option>
</select>
<button onclick="document.getElementById('search').submit();">Search!</button>`
So, once the user selects the 'day', I want to write the value to the mysql, once the user select the 'cym' I want to write the value to the mysql and so on.
Can this be realized and if so how?
If you're using jQuery you can do something like this:
$("#cym").change(function () {
$.ajax({
url: 'serverUrl.php',
success: function(data) {
// nothing to be done here
}
});
});
The <select name="cym"> would become <select id="cym"> for the selector $("#cym") to work. This, of course, can be achieved by using raw Javascript and if that's your preferred approach you can have a look at http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first .
You can bind some onChange events to the select elements. You can easily use jQuery for that. Look at http://api.jquery.com/change/