0

I have a simple bit of code to append additional select fields to a form, with the idea that the user can add more fields as required. However, I want to be able to define a maximum number of input elements that can be appended. My current code is:

<script type="text/javascript">
var count = 0;
$(function(){
    $('p#add_field').click(function(){
        count += 1;
        $('#container2').append(
                '<strong>Golf Course ' + count + '</strong>&nbsp&nbsp&nbsp' 
                +'<select id="field_' + count + '" name="fields[]">' + "<?php foreach ( $courses as $course ) { $name = $course->coursename; ?>"+"<?php echo '<option value=\''.htmlspecialchars($name).'\'>'.$name.'</option>'; ?>"+"<?php } ?>"+'</select><br />')

    });
});
</script>

Any help would be much appreciated.

1
  • Huh? Why don't you simply use if(count < yournumber) { /*yourcode*/ } ?
    – Chaos
    Jun 8, 2013 at 10:25

2 Answers 2

1
<script type="text/javascript">
var count = 0;
var max = 5;
$(function(){
    $('p#add_field').click(function(){
        count += 1;
        if(count >= max)
            return;

        $('#container2').append(
                '<strong>Golf Course ' + count + '</strong>&nbsp&nbsp&nbsp' 
                +'<select id="field_' + count + '" name="fields[]">' + "<?php foreach ( $courses as $course ) { $name = $course->coursename; ?>"+"<?php echo '<option value=\''.htmlspecialchars($name).'\'>'.$name.'</option>'; ?>"+"<?php } ?>"+'</select><br />')

    });
});
</script>

Still, your code is quite unmaintainable - separate PHP from JS.

EDIT: consider this solution as well:

// this way you provide a JSON serialization of your server data
<script type="application/json" id="select-data">
<?php echo json_encode($courses); ?>
</script>

// this is pure js: doesn't care where the data comes from
<script type="text/javascript">

$(function(){

    // we parse the JSON string, and get a Javascript array
    var selectData = $.parseJSON( $("#select-data").text() );
    var count = 0;
    var max = 5; // pick the number you want here

    // we create a new select, based on the count parameter
    function makeSelect(count){

        var $select = $('<select>', { id : 'field_' + count, name : "fields[]" });

        $.each(selectData, function(){

            $select.append(
                $('<option>', { value : this.name, text : this.name })
            )

        })

        return $select; 

    }

    $('p#add_field').click(function(){
        count += 1;
        if(count >= max)
            return;

        $('#container2').append($('<strong>', { text : "Golf Course " + count }));
        $('#container2').append(makeSelect(count));

    });
});

</script>
2
  • Thanks @moonwave99 I have done very little javascript, am probably missing something fundamental but embedding the PHP inside the function was the only way I could get it to work.
    – Welly
    Jun 8, 2013 at 10:34
  • And sorry @moonwave99 had just missed your edit when I wrote my last comment - this is what I had been trying to achieve but had failed to separate the server data from the function
    – Welly
    Jun 8, 2013 at 10:37
0

try this

<script type="text/javascript">
    var count = 0;
    var limit = 5;
    $(function () {
        $('p#add_field').click(function () {
            count += 1;
            if ($('#container2 select').length <= limit) {
                $('#container2').append(
            '<strong>Golf Course ' + count + '</strong>&nbsp&nbsp&nbsp'
            + '<select id="field_' + count + '" name="fields[]">' + "<?php foreach ( $courses as $course ) { $name = $course->coursename; ?>" + "<?php echo '<option value=\''.htmlspecialchars($name).'\'>'.$name.'</option>'; ?>" + "<?php } ?>" + '</select><br />')
            }
            else {
                alert('Limit Exceed');
            }
        });
    });
</script>
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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