rory
1 year ago

Pass data from Laravel to [email protected]

Posted 1 year ago by rory

Hi! I'm trying to build a form to edit and update my database. I want to use modal and i need to pass all data from the form to the controller in order to update the database.

Here is my controller:

public function update(Request $request)
    {
        #$projectID = \DB::table('projects')->select('id')->get(),

        try
        {
            //Find the project in Project_model
            $project = Project_model::findOrFail($request->project_id);

            //Set project object attributes
            $project->name = $request->get('name');
            $project->description = $request->get('description');

            // Save/update project.
            $project->save();

            #return view('form_project')->with('project', $project);
            return redirect()->back()->with('project', $project);
        }

        catch(ModelNotFoundException $err)
        {
            return redirect()->action('[email protected]');
        }


    }

This is the script that should pass the data regarding the project id:


//search and retrieve data from Modal
$('#editModal').on('show.bs.modal', function (event) {
     var button = $(event.relatedTarget)

     var name = button.data('myname')
     var description = button.data('mydesc')
     var project_id = button.data('projectID')

     var modal = $(this)

     //put the values in modal <input>
     modal.find('.modal-body #name').val(name);
     modal.find('.modal-body #description').val(description);
     modal.find('.modal-body #project_id').val(project_id);
})

And this is my Blade, here in the input with id=project_id the value should be full with the id of the project....but nothing is happening:

<html lang="en">
    <head>
        <title>File Upload</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
<body>

    <div class="container">
        <h3 class="jumbotron">Create here your project</h3>

        <form method="post" id="projectform" class="w3-container w3-light-grey" action={{action('[email protected]')}} enctype="multipart/form-data">
        {{csrf_field()}}
            <p>
            <label>Project Name</label>
            <input class="w3-input w3-border w3-round" name="name" type="text"></p>
            <p>
            <label>Project Description</label>
            <input class="w3-input w3-border w3-round" name="description" type="text"></p>

        <button type="submit" class="btn btn-primary" style="margin-top:10px">Create Project</button>
        </form>

    </div>

    <div class="container-fluid">
        <h3 class="jumbotron">Your Projects</h3>
            <div class="table-responsive">
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>name</th>
                            <th>description</th>
                            <th>created_at </th>
                        </tr>
                    </thead>
                    <tbody>
                        @if(isset($project_data))
                        @foreach($project_data as $project)
                            <tr>
                                <td> {{$project->id}} </td>
                                <td> {{$project->name}} </td>
                                <td> {{$project->description}} </td>
                                <td> {{$project->created_at}} </td>
                                <td>
                                    <button type="button" class="btn btn-warning btn-detail open-modal"
                                    data-projectID="{{$project->id}}"
                                    data-myname="{{$project->name}}"
                                    data-mydesc="{{$project->description}}"
                                    data-toggle="modal"
                                    data-target="#editModal">Edit</button>
                                    <button class="btn btn-danger btn-delete delete-project">Delete</button>
                                    <button class="btn btn-info">See Jobs</button>
                                </td>
                            </tr>
                        @endforeach
                        @endif
                   </tbody>
               </table>
           </div>
    </div>

    <!-- Modal (Pop up when edit button clicked) -->
    <div class="modal" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h3 class="modal-title" id="editModalTitle">Edit your project</h3>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>
        <form method = "post"  action={{action('[email protected]')}} enctype="multipart/form-data" id="frmSave" name="frmSave"class="form-horizontal" role="form">
        {{method_field('put')}}
        {{csrf_field()}}
        <div class="modal-body">
                <input type="hidden" name="project_id" id="project_id" value="">
                <div class="form-group">
                    <label for="name" class="col-sm-3 control-label">Project Name</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="name" name="name" placeholder="" value="">
                    </div>
                </div>
                <div class="form-group">
                    <label for="description" class="col-sm-3 control-label">Description</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="description" name="description" placeholder="" value="">
                    </div>
                </div>
        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-primary" id="btn-save" value="add">Save changes</button>
            <input type="hidden" id="project_id" name="project_id" value="0">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
        </form>
    </div>
    </div>
    </div>

    <script src="/js/crud.js"></script>
</body>
</html>

Please sign in or create an account to participate in this conversation.