0

在我的应用程序中，我需要显示一个 jQuery 对话框来提示用户输入，然后将用户提供的输入返回到页面。

在下面的代码中，我创建了所需的 HTML 以通过对话框获取用户输入，但我不知道如何将值返回到我的页面：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dialog Box Witout Close Button</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>

</head>
<body>
<button id="dialog_trigger">open the dialog</button>
<div id="dialog" style="display:none;" title="Dialog Title"><iframe width="700" height="700" src="test.html"></iframe></div>
<script>
$( "#dialog_trigger" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
$("#dialog").dialog({


    autoOpen: false,
    position: 'center' ,
    title: 'Sample Dialog',
    draggable: false,
    width : 500,
    height : 400, 
    resizable : true,

    buttons: {
            "Ok": function() {

               var firstname =  $('input[name=FirstName]').val();
var lastname =  $('input[name=LastName]').val();

localStorage.firstname = firstname;
localStorage.lastname = lastname;
              alert("Your name is: " + lastname);
                $(this).dialog("close");
            }}
});


</script>
</body>
</html>

//sample.html

 <html>
<head>
 <script type="text/javascript">
 function ExampleJS(){
    var jFirst = document.getElementById("fname").value;
    var jLast = document.getElementById("lname").value;



    var firstname = localStorage.firstname;
var lastname = localStorage.lastname;
if(typeof(Storage)!=="undefined")
  {
      alert("yes");
  }
else
  {
      alert("no");
  }
  localStorage.lastname="Smith";
document.getElementById("result").innerHTML="Last name: "
+ localStorage.lastname;


   alert("Your name is: " + lastname);
 }
 </script>

</head>
<body>
    <FORM NAME="myform" onSubmit="JavaScript:ExampleJS()">

         First name: <input type="text" id="fname" name="firstname" /><br />
         Last name:  <input type="text" id="lname" name="lastname" /><br />
        <input name="Submit"  type="submit" value="Update" />
    </FORM>
</body>

我怎样才能从中获得价值sample.html？

4

3 回答 3

1

使用 javaScript，

假设您的两个页面在同一个域中，您可以使用 localStorage。

对话框.html

var firstname =  $('input[name=FirstName]').val();
var lastname =  $('input[name=LastName]').val();

localStorage.firstname = firstname;
localStorage.lastname = lastname;

然后回到 test.html 页面：

var firstname = localStorage.firstname;
var lastname = localStorage.lastname;

注 1：我不会评论安全性（除了说当然不要像我上面那样做！）

注 2：localStorage 仅支持约 92%：http: //caniuse.com/namevalue-storage

您的浏览器是否支持本地存储？

试试这个代码来检测，

if(typeof(Storage)!=="undefined")
  {
      alert("yes");
  }
else
  {
      alert("no");
  }

然后再试试，

localStorage.lastname="Smith";
document.getElementById("result").innerHTML="Last name: "
+ localStorage.lastname;

如果你可以使用 PHP，

使用表单和 get 或 post 方法来获取下一页的值。

http://www.tutorialspoint.com/php/php_get_post.htm

您也可以使用cookie。

于 2013-08-01T15:35:01.917 回答
1

你的代码应该是这样的；请试试这个。

对话框.html

 <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dialog Box Witout Close Button</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
<script type="text/javascript">
var firstname = localStorage.firstname;
var lastname = localStorage.lastname;

   alert("Your name is: " +firstname + " " + lastname);

 </script>
    </head>

<body>

You have been alerted on this page.

</body>
</html>

//sample.html

    <!DOCTYPE html>
 <html>
<head>
 <script type="text/javascript">
 function ExampleJS(){

var firstname =  document.getElementById("fname").value;
var lastname =  document.getElementById("lname").value;

localStorage.firstname = firstname;
localStorage.lastname = lastname;


   alert("Your name is: " + lastname);
   location.href="dialog.html";

   return false;
 }
 </script>

</head>
<body>
    <form name="myform" onSubmit="return ExampleJS();">

         First name: <input type="text" id="fname" name="firstname" /><br />
         Last name:  <input type="text" id="lname" name="lastname" /><br />
        <input name="Submit"  type="submit" value="Update" />
    </form>
</body>
于 2013-08-02T10:28:32.737 回答
-1

在您的 sample.html 中使用 a<form method="post">作为输入 然后，使用 get 方法在其他页面中获取它。 w3schools 表单方法

于 2013-08-01T15:05:59.623 回答