how to do each for specified classname within click object only by Jquery without id attribute help

Dear Experts,

There're two forms without any id attribute help that I want to.
I want to get html() for all class name ='mesg' in first form only  when first form is
onsubmit . I try the following chkvalid() code, but it shows all classname="mesg" even
including  second form. the output is "0:A","1:B","2:C","3:D" from console.log
I just want "0:A", "1:B"  within first form only .


function chkvalid( obj)  {  
$( ".mesg" ).each(function( index ) {
  console.log( index + ": " + $( this ).html() );   });

So now I try to fix the issue from  getting the correct jquery selector such as

$(obj).$(".mesg").each(function( index ) {
  console.log( index + ": " + $( this ).html() );   });

but it fail since it is not allowed to use $(obj) and then point to other object inside of
parent object.

How to do that ? and please don't ask me to add  id attribute in each form to distinguish both forms.

Please advise
Duncan




<htm>
<body>

<form onsubmit="chkvalid(this);return false;">
<table>
<tr><td  class='mesg'>A</td></tr>
<tr><td  class='mesg'>B</td></tr>
<tr><td><button type='submit'><span>Submit</span></button></td></tr>
</table>
</form>

<form onsubmit="chkvalid(this);return false;">
<table>
<tr><td  class='mesg'>C</td></tr>
<tr><td  class='mesg'>D</td></tr>
<tr><td><button type='submit'><span>Submit</span></button></td></tr>
</table>
</form>

</body>
</html>

Open in new window

LVL 13
duncanb7Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
In your code :
Use : $( ".mesg", obj ).each(function( index ) {
instead : $( ".mesg" ).each(function( index ) {

Test page : http://jsfiddle.net/UPNLv/

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
     jQuery(function($) {
         $("form").submit(function(event) {
              event.preventDefault(); // prevent submission of the form like << return false; >>
              $( ".mesg", this ).each(function( index ) {
                     console.log( index + ": " + $( this ).html() );   
              });
         });
     });
</script>
</head>
<body>

<form>
<table>
<tr><td  class='mesg'>A</td></tr>
<tr><td  class='mesg'>B</td></tr>
<tr><td><button type='submit'><span>Submit</span></button></td></tr>
</table>
</form>

<form>
<table>
<tr><td  class='mesg'>C</td></tr>
<tr><td  class='mesg'>D</td></tr>
<tr><td><button type='submit'><span>Submit</span></button></td></tr>
</table>
</form>

</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
duncanb7Author Commented:
Thanks for your reply,  leakim971

Question-1:

Why I need this to prevent return false ?
event.preventDefault(); // prevent submission of the form like << return false; >>

onsubmit(chkvalid();return false);  where "return false" by that I can do submit form
on form action  after doing chkvalid javascript function

Question-2
What is meaning of $(".mesg",this),  where this  I understand that is refered to the submit object, but what is sequence meaning of $(".mesg", this) ? and why  not $(this,".mesg") ?

Question-3
$(obj ).find(".mesg").each(function( index) {
  console.log( index + ": " + $( this ).html() );  
});

I used $(obj). find() to get it work finally , is it same as your method of $(".mesg",this) ?

I will try your code since I feel find() is not good since it will do some loop seach and
it might not need it since each() will handle this. So the question is finding a good selector , Right ?
 
Please advise
Duncan
0
leakim971PluritechnicianCommented:
Question-1:
Why did you add << return false >> here :
<form onsubmit="chkvalid(this);return false;">
I see no "CONDITIONAL" logic to submit OR NOT the form as it always do << return false >>

Q2 : this represent a context, you can use $(this).find(".mesg") instead
$(this, ".mesg") represent all the form inside  an element with mesg class, non-sense

Q3 :
why not but as jQuery slogan is write less do more...
$(".mesg", this)
vs :
$(this).find(".mesg")

16 vs 21 characters
0
duncanb7Author Commented:
Thanks for your reply

have a nice day

Duncan
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.