I have an option to select a wireless carrier from a list - the problem is that Iphone "zooms in" when creating the selectable dropdown list similar to this:
http://winmobiletech.com/012009Browsers/IMG_0017.PNG
My code is as follows:
<div id="popup-action-sms" style="display:none" >
<div id="sms" >
<input type="number" id="sms-tel" placeholder="Enter phone number" />
<select id="sms-carriers">
<option value="" >Select Wireless Carrier</option>
<option value="Alltel">Alltel</option>
<option value="AT&T">AT&T</option>
<option value="Sprint">Sprint</option>
<option value="T-Mobile">T-Mobile</option>
<option value="Verizon Wireless">Verizon Wireless</option>
</select>
</div>
</div>
My question How can I dynamically "zoom out" back to full screen once a user has selected their carrier?
$( "#sms-carriers" ).change(function() {
$(this).blur();
});
You can also try $(this).focusout();
Worth giving a shot :)
Related
I want to make a dropdown menu where the user should select an option before being able to continue. I tried this code with the "required" attribute but the user is still able to continue without selecting an option.
I tried the same attribute when I made an input box and there it worked fine.
<p class="line-item-property__field">
<label>Indgravering i herre ring (Valgfrit)</label><br>
<select required class="required" id="indgravering-i-herre-ring-valgfrit" name="properties[Indgravering i herre ring (Valgfrit)]">
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
</select>
</p>
You need an empty option value, otherwise the first option value is always selected anyway.
<form action="something.php">
<p class="line-item-property__field">
<label>Indgravering i herre ring (Valgfrit)</label><br>
<select required class="required" id="indgravering-i-herre-ring-valgfrit" name="properties[Indgravering i herre ring (Valgfrit)]">
<option value="">select something</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
</select>
</p>
<input type="submit" value="Submit">
</form>
I have a dropdown and I want to detect all the events, even if they are the same, when custom period is selected a modal is displayed, but I need that the user be able to use this modal all the times he want, even if is selected, here is the code:
<div class="form-group">
<select width="'100%'" ng-model="selection.date.mode"
class="form-control input-sm" ng-change="setDateMode()">
<option value="d" ng-show="visible.date.d" >Day</option>
<option value="w" ng-show="visible.date.d" >Week</option>
<option value="m" ng-show="visible.date.d" >Month</option>
<option value="y" ng-show="visible.date.d">Year to Date</option>
<option value="c" ng-show="visible.date.d" >Custom</option>
<option value="l" ng-show="visible.date.d" >Last 30 days</option>
</select>
AngularJS function:
function setDateMode() {
$scope.selection.date.mode === "c" ? clickCustomInput() : dateSelected();
}
Basically you should think twice whether you really need this. You can only achieve it by adding a click-directive to each option:
<option value="d" ng-show="visible.date.d" ng-click="setDateMode()">Day</option>
This will cause double calls of setDateMode() with each selection except the selected value stays the same. But you can‘t remove ng-change() from the select-element because when ng-click() fires the dropdown list doesn‘t know the currently selected value yet...
Im working with just HTML at the moment and I would like to have a drop down menu option that opens more than one tab in the brower, I have been able to open one tab in the brower with one option but I was wondering if it is posible to open more than one with one option. I look forward to hearing from you, Thank you.
<form name="form" id="form">
<select name="Dropdown" id="Dropdown">
<option value="inidivual/Mindmap.pdf" selected="selected">Mind map</option>
<option value="inidivual/moneymatters.xlsx">Spreadsheet</option>
<option value="#">Identity design and documents</option>
<option value="#">Project review</option>
</select>
<input type="button" name="go_button" id= "go_button" value="Open" onClick="window.open(Dropdown.value,'newtab'+Dropdown.value)">
</form>
To select multiple options it should be set to multiple as this,
<form name="form" id="form" >
<select name="Dropdown" multiple id="Dropdown">
<option value="http://www.google.com" selected="selected">Mind map</option>
<option value="http://www.yahoo.com">Spreadsheet</option>
<option value="http://www.sdesigns.co.in">Identity design and documents</option>
<option value="http://www.bing.com">Project review</option>
</select>
<input type="button" name="go_button" id= "go_button" value="Open"">
</form>
and use the following jquery
$("#go_button").click(function(){
$("#Dropdown :selected").each(function(){
var newLink = $(this).val();
window.open(newLink);
});
});
I want to have a select option that opens a corresponding text box.
Let's say these are my selections:
<select id="contact">
<option value="email">Email</option>
<option value="phone">Phone</option>
</select>
When you select the Email selection I want it to show a textbox below it (which wasn't there before) that says please enter your Email.
OR
When you select the Phone selection I want it to show a textbox below it (which wasn't there before) that says please enter your Phone Number.
I don't want both the "Enter Email" and "Enter Phone Number" textboxes showing at the same time. I want them to select which one to open and input their contact info.
I currently have this but don't know what else to have in it... please help!
$('#contact').change(function() {
if ($(this).val() === 'email') {
//show email
//hide phone
} else {
//hide email
//show phone
}
});
Thanks,
Chad.
I had similar requirement and the solution is:
<HTML>
<BODY>
<form name="myform">
<table>
<tr>
<td>
<select name="one" onchange="if (this.value=='other') {this.form['other'].style.visibility='visible'}else {this.form['other'].style.visibility='hidden'};">
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="other">Other</option>
</select>
<input type="textbox" name="other" style="visibility:hidden;"/>
</td>
</tr>
</table>
Figured it out, used the following javascript for this:
<script type="text/javascript">
function CheckContact(val){
var element=document.getElementById('email');
if(val=='email')
element.style.display='block';
else
element.style.display='none';
var element=document.getElementById('sms');
if(val=='sms')
element.style.display='block';
else
element.style.display='none';
}
</script>
Then had this in the form:
<select name="contactinfo" id="contactinfo" onchange="CheckContact(this.value);">
<option>Select Contact Option</option>
<option value="email">Email</option>
<option value="sms">Text (SMS)</option>
</select><br />
<div id="email" style="display: none;">Enter Email: <input type="text" name="email" /><br /></div>
<div id="sms" style="display: none;">Enter Cell Number: <input type="text" name="sms" /><br /></div>
I'm not a lot into HTML and I need some help.
I've a little listbox with 3 elements:
<select size="20">
<option>Spiderman</option>
<option>Superman</option>
<option>Hulk</option>
</select>
<input type="submit" value="Search!" />
What I want is if someone selects "Spiderman" and clicks on Search, I want him to go to the website "Spiderman.html". And the same with the rest ones, if he clicks on Superman, goes to Superman.html, and if he clicks on Hulk goes to Hulk.html.
Thanks.
try this :)
<select size="20" id="myselect" >
<option value="spiderman.html">Spiderman</option>
<option value="superman.html">Superman</option>
<option value="hulk.html">Hulk</option>
</select>
<input type="submit" value="Search!" onclick="document.location.href = 'http://your-website/' + document.getElementById('myselect').value;" />