Develop Reference

Edge browser populating multiple textboxes

I'm having some problems with textboxes in Edge browser. When I click on a textbox (regular <input type="text"), it shows some options I entered before. That's fine but when I select one, other textboxes gets affected. Here is a screenshot:
You see in this image, in the modal div, I selected Notebook and the textbox at the background also changed. They have different name and id attributes and also I haven't even picked anything yet on the modal, just hovering on the items in the dropdown already affects the textbox at the background.
What could be causing this? I've already checked several times that they have different attributes. Here is their markup:
This is for the modal:
<div styleName="field-container">
<label className={classes.label} htmlFor="termName">Name:</label>
<input type="text" styleName="field-container__input-text field-container__input-text--long" name="termName" id="termName" required autoFocus autoComplete="off" />
</div>
This is for the background:
<div styleName="field-container">
<label className={classes.label} htmlFor="name">Name:</label>
<input type="text" styleName="field-container__input-text field-container__input-text--long" name="name" id="name" required autoFocus autoComplete="off" />
</div>
This Edge dropdown show "Manage Personal Info..." at the bottom by the way.

Display element next to another from different parts of the DOM tree

I have two forms, one larger and one smaller. I would like to display the smaller form next to a specific input of the larger form. It's not valid html to embed one form within another in the DOM, but is there a way to display one form over / inside another form next to a specific input using CSS or JS?
<!-- Main Form -->
<form action="action1" method="post">
Name <input type="text" name="name" value="">
Job Title <input type="text" name="job_title" value="">
Cell Number <input type="tel" name="mobile" value=""> <!-- SMALLER FORM SHOULD DISPLAY NEXT TO CELL # INPUT -->
Favorite Sport <input type="text" name="favorite_sport" value="">
Hobbies <input type="text" name="hobbies" value="">
<input type="submit" value="Save">
</form>
<!-- Smaller form loaded via js -->
<form id="optin_js_loaded_form"></form>
<!-- js -->
<script src="external_js_library.js"></script>
<script>
// js code to load form into #optin_js_loaded_form using external_js_library.js
</script>
NOTES
The forms need to be separate because the smaller form is created via an external js library from a marketing service.
I know I could make the data from the larger form submit via ajax, but I'm hoping I can save some work by just changing where the smaller form displays.
EDIT 2020-02-05 14:40
Found a webpage that suggests some possible solutions, but doesn't give much direction on how to implement them. https://discourse.wicg.io/t/position-an-element-relatively-to-another-element-from-anywhere-in-the-dom/968

You could make use of the form attribute to avoid the nesting of form elements. You move the controls from the main form outside of that form element, and add the form attribute to all of them.
Now you can place the small form at its desired position, without violating the HTML rule that form elements should not be nested.
You would still need to apply some CSS on that small form element, so it does not flow to the left. Something like display: inline-block or similar could be useful.
Here is the suggested HTML part:
<form id="mainform" action="action1" method="post"></form>
<div>
Name <input type="text" name="name" form="mainform" value="">
Job Title <input type="text" name="job_title" form="mainform" value="">
Cell Number <input type="tel" name="mobile" form="mainform" value="">
<!-- Smaller form loaded via js -->
<form id="optin_js_loaded_form">
</form>
Favorite Sport <input type="text" name="favorite_sport" form="mainform" value="">
Hobbies <input type="text" name="hobbies" form="mainform" value="">
<input type="submit" form="mainform" value="Save">
</div>

How to use both radio buttons and checkboxes in same fieldset?

I have created a survey form that generates an email containing the answers provided. The issue I am having is that one question requires a radio button for three choices but then needs to include checkboxes below that may be use to append information to the radio button choice selected. Here is an example of the code I am describing:
<fieldset data-role="controlgroup">
<label for="q_planName" id="q_formStatus_title">Choose one of the following headline options:</label>
<input type="radio" name="q_formStatus" id="q_formStatus_1" onchange="onSelectionChanged(this);" />
<label for="q_formStatus_1"Blah 1</label>
<input type="radio" name="q_formStatus" id="q_formStatus_2" onchange="onSelectionChanged(this);" />
<label for="q_formStatus_2">Blah 2</label>
<input type="radio" name="q_formStatus" id="q_formStatus_3" onchange="onSelectionChanged(this);" />
<label for="q_formStatus_3">Blah 3
<br/>The following indications may be appended to any headline option:<br/><br/>
<input type="checkbox" name="q_formStatus" id="q_formStatus_4" ;" />
<label for="q_formStatus_4">Date of blah required?</label>
<input type="checkbox" name="q_formStatus" id="q_formStatus_5" ;" />
<label for="q_formStatus_5">Blah is non regulated.</label></fieldset>
This looks fine in the form but the code that is used to print these results in the email is identifying this question as a radio input so it is storing the answer as a single response rather than an array (ie. it will print Q: questionTitle, A: answerValue instead of Q:questionTitle, A1:answerValue1,A2:answerValue2 etc.)
Note that these questions had to go through an approval process so please don't just suggest separating it into two separate questions or adding a "None of the above selection".
Thanks!

