Develop Reference

Shopify - Debut Theme - Showing A Textbox if Certain Variant is Selected

I'm trying to show my "Embossing" textbox only when the "Style" dropdown option "Embossing" is selected. I've added the below code in my new template, product-customizable-template.liquid, which created the textbox but I want to hide it unless "Embossing" is selected.
<p class="line-item-property__field">
<label for="embossing">Embossing</label>
<input required class="required" id="embossing" type="text" name="properties[Embossing]">
</p>
"Style" Dropdown
The Style textbox has the following code:
<select class="single-option-selector single-option-selector-product-customizable-template product-form__input" id="SingleOptionSelector-0" data-index="option1">
<option value="None" selected="selected">None</option>
<option value="Embossing">Embossing</option>
<option value="Stamp">Stamp</option>
</select>
I am still working on the site, so it is not active right now.
Any help would be greatly appreciated, thank you!

You need to check on-page load and on change of select box using Javascript and you can add and remove custom code to form easily
You can check and try the below snippet for a better idea
// on change test for your condition
document.getElementById('SingleOptionSelector-0').addEventListener('change', function (e) {
_checkAndAppend();
});
// run on page load and check the for value and add if selected value meet condition
_checkAndAppend();
function _checkAndAppend() {
var item = document.getElementById('SingleOptionSelector-0');
var itemValue = document.getElementById('SingleOptionSelector-0').value;
if (itemValue == 'Embossing') {
var input = `<p class="line-item-property__field _embossing">
<label for="embossing">Embossing</label>
<input required class="required" id="embossing" type="text" name="properties[Embossing]">
</p> `;
item.parentNode.insertAdjacentHTML('beforeend',input);
} else {
if(document.querySelector('._embossing')){
document.querySelector('._embossing').remove();
}
}
}

Is there a way to disable a dropdown to users while still being able to submit a form with the disabled dropdown?

I have a dropdown that is disabled to the user. I want for the user to be able to press a button that changes the selected item to a different one. For example: from the 4th item in the dropdown to the 7th.
I've tried disabling the dropdown, but when I do that and submit the form, I get a PHP error saying Undefined index: id.
HTML:
<form>
<select id='id' name='id' autocomplete='none' disabled required>
<option value='2'>apple</option>
<option value='6'>banana</option>
<option value='10'>orange</option>
</select>
<button type='submit'>Submit</button>
</form>
JavaScript:
const dropdown = document.getElementById('dropdown');
const options = dropdown.options;
for (let i = 0; i < options.length; ++i) {
if (options[i].value === id) {
dropdown.selectedIndex = i;
break;
}
}
PHP (This line seems to be the one breaking):
$id = $_POST['id'];

It seems you haven't defined method and action in your form tag. By default, I think, the method is set to 'GET', so when checking 'POST' you'll run into your error.
Therefore, set "method='post'" (and best also an action, e.g. "action='/yourPageName.php') and see if that helps.

I figured out a solution that suits my needs. It was kind of simple. I just enabled the dropdown when I submitted the form, and instantly disabled it again.
id.removeAttribute('disabled');
const data = new FormData(document.getElementById('form'));
id.setAttribute('disabled', '');
request.send(data);
Thanks for the help though :)

A disabled input field will be ignored when you submit the form. I would suggest creating a hidden input field of name="id" if you want the user to view the dropdown but not select it.
<form>
<select id='id' autocomplete='none' disabled required>
<option value='2'>apple</option>
<option value='6'>banana</option>
<option value='10'>orange</option>
</select>
<input type="hidden" name='id' value="6" />
<button type='submit'>Submit</button>
</form>

You can make an hidden input with the id="id" and change the select id to "temp_id". Then, since you are making the request from javascript, you can just update the hidden field before making the request.
<select id='temp_id' autocomplete='none' disabled required>
<option value='2'>apple</option>
<option value='6'>banana</option>
<option value='10>orange</option>
</select>
<input type="hidden" name="id" id="id" value="">
Then, on your javascript, just before you make the request, run the code:
document.getElementById("id").value = document.getElementById("temp_id").value;

Using innerHTML of <select> for windows.open()

On a page of my website I want user to select one choice of a and when they click on "connect" it open a new tab with the correct link.
code :
<select name="choice" id="choice">
<option value="Server1.html">Server1</option>
<option value="Server2.html">Server2</option>
<option value="Server3.html">Server3</option>
</select>
<input type="button" name="go_button" id= "go_button" value="go" onclick="go_to_the_link()"/>
<script>
function go_to_this_link(){
var element = document.getElementById("choice");
var link = element.innerHTML;
myWindow = window.open(link,"_blank");
}
</script>
According to the documentation this should works ... but since I'm new to JS and not expert in HTML I must have failed something.
I want to use JS only and make something that also works with datalist.
Any help is welcome !

Solved:
Ok I had 2 problem :
In order to post this on stackoverflow I changed all my variable and function name, and I forgot to change one ...
As said in the comment, I needed to use "value" and not innerHTML. I tried with value once but it also failed that's why I gave up this, I guess something else was wrong.
Thx for helping solving the problem !
(working) code :
<select name="choice" id="choice">
<option value="Server1.html">Server1</option>
<option value="Server2.html">Server2</option>
<option value="Server3.html">Server3</option>
</select>
<input type="button" name="go_button" id= "go_button" value="go" onclick="go_to_the_link()"/>
<script>
function go_to_the_link(){
var element = document.getElementById("choice");
var link = element.value;
myWindow = window.open(link,"_blank");
}
</script>

