How to call two different javascript function for css class with different id

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • nithinkolekar
    New Member
    • Nov 2010
    • 7
    #1

    How to call two different javascript function for css class with different id

    In my form there are two anchor tags Add and Clear having same class called button. What I am trying is submit the form data to another page(post) using ajax & clear is for clearing the data using javascript.The problem is that as both buttons having the class the same function(submit ) is called for both button.
    css is look like:
    Code:
    form.addwords .button
{
  font-weight: bold;
  color: #ffffff;
  cursor: pointer;
  font-size: 15px;
  height: 43px;
  width: 107px;
}
form.addwords #addwordsbutton
{background:url("../img/leftbtn.png") no-repeat 0 0;}
form.addwords #clearwordsbutton
{background:url("../img/rightbtn.png") no-repeat 0 0;}
    JS script
    Code:
    jQuery('.button').live('click', function(event) {
var da=$('#addwords').attr('value');
alert(da);
$.ajax({
type: "POST",
url: "addmulti.php",
data: "knw=" + da,
success: function(data){
$('#results').html(data);
},
error: function(){
alert('Error');
}
});
});//end of .button click
    form code
    Code:
    <a href='#' class='button' id='addwordsbutton'><span class="try">Add</span></a>
<a href='#' class='button' id='clearwordsbutton' onClick='this.form.reset();'><span class="try">Clear</span></a>
<input id="myButton" type="button" value="To check" onclick="this.form.reset();">
    What methods I tried?
    1. changed the changed the line to check whether the inline reset call is triggering or not. but no success.
    Code:
    jQuery('.button').live('click', function(event)
to
jQuery('.button[B]s[/B]').live('click', function(event)
    2.Added dummy button of input type button. This time inline onclick event is triggered
    Tags: None
    • JKing
      Recognized Expert Top Contributor
      • Jun 2007
      • 1206
      #2
      Call the function based off the id instead of the class.

      Code:
      jQuery('#addwordsbutton').live('click', function(event)

        Comment

        • CarlosMartooni
          New Member
          • Nov 2011
          • 1
          #3
          Here is some code I used to test these problems.

          I thought it might help someone else:

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
          <html xmlns="http://www.w3.org/1999/xhtml" >
          <head>
          <title> JQuery Test </title>

          <script type="text/javascript" src="../AllInOne/AllRef3/jquery-1.4.2.min.js"></script>
          <a href="http://jquery.com/">jQuery</a>
          <script src="http://ajax.googleapis .com/ajax/libs/jquery/1.5/jquery.min.js"> </script>


          <style type="text/css">
          <!--
          form.addwords .button
          {
          font-weight: bold;
          color: #ffffff;
          cursor: pointer;
          font-size: 15px;
          height: 43px;
          width: 107px;
          }
          form.addwords #addwordsbutton
          {background:url ("../AllInOne/AllRef/btn-arrow-1.gif") no-repeat 0 0;}
          form.addwords #clearwordsbutt on
          {background:url ("../AllInOne/AllRef/page-next.gif") no-repeat 0 0;}
          -->
          </style>



          <script type="text/javascript">
          $(document).rea dy(function() {

          //jQuery('.button ').live('click' , function(event) {
          jQuery('.button ').live('click' , function(event)
          //jQuery('.addwor dsbutton').live ('click', function(event)
          {
          //var da = $('href').attr( 'value');
          var da = $(this).attr('h ref')
          alert(da);
          $.ajax({
          type: "GET",
          url: da, //"addmulti.p hp",
          data: "knw=" + da,
          success: function(data) {
          $('#results').h tml(data);
          },
          error: function() {
          alert('Error');
          }
          });
          return false;
          }); //end of .button click

          });
          </script>


          </head>

          <body>

          <form id="adwords" action="post" >
          <table>
          <tr>
          <td>
          <a href='testJQuer y.htm' class='button2' id='a2'><span class="try">Hom e</span></a>
          </td>
          </tr>
          <tr>
          <td>
          <a href='testJQuer y.htm' class='button' id='addwordsbut ton'><span class="try">Add </span></a>
          </td>
          </tr>
          <tr>
          <td>
          <a href='Donald.du ck' class='button' id='clearwordsb utton' onClick='this.f orm.reset();'>< span class="try">Cle ar</span></a>
          </td>
          </tr>
          <tr>
          <td>
          <a href='#' class='button' id='A1' onClick='this.f orm.reset();'>< span class="try">Go</span></a>
          </td>
          </tr>
          <tr>
          <td>
          <input id="myButton" type="button" value="To check" onclick="this.f orm.reset();">
          </td>
          </tr>

          </table>


          </form>
          </body>
          </html>

            Comment

            Previous template Next
            Working...