CODEWITHSUNDEEP
phpjqueryajax
BlueSun3k1
BlueSun3k1

Reputation: 767

PHP-jQuery-AJAX: How to POST values while using a form in Modal

I'm having an issue passing input and textarea values from a form in modal to AJAX so I can pass them to php.

The input field and textarea values are coming up blank when I submit the form in modal and jquery is not displaying any errors. It simply POST an empty (blank) string for each element.

for example, it shows something like this.

subject=&content=

in the dialog box, I load a name and an ID and both POST successfully but the input values which are not loaded with the form, are not being sent. I understand that the name and ID do POST because they are loaded on DOM along with the form but I do not know how to pass values that are not loaded along with the form in modal.

This is a sample of the form.

<?php while($row = mysqli_fetch_array($res)){
                //row data for each post
                $r_id = $row['r_id'];
                $name = $row['name'];
?>
<div id="m_f_box" class="modal fade msg-box-custom" tabindex="-1" data-width="400">
                <div class="modal-header-custom">
                                <h5 class="modal-title">Send to <span><?php echo $name ?></span></h5>
                </div>
                <form id="user_m_form" name="user_m_form" action="#" method="POST">
                <div class="modal-body">
                                <div class="row">
                                                <div class="col-md-12">
                                                                <div id="s_row" class="col_full">
                                                                <h5>Asunto</h5>
                                                <input id="m_subject" name="m_subject" class="required sm-form-control" type="text" maxlength="40"></input>
                                                                </div>
                                                                <div id="m_row" class="col_full">
                                                                <h5>Mensaje</h5>
                                                                                <textarea id="m_content" name="m_content" class="required sm-form-control" type="text"></textarea>
                                                                </div>
                                                </div>
                                </div>
                </div>
                                <div class="modal-footer">
                                                <button type="submit" id="send_m" name="user_m_form" class="button button-mini button-blue" value="<?php echo $r_id ?>">Send</button>
                                                <button type="button" id="can_m" name="can_m" data-dismiss="modal" class="button button-mini button-blue">Cancel</button>
                                </div>
                </form>
</div>
<?php } ?>

This is a sample of the jquery/ajax call.

<script type="text/javascript">
$(document).on('click', '#send_m', function(e){
                e.preventDefault();
                var r_id = $('#send_m').val();
                var subject = $('#m_subject').val();
                var content = $('#m_content').val();
                //var form_data = $('#user_m_form').serialize(); test with serialized form data.
                //alert(subject); test what is being sent as an alert
                //console.log(subject); test what is being sent to view in console

                $.ajax({
                type:'POST',
                url:'test_file.php',
                data: {   r_id : recipient_id,
                          subject : subject,
                          content : content,
                      },
                cache: false,
                success:function(res){

                   //do some stuff
                                }
                });
                return false;
});
</script>

Any ideas on why and/or how to POST these values?

Thanks in advance,

Note: Excuse the formatting for the HTML portion. It's hard to properly format everything using a phone.

Upvotes: 1

Views: 2282

Answers (2)

BetaDev
BetaDev

Reputation: 4674

Note: If you are trying to define multiple modal using while loop,

Your HTML

<div id="m_f_box" class="modal fade msg-box-custom" tabindex="-1" data-width="400">
    <div class="modal-header-custom">
        <h5 class="modal-title">Send to <span><?php echo $name ?></span></h5>
    </div>
    <form id="user_m_form" name="user_m_form" action="#" method="POST">
    <div class="modal-body">
        <div class="row">
            <div class="col-md-12">
                <div id="s_row" class="col_full">
                <h5>Asunto</h5>
            <input id="m_subject_<?php echo $row['r_id']; ?>" name="m_subject" class="required sm-form-control" type="text" maxlength="40"></input>
                </div>
                <div id="m_row" class="col_full">
                <h5>Mensaje</h5>
                                <textarea id="m_content_<?php echo $row['r_id']; ?>" name="m_content" class="required sm-form-control" type="text"></textarea>
                </div>
            </div>
        </div>
    </div>
        <div class="modal-footer">
            <button type="submit" id="<?php echo $row['r_id']; ?>" name="user_m_form" class="button button-mini button-blue send" value="<?php echo $r_id ?>">Send</button>
            <button type="button" id="can_m" name="can_m" data-dismiss="modal" class="button button-mini button-blue">Cancel</button>
        </div>
    </form>
</div>
<?php } ?>

Your Script

