2

i need add fields dynamically in my view form. i have a script function for that.. but i don't know how to include in that script into codeIgniter.

my controller -

class uploadfile extends CI_Controller {
 function __construct()
    {
     parent::__construct();
     $this->load->helper('url');}
 //index function
    function index()
    {
       //load file upload form
        $this->load->view('upload_file_view');}}

my view -

<script type="text/javascript" src="<?php echo base_url("assets/js/myscript.js");?>" ></script>
</head>
<body>
<label for="doc" class=" control-label">SUPPORT DOCUMENT</label>
         <div class="multi-field-wrapper ">
           <div class="multi-fields">
             <div class="multi-field">
 <input id="doc" type="text" class="form-control" name="attachment[]">
</div> </div>
<button type="button" class="add-field">Add field</button> </div>

and my script path - C:\xampp\htdocs\samplecod\assets\js

1 Answer 1

3

i found a easy way to add multiple fields in view page

`<div class="form-group">
            <div class="row colbox">
            <div class="col-sm-offset-2 col-lg-8 col-sm-8 text-left">Description</div>

            <div class="field_wrapper">
                <input type="textarea" name="descrip[]" value="" size="35px" /><input type="text" name="voucher_no[]" value="" size="7px"/><input type="text" name="price[]" value=""size="7px"/>
                <a href="javascript:void(0);" class="add_button" title="Add field"><img src="<?php echo base_url('images/add-icon.png'); ?>"/></a>
            </div></div></div>`

for this form this is the script:

   <script type="text/javascript">
$(document).ready(function(){
    var maxField = 20; //Input fields increment limitation
    var addButton = $('.add_button'); //Add button selector
    var wrapper = $('.field_wrapper'); //Input field wrapper
    var fieldHTML = '<div><input type="text" name="descrip[]" value="" size="35px"/><input type="text" name="voucher_no[]" value="" size="7px"/><input type="text" name="price[]" value="" size="7px"/><a href="javascript:void(0);" class="remove_button" title="Remove field"><img src="<?php echo base_url('images/remove-icon.png'); ?>"/></a></div>'; //New input field html 
    var x = 1; //Initial field counter is 1
    $(addButton).click(function(){ //Once add button is clicked
        if(x < maxField){ //Check maximum number of input fields
            x++; //Increment field counter
            $(wrapper).append(fieldHTML); // Add field html
        }
    });
    $(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
        e.preventDefault();
        $(this).parent('div').remove(); //Remove field html
        x--; //Decrement field counter
    });
});
</script>
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.