Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2014-01-11
4
Medium Priority
?
480 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 83

Accepted Solution

by:
leakim971 earned 2000 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 83

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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
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)
Suggested Courses

927 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