Found 2 elements with non-unique id - javascript

I am getting the following warnings when we use with the same id names in two different form tags.
[DOM] Found 2 elements with non-unique id
Here is my HTML snippet:
<div class="modal-dialog">
<form action="" method="post" id="myid-1" name="myid-1">
<input type="text" class="form-control" id="Job_Name" name="Job_Name" required="">
<label for="Job_Name">Job Name<span class="text-danger">*</span></label>
<button type="submit">Submit</button>
</form>
</div>
<div class="modal-dialog">
<form action="" method="post" id="myid-2" name="myid-2">
<input type="text" class="form-control" id="Job_Name" name="Job_Name" required="">
<label for="Job_Name">Job Name<span class="text-danger">*</span></label>
<button type="submit">Submit</button>
</form>
</div>
How do I resolve "Found 2 elements with non-unique id" warnings?

you need to change id="Job_Name" to be unique e.g. id="Job_Name1" id="Job_Name2" etc. as ID must be unique in the DOM.
It will create conflict when you want to select elements using document.getElementById('Job_Name') or using jQuery $('#Job_Name') as you wont be able to get the second or other elements with same id. you will need to use index and querySelectorAll which will then defeat the purpose of using Id at first place.

<input type="text" class="form-control" id="Job_Name" name="Job_Name" required="" >
Duplicate input tag in two different forms
You have to use different id for different elements

<input type="text" class="form-control" id="Job_Name" name="Job_Name" required="">
You need to change de id for each input

Becouse You mentioned the two input element with same id ('Job_Name') in same page
You cannot give the same id in same page to two different element

id is an identifier that defines the identity of the element. It is designed to act like a key to the element and hence it needs to be unique.
Check this answer..
https://stackoverflow.com/a/2187788/8230086

Change the IDs on your inputs as they are what is causing your problem.
As a general rule you don't want to have the same id's on any of your elements.
id suggest using something along the lines of job_name1/job_name2

Just use new { id = "" } for one of the two fields:
#Html.HiddenFor(m => m.Name, new { id = "" })

if you are using react native web or expo pwa use nativeID in place of id
<input nativeID="someId"/>

Related

How to dynamically add waypoints in Angular along with auto complete address?

<div [hidden]="!showWaypoint" #waypoint>
<div class="form-group label-floating">
<label class="control-label">Waypoint</label>
<input type="text" class="form-control search-address" name = "waypoint" placeholder=" " [(ngModel)]="wayPointInput" #stop>
</div>
</div>
I want to clone this entire portion, just like appending when i am clicking on add waypoint. I Dont want to use structural directives like *ngFor.
I have also consoled this
#ViewChild('waypoint') wp;
console.log(this.wp.nativeElement);
but I dont know how to append it along with the change in ngModel name so that after submitting I get a set of data in an array.

Mapping multiple form inputs of the same name into a JavaScript object

I have an HTML form similar to this.
<label for="person-firstname">First Name</label>
<input type="text" id="person-firstname" name="person-firstname"/>
<label for="person-lastname">Last Name</label>
<input type="text" id="person-lastname" name="person-lastname" />
<label for="person-phone">Phone</label>
<input type="text" id="person-phone" name="person-phone" />
<!-- Button will add the same input as above -->
<button type="button" onclick="addAnotherPersonSection()">+ Add Another Person</button>
<!-- More HTML of different section of the overall form -->
<label for="person-terms">Agree to Terms and Conditions</label>
<input type="checkbox" id="person-terms" name="person-terms" />
<label for="person-initals">Initals</label>
<input type="text" id="person-initals" name="person-initals" />
What I'm trying to do is map out the input into an object with the key name as the name of the input and value being the input text.
{
"Persons":[{
"person-firstname":input.value,
"person-lastname":input.value,
"person-phone":input.value,
"person-terms":input.value,
"person-initals":input.value
}, {
"person-firstname":input.value,
"person-lastname":input.value,
"person-phone":input.value,
"person-terms":input.value,
"person-initals":input.value
}]
}
The problem is naming the key of the object as "person-firstname" instead of when $("input[name^=business]").serializeArray(); creates it the key is named "name" and is structured wrong.
{ name: "person-firstname", value:input},
{ name: "person-lastname", value:input}
I'm just looking for a JavaScript or jQuery solution to create a dynamic object based on multiple inputs of the same name. Also, have control of the key name.
The crux of the problem is that you can't have multiple form fields with the same name. If you do, that's called a "naming collision" which will bust native functionality of an HTML form. But you can use a sort of template-like logic and generate variant names that make sense base on the number of people that are added to the HTML form. My example may not be what you're looking for exactly, but it's what I came up with:
https://codesandbox.io/s/admiring-hypatia-30lrv

Identical ID's in the same HTML page

