Display field set based on dropdown selection yii 2 - javascript

I am new to javacripting and Yii2 Framework. Can anyone please help me just to display a set of field values depending on the dropdown selection.
For example, I have in dropdown "If you are a student or not?":
Yes
No
If user selects Yes then display a div containing other fields to be answered.
I could find answers regarding doing it in general but specifically using Yii 2 I am having problems.
Thank you in advance.

This is very simple with jquery... and there's a couple ways you can do it, but here's an example:
//HTML
<input type="radio" name="student" id="studentY" /> Yes
<input type="radio" name="student" id="studentN" /> No
<div id="moreQuestions">
<p>This is your block containing more fields</p>
</div>
//JS
$('#studentY').click(function(){
$('#moreQuestions').show();
});
$('#studentN').click(function(){
$('#moreQuestions').hide();
});
http://jsfiddle.net/95fvgcnn/

Related

Create radio button for each sharepoint list item

how can i assign radio button for each SharePoint list item using JavaScript and add onclick function to it?
Easy!
<form>
<label for="radio1">Radio number 1</label><input name="radio1" type="radio" onclick="myFunction()"></input></form>
This is the better I can help without any code :/ If you can edit your question and share a bit of code.
Hope I helped!

Changing the value of a hidden field to the value of a checkbox on submit with javascript inside Contact Form 7 Wordpress plugin

