PHP使用javascript将表单值传递到弹出窗口

Question

I have a page with a form where a user enters details. What I need to do is, when the user clicks the submit button of the form, a popup window appears that is passed all of the values of the form. index.php

<?php 
include "add_complain.php";
?>
        <form action="" enctype="multipart/form-data" method="post" >
                Add Cover Pic :<br>
                <input name="cover_pic" type="file" id="cover_pic"/><br>
                Article title :<br>
                <textarea name="article-title" id="article-title" style="width: 100%">
                </textarea><br>
                Article body :<br>
                <textarea name="article-body" id="article-body" style="height: 100px">
                </textarea><br>
                Choose Image :<br>
                <input name="file[]" type="file" id="file"/>
                <input type="button" id="add_more" class="upload"  value="Add More Files"/><br><br>
                Insert Embedded code for video :<br>
                <input type="text" name="embedded_code"><br>
                <input name="submit" type="button" id="submit" value="SUBMIT" onclick="popup();" /><br>


            </form>
    <script>

            function popup()
    {
     $(".background_popup").show();
      $("#modal").show();
    }
    </script>

add_complain.php

    <div id="modal" class="popupContainer" style="display:none;">

        <header class="popupHeader">
                <span class="header_title">ADD COMPLIAN</span>
                <span class="modal_close"><i class="fa fa-times"></i></span>
        </header>

            <section class="popupBody">
                <div>//fetch form data
</div>
            </section>
        </div

This is my code.. im not able to fetch form values

Answer 1

If you just want to display the data to your modal/popup, you can use jquery val() and jquery text()

Like this:

<script>
//insert the following code to your popup function
//get the values from the form
var coverPic = $('#cover_pic').val();
var articleTitle = $('#article-title').val();
var articleBody = $('article-body').val();

//insert the values to your <p>'s
$('#coverPic').text(coverPic);
$('#articleTitle').text(articleTitle);
$('#articleBody').text(articleBody);
</script>

<!-- supposed to be your modal body -->
<div>
    <p id='coverPic'></p>
    <p id='articleTitle'></p>
    <p id='articleBody'></p>
</div>

If you want to send it as a form data via AJAX use jquery serialize()

You can refer to this: get All Form elements values using jquery?