CODEWITHSUNDEEP
phplaravellaravel-5
Amjad
Amjad

Reputation: 44

Data from dynamically created inputs is not passing to controller

I have following form and I want to send the data to controller. The problem is that data from dynamically created inputs is not being passed to the controller. This is the output of dd($request->all()); 

`array:4 [▼
  "_token" => "gzpNTHPfZl8GCtNbCPGJrc4S4zTUmhhMUve4gyet"
  "course" => "ICTP"
  "section" => "BB3"
  "lecture" => "functions and pointers"
]
`

enter image description here welcome.blade.php

`

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script 

    src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

            <META http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
        <body>
            <div>
                @if(count($errors)>0)
                    <div class="alert alert-danger">
                        @foreach($errors->all() as $error)
                        <p>{{$error}}</p>
                        @endforeach
                    </div>
                @endif
            </div>
            <div>

              <form action="{{route('course.save')}}" method="post">
                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                <label>Select a category</label>
                    <select>
                        <option>Category 1</option>
                      <option>Category 2</option>
                      <option>Category 3</option>
                      <option>Category 4</option>
                    </select>
                    <br><br>
                <label>Select a subcategory</label>
                <select>
                    <option>SubCategory 1</option>
                    <option>SubCategory 2</option>
                    <option>SubCategory 3</option>
                    <option>SubCategory 4</option>
                </select>
                <br><br>

                <label for="course">Course Name:</label>
                <input type="text" name="course" id="course"/>

                <div id="content">
                  <div id="section-content-1">
                    <div id="secs">
                        <label for="section">Section 1:</label>
                        <input type="text" name="section" id="section"/>
                    </div>
                    <div id="lects">
                        <label for="lecture">Lecture 1:</label>
                        <input type="text" name="lecture" id="lecture"/>
                    </div>
                    <button type="button" id="add-lect" data-lect="1">Add New Lecture</button><br><br>
                  </div>
                </div>

                <button type="button" id="add-sect" data-sect="1" >Add New Section</button>
                <br><br><br><br>

                <button class="btn-primary" type="submit">Save</button>
                </form>

            </div>
        </body>
    </html>


    <script src="{{asset('/js/code.js')}}"></script>`

Here is the jquery file code.js

    //$('#add-lect').click(function
$('#content').on('click', '#add-lect', function() {
    var count = parseInt($(this).parent().children('#lects').children().length / 2) + 1;
    lectures = '<label>Lecture ' + count + ':</label><input type="text" name="lecture" id="lecture"/>'
    $(this).parent().find('#lects').append(lectures);
});

$('#add-sect').click(function(){
    sect_id = parseInt($('#add-sect').attr('data-sect')) + 1;
    $('#add-sect').attr('data-sect',  sect_id)
    var count = ($("#secs").children().length / 2) + 1;

    //section = '<div id="section-content-'+sect_id+'"> <div id="secs"> <label for="section">Section'+sect_id+':</label><input type="text" name="section" id="section-"/></div><div id="lects"><label for="lecture">Lecture 1:</label><input type="text" name="lecture" id="lecture"/></div><button type="button" id="add-lect" data-lect="1">Add New Lecture</button<br><br></div>'
    section = '<div id="section-content-'+sect_id+'"><div id="secs"><label for="section">Section '+sect_id+':</label> <input type="text" name="section" id="section"/></div><div id="lects"><label for="lecture">Lecture 1:</label><input type="text" name="lecture" id="lecture"/></div><button type="button" id="add-lect" data-lect="1">Add New Lecture</button><br><br></div>'

    $('#content').append(section);
});

Upvotes: 0

Views: 61

Answers (1)

u_mulder
u_mulder

Reputation: 54831

When you have a lot of input fields with same name, like 

<input type="text" name="section" id="section"/>
<input type="text" name="section" id="section"/>
<input type="text" name="section" id="section"/>
<input type="text" name="section" id="section"/>

only the last input field will be passed to server.

To pass arrays of similar data there's special notation for name attribute:

<input type="text" name="section[]"/>
<input type="text" name="section[]"/>
<input type="text" name="section[]"/>

Using this, on server side you will have $_POST['section'] as array, which you can iterate and get values.

I also removed id="section" attribute as id attribute must be unique on a page.

So you need to change names of your inputs, both in blade template and in javascript code.

Update:

In case of one-to-many relations you can extend your naming to:

<input type="text" name="section[1]"/>
<input type="text" name="lecture[1][]"/>
<input type="text" name="lecture[1][]"/>

<input type="text" name="section[2]"/>
<input type="text" name="lecture[2][]"/>
<input type="text" name="lecture[2][]"/>
<input type="text" name="lecture[2][]"/>

<input type="text" name="section[3]"/>
<input type="text" name="lecture[3][]"/>
<input type="text" name="lecture[3][]"/>

So, as you see - you can explicitly define index for names.

In above-mentioned case you can iterate over $_POST['section'] and get $_POST['lecture'] with same index as section.

Upvotes: 1

Related Questions