How to get onchange to set onclick=window.open(url)?

I have an app in GAS html service with a selection box for files, and a button next to it for opening them in a new tab. I can't figure out how to get it done. The files on the list get their values in a google-drive-file-id form (assume that fileID1-3 are ok), and i have a server script for getting the whole link. Here's how it's done:
HTML:
<select id='fileBox' name='fileBox' onchange="google.script.run.withSuccessHandler(gotFileLink).getFileLinkById(this.value)">
<option value=fileID1>File1.pdf</option>
<option value=fileID2>File2.pdf</option>
<option value=fileID2>File3.pdf</option>
</select>
<input type="button" value="Open File" id="linkButton" />
Server code:
function getFileLinkById(fileID) { return DriveApp.getFileById(fileID).getUrl(); }
Client code:
function gotFileLink(url) {
document.getElementById('linkButton').onclick = // what goes here?
}
I have tried several options using "window.open" but can't figure out how to make it work.
Thanks in advance.

Here is code which can help you to open you desired link on click of the button.
Here is a working link:
JSFIDDLE
<select id='fileBox' name='fileBox'>
<option value='http://www.google.com'>File1.pdf</option>
<option value='http://www.google.com'>File2.pdf</option>
<option value='http://www.google.com'>File3.pdf</option>
</select>
<input type="button" value="Open File" id="linkButton" />
var btn = document.getElementById('linkButton');
btn.addEventListener('click',GetInfo,false);
function GetInfo(){
var e = document.getElementById("fileBox");
var selectedUrl = e.options[e.selectedIndex].value;
window.open(selectedUrl);
}

Answering my own question, but based on maxspan's solution (which was not exactly what i wanted) I was able to solve this in another way:
<select id='fileBox'>
<option value=fileID1>File1.pdf</option>
<option value=fileID2>File2.pdf</option>
<option value=fileID2>File3.pdf</option>
</select>
<input type="button" value="Open File" id="linkButton" onclick="runner.withSuccessHandler(window.open).getFileLinkById(document.getElementById('fileBox').value)" />
If anyone has a different/better answer - I still want to hear it... thanks maxspan for helping me.

Checkboxes and <select> options don't persist in HTML 5 local storage

I'm coming to an unexpected conclusion regarding HTML5 local storage persistence and inputs. When I use < input type="text" > or < input type="textarea" >, then the data persists in local storage and on page load loads back into fields at the push of a button. But when I use type="radio" type="checkbox" or < select > options, none of those types of data persists.
Is this behavior by design, and I'm pushing against a brick wall trying to make it work, or is it my form element scripting that needs an overhaul? If it's by design, then you can answer yes. If not, you can check the details of my work below to give it a checkup and any feedback.
The user enters data into textarea fields like this:
<textarea name="s1frontTowerShockMtgOther" id="s1frontTowerShockMtgOther" cols="20" rows="4">
Then they tap on the save button coded like this:
<input type="button" value="Save Settings" onclick="persistData()" style="background-color:red; font-weight:bold">
The Javascript page does its magic:
function persistData()
{
if (html5StorageSupported())
{
var s1frontTowerShockMtgOther = document.form1["s1frontTowerShockMtgOther"].value;
var storageIndex = "practicelog.html.s1frontTowerShockMtgOther";
localStorage[storageIndex] = s1frontTowerShockMtgOther;
document.form1.numStored.value = determineNumberStoredElements();
}
}
When the user returns to the page, he taps on this button to populate the fields on that page:
<input class="loadButton" type="button" value="Load Data First" onclick="loadData()">
The Javascript is called:
function loadData()
{
document.form1["s1frontTowerShockMtgOther"].value = localStorage["practicelog.html.s1frontTowerShockMtgOther"];
}
That's it. The following does not work:
<select size="1" name="frontTowerMtgShock" id="frontTowerMtgShock">
<option value="">Tap to choose</option>
<option value="0 spacers">3-outer</option>
<option value="1 spacer">2-middle</option>
<option value="2 spacers">1-inner</option>
<option value="other">See notes</option>
</select>
The following type="checkbox" does not work. It doesn't work if "checkbox" was replaced by "radio" either:
<input type="checkbox" name="s1frontTowerMtgShock3" id="s1frontTowerMtgShock3" value="3-outer">
I am doing this project for the iPhone with HTML, CSS, and Javascript through PhoneGap 1.0 integration.

The following works fine for me:
function persistData()
{
var s1frontTowerShockMtgOther = document.form1["s1frontTowerShockMtgOther"].value;
var storageIndex = "practicelog.html.s1frontTowerShockMtgOther";
localStorage[storageIndex] = s1frontTowerShockMtgOther;
storageIndex = "practicelog.html.frontTowerMtgShock";
var frontTowerMtgShock = document.form1["frontTowerMtgShock"].value;
localStorage[storageIndex] = frontTowerMtgShock;
}
function loadData()
{
alert(localStorage["practicelog.html.frontTowerMtgShock"]);
document.form1["frontTowerMtgShock"].value = localStorage["practicelog.html.frontTowerMtgShock"];
}
Have you double checked your storage keys when setting and retrieving?