You need to use different names because each field needs to be identified individually by the server.

Store multiple inputs in JSON key as part of array

Good evening,
I am trying to make a form that is dynamic, meaning that some <input> tags can be added by the user with the click of a button. Such behaviour is easely done with javascript, adding an element whenever the user feels like it, appending it to the parent element, in this case a form.
The dynamic nature of the input tags comes from the need to store a bunch of values inside an array that must be later pushed inside a mongodb document and the number of elements is not set, hence the dynamic nature. An example, to show what I mean:
<form>
<fieldset>
<legend>Username and ID</legend>
<input type="text" name="username" />
<input type="text" name="uniqueId" />
</fieldset>
<fieldset>
<legend>Places the user can go to</legend>
<input type="text" /> <!-- user input would be "pub" -->
<input type="text" /> <!-- user input would be "market" -->
<input type="text" /> <!-- user input would be "cinema" -->
<input type="text" /> <!-- user input would be "computer store" -->
<!-- other elements, added dynamically -->
<!-- the user might be able to go also to the gym, or the park,
he is the one that decides the number of places to add to the
input -->
</fieldset>
</form>
The thing I would like is for this input values to be stored all together inside an array which is already part of an object, like so:
myObject = {
username: "Ryan",
uniqueId: "A001",
canGoTo : [
"pub",
"market",
"cinema",
"computer store",
...other inputs that the user might have added and wrote]
}
The canGoTo key would be filled with the values inserted by the user inside the various inputs of that form. How would I go about storing them inside the array canGoTo?
EDIT: I am using AngularJS with ng-submit

You can use ng-model to target specific indices of an array. Something like:
<form>
<fieldset>
<legend>Username and ID</legend>
<input type="text" name="username" />
<input type="text" name="uniqueId" />
</fieldset>
<fieldset>
<legend>Places the user can go to</legend>
<input type="text" ng-repeat="input in myObject.canGoTo"
ng-model="myObject.canGoTo[$index]" />
</fieldset>
</form>
To add a new input:
$scope.myObject.canGoTo.push ('');
You'll need to run some testing on the various functions you offer in terms of manipulating the actual form, but this should be a good launching point.

If you give all the relevant inputs the same class, you can use getElementsByClassName(), and then cycle through the returned array, and do something along the lines of canGoTo.push(elementArray[i].value) after creating an empty canGoTo array.
If you want to add one at a time, all you need to add is a variable keeping track of the current inputs index number.

How do I hide a child element on a hidden tab with Jquery, and keep it hidden until I unhide it?

Probably best to explain with an example:
<div id="tab-1">
<input name="1" type="text" />
<input name="2" type="text" />
<input name="3" type="text" />
<div>
<div id="tab-2">
<input name="4" type="text" />
<input name="5" type="text" />
<input name="6" type="text" />
<div>
I'm using the Jquery Tools "Tabs" tool. This toggles the visibility of the two divs above so that only one shows at a time.
The problem is as follows:
The user Switches to tab 2. This hides tab-1, and fields 1 through 3.
This also shows tab-2 and its children, fields 4 through 6.
The user takes an action on tab-2 that should remove field 2 from the now hidden tab-1. I'm using $('#field-2').hide(0);
This should hide field two, but does nothing since field two is already hidden. That's fine for now.
3.The user switches back to tab-1.
Actual result:
All three fields, including field 2, are now visible again.
Desired result:
Fields 1 and 3 are now visible, but switching to tab-1 does not un-hide field 2, since it was explicitly hidden by a function. Field 2 should stay hidden until explicitly unhidden.
I'm thinking I may be able to circumvent this by assigning a special css class to the field with display:none;, but I was wondering if there's a better solution to show/hide independatly of the tab the element is on without assigning extra css classes.

It appears to work if you actually change the element's display style, instead of using hide:
$('selector').css('display', 'none');