I have a form using select values, I'd like to make each option works as a link. How can I do it?
<form>
<label for="direction">Select Direction:</label>
<select name="dir" id="dir">
<option value="1">N</option>
<option value="2"><a href="#page3">S</option>
</select>
</fieldset>
<input type="submit" data-inline="true" value="Confirm">
</form>
Listen to submit event to retrieve select value and then change page.
Remove anchor tag from option, and put page ID in value value="#pageID".
$(document).on("pagecreate", "#pageID", function () {
$("#formID").on("submit", function (e) {
e.preventDefault();
var page = $("#selectID").val();
$.mobile.pageContainer.pagecontainer("change", page);
});
});
Demo
Related
Using jquerymobile 1.4.5
I have a series of radio buttons
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Condition (handles etc.):</legend>
<input name="radio-choice-h-28" id="radio-choice-h-28a" value="1" type="radio">
<label for="radio-choice-h-28a">Satisfactory</label>
<input name="radio-choice-h-28" id="radio-choice-h-28b" value="2" type="radio">
<label for="radio-choice-h-28b">Unsatisfactory</label>
<input name="radio-choice-h-28" id="radio-choice-h-28c" value="0" type="radio">
<label for="radio-choice-h-28c">Not Applicable</label>
</fieldset>
and two buttons
<form>
<input id="set" data-inline="true" value="Save" type="button">
<input id="reset" data-inline="true" value="Reset" type="button">
</form>
The events are attached in the document ready area
<script type="text/javascript">
$(document).ready(function () {
$("#set").click(function() {
$('#radio-choice-h-28a').attr("checked", true).checkboxradio("refresh");
$("input[type='radio']").checkboxradio("refresh");
$('#radio-choice-h-28a').checkboxradio("refresh");
});
$("#reset").click(function () {
$("input[type='radio']").attr("checked", false).checkboxradio("refresh");
$("input[type='radio']").checkboxradio("refresh");
});
});
</script>
I can set the value of the radio the first time through, and reset all the radio buttons the first time through.
When i click the set button the second time, nothing happens.
the second click of the reset also does not fire after the first click.
firebug does not show any error messages, but the breakpoint is hit each time the buttons are clicked (both set and reset)
What am i missing?
Found it....
I changed the attr to prop and now it works...
$("#radio-choice-h-28a").prop("checked", true).checkboxradio("refresh");
try using
$(document).on('click', "#set", function(){
});
Instead of
$("#set").click(function() { });
I am using two groups of radio buttons
Group 1:
State
City
Group 2:
A-C
D-H
I-M
N-R
S-Z
When I toggle between state and city, I want A-C from group 2 to be set to checked while the others are set to unchecked.
I have it working in this fiddle here fiddle
HTML:
<div id="sort-radio">
<input type="radio" id="byState" name="sort-radio" checked="checked"/><label for="byState">By State</label>
<input type="radio" id="byCity" name="sort-radio"/><label for="byCity">By City</label>
</div>
<div id="alphabet-radio" style="width:300px;">
<input type="radio" id="A-C" name="alphabet-radio" checked="checked"/>
<label for="A-C">A-C</label>
<input type="radio" id="D-H" name="alphabet-radio"/>
<label for="D-H">D-H</label>
<input type="radio" id="I-M" name="alphabet-radio"/>
<label for="I-M">I-M</label>
<input type="radio" id="N-R" name="alphabet-radio"/>
<label for="N-R">N-R</label>
<input type="radio" id="S-Z" name="alphabet-radio"/>
<label for="S-Z">S-Z</label>
</div>
JavaScript:
$(function () {
$("#sort-radio").buttonset();
});
$(function () {
$("#alphabet-radio").buttonset().find('label').css('width', '19.4%');
});
document.getElementById("byState").addEventListener("click", function () {
document.getElementById("A-C").checked = true;
document.getElementById("D-H").checked = false;
document.getElementById("I-M").checked = false;
document.getElementById("N-R").checked = false;
document.getElementById("S-Z").checked = false;
}, false);
document.getElementById("byCity").addEventListener("click", function () {
document.getElementById("A-C").checked = true;
document.getElementById("D-H").checked = false;
document.getElementById("I-M").checked = false;
document.getElementById("N-R").checked = false;
document.getElementById("S-Z").checked = false;
}, false);
However, when I use this exact code in my website, it does not work (it leaves the previously selected button from group 2 selected). I am using jquery-ui-1.10.1.custom.css which displays the radio buttons nicely, as found here: jquery ui button.
Any clue why this would affect it? When I remove the line <link rel="stylesheet" href="jquery-ui-1.10.1.custom.css" /> from my index.php, it works beautifully.
A few problems:
The button widget works by responding to click events on the radio button's label. This means that the click event you are listening to on the radio buttons themselves won't get fired, since you actually aren't clicking the radio buttons themselves, but their labels. You can work around this by using the change event.
You need to call .buttonset('refresh') after manually updating the checked state of a radio button.
Just setting the checked attribute on one radio button in a group is enough to make the rest become unchecked automatically. You shouldn't need to set the checked property on each one.
You should put your event handlers inside the document.ready handler as well. You can also just use one instead of two.
With all of those things in mind, here are the changes I would make:
$(function () {
$("#sort-radio").buttonset();
$("#alphabet-radio").buttonset().find('label').css('width', '19.4%');
document.getElementById("byState").addEventListener("change", function () {
document.getElementById("A-C").checked = true;
$("#alphabet-radio").buttonset("refresh");
}, false);
document.getElementById("byCity").addEventListener("change", function () {
document.getElementById("A-C").checked = true;
$("#alphabet-radio").buttonset("refresh");
}, false);
});
Example: http://jsfiddle.net/Fzq8L/2/
Since you are using jQuery, you can simplify this a great deal by adding a class to the radio buttons - of which only one can be "set" SO listen to the change event on those. Remove the extra function at the start, pick one of the "array" of buttons to click from the second group. (since only one can be picked)
Simpler version markup :
<div id="sort-radio">
<input type="radio" class="picker" id="byState" name="sort-radio" checked='true'
/>
<label for="byState">By State</label>
<input type="radio" class="picker" id="byCity" name="sort-radio"
/>
<label for="byCity">By City</label>
</div>
<div id="alphabet-radio" style="width:300px;">
<input type="radio" class="secondgroup" id="A-C" name="alphabet-radio"
checked='true' />
<label for="A-C">A-C</label>
<input type="radio" class="secondgroup" id="D-H" name="alphabet-radio"
/>
<label for="D-H">D-H</label>
<input type="radio" class="secondgroup" id="I-M" name="alphabet-radio"
/>
<label for="I-M">I-M</label>
<input type="radio" class="secondgroup" id="N-R" name="alphabet-radio"
/>
<label for="N-R">N-R</label>
<input type="radio" class="secondgroup" id="S-Z" name="alphabet-radio"
/>
<label for="S-Z">S-Z</label>
</div>
Code:
$(document).ready(function () {
$("#sort-radio").buttonset();
$("#alphabet-radio").buttonset().find('label').css('width', '19.4%');
});
$(".picker").change(function () {
$('.secondgroup').eq($('.picker').index(this)).prop("checked", true);
$('#alphabet-radio').buttonset('refresh');
});
Working example:http://jsfiddle.net/MarkSchultheiss/8x28x/2/
Set back second group, first to item when either of first group is changed:
$(document).ready(function () {
$("#sort-radio").buttonset();
$("#alphabet-radio").buttonset().find('label').css('width', '19.4%');
});
$(".picker").change(function () {
$('.secondgroup').eq(0).prop("checked", true);
$("#alphabet-radio").buttonset("refresh");
});
Fiddle for that: http://jsfiddle.net/MarkSchultheiss/8x28x/3/
sorry if the title isn't clear, i was trying to explain in the best possible way. The situation I have is the following: I have a newsletter with a submit button. I have used jquery to unlock the SUBMIT button after the correct email is typed in. It is working fine apart of one thing - I have to click anywhere outside the field (not on the submit button) to enable the submit, then on submit. There was something I have to add somewhere around this line i think, but I dont know what:
document.getElementById("submit").disabled = false;
the full code is here:
HTML:
<div class="element">
<input type="text" id="email" name="email" value="Enter your email" />
</div>
<div id="bsubmit">
<input name="submit" id="submit" src="_images/generic/send_button.png?submit+button=" type="image" disabled="disabled" />
</div>
and jq:
$.fn.swapText = function(){
return this.each(function(){
var tmpDefVal = $(this).val();
$(this).css('color', '#999');
$(this).focus(function(){
if($(this).val() == tmpDefVal){
$(this)
.css('color', '#000')
.val('');
}
});
$(this).blur(function(){
if($(this).val() == ''){
$(this)
.css('color', '#999')
.val(tmpDefVal);
}
});
});
}
$(document).ready(function(){
$('#email').swapText();
$('#email').change(function(){
var regexp = /^\w+[#]\w+\.\w{2}$/;
if(regexp.test($(this).val())){
$(this).removeClass('err');
$(this).addClass('ok');
document.getElementById("submit").disabled = false;
}else{
$(this).removeClass('ok');
$(this).addClass('err');
}
});
});
Thanks for any help.
One problem is that you have two elements with an id of submit.
I have just encountered a strange problem when using jQuery Mobile.
I have a link inside a form element label - a checkbox label to be exact but the link does not work.
I have tried reading the docs but can't seem to find anything on it.
Here is my markup:
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<input type="checkbox" class="cbox" name="OptIn" id="OptIn"/>
<label for="OptIn">Receive E-mails From Us</label>
<input type="checkbox" value="1" class="cbox" name="tandc" id="tandc"/>
<label for="tandc">I agree to the <a href="/tandcs.html" target="_BLANK" >Terms & Conditions</a></label>
</fieldset>
</div>
When the link is clicked it just toggles the checkbox state.
UPDATE
Just realised I can open the link by right clicking but obviously on a mobile device that's not very useful....
this is the correct solution for mobile and non mobile browsers
$('.ui-checkbox a').bind("tap click", function( event, data ){
event.stopPropagation();
$.mobile.changePage($(this).attr('href'));
});
Had the same problem and solved it using:
$('.ui-btn-text a').click(function(event) {
var $this = $(this);
window.open($this.attr('href'), $this.attr('target'));
});
So if any link within a button-text is clicked it will be opened in a new window. If you want it in the same window just use $.mobile.changePage as Phil showed.
I tried the above mentioned solutions on jQuery Mobile 1.1.0 with jQuery 1.7.2 without success.
After a bit of tinkering and reading into the new jQuery event functions I came up with my own solution to make all anchors in labels clickable without loosing jQuery Mobile default behaviour on the rest of the label:
jQuery('label').each(function(){
var e = jQuery(this).data('events');
jQuery('.agree label').undelegate();
jQuery('.agree label *:not(a)').delegate(e);
});
use on() and off() instead
$('label').each(function(){
var e = $(this).data('events');
$('label').off();
$('label').not('a').on(e);
});
There a some improvements that can be made but here is a rough draft:
http://jsfiddle.net/KADqA/
JS
$('.ui-btn-text').click(function(event) {
var checked = $("#tandc[type='checkbox']").is(":checked");
var $this = $(this);
if($this.children('a').length) {
$.mobile.changePage('#tc', {
transition : 'pop',
role : 'dialog'
});
}
stateOfCheckbox(checked);
});
function stateOfCheckbox(checked) {
$('#home').live( 'pagebeforeshow',function(event){
$("#tandc[type='checkbox']").attr("checked",checked).checkboxradio("refresh");
});
}
HTML
<div data-role="page" id="home">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<input type="checkbox" class="cbox" name="OptIn" id="OptIn"/>
<label for="OptIn">Receive E-mails From Us</label>
<input type="checkbox" value="1" class="cbox" name="tandc" id="tandc"/>
<label for="tandc">I agree to the <a href="#tc" data-rel="dialog" >Terms & Conditions</a></label>
</fieldset>
</div>
</div>
<div data-role="page" id="tc">
<div data-role="header">
<h1>T and C</h1>
</div>
Read me
</div>
You could also just override the event:
$('.ui-checkbox a').click(function(e) {
e.stopPropagation();
})
On Android the solutions above did not work on Android.
It only works when using on pagecreate and without event delegation.
$(document).on('pagecreate', function(event, ui) {
$(".ui-checkbox a").on("click tap", function() {
$(':mobile-pagecontainer').pagecontainer('change', this.href);
return false;
});
} );
This is posible solution if you want to open the link in a popup.
$('.ui-checkbox a').bind('click tap', function (event) {
event.stopPropagation();
$($(this).attr('href')).popup('open');
});
Add Id or class into parent label have a tag
and using script of #alex dms
$('#field-contain label a').bind("tap click", function( event, data ){
event.stopPropagation();
$.mobile.changePage($(this).attr('href'));
});
Try it, work perfecly on my mobile and desktop
https://jsfiddle.net/vulieumang/p91zhmnp/
How do you bind a function for each index of the jquery UI tabs?
For example, I am creating a 3 part slide sign up, step 1 is a form and has validation, I want to place the code for that inside the load of step1, while also adding classes to the tabs to disable #2 and #3 when on 1, disable #1 and # 3 when on #2
There is no need to bind a function to the tabs, it's built into the plugin:
From the plugin page:
$('#tabs').tabs({
select: function(event, ui) { ... }
});
Inside the function, you can determine the current tab you are in and do what you need to do from there:
Get the current tab index
currentTabIndex = $('#tabs').tabs('option', 'selected')
Get the current tab content ID (from href) - there might be an easier way, but I haven't found it yet.
currentTabContent = $( $('.ui-tabs-selected').find('a').attr('href') );
but from seeing the other questions you posted about this tab/form system you are trying to use, I threw together a demo here.
HTML
<div id="tabs">
<ul class="nav"> <!-- this part is used to create the tabs for each div using jquery -->
<li class="ui-tabs-selected"><span>One</span></li>
<li><span>Two</span></li>
<li><span>Three</span></li>
</ul>
<div id="part-1">
<form name="myForm" method="post" action="" id="myForm">
<div class="error"></div>
Part 1
<br /><input type="checkbox" /> #1 Check me!
<br />
<br /><input id="submitForm" type="button" disabled="disabled" value="next >>" />
</form>
</div>
<div id="part-2">
<div class="error"></div>
Part 2
<br />Search <input type="text" />
<br />
<br /><input id="donePart2" type="button" value="next >>" />
</div>
<div id="part-3">
<div class="error"></div>
Part 3:
<br />Some other info here
</div>
</div>
Script
$(document).ready(function(){
// enable Next button when form validates
$('#myForm').change(function(){
if (validate()) {
$('#submitForm').attr('disabled','')
} else {
$('#submitForm').attr('disabled','disabled')
}
})
// enable form next button
$('#submitForm').click(function(){
// enable the disabled tab before you can switch to it, switch, then disable the others.
if (validate()) nxtTab(1,2);
})
// enable part2 next button
$('#donePart2').click(function(){
var okForNext = true; // do whatever checks, return true
if (okForNext) nxtTab(2,1);
})
// Enable tabs
$('#tabs').tabs({ disabled: [1,2], 'selected' : 0 });
})
function validate(){
if ($('#myForm').find(':checkbox').is(':checked')) return true;
return false;
}
function nxtTab(n,o){
// n = next tab, o = other disabled tab (this only works for 3 total tabs)
$('#tabs').data('disabled.tabs',[]).tabs( 'select',n ).data('disabled.tabs',[0,o]);
}