CODEWITHSUNDEEP
javascriptphpjqueryhtmlcodeigniter
guwop69
guwop69

Reputation: 119

Using append() in javascript to a select form with PHP code

I am trying to use javascript to add dynamically an input form.

For example, If I click a button "Add More Fields" it will automatically add another select input form.

When I tried it with my select input form that has PHP code in it. It doesnt work. It gave me an error of Uncaught SyntaxError: Invalid or unexpected token

PHP / HTML:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <div class="input_fields_wrap">
            <button class="btn btn-primary add_field_button" type="button">Add More Fields</button>
            <div>
                <select class="form-control" name="findings[]">
                    <?php 
                        $option = '<option value="'.$row->id.'">'.$row->illness.'</option>';
                        foreach($findings->result() as $row)
                        { 
                            echo '<option value="'.$row->id.'">'.$row->illness.'</option>';
                        }
                    ?>
                </select>
            </div>
        </div>
    </body>
</html>

JS:

$(document).ready(function() {
    var max_fields = 10; //maximum input boxes allowed
    var wrapper = $(".input_fields_wrap"); //Fields wrapper
    var add_button = $(".add_field_button"); //Add button ID
    var x = 1; //initlal text box count
    $(add_button).click(function(e) { //on add input button click
            e.preventDefault();
            if (x < max_fields) { //max input box allowed
                x++; //text box increment
                $(wrapper).append('<div> < select class = "form-control"
                    name = "findings[]" > 
                    <?php 
                        foreach($findings->result() as $row)
                        { 
                            echo "<option value="$row->id">$row->illness</option>";
                        }
                    ?> < /select> class="remove_field">Remove</a > < /div>'); / / add input box
                }
            }); $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
            e.preventDefault();
            $(this).parent('div').remove();
            x--;
        })
    });

Upvotes: 2

Views: 1458

Answers (2)

Suman Singh
Suman Singh

Reputation: 1377

I have implemented an example for you:

JS code:

$(document).ready(function() {
    var max_fields = 10; //maximum input boxes allowed
    var wrapper = $(".input_fields_wrap"); //Fields wrapper
    var add_button = $(".add_field_button"); //Add button ID
    var x = 1; //initlal text box count
    $(add_button).click(function(e) { //on add input button click
      e.preventDefault();
      if (x < max_fields) { //max input box allowed
        x++; //text box increment
        $( ".aaaa" ).first().clone().appendTo( ".input_fields_wrap" );
        }
    });
    $(wrapper).on("click", ".remove_field", function(e) {
      e.preventDefault();
      if($(".aaaa").length > 1) {
        $(this).parent('div').remove();
      } else {
        alert('You can not delete all elements');  
      }
    })
});

HTML code:

<div class="input_fields_wrap">
            <button class="btn btn-primary add_field_button" type="button">Add More Fields</button>
            <div class="aaaa">
                <select class="form-control" name="findings[]">
                    <option value="a">aaaaaa</option>
                    <option value="b">bbbbbb</option>
                    <option value="c">ccccccc</option>
                </select>
                <button class="remove_field">Remove</button>
            </div>
        </div>

If you want to use the PHP for the select option than use as below

<select class="form-control" name="findings[]">
<option value="">Select an option</option>
<?php 
if($findings->result()) {
    foreach($findings->result() as $row) {
        echo '<option value="'.$row->id.'">'.$row->illness.'</option>';
    }
}
?>
</select>

Upvotes: 3

Naveen
Naveen

Reputation: 34

You cannot add in this way if you want to add more fields which are in the page already you can take a clone by using $("#element").clone() function and then append the same in the place you want

Upvotes: 1

Related Questions