1

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.

Improve this question
4
  • you are creating multiple modal using while loop, so your data and send button must be recognized uniquely. Do put ID and work with ID or If you wanna use ID for on click function please generate unique ID for input fields and send button by attaching the record ID. DO your click operation using class and get id. Commented Apr 19, 2017 at 17:29
  • I was actually working con that before reading tour comment. I was inspecting the HTML output of the page and noticed there are several instances of the element when there should only be one. First thing I'm going to do is work around that then will check on your other suggestions. Commented Apr 19, 2017 at 17:42
  • ok but if you want multiple modal based on your multiple records thats also fine, and for this see my answer. and if you have only one modal operation for only on r_id then put your modal out side of the while loop. Commented Apr 19, 2017 at 17:45
  • Actually you made a point the first time because I am expecting to have thousands of records and having a modal hidden for each record would just not work, specially when using the site on a mobile phone. The modal window is for messaging, so I just need to invoke the form once when needed. I'm currently working on calling it through a jquery script when the button is clicked (each record has a button for this purpose). I'm just having an issue with the dynamic id but I'll work it out soon enough. Then will try some of the suggestions others have posted. One step at a time I guess. Commented Apr 19, 2017 at 18:58

2 Answers 2

Reset to default
2

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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);
    }
Improve this answer

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.