如何在此弹出窗口中添加表单数据

how can i add the form data in this popup window

本文关键字：添加 表单 数据 窗口      更新时间：2023-09-26

我想在提交表单后在javascript弹出窗口（定义如下）中显示此表单的数据。 我尝试了几种方法，但没有一种方法有效。

<form name="form1">
<br />Select your vehicle<select class="selectv" name="selectv" style="width:160px">
    <option>-- select your vehicle --</option>
    <option value="taxi">taxi</option>
    <option value="Limousine">Limousine</option>
    </select><br />
<br />Additional Stops<select class="astops" name="astops" style="width:50px">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    </select><br />
<br />Front facing baby seat <select class="ffbs" name="ffbs" style="width:50px">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    </select><br />
 <br />Rear facing baby seat <select class="rfbs" name="rfbs" style="width:50px">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    </select><br />
 <br />Booster seat <select class="bs" name="bs" style="width:50px">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    </select>
 <br /><br />Luggage Trailer <select class="lt" name="lt" style="width:50px">
    <option value="0">0</option>
    <option value="1">1</option>
    </select>
 <br />
 <br /><input class="show-popup" type="submit" value="Get Quote" onclick="display();">
 </form>

这是弹出窗口的html

 <div class="overlay-bg"> 
<div class="overlay-content">     
    <button class="close-btn">x</button>
    <h3>Your fare</h3>
    <button class="ok-btn">Ok</button>
</div>
 </div>

这是弹出窗口的javascript

    $(document).ready(function(){
    $('.show-popup').click(function(event){
    event.preventDefault(); 
    $('.overlay-bg').show();
});
     $('.close-btn').click(function(){
     $('.overlay-bg').hide(); 
     });
 $('.ok-btn').click(function(){
     $('.overlay-bg').hide(); 
      });
      });

我创建了这个函数来在弹出窗口中添加表单数据，但它不起作用。

     (function display(){
     message = "<ul><li><b>Pickup: </b>" + document.form1.pick.value;
     message += "<li><b>Vehicle: </b></li>" + document.form1.selectv.value;
     message += "<li><b>Additional stops: </b></li>" + document.form1.astops.value;
     message += "<li><b>Front facing baby seat: </b></li>" + document.form1.ffbs.value;
     message += "<li><b>Rear facing baby seat: </b></li>" + document.form1.rfbs.value;
     message += "<li><b>Booster seat: </b></li>" + document.form1.bs.value;
     message += "<li><b>Luggage trailer: </b></li>" + document.form1.lt.value + </ul>";
     document.write(message);
 });

谁能帮我？

提前致谢

http://jsfiddle.net/N59xv/

     $(document).ready(function () {
        $('.show-popup').click(function (event) {
            $('.overlay-content').html(getFormContent());
            $('.overlay-bg').show();
            event.preventDefault();
        });
        $('.close-btn').click(function () {
            $('.overlay-bg').hide();
        });
        $('.ok-btn').click(function () {
            $('.overlay-bg').hide();
        });
    });
    function getFormContent() {
        var content = "<h3>Your fare</h3>";
        content += "<ul><li><b>Pickup: </b>" + $("option[name=pick]").val() + "</li>";
        content += "<li><b>Vehicle: </b>" + $("option[name=selectv]").val() + "</li>";
        content += "<li><b>Additional stops: </b>" + $("option[name=astops]").val() + "</li>";
        content += "<li><b>Front facing baby seat: </b>" + $("option[name=ffbs]").val() + "</li>";
        content += "<li><b>Rear facing baby seat: </b>" + $("option[name=rfbs]").val() + "</li>";
        content += "<li><b>Booster seat: </b>" + $("option[name=bs]").val() + "</li>";
        content += "<li><b>Luggage trailer: </b>" + $("option[name=lt]").val() + "</li></ul>";
        return content;
    }

按如下方式更改function(){...}

  1. 将message指定为variable

  2. 并且您错过了第 2 行的 </li> 标签的末尾

  3. 而且您还错过了行尾的双引号作为"</ul>";

即 

(function display(){
     var message = "<ul><li><b>Pickup: </b></li>" + document.form1.pick.value;  //missed </li> tag
     message += "<li><b>Vehicle: </b></li>" + document.form1.selectv.value;
     message += "<li><b>Additional stops: </b></li>" + document.form1.astops.value;
     message += "<li><b>Front facing baby seat: </b></li>" + document.form1.ffbs.value;
     message += "<li><b>Rear facing baby seat: </b></li>" + document.form1.rfbs.value;
     message += "<li><b>Booster seat: </b></li>" + document.form1.bs.value;
     message += "<li><b>Luggage trailer: </b></li>" + document.form1.lt.value + "</ul>";  //missed double quote
     document.write(message);
 });
您可以使用

这样的东西（据我了解，您想在弹出窗口中插入表单）

.HTML：

<div class="overlay-bg"> 
    <div class="overlay-content">     
        <button class="close-btn">x</button>
        <h3>Your fare</h3>
        <div id="formContent"></div>
        <button class="ok-btn">Ok</button>
    </div>
</div>

.JS：

$('.show-popup').click(function(event){
    event.preventDefault(); 
    var pop = $('.overlay-bg');
    pop.find('#formContent').html($('#form1').html());
    pop.show();
});

老实说，这只是给你一个想法。你必须美化它。

不确定这是否是你要找的，我为你写了一个小样本。

   <html>
        <head>
            <title>Quote Form</title>
        </head>
        <body>
            <form id="myForm">
                <select id="vehicle">
                    <option value="taxi">Taxi</option>
                    <option value="Limousine">Limousine</option>
                </select>
                <input type="submit" value="Get Quote" id="submitBtn" />
            </form>
            <div class="overlay-bg"> 
                <div>     
                    <button class="close-btn">x</button>
                    <h3>Your fare</h3>
                    <p id="content"></p>
                    <button class="ok-btn">Ok</button>
                </div>
             </div>
        </body>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script>
            $(document).ready(function(){
                $(".overlay-bg").hide();
                $("#submitBtn").on("click", function(even){
                    even.preventDefault();
                    var vehicleInfo = $("#vehicle").val();
                    $("#content").text("");
                    $("#content").append("vehicle: " + vehicleInfo);
                    $(".overlay-bg").show();
                });
                $(".close-btn").on("click", function(){
                    $(".overlay-bg").hide();
                });
            });
        </script>
    </html>
相关文章：