Question

I have several forms that are created dynamically using PHP. I would like to list all the fields that are mandatory above each form.

t should look like this:

<div class="mandatory_list">Mandatory fields: first name, email</div>

<form>
<label>first name*</label><input type="text" />
<label>last name</label><input type="text" />
<label>email*</label><input type="text" />
<label>comments</label><input type="text" />
</form>

If it would simplify things I can also give all mandatory labels a seperate class. I came this far:

<script>
    var mandatory= ( $("label:contains('*')").text() );
    $('#mandatory_list').html("Mandatory fields: " + mandatory);
</script>

This gives me the following output: “Mandatory fields: first name *email *”. So this would mean I had to replace all asterisks with comma’s. There’s probably a better way to go about this.

Answer 1

I would think it is easier with a class on the mandatory fields, but that is just a preference for the selector:

:First off, get rid of the extra text in the list and add the class:

<div class="mandatory_list">Mandatory fields:</div> 

<form> 
<label class='mandatory'>first name*</label><input type="text" /> 
<label>last name</label><input type="text" /> 
<label class='mandatory'>email*</label><input type="text" /> 
<label>comments</label><input type="text" /> 
</form>

Now populate the list, removing the last comma as you specified:

var myList = $('.mandatory_list').text();
$('.mandatory').each(function() {
    myList += ' ' + $(this).text().replace('*', ',');
});
myList = myList.slice(0, myList.length - 1);
$('.mandatory_list').text(myList);

EDIT: Adapted to your “multiple” forms

$('form').each(function() {
    var myHeader = $(this).prev('.mandatory_list');
    var myList = myHeader.text();
    $(this).find('.mandatory').each(function() {
        myList += ' ' + $(this).text().replace('*', ',');
    });
    myList = myList.slice(0, myList.length - 1);
    myHeader.text(myList);
});