CODEWITHSUNDEEP
javascripthtmlajaxjquery
Mr.Cool
Mr.Cool

Reputation: 1555

Return input from a jQuery dialog to the HTML page

In my application I need to show a jQuery dialog to prompt a user for input, then return the user-supplied input to the page.

In the code below, I create the required HTML to get user input via the dialog, but I don't know how to return the value to my page: 

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

How can I get the value from sample.html?

Upvotes: 0

Views: 1747

Answers (3)

Optimus Prime
Optimus Prime

Reputation: 6907

Your code should be this; try this please.

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>

Upvotes: 1

Optimus Prime
Optimus Prime

Reputation: 6907

Using javaScript,

Assuming your two pages are on the same domain, you can use localStorage.

dialog.html

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

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

Then back in the test.html page:

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

Note 1: I won't comment on security (other than to say of course don't do it like I've done it above!)

Note 2: localStorage is only about 92% supported: http://caniuse.com/namevalue-storage

Is localstorage supported on your browser?

Try this code to detect,

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

Also then try,

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

If you can use PHP,

Use a form and a get or post method, to get the value on next page.

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

You may also use cookies.

Upvotes: 1

bauer
bauer

Reputation: 41

Use a <form method="post"> in your sample.html for the inputs Then, get it in the other page using the get method. w3schools form methods

Upvotes: -1

Related Questions