We Keep Coding

How to create a dynamic/modular 3-piece form input with html, JavaScript, and Bootstrap

I had no success researching this problem, so apologies for my difficulty in concisely describing it.
Basically, I'm building a website where users can submit "recipes," by way of html form > php. I wanted a way then for users to dynamically add or subtract steps or ingredients (I've seen this on other sites, but I couldn't find a simple pure js solution).
Anyway, I built something akin to what I wanted (example here, JavaScript here), but I'm not convinced it's such a great solution. To retrieve the form info, the php code basically loops through the materials' and steps' ids until it's reached the last one.
Although this solution works, I've run into 2 more problems:
The first is that the text for each input is saved in a js array each time the user types--that way new inputs can be added or removed without losing the text. However, when a new input element is created, if this previous text was too long, it is cut off.
The second is that for the ingredients section, I'd like to have a element where users can only choose standardized measurements (ie mg, g, kg...) and then another for a numeric quantity. I've tried Bootstrap's input-group classes, but the spacing turns out very odd and doesn't work at all on mobile. Is there a better way to accomplish this? This also thoroughly complicates the my original solution, since there will now be 3x as many inputs.

How to suppress a text field in JavaScript?

I am working on a business cards project with variable data printing done online. I need a rule I can use so that the fields that are not used or left blank will be suppressed.
At the moment I am getting a blank test field between two text fields if it is left blank. I am new to this so any help will be appreciated.

I'm assuming your situation involves a user typing data into an HTML form after which the information is displayed somehow on an HTML page. If any of that is false, we will need more information to answer your question. It sounds like you have already figured out how to send the information from form to display and you just want to not see empty lines of display. That is handled with CSS style.
First, you need to have some way to test whether the field contains user input. Since you didn't offer any code to build on, I'm going to assume for the moment that you can figure out how to do that.
Then you can use JavaScript to programmatically alter the CSS of a given element. It will go something like this:
if (field_modified === false) {
// cause an HTML element to not be displayed
// here, the value associated to whatever field
// you are testing is displayed in an HTML node with ID 'id_of_node_here'
// There are various other ways of accessing specific HTML nodes
// without giving them IDs. You can research that yourself.
document.getElementById('id_of_node_here').style.display = "none";
}
To test user input in a field, it's probably sufficient to test the length of the value or whether a form element has been changed from default.

javascript iterate through dom looking for specific aria-label

I've spent hours on this one.
My company is forced to use a non-user-friendly 3rd party website. We only use IE11. My job is to use javascript and jquery to customize the screen and make things a little easier for our users. I use a bookmarklet to insert <script> tags into IE and reference a .js file saved locally.
This website uses hundreds of input text fields but we only need a handful of them. So, I want to highlight input text fields on the screen.
Some fields have ID's some only have Name. For the most part, this works:
$(document.getElementById('s_3_1_18_0').toggleClass("highlightField");
$(document.getElementsByName('s_3_1_19_0')[0]).toggleClass("highlightField");
HighlightField simply adds CSS background-color: yellow !important
The problem is, this 3rd party app changes the ID and the Name in bizarre ways. One day, the name will be 's_3_1_19_0', the next it will be 's_3_2_48_0'. So highlighting using this method is not stable.
However, these fields have an area-label that stays constant. I'm wondering how to use javascript or jquery to iterate through each text box, looking for a specific aria-label. For example, the "valid to" field has a bizarre name that changes all the time but it's aria-label is always "Valid To".
Can anyone please help me with this?

You can find the input with the aria-label "Valid To" by searching for
$(document).find('input').attr('aria-label', 'Valid To');
I recommend being a little bit more specific than $(document), though. That searches the entire doc.

You can use jquery to get the list of all aria-label attributes and use a switch case to perform what you need. Something like this
switch ($(this).attr('aria-label')) {
case 'label1': {
//do something
break;
}
}

Creating a New Element in Place of an Existing one

I've been creating a calender box widget (one of those little div-popups that allows you to select a date).
All's pretty much done on it short of one feature: When you create the object, you send it a field (the field that will contain the date); because of a (really) weird set of requirements, this field cannot have an easily readable format (YYYYMMddhhmmss) and so my script hides the field, and drops a div with similar styling in its place. I haven't found a way to neatly drop a div in as a sibling to the field AND right next to it (as opposed to appended at the end of the parent).
How can I take a field by ID as an argument, hide it, and drop a div in it's place at the same location?
If I could drop it, in the HTML, directly after the field, I could copy it's CSS over to the DIV (or a new field, even) and no one would be the wiser; references to the old field would still be valid, and humans could easily read the new field, but as is, the best solution I've found is to have the object take two parameters, one for the target field and one for the target div. It's not ideal.
jsFiddle: Full Project (I'm so, so, SO incredibly sorry for the widget's name. It's bad even by pun standards.)
jsFiddle: Simplified Example (Includes chosen answer)
PS:
I only have one real goal in this project: to minimize dependencies. This widget is replacing an old one my company used for ages which, over time, accumulated a dozen and a half modifications (each in different files) and needed at least as many style sheets and existing plugins. No one really knew what was going on with it. As is this one needs only jQuery, no other scripts, no other style sheets...
...I'd like to keep it that way...

http://api.jquery.com/after/
$('yourelement').hide().after(newDiv)

Calculate html input field and allow user to modify said field

I'm a new user to knockout.js and so far have been very impressed with basic use.
I want to be able to auto calculate a field (yr2 Expense) based on a previous field (yr1 Expense), but also allow the user to change the auto calculated field. This auto calculated field is then used for another calculation (Total Yr2). I've been trying to do so with this jsfiddle, but have had no luck so far. I can't find any info in the examples on how to do this.
I first tried making yr2 Expense an observable, which does not allow for auto calculation. I then tried making yr2 Expense a computed, which does not allow for Total Yr2 to be updated with user input. Is what I'm trying to do not possible? I would think this would be common in finance calculation forms, which is what I'm doing this for.

First of all, variable names should be easy to understand and intention revealing. There is no benefit to obtuse or abbreviated names, like the ones used in your fiddle. They are confusing, and this adds difficulty to code maintenance. If you plan to minify your js later then the names wont matter anyway. If you need to read your code later, having full, easy to understand names helps tremendously.
There are two ways to accomplish what you are after.
One method would be to use subscribers to alter the calculation of the observable after a change. See this, near the bottom of the page. Here is a fiddle demonstrating this method. For this example, I recommend this method.
Note: I am leaving off valueUpdate so that recalculations only occur when the user is done typing. If you use afterkeydown, it will recalc early, causing issues. Try pressing [Enter] when you want it to recalc.
The second method is to use writable observables (Second header, 1/3 down the page) to make computed observables that have read and write methods. I don't think this method is as good a fit for this specific example, but the example in the linked KO documentation should give you an idea of when it works well.