Getting values outside a HTML form

Question

Inside my content.js I am writting a new HTML page with a pre polulated form, which contains var a and var b. Those 2 variables are created before, inside content.js, so I can easily use them inside my HTML page. Now I want to override those variables a and b as the user finishes editing the form and presses the button Accept. Is there anyway I can achieve this?

This is a part of the code

  var a="FName";
   var b="LName";
    var myWindow = window.open("Accept", "myWindow", "width=450, height=300");
     myWindow.document.write(


"<html>"+
   "<head>"+
   '<script> function closeWindow(){ var x = document.getElementById("firstname").value alert(x); window.close();}'+

 "</script>"+

 "</head>"+
  "<body>"+   
      "<form>"+
       "<div id=leadinformation>"+
        "<p id=titleParagraph>You are about to create a new Lead:</p>"+
         "First Name....."+ "<input type=text id=firstname value="+a+">" +"<br>"+
         "Last Name....."+ "<input type=text id=lastname value="+b+">" +
        "</div>"+

         "<div>"+
          "<button id=Accept onClick=closeWindow() >Accept</button>"+
          "<button id=Close onClick=closeWindow() >Close</button>"+
        "</div>"+
      "</form>"+
   "</body>"+
  "<html>" 
);

myWindow.document.getElementById('Accept').onclick=Accept;
myWindow.document.getElementById('Close').onclick=Close;

    function Accept(){   
alert(myWindow.document.getElementById('firstname').innerText);
}  
    function Close() {//do smthing 
}

Sorry for bad formating.

Currently the output of the Accept(); is empty at the moment. How can I get first name input result?

What I want to achieve: 1) I am creating a button on a page
2) When I click on the button a new html page pops out (the one that I am hardcode writing it)
3) I pre populate the form with some variables that I created before
4) When Clicking The Accept button on the form the Accept() function is triggered where I would want to use those input values the user has written.

Could you please tell us what you are trying to achieve, what is the desired result and if possible create a http://jsfiddle.net/ to duplicate the problem. — odedta, Nov 19 '15 at 11:57
The desired result is to use the variables a and b outside the form in the accept function for example. but their value has to be updated with the inputed value if the user modified the "firstname" or "lastname" values — Marc Zaharescu, Nov 19 '15 at 12:01
When ever the user input is changed you can set the value of anything you like. I am still trying to figure out what you're trying to accomplish, there might be a more cleaver way to code this... — odedta, Nov 19 '15 at 12:03
yes I tried to change to set the value of a after the input has changed but after alerting it outside the html page it was " ". Note: I added some extra lines at the end of my post to show u want results I am trying to get — Marc Zaharescu, Nov 19 '15 at 12:08
Yeah, Marc. Could you please explain what you want to do FROM THE START so we can maybe come up with a better way to solve this? your code doesn't seem to be working right now and frankly it feels like it's poorly coded, no offense here, i'm just trying to help. Please refer to EVERYTHING: Which form you have, which fields, what the user inputs, what happens in the process, what would you like to achieve etc... — odedta, Nov 19 '15 at 12:11
well this is not my actual code I edited inside the post, hence it is bad formatted. Anyway I will explain what I am trying to achieve from the beginning: 1) I am creating a button on a page 2) When I click on the button a new html page pops out (the one that I am hardcode writing it) 3) I pre populate the form with some variables that I created before 4) When Clicking The Accept button on the form the Accept() function is triggered where I would want to use those input values the user has written. — Marc Zaharescu, Nov 19 '15 at 12:15
Doesn't matter who wrote the code, what matters is that you explain the problem with as much detail as possible, otherwise people are not able to help you. — odedta, Nov 19 '15 at 12:18

score 2 · Answer 1 · edited May 23 '17 at 12:15

2

This should help you: Sharing global javascript variable of a page (...).

The question is about "How to share a variable to another page in an iframe", but this works for a new windows as well.

i.e.:

myWindow.document.write(
  "<html>" +
    "<head>" +
      '<script>' +
        'function closeWindow(){' +
          'var x = document.getElementById("firstname").value;' +
          'alert(x);' +
          '// do something to parent.a and parent.b here, just because you can:' +
          'parent.a = "Oh, would you look at it, it works!";' +
          'parent.b = "And it is so pretty too!";' +
          'window.close();' +
        '}' +

      "</script>" +

    "</head>" +
    " Your body code here, etc " +
  "</html>"
);

Also, please note that your code lacks a semicolon (;) after inserting value to var x in your new window's JavaScript code. That will most probably make your code malfunction. The closing </html> tag lacks the slash, but I don't know if that's gonna break anything; you'd better fix that as well, just in case.

edited May 23 '17 at 12:15

Community

1
1

answered Nov 19 '15 at 12:17

Gui Imamura

556
9
26

Also, I don't know whether you need to hardcode your new HTML or not, but in case you don't have to, you may want to give a try to one of these: [15 JavaScript Template Engines for Front-end Development](http://codecondo.com/15-javascript-template-engines/). I've never used a front-end template engine myself so I can't give you any experience based opinion on them, but it'll probably let you work much faster. – Gui Imamura Nov 19 '15 at 12:35
Hey, if my code works for you, please don't forget to accept my answer! I need those reps to downvote bad questions & answers, you know :P – Gui Imamura Nov 19 '15 at 12:36
I just checked it again, in the code sample you provided uses the variable a and b inside the html page, but I actually want to use them outside it if that makes sense. So after the user has updated them I want to use them after the form has been closed. So it is smthing like using the variables from iframe inside the main. Not the other way around. To make it more clear how can I access the variable x that I only defined in the html script outside the html page – Marc Zaharescu Nov 19 '15 at 12:47
Oh I see. Then you'll have to do like [this](http://stackoverflow.com/a/7647123/3471286) and access the parent's variables, like `parent.a` and `parent.b`. I'll update my answer – Gui Imamura Nov 19 '15 at 13:01
So I tried your example if I set _var a_ to **Nothing** before I create the HTML page, then inside the html script I set parent.a to **Smthing** then I alert(a) which alerts **Smthing** as expected. But then I try to alert(a) again in the Accept() function which is triggered after the button is pressed and the html script is executed, but now a is **Nothing** again :(( – Marc Zaharescu Nov 19 '15 at 13:54
I think you might have messed with the scopes. Please edit question to show your current code. – Gui Imamura Nov 19 '15 at 18:05

Getting values outside a HTML form

1 Answers1