Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

I have any page for answer/question. i retrieve list of question for admin. admin see this. now i need to send answer to each question. so i for each question put textarea and form with post action. now i need to when send answer of question message, if send message to external php files = true; of message(ID) remove(jquery slideup effect). for this i have jquery submit form code ( without refresh page ) but I have big problem. this worked ONLY with one form ! and not worked for all list form ( question + answer form ) . how to worked my code for multiple form ? I chose the right way?

html code : 

<form action="insert.php?id=42" id="forms" method="POST" name="form">
<div id="box">
<div class="messagequestion"></div>
<div class="messagereply"><textarea></textarea><input type="submit" class="submit" name="submit" value="submit"></div>
</div>
</form>
<form action="insert.php?id=45" id="forms" method="POST" name="form">
<div id="box">
<div class="messagequestion"></div>
<div class="messagereply"><textarea></textarea><input type="submit" class="submit" name="submit" value="submit"></div>
</div>
</form>
<form action="insert.php?id=48" id="forms" method="POST" name="form">
<div id="box">
<div class="messagequestion"></div>
<div class="messagereply"><textarea></textarea><input type="submit" class="submit" name="submit" value="submit"></div>
</div>
</form>
<form action="insert.php?id=50" id="forms" method="POST" name="form">
<div id="box">
<div class="messagequestion"></div>
<div class="messagereply"><textarea></textarea><input type="submit" class="submit" name="submit" value="submit"></div>
</div>
</form>

Thanks

share|improve this question
Don't use same id for multiple Objects – s.webbandit Apr 6 '12 at 12:45

3 Answers

up vote 0 down vote accepted

Your major issue is probably that you are trying to reuse ids. All the forms have the id of "forms" and you are also sharing the id "box".

All ids should uniquely identify an element. Use a class when you need to classify an element. I'd recommend you change id="forms" on all the forms to class="reply_form" and then also change id="box" on all the divs to class="reply_box". Then change styles set for #forms and #box to those set for .reply_form and .reply instead.

EDIT - tweaks made in jsfiddle after some discussion with the OP.

http://jsfiddle.net/gvnfg/5/

share|improve this answer
not worked ! see your demo code : jsfiddle.net/gvnfg/1 – Gcoder Apr 6 '12 at 13:19
Check out jsfiddle.net/gvnfg/2 – ghbarratt Apr 6 '12 at 13:32
i change this for each '<textarea></textarea>' ! jsfiddle.net/gvnfg/3 after click to submit i see dialog box but after click ok i see loop of dialog box for other ID . this is big problem. – Gcoder Apr 6 '12 at 13:41
Ok, check this out: jsfiddle.net/gvnfg/5/ – ghbarratt Apr 6 '12 at 14:22
im Confused in jsfiddle worked but in my localhost not work :( – Gcoder Apr 6 '12 at 14:31
show 7 more comments
up vote 0 down vote

just change the selector. id attribute must be unique in html

$("[name='form']").submit(function() {
    $this = $(this);    
    $.ajax({
        type: 'POST',
        url: $(this).attr('action'),
        data: $(this).serialize(),
        cache: false,       
        beforeSend: function() {
            $('#loading').show();
            $('#result').hide();
        },
        success: function(data) {
            if(data==1){
              $('#loading').hide();
              $('#result').fadeIn('slow').html("ok");
              $('#result').addClass('true');
              $this.slideUp(1000);
            }
        else {
            $('#loading').hide();
            $('#result').fadeIn('slow').html(data);
            $('#result').addClass('errors');
        }}
    });
     e.preventDefault();
    return false;
});
share|improve this answer
where is your submit button. – Yorgo Apr 6 '12 at 12:53
Updated! after each textarea. your code not remove/slideup. in your code only remove top one line so after not remove. ex in my code : remove 'id=42'. – Gcoder Apr 6 '12 at 13:23
up vote -1 down vote

use Jquery .each() method:

$(document).ready(function() {
    $('#forms').each(function() {

       this.submit(function() {
           $.ajax({ ... });
       });
    });

})
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.