I asked this question a few days ago but I did a poor job of describing the specifics so I'm posting it again in greater detail.
Goal:
user to fill out survey with a list of questions and answers to choose from and the results would show a conditional page/div section based on the users selections. If the user selects an answer that is of the same value more times then any other value then show specific content based on the users selection. Here's a plunker that has the questions and answers.
http://plnkr.co/edit/FtL8arjcHPUEbs4r1BJS?p=preview
<div class="form-group" ng-repeat="q in questions">
<label>{{q}}</label>
<div class="radio">
<label>
<input type="radio" name="1" ng-model="formData[$index]" value="1">blue
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="1" ng-model="formData[$index]" value="2">red
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="1" ng-model="formData[$index]" value="3">grey
</label>
</div>
</div>
<div class="form-group" ng-repeat="q1 in questions">
<label>{{q1}}</label>
<div class="radio">
<label>
<input type="radio" name="2" ng-model="formData[$index]" value="1">something else
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="2" ng-model="formData[$index]" value="2">something in here
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="2" ng-model="formData[$index]" value="3">something else in here
</label>
</div>
</div>
<button ng-click="stats()">show results</button>
<ul>
<li ng-repeat="(c, n) in results"> {{c}} shows {{n}} times</li>
</ul>
right now I'm lacking the logic to show the conditional div content on the results page based on the users selections.
I'm also down for other solutions to achieve this goal too.
thanks!
Use ng-show or ng-if directives.
You need somethink like this:
<div ng-if="someFoo()">some content</div>
And in js:
$scope.someFoo = function () {
return true; // or calculate any other results
}
Related
There are 3 radio button groups for user to select.
Division '#targetOption' will get whenever the user checked radio button label to be displayed. Below my code which is able to get the first checked radio button.
Example if user click on the first radio button group, #targetOption will show A. Then if user click on the second radio button group, #targetOption will show A B.
<div id="options">
<div class="form-group required">
<div class="radio">
<label> <input type="radio" value="a">
A
</label>
</div>
<div class="radio">
<label> <input type="radio" value="b">
B
</label>
</div>
<div class="radio">
<label> <input type="radio" value="c">
C
</label>
</div>
</div>
<div class="form-group required">
<div class="radio">
<label> <input type="radio" value="d">
D
</label>
</div>
<div class="radio">
<label> <input type="radio" value="e">
E
</label>
</div>
<div class="radio">
<label> <input type="radio" value="f">
F
</label>
</div>
</div>
<div class="form-group required">
<div class="radio">
<label> <input type="radio" value="g">
G
</label>
</div>
<div class="radio">
<label> <input type="radio" value="h">
H
</label>
</div>
<div class="radio">
<label> <input type="radio" value="i">
I
</label>
</div>
</div>
</div>
<div id="targetID"></div>
$('#options').click(function() {
$('#targetID').html('');
$("input[type='radio']:checked").each(function() {
var optiontext = $(this).parent().text();
console.log(optiontext);
$('#targetID').html(optiontext);
});
});
$('#targetID').html(optiontext); set #targetID to the current radio value in the loop instead of appending it to #targetID.
Use $('#targetID').html($('#targetID').html() + optiontext); instead.
Or you can create an array to store the checked values and update #targetID later
Here is my situation, It's giving me lot of trouble..
I have an ajax submit form, on submit, id like an action to happen.
I'm quite dependant as this is on squarespace, so i dont have acess to much code.
On submit of the form ( when sucessfull), I can see a 'hidden' class is added.
So i would like to use this for my action as:
if ( $("input.button").hasClass("hidden") ) {
$("#block-yui_3_17_2_2_1515660345355_6688").fadeIn();
};
But nothing seems to happen !! event alert is not working as well, I believe this is due because its not reloading the page as the hidden class appear only when the form has been submitted.
Is there any other method which could work to achieve this ?
Thanks a lot for your help, it will be a life saving !!!
--update --
BElow the all form html:
<form autocomplete="on" action="https://website.squarespace.com" method="POST" onsubmit="
return (function(form) {
Y.use('squarespace-form-submit', 'node', function(Y){
(new Y.Squarespace.FormSubmit({
formNode: Y.Node(form)
})).submit('5a568ac053450ad102451bc4', '5a568a42c8302558efde1ae7', 'page-5a568a42c8302558efde1ae7');
});
return false;
})(this)" data-form-id="5a568ac053450ad102451bc4">
<div class="field-list clear">
<div id="text-yui_3_17_2_1_1515620880734_20061" class="form-item field text required">
<label class="title" for="text-yui_3_17_2_1_1515620880734_20061-field">FULL NAME
<span class="required">*</span>
</label>
<input class="field-element text" type="text" id="text-yui_3_17_2_1_1515620880734_20061-field">
</div>
<div id="email-yui_3_17_2_3_1515620880734_11301" class="form-item field email required">
<label class="title" for="email-yui_3_17_2_3_1515620880734_11301-field">E-MAIL ADDRESS
<span class="required">*</span>
</label>
<input class="field-element" name="email" x-autocompletetype="email" type="text" spellcheck="false" id="email-yui_3_17_2_3_1515620880734_11301-field">
</div>
<div id="radio-yui_3_17_2_1_1515620880734_21108" class="form-item field radio required">
<div class="title" for="radio-yui_3_17_2_1_1515620880734_21108-field">GENDER
<span class="required">*</span>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21108-field" value="MALE">
<div id="check"></div> MALE</label>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21108-field" value="FEMALE">
<div id="check"></div> FEMALE</label>
</div>
</div>
<div id="radio-yui_3_17_2_1_1515620880734_21855" class="form-item field radio required">
<div class="title" for="radio-yui_3_17_2_1_1515620880734_21855-field">SHOE SIZE (EU SIZE)
<span class="required">*</span>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="36">
<div id="check"></div> 36</label>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="37">
<div id="check"></div> 37</label>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="38">
<div id="check"></div> 38</label>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="39">
<div id="check"></div> 39</label>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="40">
<div id="check"></div> 40</label>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="41">
<div id="check"></div> 41</label>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="42">
<div id="check"></div> 42</label>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="43">
<div id="check"></div> 43</label>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="44">
<div id="check"></div> 44</label>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="45">
<div id="check"></div> 45</label>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="46">
<div id="check"></div> 46</label>
</div>
</div>
</div>
<div class="form-button-wrapper form-button-wrapper--align-center">
<input class="button sqs-system-button sqs-editable-button" type="submit" value="Submit">
</div>
<div class="hidden form-submission-text">Thank you!</div>
<div class="hidden form-submission-html" data-submission-html=""></div>
If I understand this right, you want a block to appear with a fade-in once the form is submitted.
A few things here:
First, attaching to an arbitrary class change to make something happen feels very fragile. Why not try attaching this action to the form submit event?
Second, the javascript you put as an example will never make it unless the button was hidden on page load. You would need to attach this code to an actual dom event to execute it.
Here is my proposed solution. Note that this solution assumes the block with the ID you provide is already mounted on the DOM:
Since you seem to want to listen for a submit event and then make something appear, and your code was generic enough, you could:
$('form').onSubmit(function() {
$("#block-yui_3_17_2_2_1515660345355_6688").fadeIn();
});
There are simpler css transitions as well, again assuming the block is already on the DOM when the page loads.
Only final gotcha might be that you don't have jquery loaded on your site. I recommend adding jQuery from a Google CDN.
I have some questions with answers. I want to store the checked off answer in a variable. Each answer is as a radio button. For example:
<h4 class='ques1'>Question one here here</h4>
<div class="checkbox">
<label>
<input type="checkbox"> answer 1
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> answer 2
</label>
</div>
<h4 class='ques2'>Question two here here</h4>
<div class="checkbox">
<label>
<input type="checkbox"> answer 1
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> answer 2
</label>
</div>
Then I have variables set up to store the checked answer….
var ques1Answer, ques2Answer;
I'm not sure if you need to query the label tag or the input tag to get the value. But this is what I've tried:
$('h4.ques1 div.checkbox label input').on('change', function(){
ques1Answer = $(this).val();
});
First of your selector is wrong 'h4.ques1 div.checkbox label input'
the DIV is not a child of h4.ques1 so use:
$('div.checkbox label input')
if you use .val() that implies that actually you have an value attribute otherwise you'd better assign some name attributes:
<input type="checkbox" name="Question-A-1">
<input type="checkbox" name="Question-A-2">
so even if you get the "on" / "off" (default values) you'll always know what's the name entity those values are referring to.
Worth noting that if only one answer is possible-per-question than you might want to use Radio Buttons instead
<input type="radio" name="Question-A" value="1">
<input type="radio" name="Question-A" value="2">
in that case it makes sense to hold inside your vars only one value-per-question.
Than wrap all your questionnary inside a <form> and use .serialize() fo get all the answers:
$("button").click(function(){
alert( $("form#questionnary").serialize() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="questionnary">
<h4 class='ques1'>Question one here</h4>
<div class="checkbox">
<label>
<input type="radio" name="Question-A" value="1"> answer 1
</label>
</div>
<div class="checkbox">
<label>
<input type="radio" name="Question-A" value="2"> answer 2
</label>
</div>
<h4 class='ques2'>Question two here</h4>
<div class="checkbox">
<label>
<input type="radio" name="Question-B" value="1"> answer 1
</label>
</div>
<div class="checkbox">
<label>
<input type="radio" name="Question-B" value="2"> answer 2
</label>
</div>
</form>
<button>TEST RESULTS</button>
I m new to jquery,I am supposed to do the simple task.If i click on the radio button means the text along with that radio button has to be bolded.please help me with this one.My HTML Markup is here
<form role="form">
<p><b>What concerns you most as you manage your business?</b>(Select all that apply.)</p>
<div class="radio active">
<label>
<input type="radio" name="optradio">IT infrastructure alignment with business goals and growth<img /></label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Controlling capital and expense<img /></label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Managing financial risk<img /></label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Data security and privacy<img /></label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Flexibility of services to meet customer needs<img /></label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Political climate for business<img /></label>
</div>
<div class="form-group radio">
<label>
<input type="radio" name="optradio">
</label>
<textarea class="form-control" rows="2" placeholder="Other(please specify)" id="comment"></textarea>
</div>
</form>
And my jquery code is here
$(document).ready(function(e) {
$(".radio label input").click(function() {
$('.radio').each(function(event) {
if ($(this).hasClass('active')) {
$(this).css("font-family", "helveticabold");
$('.radio').removeClass('active');
if ($(this).next().hasClass('radio'))
$(this).next().addClass('active');
else
$('.radio:last-child').addClass('active');
return false;
}
});
});
});
I know it needs small changes in code please help me out guys
You don't need to use each as only one radio can be selected.
This will do:
Javascript:
$('.radio').on('click', function() {
$('.bold').removeClass('bold');
$(this).addClass('bold');
});
CSS:
.bold {
font-weight: 800;
}
Demo: https://jsfiddle.net/tusharj/3zzaLre0/
You can use $(this) selector for that
$(document).ready(function(e) {
$("input[type='radio']").click(function() {
$("input[type='radio']").parent().css('font-weight','');
$(this).parent().css('font-weight','bold');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form role="form">
<p><b>What concerns you most as you manage your business?</b>(Select all that apply.)</p>
<div class="radio active">
<label><input type="radio" name="optradio"><span>IT infrastructure alignment with business goals and growth<img /></label>
</div>
<div class="radio">
<label><input type="radio" name="optradio"><span>Controlling capital and expense<img /></label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Managing financial risk<img /></label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Data security and privacy<img /></label>
</div>
<div class="radio">
<label><input type="radio" name="optradio"><span>Flexibility of services to meet customer needs<img /></label>
</div>
<div class="radio">
<label><input type="radio" name="optradio"><span>Political climate for business<img /></label>
</div>
<div class="form-group radio">
<label><input type="radio" name="optradio"></label><span>
<textarea class="form-control" rows="2" placeholder="Other(please specify)" id="comment"></textarea>
</div>
</form>
I have a checkbox and a div on my page.
<input type="checkbox" id="Animals" name="Animals" ng-model="ModelData.Animals"
ng-checked="ModelData.Animals == 'A'" />
<div class="form-group" ng-show="ModelData.Animals == 'A'">
<label for="FirstName" class="col-md-9">
Are you interested in Animal Liability Coverage?
</label>
<div class="col-md-3">
<label>
<input type="radio" id="AnimalLiabCovY" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov"
value="Y" />
Yes
<input type="radio" id="AnimalLiabCovN" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov"
value="N" />
No
</label>
</div>
</div>
I want to show the DIV when the checkbox is selected and hide when deselected. For the first time the above code workd fine ie when checkbox is selected and DIV hides on deselecting the checkbox. But after the first time its not working. It does not show the DIV after selecting the checkbox.
Have you tried it this way? Here's the fiddle It works great.
<input type="checkbox" id="Animals" name="Animals" ng-model="ModelData.Animals" />
<div class="form-group" ng-show="ModelData.Animals">
<label for="FirstName" class="col-md-9">
Are you interested in Animal Liability Coverage?
</label>
<div class="col-md-3">
<label>
<input type="radio" id="AnimalLiabCovY" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov" value="Y" /> Yes
<input type="radio" id="AnimalLiabCovN" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov" value="N" /> No
</label>
</div>
</div>
I think you are looking for ng-true-value and ng-false-value
<div ng-app>
<div >
<input type="checkbox" ng-true-value="A" ng-false-value="B" ng-model="check"/>
</div>
<div ng-show="check == 'A'">
Checked
</div>
</div>
Fiddle
<body ng-app>
<label>Wolf: <input type="checkbox" ng-model="Wolf" ng-init="checked=true" /></label><br/>
<label>Tiger: <input type="checkbox" ng-model="Tiger" ng-init="checked=false" /></label><br/>
<label>Lion: <input type="checkbox" ng-model="Lion" ng-init="checked=false" /></label><br/>
Show when checked:
<div ng-if="Wolf">
<span> This is removed when the wolf is checked.
</span>
</div>
<div ng-if="Tiger">
<span> This is removed when the tiger is checked.
</span>
</div>
<div ng-if="Lion">
<span> This is removed when the lion is checked.
</span>
</div>
</body>
Input type checkbox return true false in ng-model so i just use this. Its working
<div ng-app>
<div >
<input type="checkbox" ng-model="check"/>
</div>
<div ng-show="check == true">
Checked
</div>