http://jsfiddle.net/NZ2FJ/
As you can see in the example above, data-placeholder="true" is not working.
Can anyone suggest workaround please?
Also the official document does not show the placeholder.
Thanks in advance.
<div data-role="fieldcontain">
<label for="subject"><em>* </em> Subject: </label>
<select name="subject" id="subject" class="required" data-placeholder="true" data-native-menu="false">
<option value="" >Select subject</option>
<option value="Art">Art</option>
<option value="Band">Band</option>
<option value="Choir">Choir</option>
<option value="Design">Design</option>
<option value="Drama">Drama</option>
...
...
</select><br />
</div>
You have added the attribute data-native-menu="false" which is causing jQM to behave this way
You Example:
http://jsfiddle.net/NZ2FJ/1/
Without the attribute:
http://jsfiddle.net/NZ2FJ/3/
if you want to keep the data-native-menu="false" attribute so you get a pop-up selection box, simply make the first option selected from you js on pageload:
$(document).ready(function () {
$("#subject option:first").attr('selected', 'selected');
});
I updated jquery Mobile to 1.2.0 and it works fine now.
Related
I need to use multiselect so I got idea use select2 tags for that. But I got a problem.. I have rendered multiselect from nette with values.. when I look on html code I can see all options with their values.. but when I enable select2 for that select it says 'No results found' but still in code there are data.. also I wanted to use tags, and also this is not working either .. Any possible solutions guys? Thanks
I'm enabling select2 like this - that select has class 'multiple-regions':
<script>
$(document).ready(function () {
$('.multiple-regions').select2({
tags: true
});
});
</script>
PS: I have included jquery before bootstrap and select2 includes.
EDIT: posting HTML (I'm now using form component from nette but it's same when I use raw HTML)
{form filterRoutesForm}
<div class="row" style="padding: 0 1em;">
<div class="col-md-5">
<div class="form-group">
{label date class=>"form-control-label"/}
{input date class=>"form-control daterange-routes"}
</div>
</div>
<div class="col-md-5">
<div class="form-group">
{label region class=>"form-control-label"/}
{input region class=>"form-control multiple-regions"}
</div>
</div>
<div class="col-md-2">
{input search class=>"btn btn-primary form-control", style=>"margin-top: 35px;"}
</div>
</div>
{/form}
Here is same example with raw HTML:
<select name="region[]" multiple="multiple" class="form-control multiple-regions">
<option value="all">všechny kraje</option>
<option value="1">Praha</option>
<option value="2">Střední Čechy</option>
<option value="3">Jih a západ Čech</option>
<option value="4">Severní Čechy</option>
<option value="5">Východní Čechy</option>
<option value="6">Jižní Morava</option>
<option value="7">Severní Morava</option>
<option value="8">Bratislava</option>
<option value="9">Západní Slovensko</option>
<option value="0">Východní Slovensko</option>
</select>
BTW also I have tried added data as array in 'data' property in select2, but still same effect - No results found
You need to add select2.css, select2.js as well as jquery if that's not already done, add multiple and that's pretty much all you need.
$(document).ready(function () {
$('.multiple-regions').select2({
tags: true,
width: '100%'
});
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script>
<link rel="stylesheet" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" />
<select name="region[]" class="form-control multiple-regions" multiple>
<option value="all">všechny kraje</option>
<option value="1">Praha</option>
<option value="2">Střední Čechy</option>
<option value="3">Jih a západ Čech</option>
<option value="4">Severní Čechy</option>
<option value="5">Východní Čechy</option>
<option value="6">Jižní Morava</option>
<option value="7">Severní Morava</option>
<option value="8">Bratislava</option>
<option value="9">Západní Slovensko</option>
<option value="0">Východní Slovensko</option>
</select>
You could eventually add, if needed, closeOnSelect: false as a select2 argument to prevent it from closing on each select, it's useful for multiple selections.
After a few days for rest I solved it.. Problem was in external .js file - where my colleague defined .select2 style which select2 uses defaulty .. So when I wanted to declare select2 in script his style rewrited it and then it hasn`t data.. Thank you for everything. Cya
Im vey new to php. How to pass the selected drop box value to next page url? I have something like this:-
<script language="javascript">
function showMe(str)
{
document.getElementById('myDiv').innerHTML = 'You have selected :'+str;
}
</script>
<select id="ccrseid" name="ccrseid" onchange="showMe(this.value);">
<option value="">Select</option>
<option value="1">Computer Science</option>
<option value="2">Engineering</option>
<option value="3">Business</option>
<option value="4">Education and Training</option>
</select>
<div id="myDiv"></div>
</body>
</html>
Submit
when i execute im getting "undefined" at the url .
http://localhost/timer.php?selectvalue=undefined
how do i solve this?
With your question, there seems like there are two different outcomes you want to achieve; the first being that you want to pass the value of the <select> dropbox to the landing php page, while your example code suggests that you want to pass the <select> value with appending "You have selected :" to it.
So basically - with the given information - there are two outcomes you want to achieve, the first being the final "GET" url being
http://localhost/timer.php?selectvalue=1
And the other with the "GET" url being
http://localhost/timer.php?selectvalue=You%20have%20selected%20:1
With the first outcome, using javascript is a bad way of approaching this, I suggest to you to use the standard html <form> tag to build your form and <input> instead of the <a> tag as a button
<form action="timer.php" method="get">
<select id="ccrseid" name="selectvalue" onchange="showMe(this.value);">
<option value="">Select</option>
<option value="1">Computer Science</option>
<option value="2">Engineering</option>
<option value="3">Business</option>
<option value="4">Education and Training</option>
</select>
<input type="submit" value="Submit">
<form>
With the second solution, that being to print the <select> value into a div and send that data to the landing page with a <a> tag, what you need to do is to to change the link on the last line
Submit
to
Submit
Although possible with javascript I would recommend you do this with php. It ensures that your visitor does not need javascript enabled to be able to take advantage of the form too.
<form action="timer.php" method="post">
<select id="ccrseid" name="selectvalue"">
<option value="">Select</option>
<option value="1">Computer Science</option>
<option value="2">Engineering</option>
<option value="3">Business</option>
<option value="4">Education and Training</option>
</select>
<input type="submit" value="Submit">
<form>
Then at the top of your timer.php file...
if((int)$_POST['selectvalue']){
header('Location:timer.php?selectvalue=' . (int)$_POST['selectvalue']);
exit;
}
No need for javascript.
After upgrading to jQuery Mobile 1.1.1 earlier today (7/13/2012) I noticed that all of my Custom Select menus no longer show the placeholder text on page load. Is there something I need to do differently in 1.1.1 to show the placeholder text in custom select menus? Help!?!?
Here's a sample of my code:
<div data-role="fieldcontain" class="ui-hide-label no-field-separator">
<label for="ceiling" class="select" data-theme="a">Ceiling</label>
<select name="ceiling" id="ceiling" data-theme="a" data-native-menu="false" class="required">
<option data-placeholder="true">Ceiling (Yes/No)</option>
<option value="Yes">Ceiling: Yes</option>
<option value="No">Ceiling: No</option>
</select>
</div>
Sample image (the black bars are my custom select menus):
this code is working for me :
<select>
<option value="" data-placeholder="true">Choose one:</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
Just put value="" on your placeholder option
JSFiddle demonstrating the problem... http://jsfiddle.net/9Lzj6/2/
I am using the jQuery Validation Plugin http://docs.jquery.com/Plugins/Validation && https://github.com/jzaefferer/jquery-validation to validate a form.
JS
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script type="text/javascript">
$("#patient_info_form").validate({
rules: {
"data[gender]": {required :true},
"data[dob_month]": "required",
"data[dob_day]": "required",
"data[dob_year]": "required"
}
});
</script>
HTML
<form id="patient_info_form" name="patient_info_form" action="..." method="post">
<select name="data[dob_month]" id="data[dob_month]" required="required">
<option value="" selected="selected"></option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
</select>
<select name="data[dob_day]" id="data[dob_day]" required="required">
<option value="" selected="selected"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="data[dob_year]" id="data[dob_year]" required="required">
<option value="" selected="selected"></option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
</select>
<label for="gender_male" class="button_gender male">
<input type="radio" name="data[gender]" value="male" id="gender_male" required="required">
</label>
<label for="gender_female" class="button_gender female">
<input type="radio" name="data[gender]" value="female" id="gender_female" required="required">
</label>
</form>
iPad PROBLEM
It works perfectly in a standard browser (tested in Chrome), but it doesn't work at all on an iPad. I am 100% new to programming for an iPad and (unfortunately for me) this site will only be accessed via iPad.
Is there something more I need to do with the jQuery Validation Plugin to get it to work on an iPad? I also tried jQuery Mobile without luck, but I'm willing to give it (or anything else) another shot with guidance.
Can someone please provide links to a tutorial, plugin, or example code that will show me how to validate selects, radio groups (no default, but one selection required), and checkboxes (no default, but one selection from a list required - not shown in the example code above but I will need that too)?
P.S. I don't need a popup or error message. I simply need to stop the form submission if all the requirements are not met.
Thanks in advance for the help.
I've finally found the HTML for the jQuery Mobile selector menu component, thanks to my other question, but I'm stuck again.
I'm currently using this code, which works nicely:
<div data-role="content">
<div data-role="fieldcontain">
<label for="select-choice-nc" class="select">Font Choice:</label>
<select name="select-choice-4" id="select-choice-nc">
<option value="arial">Arial</option>
<option value="papyrus">Papyrus</option>
<option value="helvetica">Helvetica</option>
<option value="calibri">Calibri</option>
</select>
</div>
</div><!-- /content -->
But how do I tell which option has been selected?
It's just like jQuery sans Mobile (perhaps jQuery Immobile?). As with other form elements, use .val() to get the value of the <select>:
$('#select-choice-nc').val();