Dom7 - referencing by name returns an array

Hi,
I have an app working with multiple pages, one of which is a login page, set up with the following route :

{
name: ‘home’,
path: ‘/’,
url: ‘index.html’,
},
{
name: ‘connect’,
path: ‘/connect/’,
componentUrl: ‘pages/connect.html’
}
I have a panel on the home page that allows me to switch between pages.

I was trying to login and noticing that the following stops working after I have gone to this login page ‘multiple’ times :
fitPassword = Dom7("[name=fitPassword]").val();

I could not understand why I was getting a blank password sometimes and now I see that the Dom7("").val() returns a blank string because there is an array when I use name=NAME
I have done a quick test now and I think using an id will solve it but I wanted to check why this occurs to make sure I am not doing something wrong or in case there is a bug. (latest 3.52 version if that matters)

Thanks
Peter

It happens because there are multiple elements with name=“fitPassword” in the DOM. Make sure you are referencing correct input

Hi,
Are you saying you think my html is flawed with multiple elements with the same name? I think it is good…
I am going to the same page multiple times. The first time I try to login, there is a proper value and no array.
The second time I go to the page is when I see the problem. Why are there multiple elements?

I have since discovered that adding a back link with class=back does not do the same thing. It seems to only happen when I use the link in the menu?

I have tried to create a quick jsfiddle to show better but the link to the “/” page is not working in either the left panel, or the navigate link. Just the back button moves the page, not sure why?

https://jsfiddle.net/pworthing/7tf2odrg/46/
If you can tell me why that is not working, maybe I can reproduce.
On my system, the first time I press the connect button, it shows 0/1
If I use the back link and come back, it shows the same thing.
If I use the panel and go back to List, then back to Connect, I get 0/2 , 0/3, 0/4, … as repeated.

I also thought returning by name and id would return the same object and length?

unable to navigate ‘/’ seems to be related to my route for ‘/’ :

url: 'index.html', 

Not sure if I can mimic that in jsfiddle

I wonder if I am reloading the index.html each time. I thought I was just navigating back to the base page.
Maybe I just need to correct the navigation back to main page in panel ? (same as navigate link)

First of all, you should never do router.navigate in pageInit, why?

Check this fiddle https://jsfiddle.net/8ek1Lg52/

Go to connect, then list, then connect. Check the DOM with browser inspector. You will see there are 2 Connect pages in DOM. When stackPages enabled, it keeps previous pages in DOM

I was trying to default the app to the connect page. I added the navigate to the pageInit because changing the default in view does not work :
var viewMain = app.views.create(’.view-main’, { url: ‘/connect/’, stackPages: true });

  1. how best to default to connect page?
  2. your example does exactly what I was trying to show (if you use the navigate back link). If you press the connect buttont he first time, you get a 0/1 result. If you go back to main and then to connect, you get a 0./2 result and you can not get the proper password value (assuming you put one in) :
    alert(“Password is : “+Dom7(”[name=fitPassword]”).val());