在保存之前显示捕获的详细信息 - Javascript

Question

我需要用户在插入之前预览捕获的记录。 任何解决方法..

HTML.html

    <form id="view"  method="POST" class="formular">
        <label>Name</label>
        <input type="text"  name="name"  id="name" /><br>
        <label>age</label>
        <input type="text"  name="age"  id="age" /><br>
        <label>place</label>
        <input type="text"  name="place"  id="place" />

        <button onclick="Preview()">Preview</button>
    </form >

JS.js

        function Preview()
            {
                var vName = document.getElementById("name").value;
                var vage = document.getElementById("age").value;
                var vplace = document.getElementById("place").value;

                var popup=window.open(view, 'Preview_records');
                popup.document.write('Name:' + vName + '<br /> Age:' + vage + '<br /> Place: ' + vplace + '<br />);
            }

当这个窗口弹出时，我想要继续按钮和取消按钮，其中继续将带我进入插入功能，取消将返回编辑表单数据。

插入函数为

        function Insertion() {
            var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
            db.transaction(insertDT, errorZ, successY);
        }

Answer 1

使用SimpleModal 插件来满足这个要求。

一旦你下载这个库并将其加载到你的 index.html 中，然后使用MODAL 弹出窗口。下面是MODAL INTEGRATION代码sn-p：

 $("modal").addEvent("click", function(e){
    e.stop();
    var SM = new SimpleModal({"btn_ok":"Confirm button"});
        // Aggiunge Bottone Conferma
        SM.addButton("Confirm", "btn primary", function(){
            alert("Action confirm modal");
            this.hide();
        });
        // Aggiunge Bottone annulla
        SM.addButton("Cancel", "btn");
        SM.show({
          "model":"modal",
          "title":"Modal Window Title",
          "contents":"<p ><img style='text-align:center' src='assets/images/simpleModalSmallWhite.png' />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>"
        });
  })

在contents 属性中添加你的Preview() 函数的内容，你就完成了。

这里是链接：https://github.com/plasm/simplemodal