带有Javascript和PHP的多个ID

Question

I have to do a simple work.

I have:

echo' <div class="col-sm-12" id="recensioni_titolo">
                        <form role="form" id="review-form" method="post" action="php\insert_comment.php">
                            <div class="row">

                                <div class="col-sm-8">
                                    <div class="form-group">
                                        <input type="text" class="form-control" name="Titolo" id="titolo_review" placeholder="Titolo">
                                        <input type="text" class="form-control" name="ID_locale" id="titolo_review" value="'.$id_Local.'" style="visibility: hidden; position:fixed;">
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <fieldset class="rating">
                                        <input type="radio" id="star5'.$id_Local.'" name="Voto" value="5" /><label class = "full" for="star5'.$id_Local.'" title="Ottimo - 5 stelle"></label>
                                        <input type="radio" id="star4'.$id_Local.'" name="Voto" value="4" /><label class = "full" for="star4'.$id_Local.'" title="Buono - 4 stelle"></label>
                                        <input type="radio" id="star3'.$id_Local.'" name="Voto" value="3" /><label class = "full" for="star3'.$id_Local.'" title="Discreto - 3 stelle"></label>
                                        <input type="radio" id="star2'.$id_Local.'" name="Voto" value="2" /><label class = "full" for="star2'.$id_Local.'" title="Insufficiente - 2 stelle"></label>
                                        <input type="radio" id="star1'.$id_Local.'" name="Voto" value="1" /><label class = "full" for="star1'.$id_Local.'" title="Pessimo - 1 stella"></label>
                                    </fieldset>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <textarea class="form-control textarea" rows="3" name="Review" id="review" placeholder="Inserisci una descrizione.."></textarea>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <button type="button" class="btn main-btn pull-right" name="submit_review" id="submit_review'.$id_Local.'">Invia</button>
                                </div>

                            </div>

This code is generating the same thing for 5 times. I'have to find one method to declare and use the id="review-form" in a unique mode because with this code:

$(document.getElementsByName("submit_review")).unbind().click(function() {
var chx = document.getElementsByName("Voto");
   for (var i=0; i<chx.length; i++) {
// If you have more than one radio group, also check the name attribute
// for the one you want as in && chx[i].name == 'choose'
// Return true from the function on first match of a checked item
if (chx[i].type == 'radio' && chx[i].checked) {
        $.ajax({
        url : "php/insert_comment.php",
        type : "post",
        data : $("#review-form").serialize(),
        success : function(data){
            $.ajax({
        url : "php/reviews.php",
        type : "post",
        data: {'id_Local' : $('.modal').attr('data-modal')},
        success : function(data){
            $('#box_recensioni').html(data);
            chx[i].checked=false;

    }
    })
    }
   })

    return true;
   } 
 }
 // End of the loop, return false
alert("Inserisci almeno il voto!!")
return false;
});

I have only the first element is working. I can generate the id with "id'.$variable'" but I don't know how to refers to every single id in the javascript file.

Thank you to all in advance

Answer 1

In HTML, an ID is supposed to be unique :

The id global attribute defines a unique identifier (ID) which must be unique in the whole document .

This is why JavaScript can grab only the first occurence of an ID, since it's supposed to be the only one. You may want to replace those multiple IDs with classes, which is at least correct in HTML5 and will be also smarter in Javascript.

Here is a link to the post in the Mozilla documentation of IDs in HTML, to be sure that you understand the role of this tag.

Answer 2

You can create an array, then use an loop through each radio button pushing the id into the array. Then use the array for the ids.

 var radioIds = new Array(); $('.rating input[name="Voto"]').each(function(){ radioIds.push($(this).attr('id')); }); console.log(radioIds) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-sm-4"> <fieldset class="rating"> <input type="radio" id="star54" name="Voto" value="5" /><label class="full" for="star54" title="Ottimo - 5 stelle"></label> <input type="radio" id="star44'" name="Voto" value="4" /><label class="full" for="star44" title="Buono - 4 stelle"></label> <input type="radio" id="star34" name="Voto" value="3" /><label class="full" for="star34" title="Discreto - 3 stelle"></label> <input type="radio" id="star24'" name="Voto" value="2" /><label class="full" for="star24" title="Insufficiente - 2 stelle"></label> <input type="radio" id="star14" name="Voto" value="1" /><label class="full" for="star14" title="Pessimo - 1 stella"></label> </fieldset> </div> 

Answer 3

As other's have said using the same ID would be useless instead you may want to use a class identifier. And assuming you want to create multiple form elements... and you don't have a unique identifier to use in your scripts you may try the following which I haven't tested...

I see you have already gotten the radio button

 var chx = document.getElementsByName("Voto"); 

and performed a check on it under your if statement

 if (chx[i].type == 'radio' && chx[i].checked) { 

if so, maybe you can try to get the closest form element of the radio button that you are dealing with (ie checked) by doing something like

 var thisForm = chx[i].closest('form') --and later do thisForm.serialize(); 

check this out for more detail in using closest