在我的應用程序中，我需要顯示一個jQuery對話框來提示用戶輸入，然後將用戶提供的輸入返回到頁面。將輸入從jQuery對話框返回到HTML頁面

在下面的代碼，我創建所需的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獲得數值？

來源

2013-08-01 Mr.Cool

使用JavaScript，

假設你的兩個頁面都在同一個域，你可以使用localStorage的。

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

您的瀏覽器是否支持localstorage？

試試這個代碼來檢測，

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

您也可以使用cookies。

來源

2013-08-01 15:35:01

但是當我這樣做，我在我的頁面上有未定義的錯誤，有可能從外部HTML –

看看得到元素名稱這裏是http：// pastebin。com/eMB8StLF –

@擎天柱：亞這是我的問題，在我的應用程序必須顯示與另一個頁面的jquery對話後，我需要重新調整值到前一頁，是不是這樣做這樣 –

-1

在你的sample.html中使用<form method="post">作爲輸入然後，使用get方法獲取它在另一個頁面中。

來源

2013-08-01 15:05:59 user2623973

你的代碼應該是這個;請嘗試這個。

dialog.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-02 10:28:32

仍然我在第一個html按鈕事件 –

， –

在警告框中有undefined錯誤，我再次編輯這個。完全爲我@ Mr.Cool。問題是你沒有在HTML文件中的jQuery鏈接，並使用jQuery的功能。 –

將輸入從jQuery對話框返回到HTML頁面

回答

使用JavaScript，

您的瀏覽器是否支持localstorage？

如果你可以使用PHP，

相關問題