CODEWITHSUNDEEP
javascriptphpjqueryajax
Muhammad Umar
Muhammad Umar

Reputation: 105

How to change text after succes in ajax

I want to change a text after I submit a form. I want when I click at submit to friend 1 then text change to Invited to Your friend but not change submit to friend 2. And When I click submit to friend 2 then change text of submit to friend 2.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script> 
    $(document).ready(function(){
      $(".flip").click(function(){
        $(this).next().find(".panel").slideToggle("slow");
      });
    });

    function send_to_friend(){
        $.ajax({
                type:"post",
                url:"mail.php",
                data:dataString,
                cache:false,
                success: function(data){
                            $('.panel').slideUp("slow"); 
                            $('.flip').html("Invited to Your friend");        
                        }
            });                  
            return false;
    }

</script>

My form is here..

<style> 
.flip{
    cursor:pointer;
    font-family: "Open Sans", Arial, sans-serif;
    color: #2ea3f2;
    text-decoration:underline;
    font-size: 14px;
}
.panel{
        margin:5px 0;
        padding:21px;
        display:none;
        background-color: #f6f6f6;
        border: solid 1px #c3c3c3;
}
.submitfield_style{
    width: 87px;
    height: 29px;
    border: 1px solid #ccc;
    background: #fff;
    color: #999;
    cursor: pointer;
}

</style>

<h5 class="flip">Send to a friend 1<h5>
<div class="panel">
   <form method="post" action="">
        <input type="submit" name="submit" id="submit" class="submitfield_style" onClick="return send_to_friend()">
    </form>
</div>

    <h5 class="flip">Send to a friend 2<h5>
    <div class="panel">
       <form method="post" action="">
            <input type="submit" name="submit" id="submit" class="submitfield_style" onClick="return send_to_friend()">
        </form>
    </div>

Upvotes: 1

Views: 173

Answers (3)

Shubham Khatri
Shubham Khatri

Reputation: 281646

Since you are applying the action to a specific class, it is applied to all the elements that have the selected class. You can avoid this by targeting the last element using the closest() and prev() functions like

$(document).ready(function(){
      $(".flip").click(function(){
        $(this).next().find(".panel").slideToggle("slow");
      });
   
      $('input[name="submit"]').on('click', function(e){
        $(this).closest('.panel').slideUp("slow");
        $(this).closest('.panel').prev('.flip').html('Invited to Your friend');
        e.preventDefault();
      })
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h5 class="flip">Send to a friend 1</h5>
<div class="panel">
   <form method="post" action="">
        <input type="submit" name="submit" id="submit" class="submitfield_style" >
    </form>
</div>

    <h5 class="flip">Send to a friend 2</h5>
    <div class="panel">
      
       <form method="post" action="">
            <input type="submit" name="submit" id="submit" class="submitfield_style" >
        </form>
    </div>

Also you haven't closed the <h5> tag I have written the above onClick handler in jquery, You can try the same with the way you are using. Only thing is that you need to get access to the clicked element's DOM.

Upvotes: 0

P. Gearman
P. Gearman

Reputation: 1166

Because you are using the same class flip for both elements, it will change both.

You could use different classes on those elements, or you could add an attribute to the element that you use in the <h5> to specifically distinguish it.

Something like....

<h5 class="flip" flip-elem="1">Send to a Friend 1</h5>

Upvotes: 0

Gurdev Singh
Gurdev Singh

Reputation: 2165

You are using the same class identifier for both the <h> elements. It will change the text for both. You need to use the different identifier which you will use in your Ajax code to change the text.

Upvotes: 1

Related Questions