I have a radio button custom option with 3 options. On selection of option 2, for example, I wish a simple JS alert() to popup with a message regarding this selection, not on all of them, only one.
The problem I'm finding is that to make it compatible with all products they have JS generated ID's and class names so there's little in the way of a pattern to follow to ensure my code works on all products.
I could do it via just looking for that element and getting the second one with getElementByTag(), however I want a Magento-friendly way to do it as I'm heading towards my certification over the coming months and want to ensure my practices are kept in-line with Magento rather than "working around" it.
Example code (ID's, classes and names generated on the fly by Magento)
<dd class="last">
<ul id="options-54765-list" class="options-list">
<li>
<input type="radio" class="radio validate-one-required-by-name product-custom-option" onclick="opConfig.reloadPrice()" name="options[54765]" id="options_54765_2" value="210674" />
<span class="label"><label for="options_54765_2">Colour Edge </label></span>
<script type="text/javascript">$('options_54765_2').advaiceContainer = 'options-54765-container';$('options_54765_2').callbackFunction = 'validateOptionsCallback';</script>
</li>
<li>
<input type="radio" class="radio validate-one-required-by-name product-custom-option" onclick="opConfig.reloadPrice()" name="options[54765]" id="options_54765_3" value="210673" />
<span class="label"><label for="options_54765_3">Gallery Wrap </label></span>
<script type="text/javascript">$('options_54765_3').advaiceContainer = 'options-54765-container';$('options_54765_3').callbackFunction = 'validateOptionsCallback';</script>
</li>
<li>
<input type="radio" class="radio validate-one-required-by-name product-custom-option" onclick="opConfig.reloadPrice()" name="options[54765]" id="options_54765_4" value="210672" />
<span class="label"><label for="options_54765_4">White Edge </label></span>
<script type="text/javascript">$('options_54765_4').advaiceContainer = 'options-54765-container';$('options_54765_4').callbackFunction = 'validateOptionsCallback';</script>
</li>
</ul>
</dd>
To accomplish this, on that product, in the design tab, add in a custom block, like so:
<reference name="before_body_end">
<block type="your_module/product" name="option.select.js" template="path/to/template.phtml" />
</reference>
In your new block, grab the Mage::registry('current_product');, and call getProductOptions(). Filter it down based on whatever criteria. Now, the best might be, depending on if this needs to be reused much, to add a column to Catalog_Model_Product_Option_Value table in the database, and extend the admin templates so you are checking a box, or using a drop-down, or typing some text to get the confirmation to pop up.
Then, in the protected function _toHtml() {} function, output your JS for the confirmation box.
That is how I would do it.
Related
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>
All right, this is a pretty specific question from a beginner, so bear with me.
I'm a newbie just learning the ropes. Here's the background (skip to next para if you don't care): I'm updating my first android app and I'm using MIT App Inventor 2 to do it. It's a free tool online that uses a WYSIWYG screen editor and Blockly to create behaviors, interactions, etc. The app I'm making loads a specific web page with a form and fills out most of the form for you (specifically, it's to help people enter the online ticket lottery for a theater show). The page is not my own so I can't edit the HTML. But I can run javascript on top of it by plugging single lines of javascript code into the Blockly side of App Inventor. Here's a relevant example of how it looks.
I've figured out how to fill in most of the form using getElementByID(). But there's a set of radio buttons that have no id. Here's a lightly modified version of the HTML (which I cannot edit):
<div id="cont_id_tickets">
<div>
<input type="radio" name="tickets" value="1" />
<span style="font-family:Times New Roman; font-size:15px;">1</span>
</div>
<div>
<input type="radio" name="tickets" value="2" />
<span style="font-family:Times New Roman; font-size:15px;">2</span>
</div>
<div id="required_info_tickets" class="requiredInfo floatLeft">
</div>
<input type="hidden" name="reqField" value="tickets" alt="Radio" req="true" errorMsg="Please enter a valid value." requredErrorMsg="This field is required. Please enter a value."
patternID="0" customRegex="" />
</div>
I've made some progress by using the following:
document.querySelector('input[name=tickets]').checked = true;
But that of course only selects the first radio button. I'd like to able to get a value (1 or 2) and have it select the right button accordingly. The Blockly backend I'm using allows me to define a variable to plug into the line of javascript, but the line of javascript itself has to be essentially a single line. I was hoping one of the following would work if I wanted the value to be 2 for example:
document.querySelector('input[name=tickets][value=2]').checked = true;
document.querySelector('input[name=tickets]').2.checked = true;
But neither does. Any ideas on the correct syntax?
Thank you!
You need to place the value that you are trying to select using in quotes:
document.querySelector('input[name=tickets][value="2"]').checked = true;
Example
document.querySelector('input[name=tickets][value="2"]').checked = true;
<div id="cont_id_tickets">
<div>
<input type="radio" name="tickets" value="1" />
<span style="font-family:Times New Roman; font-size:15px;">1</span>
</div>
<div>
<input type="radio" name="tickets" value="2" />
<span style="font-family:Times New Roman; font-size:15px;">2</span>
</div>
<div id="required_info_tickets" class="requiredInfo floatLeft">
</div>
<input type="hidden" name="reqField" value="tickets" alt="Radio" req="true" errorMsg="Please enter a valid value." requredErrorMsg="This field is required. Please enter a value." patternID="0" customRegex="" />
</div>
I've got the a piece of a form where I've applied some javascript (the end-purpose of the js is to show the appropriate follow up question), but the part that loads the input's and select's values into variables doesn't seem to be working.
Here's the exact code:
# HTML
<ul id="m_mlt_t">
<li>How long have you known <span class="nom">__</span>?</li>
<li><input name="m_mlt_n" type="text" maxlength="3" /> <select name="m_mlt_t"><option></option><option>days</option><option>months</option><option>years</option></select></li>
<li><input name="m_mlt_n" type="radio" value="777" />I prefer not to answer</li>
<li><input name="m_mlt_n" type="radio" value="999" />Don't know</li>
<li><span class="m_mlt_t" style="display:none;"></span></li>
</ul>
# JAVASCRIPT
$('select[name="m_mlt_t"], input[name="m_mlt_n"]').change(function() {
var time = $('input[name="m_mlt_n"]').val();
$("span#m_mlt_t").text(time);
$("span#m_mlt_t").fadeIn();
var period = $('select[name="m_mlt_t"]').val();
$("span#m_mlt_t").append(" " + period);
$("span#m_mlt_t").fadeIn();
});
In the fiddle, I expect the span to fade in and display the values of the textfield and the dropdown.
http://jsfiddle.net/vxvSU/
btw the code for the following custom functions isn't included, but I know they work
counter_multiChoice(),fadeOUT_sect(),fadeIN_sect()
A first problem is your selector
$('select[name="m_mlt_t"] input[name="m_mlt_n"]')
This selects any child input elements inside the select element, which doesn't make any sense and should probably be...
$('select[name="m_mlt_t"], input[name="m_mlt_n"]')
Which selects all matching select, and input elements with the appropriate names.
I'm trying to create an HTML form (using JSP) which contains Javascript buttons (rather than actual HTML buttons). Everything works great except that I'm unable to tab to the -based Javascript button after the last tabindex.
For example:
<li class="lineItem">
<f:label path="ownerPostalCode">Postal Code<em>*</em> </f:label><br />
<f:input path="ownerPostalCode" type="text" id="ownerPostalCode"
class="required" size="15" maxlength="5" value="" tabindex="16" />
</li>
<li class="lineItem">
<f:label path="ownerPostalCodeFour">+4</f:label><br />
<f:input path="ownerPostalCodeFour" type="text"
id="ownerPostalCodeFour" size="5" maxlength="5" value="" tabindex="17"/>
</li>
<span class="buttonRow">
<span class="clearButton" onclick="resetFields
('registrationForm', 'ownerInfoSection')">Clear Fields</span>
<span id="continueButton" class="greenButton" tabindex="18"
onclick="stepOneToStepTwo()">Continue</span>
</span>
</span>
I understand that tabindex only works with certain input fields (A, AREA, BUTTON, INPUT, OBJECT, SELECT, and TEXTAREA)--as such, the specification of "tabindex='18'" for the #continueButton doesn't work. The desired behavior is that after tabbing to the "ownerPostalCodeFour" field, the user can tab to the #continueButton as one would with a normal button.
Is this at all possible or am I forced to utilize standard HTML buttons to achieve this behavior?
Thanks.
Not sure what browsers you are supporting, but tabindex="0" works in latest webkit/Firefox/IE. From an accessibility standpoint, using spans is less than optimal though. Why not at least use an <a> tag?
I am attempting to put together a fairly complex form using dojo and dijit widgets. The form has multiple 'sections' which allow the user to attach an existing object (via select tag) or create an entirely new object inline in the form.
My inputs are rendered conditionally based radio buttons and manipulated via javascript. What I am having problems doing, is conditionally making dijit widgets required based on whether the inputs are rendered or not (which itself depends on which radio button is selected.
My html (actually jsp)
<div>
<input id="useExisting" type="radio" name="radio" checked value="useExisting" onclick="renderExistingInput()" /> <label for="useExisting">Use Existing</label>
<input id="new" type="radio" name="radio" value="new" onclick="renderNewInputs()"/> <label for="new">Create New</label>
</div>
<br>
<div id="newInputs">
<div class="row">
<label class="label" for="newName">Name </label>
<span class="formInput"><input type="text" id="newName" name="newName" required="true" dojoType="dijit.form.ValidationTextBox"/></span>
</div>
<!-- More inputs with required="true"-->
<br>
</div>
<div id="existingInput>
<div class="row">
<label class="label" for="existingSelect">Existing Object </label>
<span class="formInput">
<select name="existingSelect" id="existingSelect" dojoType="dijit.form.Select">
<!--JSTL tags for compiling list of options -->
</select>
</span>
</div>
</div>
Accompanying javascript functions:
function renderExistingInput() {
dojo.fx.wipeOut(getWipeArguments('newInputs')).play();
dojo.fx.wipeIn(getWipeArguments('existingInput')).play();
}
function renderNewInputs() {
dojo.fx.wipeOut(getWipeArguments('existingInput')).play();
dojo.fx.wipeIn(getWipeArguments('newInputs')).play();
}
function getWipeArguments(id) {
var wipeArgs = {
node : id
};
return wipeArgs;
}
The basic 'flow' of user interactions is User clicks a radio button, the correct div renders as a result of that. What I want then are inputs that are not rendered to not be considered required. I'm not entirely sure how to do this. Is it possible to manipulate that particular attribute directly via dojo? Or is there a better way to do this entirely?
Seem's like My answer was staring me right in the face. I simply needed to pull together the different parts I had come across. My final function for changed the 'required' attribute looks like:
function setWidgetRequiredAttributes(baseDomNodeId, requiredValue){
foundWidgets = dijit.findWidgets(dojo.byId(baseDomNodeId));
console.log(foundWidgets);
foundWidgets.forEach(function(widget){
widget.required=requiredValue;
});
}