I have a page that has two different inputs that contain same ID but each one in different form. and I'm actually setting values to inputs from javascript using get element by ID. I know this is not valid. but the thing is if i change one of the input id's I'm gonna need to re write a bunch of code in 'shopping cart ' cuz these input's pass value to cart. I'm actually not planning to touch that for now. So, is there any trick that can target one input instead of the other even if they have the same id's??
ex:
<input type="hidden" name="cart_1_ID_Add2" id="cart_1_ID_Add2" value=""/>
<input type="hidden" name=cart_1_ID_Add2" id="cart_1_ID_Add2" value=""/>
thanks in advance!!
Although it is a wrong practice, and you should use different id's, you could add a different class attribute to each one.
<input class="input1" type="hidden" name="cart_1_ID_Add2" id="cart_1_ID_Add2" value=""/>
<input class="input2" type="hidden" name=cart_1_ID_Add2" id="cart_1_ID_Add2" value=""/>
var x = document.getElementsByClassName("input1")[0];
Again: I strongly recommend you to find time to change the logic of your program to use unique id's.
If they are in different forms you can target them by selecting IDs where they are inside a certain class. You can also change the name attribute and select that instead.
HTML
<div class="form1">
<input type="hidden" name="rename1" id="cart_1_ID_Add2" value="">
</div>
<div class="form2">
<input type="hidden" name="rename2" id="cart_1_ID_Add2" value="">
</div>
JS
$(".form1 #cart_1_id_add2")
//Or
$("input[name*='rename1']")
However you shouldn't really have the same id twice on one page otherwise it makes it hard to maintain and debug. If it's not a huge job to change your approach I'd recommend you do that.
Add another attribute to one or both tags.
For example, you can make them
<input type="hidden"name="cart_1_ID_Add2" id="cart_1_ID_Add2" data-id="add100" class="myInput" value=""/>
<input type="hidden" name=cart_1_ID_Add2" id="cart_1_ID_Add2" data-id="add101" class="myInput" value=""/>
Then get their values with jQuery
var myInput = $('[data-id=add100]').val();
console.log(myInput);
OR use plain javascript by adding a class and getting the value
var myVal = document.getElementsByClassName("myInput")[0];
console.log(myVal.value);
Hope this helps
Yes.
That code shouldn't have duplicate id properties in Dom btw.
You can use a custom HTML element property:
<input type="hidden" name="cart_1_ID_Add2" id="cart_1_ID_Add2" value="" my-property="some_identifier"/>
<input type="hidden" name=cart_1_ID_Add2" id="cart_1_ID_Add2" value="" my-property="some_identifier2"/>

How to clone form fields without their values?

How to clone following html without persisting the field values?
<form method=POST action="/url">
<div class="form-group" data-answer>
<div class="pull-left"><label><input type="checkbox" name="answer[1][is_correct]" value="true"> Correct Answer</label></div>
<div class="pull-right">
</span>
</div>
<input type="text" class="form-control" name="answer[1][body]" placeholder="Possible answer">
</div>
<div class="form-group" data-answer>
<div class="pull-left"><label><input type="checkbox" name="answer[2][is_correct]" value="true"> Correct Answer</label></div>
<div class="pull-right">
</span>
</div>
<input type="text" class="form-control" name="answer[2][body]" placeholder="Possible answer">
</div>
. . .
<button type="submit">Submit</button>
</form>
I can see only 3 possible choices here. However, all of them come with major flaws:
.clone() the .form-field normally and reset the field values.
Problem: resetting all the values one by one is cumbersome and is not a future-proof solution. For example, if more fields are added into the .form-group, their values will need to be cleared separately.
Include a hidden .form-group as a template on the page.
Problem: as you see, the input fields contain enumerated names like: answer[1][body]. It is convenient to clone the last .form-group and just increment the value by 1. Cloning the templated .form-group will be lacking this flexibility.
Read the fields as raw html and transform them into JQuery object
Problem: this seems to be a clear solution to me, however I couldn't get it working. The code $.parseHTML($('.form-group').html()) does not return a valid JQuery object, which I need to use .find() and other methods on.
What will be an effective and elegant solution to this problem?
Try this code:
$("button").click(function(){
var t = $("form").clone().appendTo("#clonedForm");
$(t).find("input[type=checkbox],input[type=text], textarea").removeAttr("checked").val('');
});

JQuery datepicker does not load in all fields

I am trying to load JQuery DatePicker in two text fields, so I am using the following code
$(function() {
$('#DOB, #SignupDate').datepicker();
});
and here is the HTML for both fields:
<div class="field field_input">
<label for="DOB">D.O.B</label>
<input type="text" name="DOB" value="">
</div>
<div class="field field_input">
<label for="SignupDate">Signup Date</label>
<input type="text" name="SignupDate" value="">
</div>
It is loading just fine in the DOB field but it is not loading in the SignupDate field. Can someone please tell me what I am missing here and how to solve it?
Thanks for your time
You try to select the #DOB and #SignupDate.
$('#DOB, #SignupDate')
It means get element by id DOB and SignupDate but you have no element with id="DOB" nor
id="SignupDate"
So please use
<input type="text" id="DOB" name="DOB" value=""> //<- note id="DOB"
<input type="text" id="SignupDate" name="SignupDate" value=""> //<- note id="SignupDate"
You need to have an id attribute on your inputs. Two reasons:
In your jQuery code, # indicates an id selector, not a name selector.
The for attribute on the labels should correspond with an id attribute on another element, not the name attribute.
Given that this is probably a form, you still want to keep the name attribute, but you probably just want a matching id attribute.

Categories