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

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

javascript html

Javascript 如何在此弹出窗口中添加表单数据,javascript,html,Javascript,Html,提交表单后，我想在javascript弹出窗口（定义如下）中显示此表单的数据。我试过几种方法&没有一种有效 <form name="form1"> <br />Select your vehicle<select class="selectv" name="selectv" style="width:160px"> <option>-- select your vehicle --</option> <optio

提交表单后，我想在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>

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

     (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);
 });

（函数显示（）{
message=“拾取：”+document.form1.pick.value；
消息+=“
车辆：”+document.form1.selectv.value；
消息+=“附加停止：”+document.form1.astops.value；
消息+=“前向婴儿座椅：”+document.form1.ffbs.value；
消息+=“后向婴儿座椅：”+document.form1.rfbs.value；
消息+=“助力座椅：”+document.form1.bs.value；
消息+=“行李拖车：
”+document.form1.lt.value+”；
文件。书写（信息）；
});

有人能帮我吗

提前感谢

更改

函数（）{…}

如下

将

消息

分配为

变量

您错过了第2行的

标记的末尾

此外，您还遗漏了一行末尾的双引号，即

“”

即

(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);
 });

（函数显示（）{
var message=“拾取：”+document.form1.pick.value；//缺少标记
消息+=“车辆：”+document.form1.selectv.value；
消息+=“附加停止：”+document.form1.astops.value；
消息+=“前向婴儿座椅：”+document.form1.ffbs.value；
消息+=“后向婴儿座椅：”+document.form1.rfbs.value；
消息+=“助力座椅：”+document.form1.bs.value；
消息+=“行李拖车：
”+document.form1.lt.value+“”；//缺少双引号
文件。书写（信息）；
});

您可以使用一些东西（据我所知，您希望在弹出窗口中插入表单）

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>

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

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

$（文档）.ready（函数（）{
$（'.show popup'）。单击（函数（事件）{
$（'.overlay content'）.html（getFormContent（））；
$（'.overlay bg'）.show（）；
event.preventDefault（）；
});
$（'.close btn'）。单击（函数（）{
$（'.overlay bg'）.hide（）；
});
$（'.ok btn'）。单击（函数（）{
$（'.overlay bg'）.hide（）；
});
});
函数getFormContent（）{
var content=“您的票价”；
content+=“拾取：”+$（[name=pick]”）.val（）+“”；
content+=“车辆：“+$”（[name=selectv]”）.val（）+“”；
content+=“附加站点：”+$（[name=astops]选项）。val（）+“”；
content+=“前向婴儿座椅：“+$”（[name=ffbs]”）.val（）+“”；
content+=“后向婴儿座椅：”+$（[name=rfbs]”）.val（）+“”；
content+=“增压座椅：“+$”（[name=bs]”）.val（）+“”；
content+=“行李拖车：”+$（[name=lt]”）.val（）+“”；
返回内容；
}

不确定这是否是您要寻找的，我为您编写了一个小样本

   <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>


报价表
出租车
豪华轿车
x
你的车费

好啊
$（文档）.ready（函数（）{
$（“.overlay bg”）.hide（）；
$（#submitBtn”）。在（“单击”，函数（偶数）{
even.preventDefault（）；
var vehicleInfo=$（“#vehicle”）.val（）；
$（“#内容”）.text（“”）；
$（“#内容”）。追加（“车辆：+vehicleInfo）；
$（“.overlay bg”）.show（）；
});
$（“.close btn”）。打开（“单击”，函数（）{
$（“.overlay bg”）.hide（）；
});
});

现在检查它是否有效……祝你好运

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

     $(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;
    }

   <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>