Shopify Input Value Is Overidden Somehow - html

If you have any input on what's going on here I sure would appreciate it. When I add more than one variant, my quantity input breaks.
I have a Shopify product with only ONE variant here:
https://three-main.myshopify.com/products/copy-of-liquid-hand-soap
I have essentially the same product duplicated, but with TWO variants here:
https://three-main.myshopify.com/products/liquid-hand-soap
Note:
If you're looking closely you'll see the input populate correctly for a split second, then revert to the broken input field that says "add to cart" instead of "1". Is there something I should be doing to populate individual inputs when there's more than one variant?
This is the code we're using to populate the quantity box:
<div class="di-quantity-wrap">
<label
class="product-quantity-label"
for="quantity">
Quantity:
</label>
<input
class="input-field product-quantity-input"
type="text"
name="quantity"
value="1">
</div>
Thank you in advance!

Related

ngModel and checkbox/radio not working properly

I made html template for my app. Basically it's a radio/checkboxes with text inputs which contain answers to questions. It worked just fine until I've decided to add ngModel to them. The thing is that when I add 2 or more answers and click on a label to set the correct one(/s) only the last one selects, moreover the answertext disappears whenever I click on label.
html text:
<div *ngIf="question.typeQuestions==1">
<div *ngFor="let item of question.selectedAnswer; let i = index" class="checkbox-variable">
<input type="checkbox" id="customCheckbox{{i}}" name="customCheckbox" class="checkbox-square" [(ngModel)]="item.isCorrect" >
<label class="checkbox-label" for="customCheckbox{{i}}"><input class="checkbox-text" type="text" [(ngModel)]="item.text"></label>
</div>
</div>
ChrisY solved the problem.
having multiple input with the same name is definitive wrong here. Try name="customCheckbox{{i}}". When using ngModel you need a name that identifies the form control. It has to be unique

HTML Number Input Step Not Validating

I have two different number-type input fields, both with a declared min, max, and step. On one, the step works just fine with the arrows/spinner, and throws an error when someone manually enters a number that isn't divisible by the step value. The second number input field, set up exactly the same way, the step works fine with the arrows/spinner, but will allow someone to manually enter whatever value they want, and even submit the form with the "incorrect" number. (Example: step="2", and they entered and were able to submit a 5.)
the two boxes are on different pages, and the one that's giving me fits looks like this
<input style="width:75px;" type="number" id="updates_23705616199" max="120" name="updates[]" class="txtbox" value="2" min="2" data-id="23705616199" step="2">
I even extracted just this line to an html file by itself, and it still doesn't work then. The data-id field is a required bit for the page that it's in.
Please advise
Did you make sure your IDs are unique? I created a JSFiddle showing your example working. I also gave them unique names.
https://jsfiddle.net/pa9rodfL/
<input type="number" id="idName" class="className" name="nameName" min="11" max="15" step="2" >
<input type="number" id="idName2" class="className" name="nameName2" min="5" max="10" step="3" >

Filling out a website form with excel vba

I have a website that I want to read some data off, do a bunch of calcs, then fill out a form and submit it, all using excel vba.
I can read the website well enough, and do the calcs. I can also fill out a few of the inputs.
However, on this final form, my technique no longer works.
On the first few pages, the html has looked like
<input name="ProjectFile-BuildingPermitNumber" class="form-control" type="text" maxlength="100" data-bind="textInput: ProjectFile().BuildingPermitNumber">
and i I have been using , with elementname being projectfile-buildingpermitnumber
IEValue = objIE.document.getElementsByName(ElementName)(0).Value
to obtain the values and
objHTML.getElementsByName(ElementName)(0).Value = ValueCheck
to return them
I have also used
Set AllLinks = objIE.document.getElementsByTagName("A")
and a for loop to find buttons to click on. not the best technique, i probably should use a .click, but it works.
anyway, on this new form, I do not have an id or name to work with.
<div class="form-group">
<label class="col-sm-3 control-label">
<span> Structural</span>
</label>
<div class="input col-sm-7">
<input class="form-control" type="text" data-bind="value: DrawingsDocuments.Structural">
</div>
</div>
Anyone got an idea on how I can refer to these types of boxes using excel? Ive tried all the different getelement etc that MS HTML controls give.
Regards
Bryan

HTML input type=number- enter multiple numbers separated by commas?

Would like a HTML number field where the user can enter numbers separated by commas and spaces... like '1, 2, 3.' Right now it only accepts inputs without commas and spaces and won't let me submit the form with commas/spaces in the field.
Here's a sample of my simple input field now:
<input id="A" name="HLA-A" type="number" />
Need number field so number keyboard will pop up on smart phones.
Did a good bit of looking and I'm surprised I didn't find anything on this... perhaps there is a simple answer? Anyone have any ideas?
Thanks!
If you REALLY need type="number", then you should do as follows:
<input type="number" />,<input type="number" />,<input type="number" />
Otherwise, you could do as follows:
<input type="text" pattern="\d+, \d+, \d+" />
Both ways, some browsers may not support it.

how to group together related fields in form submission

I'm building a complex form, and the form happen to edit "Group", and i have a bunch of subgroup for each group, i would also like to provide a simple way for people to edit the subgroups within this edit page. How would i group the fields together in subgroup edit box so that when submitting the form, it will be grouped together somehow to distinguish the fact that a certain "set" of fields belong into one unit?
Note that there is no limit to how many subgroup it can have. I would like it so that each unit of inputs will be grouped together for easy consumption in the back.
A problem with my current approach is that even though i can just loop through each of group_name, group_descrp array and match it up that way (by index), the checkbox ruins it by not showing up if it is unchecked, and the value of checked checkbox is just on, and i have no way of passing in the information group_id.
Example:
<form>
<!-- group 1 -->
<input name="group_name[]">
<input name="group_descrp[]">
<input type="hidden" name="group_id[]">
<input type="checkbox" name="group_del[]">
<!-- group2 -->
<input name="group_name[]">
<input name="group_descrp[]">
<input type="hidden" name="group_id[]">
<input type="checkbox" name="group_del[]">
...
</form>
thanks a lot!
How about a common class name? jQuery and many of its plugins are all about class-based selectors, so why not?