将值从模态传递到主窗体

时间:2016-12-21 05:36:17

标签: javascript php jquery ajax bootstrap-modal

我有一个联系脚本如下:

    <?php
    Session_start();
    if (!isset($_SESSION['username'])){
    header("Location:../index.php");
    }
    ?>
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Test Modal</title>
    <link rel="stylesheet" href="../css/style.css">
    <link href="../libraries/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="../libraries/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
    <link rel="stylesheet" href="../libraries/css/jquery-ui.css">
    <script src="../libraries/js/jquery-1.10.2.js"></script>
    <script src="../libraries/js/jquery-ui.js"></script>
    <script type="text/javascript" src="../libraries/date/jquery/jquery-1.8.3.min.js" charset="UTF-8"></script>
    <script type="text/javascript" src="../libraries/date/bootstrap/js/bootstrap.min.js"></script>
    <script>
        // Get Organization ID
        function getOrganizationID(str) {
            if (str == "") {
                document.getElementById("txtHint").innerHTML = "";
                return;
            } else { 
                if (window.XMLHttpRequest) {
                    // code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                } else {
                    // code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {

                        document.getElementById("txtHint").innerHTML = this.responseText;
                    }
                };
                xmlhttp.open("GET","getorganizationid.php?q="+str,true);
                xmlhttp.send();
            }
        }
        // Auto Complete for Organization field
        $(function() {
            $( "#skills" ).autocomplete({
                source: '../libraries/organization/search.php'
            });
        });
    </script>
    </head>
    <script type="text/javascript">
        //
        function chName(value) {
          var val_fname = document.getElementById('fname').value;
          var val_lname = document.getElementById('lname').value;
          var val_fullname = val_fname + ' ' + val_lname;
            document.getElementById('org').value = val_fullname;
        }
        // Get the modal
    var modal = document.getElementById('myModal');

    // Get the button that opens the modal
    var btn = document.getElementById("myBtn");

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

    // When the user clicks on the button, open the modal 
    btn.onclick = function() {
        modal.style.display = "block";
    }

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
        modal.style.display = "none";
    }

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
    </script>
    <div id="main">
    <form name="create" id="create" method="post" action="do_create.php">
        <table style="width:100%;font-weight:bold;">
            <tr>
                <td>First Name</td>
                <td><input id="fname" name="fname" type="text" required>*</td>
                <td>Last Name</td>
                <td><input id="lname" name="lname" type="text"  onblur="chName(this.value)" required>*</td>
            </tr>
            <tr>
                <td>Phone</td>
                <td><input name="phone" type="text" required>*</td>
                <td>Email</td>
                <td><input name="email" type="text" required>*</td>
            </tr>

            <tr>
                <td>Mobile Phone</td>
                <td><input name="mobile" type="text"></td>
                <td>Organization</td>
                <td>
                    <input id="skills" type="text" name="skills" value="" onblur="getOrganizationID(this.value);return false;">
                    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">+</button>
                    <div id="txtHint" style="width:1px;height:1px;">
                        <input id="organization_id" name="organization" type="hidden" readonly>
                    </div>
                    <input id="org1" type="hidden" name="ocname" value="<?php echo $hash;?>">

                </td>
            </tr>
        </table>
    </form>
    </div>


    <!-- The Modal -->
    <div id="myModal" class="modal">
      <!-- Modal content -->
    <div class="modal-content">
    <script type="text/javascript">
        function chOrg(value) {
        var val_oname = document.getElementById('oname').value;
            document.getElementById('skills').value = val_oname;
        }
    </script>
            <form name="addorganization" id="addorganization" method="post" action="add_organization.php"  target="myIframe" onsubmit="chOrg(this.value)">
            <div id="headsum">
                <strong>Create Organization</strong>
                <input style="float:right;" name="add_organization" type="submit" value="SAVE">
            </div>
                <table style="width:100%;font-weight:bold;text-align:left;">
                    <tr>
                        <td>Organization Name</td>
                        <td><input name="oname" type="text"  required>*</td>
                        <td>Contact Name</td>
                        <td><input id="org" type="text" name="org" value="" readonly>*
                        <input id="org1" type="hidden" name="ocname" value="<?php echo $hash;?>"></td>
                    </tr>
                    <tr>
                        <td>Phone</td>
                        <td><input name="ophone" type="text" required>*</td>
                        <td>Email</td>
                        <td><input name="oemail" type="text" required>*</td>
                    </tr>
                </table>
            </form>
            <iframe style="display:none;" src="" name="myIframe" id="myIframe">
            </iframe>
    </div>
    </div>

当我点击组织提交旁边的按钮时,会出现一个弹出窗口(模态)来添加组织。 表单上的组织联系人姓名将自动填充填写主表单的名称。

我想在这里问的是: 如何存储组织表单后,主表单上的组织名称和哈希将自动填充从早期组织表单中保存的名称和哈希值,因为我尝试过的功能尚未成功

1 个答案:

答案 0 :(得分:0)

Hello以主窗体中的一个隐藏字段。所以在提交表单后将该值传递给隐藏字段。

希望它有所帮助!!