<script type="text/javascript">
$(document).on('click', '.send', function(e){
    var r_id = (this).attr('id');
    var subject = $('#m_subject'+id).val();
    var content = $('#m_content'+id).val();

    //......
    //.......
});
</script>

Note: You just need to understand the JQuery selector (ID and Class). See the difference between #ID and .Class selectors in Jquery.

You are generating multiple Modal with same ID and try to get those field values using IDs (selector). But the IDs for each modal input fields must be unique to get the value. and for on click operation the button must have unique ID or you just need to define class as above code has.

See how I have defined class for click button and getting ID for each modal. Modal must be unique in the sense of their field.

Upvotes: 2

Asif Raza
Asif Raza

Reputation: 3695

Example done POST request with Ajax call on ModalBox

My View page code:

<div class="panel panel-default">
    <div class="panel-body">
        <p class="text-danger">There are total <span class="text-bold">{{ sizeof($data) }}</span> Departments.</p>
        <table class="table" id="department-data">
            <tr>
                <th>#</th>
                <th>Name</th>
                <th>Edit</th>
                <th>Delete</th>
                <th>Manage</th>
            </tr>
            <?php $order = 0; ?>
            @foreach($data as $key)
            <tr>
                <td>{{ ++$order }}</td>
                <td id="department_name">{{ $key->title }}</td>
                <td>
                    <a href="#">
                        <button class="btn  btn-default edit-department" data-toggle="modal" data-target="#updateDepartmentModel" id="{{ $key->id }}"><i class="fa fa-pencil"></i></button>
                    </a>
                </td>
                <td>
                    <button id="{{ $key->id }}" class="btn btn-danger delete-btn" data-toggle="modal" data-target="#delete-department"><i class="fa fa-trash"></i></button>
                </td>
                <td>
                    <a href='program/{{ $key->id }}' id="delete-id">
                        <button class="btn btn-primary"><i class="fa fa-cog"></i></button>
                    </a>
                </td>
            </tr>
            @endforeach
        </table>
    </div>
</div>

Modals on the same page: 

<!-- Add New Department Modal -->
<div class="modal fade" id="newDepartmentModel" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add New Department</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="{{ url('department/create') }}" method="POST">
                {{ csrf_field() }}
            <div class="modal-body">
                    <div class="form-group">
                        <label for="title">Department Name:</label>
                        <input type="text" class="form-control" id="title" name="title">
                    </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">Add</button>
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>
            </form>
        </div>
    </div>
</div>
<!-- ./Model -->

<!-- Update Department Modal -->
<div class="modal fade" id="updateDepartmentModel" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Update a Department</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="old-title">Department Name:</label>
                        <input type="text" class="form-control" id="old-title" name="title">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" id="edit-dept" class="btn btn-primary edit-dept">Edit</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- ./Model -->

Here is Script:

<script type="text/javascript">

    var token = '{{ Session::token() }}';
    var url = '{{ route('department/edit') }}';
    var dept_id = '';

    // Setup Ajax
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    // Update the department
    $(document).on('click', '.edit-department',  function () {
        var department_id = $(this).attr('id');
        console.log(department_id);
        dept_id = department_id;
        $.get('department/'+department_id, function (data) {
            $('#old-title').val(data.title);
            console.log(data);
        });

    });


    // Handle Post Request (Edit Department)
    $(document).ready(function () {
        $('#edit-dept').click(function () {
            $.ajax({
                method: 'POST',
                url: url,
                data: { id: dept_id, title: $('#old-title').val(), _token: token},
                dataType: 'JSON'
            }).done(function (data) {
                //console.log(data);
            });
        });
    });


</script>

Routes is:

Route::post('department/edit', function (\Illuminate\Http\Request $request){

$id = $request->input('id');
$title = $request->input('title');
DB::table('departments')->where('id', $id)->update(array('title' => $title));
return redirect('department')->with('alert_info', 'Department was successful Update!');})->name('department/edit');

Put this line on page Head:

<!-- csrf for meta -->
<meta name="csrf-token" content="{{ csrf_token() }}" />

And in Controller Create and Get routes:

Route::post('department/create', 'DepartmentController@store');
Route::get('department/{id}', 'DepartmentController@showById');

And these definitions:

public function store(StoreDepartmentPostRequest $request)
{
    $department = new Department;
    $department->title = $request->input('title');
    $department->timestamps = time();
    $department->save();

    return redirect('department')->with('alert_success', 'Department was successful added!');

}



public function showById($id){
        $data = Department::findOrFail($id);

        return response()->json($data);
    }

Upvotes: 0

Related Questions