How can I validate from jquery a form that is repeated several times within a while cycle?

1

I am trying to validate a form that has inputs (radio type) that are repeated through a while cycle while data is being found in the db.

I can not validate these dynamic forms using jQuery because if I let it validate only the input that is checked; When you choose any input you would already fulfill the condition, but I need to validate several input that are inside a different form.

How could I validate that when there is no option selected in any of the forms, it tells me that there are still some options to be selected?

Here is the code:.

PHP

$contacform = 0;

while ($row = mysql_fetch_array($resultados)) {

    echo '<div class="con">';
        echo '<p id="p">'.$contacform.'</p>';
    echo '</div>';

    echo '<form id="myformid" data-form="'.$contacform.'"align="center">
        <h2><strong>'.utf8_encode($row['pregunta']).'</strong></h2>
        <br>
        <label>'.$row['opcion1'].'</label>
        <input type="radio" name="check" id="check" value="1" required />
        <input type="hidden" name="checkd" value="'.$row['id_pregunta'].'" checked/>
        <br>
        <label>'.$row['opcion2'].'</label>
        <input type="radio" name="check" id="check" value="2" required />
        <br>
        <label>'.$row['opcion3'].'</label>
        <input type="radio" name="check" id="check" value="3" required />
        <br>
        <label>'.$row['opcion4'].'</label>
        <input type="radio" name="check" id="check" value="4" required />
        <br>
    </form>';

    $contacform += 1; 
}

echo '<div class="text-center">';
echo '<br>';
echo '<button class="btn btn-primary text-center enviartest">Enviar</button>';
echo '</div>';

JavaScript

$('.enviartest').click(function(){
    var selected = [];
    var selectedid = [];
    var my = [];

    /* Recorro el contador que se encuentra  en la etiqueta p dentro del div  con class con */
    $('.con p').each(function(){
        // alert($(this).attr('id'));

        /* obtengo lo que tiene  el  texto  de la  etiqueta p */
        var o = $(this).text();

        my.push($(this).attr('data-form'));;

        var definit = $('#myformid'+o+'input[name=check]');

        /*intento validar que cuando  seleccione   el formulario  numero  tal   y este  chequeado  el input con name  check  que es array me  mande un mensaje*/
        if ($('#myformid '+o+'input[name=check]:checked').is(':checked')) {
            alert('hola soy un cero');
        }else{
            alert('elije algo');
            alert(o);
        }

    });

    /*los input  que tengan  name  check y esten  chequeados  checked*/
    $('input[name=check]:checked').each(function(){
        selected.push($(this).val());
    }); 

    /*los input  que tengan  name  check y esten  chequeados  checked*/
    $('input[name=checkd]').each(function(){
        selectedid.push($(this).val());
    });

});
    
asked by Jacks 28.09.2016 в 17:56
source

2 answers

1

PHP code you send variable $contactform to the id of the form to distinguish it: myformid0 , myformid1 , myformid2 ... myformidn

$contacform = 0;

while ($row = mysql_fetch_array($resultados)) {

echo '<div class="con">';
    echo '<p id="p">'.$contacform.'</p>';
echo '</div>';

echo '<form id="myformid'.$contacform.'" data-form="'.$contacform.'"align="center">
    <h2><strong>'.utf8_encode($row['pregunta']).'</strong></h2>
    <br>
    <label>'.$row['opcion1'].'</label>
    <input type="radio" name="check" id="check" value="1" required />
    <input type="hidden" name="checkd" value="'.$row['id_pregunta'].'" checked/>
    <br>
    <label>'.$row['opcion2'].'</label>
    <input type="radio" name="check" id="check" value="2" required />
    <br>
    <label>'.$row['opcion3'].'</label>
    <input type="radio" name="check" id="check" value="3" required />
    <br>
    <label>'.$row['opcion4'].'</label>
    <input type="radio" name="check" id="check" value="4" required />
    <br>
</form>';

$contacform++; 
}

echo '<div class="text-center">';
echo '<br>';
echo '<button class="btn btn-primary text-center 
enviartest">Enviar</button>';
echo '</div>';

JS code

$('.enviartest').click(function(){
var selected = [];
var selectedid = [];
var my = [];

/* Recorro el contador que se encuentra  en la etiqueta p dentro del div  con class con */
$('.con p').each(function(index, value){
    // alert($(this).attr('id'));

    var o = $(this).text();

    my.push($(this).attr('data-form'));;
    //colocas el index al id del form
    var definit = $('#myformid'+index+' '+o+'input[name=check]');


    if ($('#myformid '+index+' '+o+'input[name=check]:checked').is(':checked')) {
        alert('hola soy un cero');
    }else{
        alert('elije algo');
        alert(o);
    }

});

/*los input  que tengan  name  check y esten  chequeados  checked*/
$('input[name=check]:checked').each(function(){
    selected.push($(this).val());
}); 

/*los input  que tengan  name  check y esten  chequeados  checked*/
$('input[name=checkd]').each(function(){
    selectedid.push($(this).val());
});

});
    
answered by 19.04.2018 в 18:26
0

You need to add an identification number to the form, in each cycle that you generate a new one, in this way you can access them through jQuery referring to their id, getElementByID ('form1'), getElementByID ('form2'), getElementByID ('form3')

When you generate the form, save the number of forms that you generated, and so you can get the n-th form in jquery.

Greetings

    
answered by 30.09.2016 в 00:53