I have been trying to get this working for more than a week now, searching endlessly for the solution and I can't figure out what I'm doing wrong. I am not a coder, just trying to duct tape some functions together to get this working... Please help!
I have the following checkbox inputs on my Contact Form 7 form inside a Wordpress page. I have Mailchimp for Wordpress updating a group which reflects the visitors interests. I'm trying to get the value of the group assigned to a hidden input field so that the built in mail feature and other Zapier integrations can use the interest values. Most of these apps seem to lack support for the groups functionality inside Mailchimp.
The form html is as follows:
<p>
<label>Which Are You Most Interested In?</label></br>
<label>
<input name="mc4wp-INTERESTS[gs8o25e9bc][]" type="checkbox"
value="ac2ed8233d"
required=""><span>Interest 1</span>
</label>
<label>
<input name="mc4wp-INTERESTS[gs8o25e9bc][]" type="checkbox"
value="s3g2c99k0x"
required=""> <span>Interest 2</span>
</label>
<label>
<input name="mc4wp-INTERESTS[gs8o25e9bc][]" type="checkbox"
value="k9n6xp3s26"
required=""> <span>Interest 3</span>
</label>
</p>
<input type="hidden" id="int-in" name="int-in"</input>
--
I've tried several variations of this including some inline stuff, putting the code in the top or bottom of the page, putting it into the Additional section of Contact Form 7, putting it into a scripts plugin inside wordpress, trying to see if it's an array thing and trying code for pushing from array (more over my head) and so many others. Here is what I'm basically trying to do, albeit wrongly via this code because obviously it is not working...
JS:
$('form').submit(function() {
$('input[name="#mc4wp-INTERESTS[gs8o25e9bc] .
[]"]').change(function(){
$('#int-in').val($('input[name="#mc4wp-INTERESTS[gs8o25e9bc] .
[]"]').val());
});
--
Online there is not much support for Mailchimp groups, and I suspect groups functions of most contact apps, not even with paid plugin feature. Mailchimp for Wordpress has the most support I could find and you still have to do some tinkering to get it working. I'm soooo ready to know what the heck works instead of all the stuff I've been trying! Thank you in advance. I really appreciate it!
Wordpress disables the $ shortcut, so you need to either replace $ with jQuery or wrap your code:
(function($){
// your code here
})(jQuery);
Plus, the name of those checkboxes doesn't contain a hashtag. I also have no idea what you're doing with those dots and linebreaks there.
In addition, you're assigning a onchange handler only when the form is submitted, but you'll want that to work from the start instead.
Here's a solution that sets the onchange handler to grab the value from all checked checkboxes and puts it into the hidden input.
var selector = 'form input[name="mc4wp-INTERESTS[gs8o25e9bc][]"]';
(function($) {
$(selector).change(function() {
var interests = Array.from(document.querySelectorAll(selector))
.filter(e => e.checked).map(e => e.value).join(",");
$('#int-in').val(interests);
console.log("set to", interests);
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p>
<label>Which Are You Most Interested In?</label><br/>
<label>
<input name="mc4wp-INTERESTS[gs8o25e9bc][]" type="checkbox"
value="ac2ed8233d"><span>Interest 1</span>
</label>
<label>
<input name="mc4wp-INTERESTS[gs8o25e9bc][]" type="checkbox"
value="s3g2c99k0x"> <span>Interest 2</span>
</label>
<label>
<input name="mc4wp-INTERESTS[gs8o25e9bc][]" type="checkbox"
value="k9n6xp3s26"> <span>Interest 3</span>
</label>
</p>
<input type="hidden" id="int-in" name="int-in">
<input type="submit">
</form>

Is it possible to add the value of a checkbox if checked into a text field?

Is it possible to add the value of a checkbox if checked into a text field?
I have this form...
http://xotio.com/photos/download/turk.html
I'm trying to add the value of a checkbox into a textbox if the checkbox has been clicked.
In my form there is one text box and three checkboxes per image (one of the checkboxes opens up more checkbox options and i'm not concerned about those color choices as much). I'm trying to add the 'value' of the three main checkboxes into the text field above. Is that possible?
the values of the checkboxes i would like are the ' lost' and ' none' and ' blurry' options and add their values to the textbox above if they get checked.
In the end I'm trying to use parsley to validate each of the textboxes for data before it submits my form. There are occasionally instances when no data is entered in the textbox, but the user has checked the right boxes and I want it to validate and can't come up with any ideas except this... any help or ideas would be great. thanks in advance and sorry for the long winded complex question.
I give you an example for your reference:
<html>
<body>
<input type="checkbox" value="lost" onclick="sendValueToTextBox(this)">lost
<br>
<input type="checkbox" value="none" onclick="sendValueToTextBox(this)">none
<br>
<input type="checkbox" value="blurry" onclick="sendValueToTextBox(this)">blurry
<br>
<input type="text" id="fg">
<script language=javascript>
function sendValueToTextBox(checkbox) {
var textbox=document.getElementById("fg");
if (checkbox.checked)
textbox.value=checkbox.value;
else
textbox.value="";
}
</script>
</body>
</html>

Using images for radio input buttons without styling label

I'm using an app on my Shopify store which provides product options on an ecommerce site. Annoyingly, I can't work out how I can change the radio buttons for the options so that an image is used for the selection. I've been trying to get this to work for hours but without success.
The problem is that the app outputs the radio inputs in a way that I can't seem to target the label. I've read many workarounds that use the label technique and hiding the input. However, my output looks like this:
<div class="shappify_option_value">
<label class="shappify_radio_option">
<input id="255415_0" class="bold_option_child shappify_option_255415 " type="radio" value="None" data-conditional-value="None" name="properties[Wax finish]" data-product-handle="" data-option-key="rb_255415_0">
None
</label>
<label class="shappify_radio_option">
<input id="255415_1" class="bold_option_child shappify_option_255415 price-change " type="radio" value="Light/clear" data-conditional-value="Light%2Fclear" name="properties[Wax finish]" data-price="8.00" data-variant="25548381447" data-product-handle="wax-finish" data-option-key="rb_255415_1">
Light/clear
</label>
<label class="shappify_radio_option">
<input id="255415_2" class="bold_option_child shappify_option_255415 price-change " type="radio" value="Light brown" data-conditional-value="Light%20brown" name="properties[Wax finish]" data-price="8.00" data-variant="25548382215" data-product-handle="wax-finish" data-option-key="rb_255415_2">
Light brown
</label>
</div>
Is there a way that I can work around this? Ideally I just want to use an image to select between the options without any text.
Thanks for any help with this.

Only one checked checkbox allowed in a grid

Is it possible to have a CheckboxColumn in a grid panel that can be checked on only one row at a time ?
I've tried Googling what I'm looking for and I'm not finding much.
Do I need to do something at the store level and at the grid level ? I'm halfway through coding a logic that does it using the checkchange event, but I wondered if I'm writing useless code :)
Thank you.
Your best option as suggested in the comments is to use radio buttons.
The key is to give them all the same name. For example:
<form>
<input type="radio" name="firstname" id="Fred">
<input type="radio" name="firstname" id="Joe">
</form>
Then, when one of these radio buttons is selected, any other radio button with the same name will be unselected.

Categories