jQuery: How to select a textbox inside a specific form?

[skcin7]

Hello all. I've been working with jQuery and seem to be having trouble finding a way to call a function when a textbox inside a specific form loses focus.

I found out about the focus, focusout, and blur jQuery methods. Maybe I am just not implementing them properly, or maybe my syntax is wrong.

My jQuery code looks like this. This currently works, but it works for both username textfields.

$('#username').blur(function(){
alert("it works");
});

My HTML form looks like this:

<form style="padding:0px; margin:0px;" action="./" method="post" name="register" id="register">
<input type="text" name="username" id="username" />
</form>

<form style="padding:0px; margin:0px;" action="./" method="post" name="signin" id="signin">
<input type="text" name="username" id="username" />
</form>

The problem with the jQuery code is that it works for both username fields. How can I write some jQuery code to only effect one of the 'username' textboxes, from within the form that I select?

[VIPStephan]

You cannot have the same name and ID for two (or more) elements in the same document (exceptions apply). That’s actually first grade HTML. IDs have to be unique and the name attribute at least has to be an array like name="elementname[]" (except for radio button groups where the name can and has to be identical for each input in the group).

Unrelated to that but still worth mentioning is that input elements must not be direct children of the form element, they have to be contained by some block element such as fieldset, div, or others.

So, I would suggest you do something like this:

<form style="padding:0px; margin:0px;" action="./" method="post" name="register" id="register">
  <fieldset>
    <legend><label for="r_username">Register</label></legend>
    <input type="text" name="r_username" id="r_username" />
    <input type="submit" value="Register" />
  </fieldset>
</form>

<form style="padding:0px; margin:0px;" action="./" method="post" name="register" id="signin">
  <fieldset>
    <legend><label for="s_username">Sign In</label></legend>
    <input type="text" name="s_username" id="s_username" />
    <input type="submit" value="Sign in" />
  </fieldset>
</form>

These are proper forms that even work if JS is disabled (i. e. they are accessible). You can still hide the submit buttons through jQuery eventually.

[skcin7]

VIPStephan, thank you for your reply. I did know actually that ids were only allowed once, but forgot on this specific post. I am still learning so excuse any seemingly stupid mistakes I may make or questions I may have. The solution you presented above is simple. I like it, and it works perfectly for a finite/defined amount of input forms on a page. Occam's razor, right?

However, let's say there is an undefined amount of input forms on a page, generated by a loop somehow with PHP. How can the id/name attributes be created in a way that jQuery would be able to know which form element is being worked on?

For example, consider a user profile page. Users may post comments back and forth from profile to profile. The amount of comments a user has can be anywhere between 0 and a very large number. All comments go into a PHP loop and are printed out onto the profile page when it is loaded. Older, more active users, would have way more comments on their page than newer users. Now, let's say that underneath every comment, there is a textbox allowing users to post a reply to that comment (similar to facebook, I guess). When a reply is submitted, a new entry in the SQL database must be created, with one of the values being the ID of the post being replied to. How can jQuery know what comment the user is posting a reply to?

The example I ask above is hypothetical but I also need to know it because the next step of an application I am working on is a user profile page that works in this very specific manor, and I'm not sure how to do it yet. So, any help would be extremely appreciated.

[bullant]

If I understand you correctly, one option is to give each reply textbox the same name and a value equal to the primary key value from the database table of the comment it is associated with. Then you will be able to associate replies to the comment they are referring to.

[skcin7]

I think you understand me correctly. Okay, so you are saying to not use id, just name. Would you have to use a hidden form field to store the comment-reply id value? When submitting the reply form, would you somehow be able to process that specific form with jQuery? I was hoping to be able to use the ajax() functionality of jQuery to automatically post the reply underneath the comment when the form is successfully submitted.

[bullant]

Without seeing the actual html code your php code generates I'm not sure exactly what you are trying to do.

For instance, I'm not sure why you need multiple forms on the page. I would have thought just 1 form would suffice. The form could contain comments extracted from your database and below each comment you could have a textbox for any replies. Each textbox could have a name like txtReplies[] and the value for each "name" could be the id from the database of the comment above it.

Then when the form is submitted, an array called txtReplies is sent to your php script. You can then loop through the txtReplies array and add the sent replies to their corresponding comments designated by the id sent with each reply.

[VIPStephan]

Also, you don’t have to hard code an ID on the forms or inputs, you can also loop through them with jQuery (each())and assign an ID dynamically if it’s necessary.