How to correct data inside a loop in jquery

Question

I have below code. when I click reply link, it will show a comment box. I want 2 points. or give me best way to do my work.

When 1 comment box open other must be hide.
when I click on send button correct value should send vie serialize values.

These are the codes PHP code

<?PHP 
    for($i = 1; $i < 10; $i++)
    {
    ?>  
    <div>comments text etc etc...</div>
    <a href="" class="reply-comment"> Reply </a>
    <div class="reply-comment-form" style="display:none;">
        <form class="comment_form" method="post">     
            <textarea name="comment_box" rows="6" class="span10"></textarea> <br /><br />
            <input type="button" onClick="send_comment()" class="btn btn-primary" value="send" />
        </form> 
    </div>
<?PHP 
   } 
?>

Jquery code

<script> 
    $(function(){
        $('.reply-comment').on('click', function(e){ 
            e.preventDefault();
            $(this).next('.reply-comment-form').show();
        });
    });


    function send_comment()
    {   
        $.ajax({   
           type: "POST",
           data : $('.comment_form').serialize(),
           cache: false,  
           url: 'test.php',  
           success: function(data){

           }   
        });   
    }
</script>

test.php file no need. I am checking values through firebug. please help me to clarify this problem. or give me best way to do my work.

I am stuck since 2 days. Thank you for your valuable time.

void · Accepted Answer · 2016-11-02 04:43:41Z

1

For the first one

$('.reply-comment').on('click', function(e){

    e.preventDefault();

    // Hide others
    $(".reply-comment-form").hide();

    // Show the one which is required
    $(this).next('.reply-comment-form').show();

 });

And for second, do a .on("submit"... on the form and it will serialize the right input fields only.

UPDATE:

<form class="comment_form" method="post">     
      <textarea name="comment_box" rows="6" class="span10"></textarea> <br /><br />
      // Change type to submit and remove onclick
      <input type="submit" class="btn btn-primary" value="send" />
</form>

jQuery:

$(".comment_form").on("submit", function(e){
    e.preventDefault(); // Here
    var _data = $(this).serialize();
    $.ajax({   
        type: "POST",
        data : _data,
        cache: false,  
        url: 'test.php',  
        success: function(data){
            console.log(data);
        }   
    });   

});

edited Nov 2, 2016 at 4:43

answered Nov 1, 2016 at 18:27

void

36.7k10 gold badges71 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Shane Wade Over a year ago

Hi, Now other boxes hide. but forms are working hidden. when I click submit button all form values send. so can you please tell me how can I use onSubmit function or can I disable other textares ?

Shane Wade Over a year ago

when I use on submit function page will be reload. I want to do this through ajax, because of after that values retrieve as json. so can you tell me how to prevent that. I want fully ajax function. thanks for your time

void Over a year ago

Yes you should use e.preventDefault() see updated answer

Shane Wade Over a year ago

Hi, I used on("click") instead of on submit. now it is works. but I want to send values when I click on submit button. not click on form

Shane Wade · Accepted Answer · 2016-11-02 05:48:42Z

1

I found a solution. @void helped me for this.

    $(".test").on("click", function(){

    var _data = $(this).parent().serialize();
    $.ajax({   
        type: "POST",
        data : _data,
        cache: false,  
        url: 'test.php',  
        success: function(data){

        }   
    }); 

});

Thanks!

answered Nov 2, 2016 at 5:48

Shane Wade

995 bronze badges

Collectives™ on Stack Overflow

How to correct data inside a loop in jquery

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related