Adding required tag to each select element created

Question

I have the following code:

HTML:

<a href="#" style="margin-left:5px;" id="addZona" class="btn-small btn-success">

JS code:

$('#addZona').live('click',function(){
        var cont = $("#sc_zonas_agente div.row-fluid" ).length;
        var listaPaises = '<?php echo str_replace( "\n","",CstudomusHelper::getPaises('id_pais_zona%$1', 'onchange="javascript:CargaProvincias(this.value,false,undefined,%$1)" class="required" required="required" ', $agente->id_pais )); ?>'
        var listaProvi = CargaProvinciasAgente('<?php echo $agente->id_pais; ?>','<?php echo $agente->id_provincia;?>','','id_provincia_zona'+ cont,'<?php echo JText::_('COM_CSTUDOMUS_SELECT_PROVINCIAS');?>',cont);

        var listaZonas = CargaZonasAgente('id_zona'+ cont,'<?php echo JText::_('COM_CSTUDOMUS_SELECT_ZONA');?>',cont);
        //lista = lista.replace('\n','');

        var html = '<div id="zona' + cont +'" class="row-fluid">';

        html +='<div class="span3"><div class="bfElemWrap control-group paises_zona' + cont + '"><div class="controls"><label class="control-label uk-text-left" for="id_pais_zona' + cont + '"><span class="editlinktip hasTip" title="<?php echo JText::_('COM_CSTUDOMUS_AGENTE_PAISES_DESC');?>" data-uk-tooltip=""><?php echo JText::_('COM_CSTUDOMUS_PAISES');?></span></label>';
        for (var i=0; i<4; i++)
            listaPaises= listaPaises.replace("%$1",cont);
        html += listaPaises;
        html +='</div></div></div>';

        html +='<div class="span3"><div class="bfElemWrap control-group provincias_zona' + cont +'"><div class="controls"><label class="control-label uk-text-left" for="id_provincia_zona' + cont +'"><span class="editlinktip hasTip" title="<?php echo Jtext::_('COM_CSTUDOMUS_AGENTE_PROVINCIAS_DESC');?>" data-uk-tooltip=""><?php echo JText::_('COM_CSTUDOMUS_PROVINCIAS');?></span></label>';           
        html += listaProvi;             
        html +='</div></div></div>';
        html +='<div class="span3"><div class="bfElemWrap control-group municipios_zona' + cont + '"><div class="controls"><label class="control-label uk-text-left" for="id_municipio_zona' + cont +'"><span class="editlinktip hasTip" title="<?php echo Jtext::_('COM_CSTUDOMUS_AGENTE_MUNICIPIOS_DESC');?>" data-uk-tooltip=""><?php echo JText::_('COM_CSTUDOMUS_MUNICIPIOS');?></span></label><select id="id_municipio_zona' + cont +'" name="id_municipio_zona' + cont +'"><option value="" selected="selected"><?php echo JText::_('COM_CSTUDOMUS_SELECT_MUNICIPIOS');?></option></select>';
        html +='</div></div></div>';
        html +='<div class="span3"><div class="bfElemWrap control-group"><div class="controls"><label class="control-label uk-text-left" for="id_zona' + cont +'"><span class="editlinktip hasTip" title="<?php echo Jtext::_('COM_CSTUDOMUS_AGENTE_ZONAS_DESC');?>" data-uk-tooltip=""><?php echo JText::_('COM_CSTUDOMUS_ZONA');?></span></label>';
        html += listaZonas;
        html +='</div></div></div>';
        html +='<a href="#" id="removeZona" data-zona="zona' + cont +'" class="btn-small btn-danger uk-float-right" style="margin-top:-35px;"><span data-uk-tooltip title="<?php echo JText::_('COM_CSTUDOMUS_REMOVE_ZONA_DESC');?>" class="editlinktip hasTip"><i class="icon-trash"></i></span></a>';
        html +='</div>'
        $('#sc_zonas_agente').append(html);

        //Añadimos valor al contador de zonas
        $('#contZonas').val(cont);
        return false;
    });

I would like to know, how can I add the "required" attribute to each select field created when the #addZona button shown above is clicked on?

Primero - you can disable the submit if the input is empty.. segundo.. live? what version of query do you have mate.. that must be really old — Jorge Y. C. Rodriguez, Mar 19 '14 at 10:56
this is a really good example in how to do this... http://stackoverflow.com/questions/9671918/disable-submit-if-inputs-empty-jquery since not all browsers support required, but by default it should not submit the form is the input does have this value — Jorge Y. C. Rodriguez, Mar 19 '14 at 10:57
Not PHP related at all. (Removed tag `PHP` and changed code description in question.) — CBroe, Mar 19 '14 at 11:01

score 1 · Accepted Answer · answered Mar 19 '14 at 11:00

1

This should do the trick:

$('#sc_zonas_agente').append(html).find("select").attr("required", "");

answered Mar 19 '14 at 11:00

Wilmer

2,511
1
14
8

Awesome! No problem. :D – Wilmer Mar 19 '14 at 11:36

score 0 · Answer 2 · answered Mar 19 '14 at 10:54

You could give all the fields that CAN be selected a class, so that whenever the button is clicked, you can call:

var elements = document.getElementsByClass(className);
elements.forEach(function(element) {
    element.setAttribute('required', true);
}

It might just work (not tested).

score 0 · Answer 3 · answered Mar 19 '14 at 11:12

0

check this example where we add attribute to the html element here $("#previous").attr("control", "-6");.Hope it helps

answered Mar 19 '14 at 11:12

Aameer

1,366
1
11
30

Adding required tag to each select element created

3 Answers3