Solved

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

Posted on 2014-01-11
4
437 Views
Last Modified: 2014-01-11
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

0
Comment
Question by:duncanb7
  • 2
  • 2
4 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 39773280
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
 
LVL 13

Author Comment

by:duncanb7
ID: 39773312
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
 
LVL 82

Expert Comment

by:leakim971
ID: 39773319
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
 
LVL 13

Author Closing Comment

by:duncanb7
ID: 39773347
Thanks for your reply

have a nice day

Duncan
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Suggested Solutions

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now