I'm attempting to create a very short form that will display an alert based on its checked checkbox options.
(See here for my attempt - https://jsfiddle.net/4k2v68mv/4/)
$(document).ready(function() {
// Displays options for alert if checked
$('#mycheckbox1').change(function() {
$('#mycheckboxdiv1').toggle();
$('#displayAlert').toggle();
});
// Displays alert if checked
$('#mycheckbox2').change(function() {
$('#transportAlert').toggle();
});
// Adds options into Dropdown menu
$('.box').hide();
$('#dropdown').change(function() {
$('.box').hide();
$('.' + $(this).val()).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
Choose Alert
<input type="checkbox" name="mycheckbox1" id="mycheckbox1" value="0" />
<div id="mycheckboxdiv1" style="display:none">
<form>
<select id="dropdown" name="dropdown">
<option value="0">-- Transport Type --</option>
<option value="area1">Busses</option>
<option value="area2">Trains</option>
<option value="area3">Ferries</option>
</select>
</form>
<div class="box area1">
<form action="">
<input type="checkbox" name="bus" value="1A"> 1A
<br>
<input type="checkbox" name="bus" value="1B"> 1B
<br>
<input type="checkbox" name="bus" value="1C"> 1C
<br>
<br>
<input id="customText" type="text" name="busCustom" placeholder="Custom" />
</form>
</div>
<div class="box area2">
<form action="">
<input type="checkbox" name="train" value="1A"> to London
<br>
<input type="checkbox" name="train" value="1B"> to Southampton
<br>
<br>
<input id="customText" type="text" name="trainCustom" placeholder="Custom" />
</form>
</div>
<div class="box area3">
<form action="">
<input type="checkbox" name="ferry" value="1A"> Isle of Wight
<br>
<br>
<input id="customText" type="text" name="ferryCustom" placeholder="Custom" />
</form>
</div>
</div>
<div id="displayAlert" style="display:none">
<hr>
<input type="checkbox" name="mycheckbox2" id="mycheckbox2" value="0" />
<div id="mycheckboxdiv2" style="display:none">
</div> Display Alert
</div>
<div id="transportAlert"class="alert alert-warning" role="alert" style="display:none">Please note that the .... will be running late today.</div>
For example,
I'd want the alert to say "Please note that the 1A bus will be running late today." - if the 1A checkbox under Busses is the only option checked.
Similarly, "Please note that the 1A & 1B busses will be running late today." - if the 1A and 1B checkboxes under Busses are checked.
...You get the idea.
I've built the basic premise above, however I'm slightly out of my depth when trying to link the checkbox values via JS into a line of text - (and have them slightly vary dependant on number of checked boxes and type of transport)
Many thanks in advance.
Related
Scenario 1: User has initially checked the value for "Automated" and updates the value to unchecked state
Display alert message pops up to the user if at least one of the following accordions is in the "Completed" state.
HTML
<div class="col-md-12 col-sm-12 filter-opn">
<form #checkboxfilt="ngForm" (ngSubmit)="onapplyfilter(checkboxfilt)">
<div >
<div>
<input type="checkbox" name="Success" value="1" ngModel selected ><br>
<label for="Success"> Success</label><br>
</div>
<div>
<input type="checkbox" name="Pending" value="2" ngModel ><br>
<label for="Pending"> Pending</label><br>
</div>
<div>
<input type="checkbox" name="Canceled" value="3" ngModel ><br>
<label for="Canceled"> Canceled</label><br>
</div>
<input type="submit" value="Apply">
<br>
</div>
</form>
</div>
TS
onapplyfilter(checkbox:NgForm){
if((checkbox.value.Success ==''|| checkbox.value.Success==false)
&&(checkbox.value.Pending ==''|| checkbox.value.Pending==false)
&&(checkbox.value.Canceled ==''|| checkbox.value.Canceled==false))
{
alert('CheckBox is Empty');
}
}
}
So I'm having some basic html, that contains of a modal box with a <form>, I take that html and append it to a div next to <body>, everything displays correctl only that the form submit doesn't work, it doesn't work via enter or submit button.
$(document).ready(function() {
var windowWidth = (parseInt(window.innerWidth) - 15) + 'px',
windowHeight = $('body').css('height');
$tk = $("#take-survey");
var $html = $tk.css({'width': windowWidth, 'height': windowHeight}).clone();
$tk.remove();
$($html).appendTo(".put-me");
$('body .put-me #take-survey').show();
});
<div id="take-survey" style="width: 1843px; height: 2120px; display: block;">
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Dear User,<br><br>
Our goal is to provide the best service possible. Please take a 1 minute to complete the following customer service questionnaire. Your comments will enable us to see how we're doing overall and find out how we can improve.<br> It only takes 1 minute!
</div>
<div class="modal-body">
<form name="newSurvey" action="index.php?id=25&L=1&tx_arxsurvey_fesurvey[action]=create&tx_arxsurvey_fesurvey[controller]=Survey" method="post">
<div style="display: none">
<input type="hidden" name="tx_arxsurvey_fesurvey[__referrer][extensionName]" value="ArxSurvey">
<input type="hidden" name="tx_arxsurvey_fesurvey[__referrer][controllerName]" value="Survey">
<input type="hidden" name="tx_arxsurvey_fesurvey[__referrer][actionName]" value="new">
<input type="hidden" name="tx_arxsurvey_fesurvey[__hmac]" value="a:3:{s:9:"newSurvey";a:4:{s:6:"whyUse";i:1;s:13:"otherServices";i:1;s:11:"suggestions";i:1;s:8:"tellMore";i:1;}s:6:"action";i:1;s:10:"controller";i:1;}77fcb50f86112b3acd1aa7f6eff2b4adeac7a664">
</div>
<label for="userProfile">
What is your user profile? <span class="required">(required)</span>
</label>
<select name="tx_arxsurvey_fesurvey[newSurvey][userProfile]">
<option value="Real Estate Agency">Real Estate Agency</option>
<option value="Real Estate Marketing">Real Estate Marketing</option>
<option value="Floor Drawing Services">Floor Drawing Services</option>
<option value="Project Developers">Project Developers</option>
<option value="Property Management">Property Management</option>
<option value="Interior Design">Interior Design</option>
<option value="Architect">Architect</option>
<option value="Private User">Private User</option>
<option value="Furniture Retailer">Furniture Retailer</option>
</select>
<label>If other please specify:</label>
<input type="text" name="tx_arxsurvey_fesurvey[newSurvey][userProfileOther]">
<label for="useStatus">
How often you use PlanningWiz? <span class="required">(required)</span>
</label>
<div class="hold-radios">
<input type="radio" id="dailyUse" name="tx_arxsurvey_fesurvey[newSurvey][useStatus]" value="Daily">
<label for="dailyUse">Daily</label>
<input type="radio" id="weeklyUse" name="tx_arxsurvey_fesurvey[newSurvey][useStatus]" value="Weekly">
<label for="weeklyUse">Weekly</label>
<input type="radio" id="monthlyUse" name="tx_arxsurvey_fesurvey[newSurvey][useStatus]" value="Monthly">
<label for="monthlyUse">Monthly</label>
<input type="radio" id="rarelyUse" name="tx_arxsurvey_fesurvey[newSurvey][useStatus]" value="Rarely">
<label for="rarelyUse">Rarely</label>
</div>
<label for="whyUse">
Why are you using a room planner? <span class="required">(required)</span>
</label>
<textarea rows="15" cols="40" name="tx_arxsurvey_fesurvey[newSurvey][whyUse]"></textarea>
<label for="otherServices">
Are you using other room planning services as well? If so, why? <span class="required">(required)</span>
</label>
<textarea rows="15" cols="40" name="tx_arxsurvey_fesurvey[newSurvey][otherServices]"></textarea>
<label for="suggestions">
What suggestions for improvement would you have? <span class="required">(required)</span>
</label>
<textarea rows="15" cols="40" name="tx_arxsurvey_fesurvey[newSurvey][suggestions]"></textarea>
<label for="tellMore">
I'd also like to tell you that: <span class="required">(required)</span>
</label>
<textarea rows="15" cols="40" name="tx_arxsurvey_fesurvey[newSurvey][tellMore]"></textarea>
</form></div>
<div class="modal-footer">
<input class="save" type="submit" name="" value="Create new">
<input type="button" value="Skip for now!" class="skip">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
Submit button not inside the form so close the </form> tag after the submit button
<div class="modal-footer">
<input class="save" type="submit" name="" value="Create new">
<input type="button" value="Skip for now!" class="skip">
</div>
</form> // add form close here
You need to reinitialize the form. Just like this:
$(document).find("form").trigger("create")
"In JQM 1.4 you can simply call $(your_form).enhanceWithin() to have JQM render all elements inside your cloned form. In JQM 1.3.2 this is not available, so I guess you would have to initialize things using trigger("create") for example."
There are a same issue here
I have a huge, involved form with hundreds of fields built in Business Catalyst that uses the following jquery to show and hide several divs:
$(document).ready(function() {
$( '#CAT_Custom_128' ).click(function() {
$( '#19th_form' ).fadeToggle( "fast" );
});
});
Long story short this script works beautifully for me to show and hide divs based on if a check box is toggled. However I am generating the results of this form on another page that allows a user to edit the form entries. When the form results are generated the check boxes selected in the initial submission are default not shown. It is only when the checkboxes are unchecked (or toggled) that the hidden divs are shown.
Basically I need a script that says if a checkbox is generated as checked a correlating div is displayed. Note that the way this is set up a loop will most likely not work.
Any ideas or help are greatly appreciated. Thank you! :)
EDIT: Here is a sample of the html within the form:
<div class="twelve columns">
<label>Select the dates for your service site.</label>
</div>
<div class="row">
<div class="six columns label_text">
<input type="checkbox" name="CAT_Custom_128" id="CAT_Custom_128" value="1" /><span> Saturday, April 19th</span>
<br />
<input type="checkbox" name="CAT_Custom_129" id="CAT_Custom_129" value="1" /><span> Sunday, April 20th</span>
<br />
<input type="checkbox" name="CAT_Custom_130" id="CAT_Custom_130" value="1" /><span> Monday, April 21st</span>
<br />
<input type="checkbox" name="CAT_Custom_131" id="CAT_Custom_131" value="1" /><span> Tuesday, April 22nd</span>
</div>
<div class="six columns label_text">
<input type="checkbox" name="CAT_Custom_132" id="CAT_Custom_132" value="1" /><span> Wednesday, April 23rd</span><span> </span>
<br />
<input type="checkbox" name="CAT_Custom_133" id="CAT_Custom_133" value="1" /><span> Thursday, April 24th</span>
<br />
<input type="checkbox" name="CAT_Custom_134" id="CAT_Custom_134" value="1" /><span> Friday, April 25th</span>
<br />
<input type="checkbox" name="CAT_Custom_135" id="CAT_Custom_135" value="1" /><span> Saturday, April 26th</span>
</div>
</div>
</div>
<div id="19th_form" class="servicesite_form_date" style="display: none;">
<div class="h2_date"><span>Saturday, April 19th</span>
</div>
<div class="row shift_selection">
<div class="twelve columns">
<p><span>Select each box to customize up to six shifts.</span>
</p>
<input type="checkbox" name="19_s1_box" id="19_s1_box" value="1" /><span> Shift 1 </span>
<input type="checkbox" name="19_s2_box" id="19_s2_box" value="1" /><span> Shift 2 </span>
<input type="checkbox" name="19_s3_box" id="19_s3_box" value="1" /><span> Shift 3 </span>
<input type="checkbox" name="19_s4_box" id="19_s4_box" value="1" /><span> Shift 4 </span>
<input type="checkbox" name="19_s5_box" id="19_s5_box" value="1" /><span> Shift 5 </span>
<input type="checkbox" name="19_s6_box" id="19_s6_box" value="1" /><span> Shift 6
</span>
</div>
</div>
The script only works on click of the checkbox. You gotta do the same for it on document ready.
$(document).ready(function() {
if ($( '#CAT_Custom_128' ).is(':checked')) {
$( '#19th_form' ).fadeToggle( "fast" );
}
});
I need a JavaScript that can insert an attribute to a field and also remove it when the user deselects the field.
Here is the code I'm using for the radio select:
<script>
$(document).ready(function() {
$("input[name$='sel']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#sel" + test).show();
});
if (test == "CreditCard") {
$("#card").addClass("validate[custom[card]] text-input");
} else {
$("#card).removeClass("validate[custom[card]] text-input");
}
});
</script>
Field code:
<table><tr><td>
<p>
Credit/Debit Card<lable style="margin-right:1px;"></lable><input type="radio" name="sel" id="sel" value="CreditCard" />
</p>
<p>
Paypal<input type="radio" id="sel" name="sel" value="Paypal" />
</p>
<p>
Wire Transfer<input type="radio" id="sel" name="sel" value="WireTransfer" />
</p>
<!====================================================================================>
</td><td>
<!====================================================================================>
<div id="selCreditCard" class="desc">
<label for="card"><strong>Card Number<font color=red size=3> *</font></strong></label>
<input name="card" type="text" id="card" value="" style="width:85px;" />
</div>
<!====================================================================================>
<div id="selPaypal" class="desc" style="display: none;margin-left:20px;margin-top:1px;margin-bottom:1px;">
paypal
</div>
<!====================================================================================>
<div id="selWireTransfer" class="desc" style="display: none;margin-left:20px;margin-top:0px;margin-bottom:-5px;">
Transfer
</div>
<!====================================================================================>
</td></tr></table>
This is the attribute that needs to be inserted to the "card" input field:
class="validate[custom[card]] text-input"
When the user selects the radio with the value CreditCard, the attribute will be inserted to the input field, and when the user deselects the radio with the value CreditCard the attribute will be removed.
Link for fiddle:
FIDDLE
telexper, there are lots of wrong things in your code, and unfortunatelly i dont have the time to explain right now.
but i will leave a working code for you here: http://jsfiddle.net/RASG/DSrLS/
just click "Credit/Debit Card" and the class nowitsadded wil be added to the input field, which will turn red.
HTML
<input type="radio" id="sel1" name="sel"> Credit/Debit Card
<br>
<input type="radio" id="sel2" name="sel"> Paypal
<br>
<input type="radio" id="sel3" name="sel"> Wire Transfer
<br>
<br>
<div id="selCreditCard" class="desc">
Card Number <input name="card" type="text" id="card" value="">
</div>
JS
$('#sel1').click(function() { $('#card').addClass('nowitsadded') })
CSS
.nowitsadded {background-color: red}
All,
Have used this site a few times before and had some great replies so hopefully someone can help again. I want a set of radio buttons, so that when you click a button - you get another set below it. Then again, when you click one of the 2nd set of buttons, you'll get a third etc. Currently I have the following:
<html>
<head>
<title>My Wizard</title>
<script language="javascript">
function Display(question) {
h1=document.getElementById("yes");
h2=document.getElementById("no");
h3=document.getElementById("dk");
h4=document.getElementById("yes2");
if (question=="yes") h1.style.display="block";
else h1.style.display="none";
if (question=="no") h2.style.display="block";
else h2.style.display="none";
if (question=="dk") h3.style.display="block";
else h3.style.display="none";
if (question=="yes2") h4.style.display="block";
else h4.style.display="none";
}
</script>
</head>
<body>
<hr>
<form name="form1">
<p>Do you like the colour blue?</p>
<input type="radio" name="type" value="yes" checked
onClick="Display('yes');">
Yes
<input type="radio" name="type" value="no"
onClick="Display('no');">
No
<input type="radio" name="type" value="dk"
onClick="Display('dk');">
Don't know
<br>
<div ID="yes" style="display:none;">
<hr>
<p>Do you like the colour red?</p>
<input type="radio" name="type" value="yes2" checked
onClick="Display('yes2')">
Yes
<input type="radio" name="type" value="no2"
onClick="Display('no2');">
No
</div>
<div ID="yes2" style="display:none">
I want this to appear beneath the 2nd set of buttons, not replacing it!
</div>
<div ID="no2" style="display:none">
test2
</div>
<div ID="no" style="display:none">
<b>this is my no box:</b>
<input type="text" name="no" size="25">
</div>
<div ID="dk" style="display:none">
<b>dk:</b>
<input type="text" name="dk" size="15">
</div>
</form>
</body>
</html>
So basically, i'm trying to make a little wizard - so something that will ask the user a question, and based on this - it will ask them another. I dont want to use server side applications so am trying something simple like this - but whenever the user selects an option from the 2nd set of buttons, the text which goes with it replaces the 2nd set of buttons. What am i doing wrong?
Please select 'yes' and 'yes' again to see what i mean. Any help will be appreciated!
Joe
Radio input elements are grouped by their name attribute. You should assign a different name to the other sets of radio input elements.
Visual example:
[x] name=favColor [ ] name=favRed
[ ] name=favColor [x] name=favRed
[ ] name=favColor [ ] name-favRed
See also: https://developer.mozilla.org/en/HTML/Element/input
Your if statement is wrong. You ask again and again this: if (question=="yes") h1.style.display="block";
else h1.style.display="none"; and the second time if is not true, so you set the h1 to be hidden.
here is one solution:
<html>
<head>
<title>My Wizard</title>
<script language="javascript">
function Display(question, i) {
h1=document.getElementById("yes");
h2=document.getElementById("no");
h3=document.getElementById("dk");
h4=document.getElementById("yes2");
if(i==1){
if (question=="yes") h1.style.display="block";
else h1.style.display="none";
if (question=="no") h2.style.display="block";
else h2.style.display="none";
}else if(i==2){
if (question=="dk") h3.style.display="block";
else h3.style.display="none";
if (question=="yes2") h4.style.display="block";
else h4.style.display="none";
}
}
</script>
</head>
<body>
<hr>
<form name="form1">
<p>Do you like the colour blue?</p>
<input type="radio" name="type" value="yes" checked
onClick="Display('yes', 1);">
Yes
<input type="radio" name="type" value="no"
onClick="Display('no', 1);">
No
<input type="radio" name="type" value="dk"
onClick="Display('dk', 1);">
Don't know
<br>
<div ID="yes" style="display:none;">
<hr>
<p>Do you like the colour red?</p>
<input type="radio" name="type" value="yes2" checked
onClick="Display('yes2', 2)">
Yes
<input type="radio" name="type" value="no2"
onClick="Display('no2', 2);">
No
</div>
<div ID="yes2" style="display:none">
I want this to appear beneath the 2nd set of buttons, not replacing it!
</div>
<div ID="no2" style="display:none">
test2
</div>
<div ID="no" style="display:none">
<b>this is my no box:</b>
<input type="text" name="no" size="25">
</div>
<div ID="dk" style="display:none">
<b>dk:</b>
<input type="text" name="dk" size="15">
</div>
</form>
</body>
</html>