7 Replies - 392 Views - Last Post: 26 May 2016 - 12:50 PM

#1 fearfulsc2  Icon User is offline

  • D.I.C Head

Reputation: 9
  • View blog
  • Posts: 169
  • Joined: 25-May 16

Javascript pass on value to a popup window

Posted 26 May 2016 - 05:52 AM

Hey everyone, I am trying to have a page pop up when you click a button from a different page. That works all fine. However, I want to pass a value from the html code. I thought using a form with the POST method would work, but it appears that I am wrong. This is what I did for the popup.

 <form method="POST">
                 <select name="engineers" id="engineers" hidden>
                                <?php
                                        echo "<option value='". $UserID."'>". $UserID. "</option>";
                                ?>
                 </select>


                <button onclick="openPage()">Click here to see all sales Engineers</button>
                <br><br>
                <button onclick="openLetter()">Click here to start making your letters</button>

        </form>
        <script>
        function openPage()
        {
                window.open("seeEngineers.php", " ", "width=1300,height=300");
        }

        function openLetter()
        {
                popupWin = window.open("CustomerLetters.php", " ", "width=1000,height=700");
                //popupWin.document.writeIn('
        }
        </script>




I figured that having a hidden dropdown(already has a value which is why it's hidden) menu would then pass on its value to the popup, but that is not case. I think a document.writeIn() function may help but would that actually pass the value from the select? Or would I have to create an entirely different code with different values for that?

Is This A Good Question/Topic? 0
  • +

Replies To: Javascript pass on value to a popup window

#2 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1836
  • View blog
  • Posts: 5,784
  • Joined: 15-January 14

Re: Javascript pass on value to a popup window

Posted 26 May 2016 - 09:39 AM

Quote

I figured that having a hidden dropdown(already has a value which is why it's hidden) menu would then pass on its value to the popup, but that is not case.

Yeah, things like that don't just automatically happen. I guess you have a couple options. One option would be to just submit the form to the other page, if you need that value in PHP. You can use the action and target attributes to submit the form in a new window:

<form method="POST" action="seeEngineers.php" target="_blank">


If you don't need the value in PHP, if you only need it in Javascript, then you can set variables or call functions on the other page. e.g.:

var engWin = window.open("seeEngineers.php", " ", "width=1300,height=300");
var selectedEng = 10; // get that value from the form or whereever else
engWin.selectedVal = selectedEng; // set a variable on the other page
engWin.selectEng(selectedEng); // call a function on the other page


You can also pass a value through the URL:

window.open("seeEngineers.php?eng=" + selectedEng, " ", "width=1300,height=300");

Was This Post Helpful? 0
  • +
  • -

#3 fearfulsc2  Icon User is offline

  • D.I.C Head

Reputation: 9
  • View blog
  • Posts: 169
  • Joined: 25-May 16

Re: Javascript pass on value to a popup window

Posted 26 May 2016 - 09:48 AM

Thanks for the insight! The reason why I didn't use the action for the form is because I need to open different pages. I believe that if you use action, it will only open that one specified page(I think). So the value would work since it's being posted onto the next page.

So I guess the best thing to do would be to use the second bit of Javascript code that you shared? And in which case, would I need to use a document.In() type of function?
Was This Post Helpful? 0
  • +
  • -

#4 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1836
  • View blog
  • Posts: 5,784
  • Joined: 15-January 14

Re: Javascript pass on value to a popup window

Posted 26 May 2016 - 10:35 AM

If you pass the variable in the URL then you'll be able to access it on the other page in PHP using $_GET, if you need that value in PHP. The problem with using the regular form submit is that you can't use Javascript to control the window size or things like that. The thing about using Javascript to call functions in the other page is a nice feature that most people don't realize is possible. It can go the other way also, the opened window can respond back to the main page using parent, e.g. window.parent.someFunction(), so while both pages are open they can interact with each other using Javascript. You could, for example, have a link on one page to open a small window to another page, someone interacts with a form there or something, and when they click a button on the popup you can just use Javascript to send their values back to the parent and close the popup, then the parent could update its form with the new values. I used things like that years ago to do a calendar date picker before things like jQuery became popular and made it much easier to do a nice date picker on the same page.

Quote

So I guess the best thing to do would be to use the second bit of Javascript code that you shared? And in which case, would I need to use a document.In() type of function?

If you need the value in PHP then that's really the only reason to pass it in the URL. Otherwise, if you only need the value in Javascript, I would just call a function on the other page and pass the value. There's a simple example of a popup like this:

<!doctype html>
<html>
  <head>
    <title>Popup</title>
    <script>
    var parentValue;
    function getValueFromParent(val) {
      parentValue = val; // save it in a global variable if the page needs to use it later
      document.getElementById('display') = val; // update the page
    }
    </script>
  </head>
  <body>
    The value from the parent page is <span id="display"></span>
  </body>
</html>


So there's a function there to receive the value from the parent page. You can open the new window and send the value:

var engWin = window.open("seeEngineers.php", " ", "width=1300,height=300");
engWin.getValueFromParent('some value');


You may need to use the window's onload event to only call the function after the page has loaded.
Was This Post Helpful? 0
  • +
  • -

#5 fearfulsc2  Icon User is offline

  • D.I.C Head

Reputation: 9
  • View blog
  • Posts: 169
  • Joined: 25-May 16

Re: Javascript pass on value to a popup window

Posted 26 May 2016 - 10:50 AM

I think I'm starting to understand. What I'm trying to pass is the value of the select menu. So the value of "engineers" would be passed onto the next page.

You said that I can pass the php value?

I'll show you the some of the code that I have on the next page where I want to use the value of select from the parent page.
This was the code before I did the popup. So when I hit the input button(it was an input type=select) before I changed it to button
if(isset($_POST['engineers']))
{
        //SQL command to pull information from the table where Sales Engineers are
        $GLOBALS['sql'] = "SELECT * FROM engineers where UserID='$_POST[engineer]'";
        //The result is saved here
        $GLOBALS['result'] = mysqli_query($conn, $sql);

        //A loop to fetch the information
        while($GLOBALS['row'] = mysqli_fetch_array($result))
        {
                //delcaring the variables
                $GLOBALS['EFirstName'] = $row["FirstName"];
                $GLOBALS['ELastName'] = $row["LastName"];
                $GLOBALS['Extension'] = $row["Extension"];
                $GLOBALS['Email'] = $row["Email"];
        }
}




The value that I have connects to a database that has that value in it so that it can pull the other information from the table.
Was This Post Helpful? 0
  • +
  • -

#6 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1836
  • View blog
  • Posts: 5,784
  • Joined: 15-January 14

Re: Javascript pass on value to a popup window

Posted 26 May 2016 - 11:46 AM

What you have will work if you just change the form's action and target. If you want to use Javascript to open the page, then before you do that you need to use Javascript to get the value in the select box, and add that to the URL querystring. Then change the PHP code to look for the value in $_GET instead of $_POST.
Was This Post Helpful? 1
  • +
  • -

#7 fearfulsc2  Icon User is offline

  • D.I.C Head

Reputation: 9
  • View blog
  • Posts: 169
  • Joined: 25-May 16

Re: Javascript pass on value to a popup window

Posted 26 May 2016 - 12:22 PM

View PostArtificialSoldier, on 26 May 2016 - 11:46 AM, said:

What you have will work if you just change the form's action and target. If you want to use Javascript to open the page, then before you do that you need to use Javascript to get the value in the select box, and add that to the URL querystring. Then change the PHP code to look for the value in $_GET instead of $_POST.



When I tried that, it returned something, but not what I was expecting. Did I make the declaration wrong?

The forms
<form action="updateEngineers.php" method="POST">
                <select name="engineers" id="[b]engineers[/b]" hidden>
                                <?php
                                        echo "<option value='". $UserID."'>". $UserID. "</option>";
                                ?>
                </select>
                <br><br><input type="submit" value="Click here to update your information"/>
        </form>

        <form method="POST">
                 <select name="engineers" id="engineers" hidden>
                                <?php
                                        echo "<option value='". $UserID."'>". $UserID. "</option>";
                                ?>
                 </select>


                <button onclick="openPage()">Click here to see all sales Engineers</button>
                <br><br>
                <button onclick="openLetter()">Click here to start making your letters</button>

        </form>





The script
function openLetter()
        {
                var selectEng= document.getElementById("engineers");
                window.open("CustomerLetters.php?eng=" + selectEng, " ", "width=1000,height=700");

        }




The test to see what was returned: This is what was returned::::::[object HTMLSelectElement]
echo ($_GET['eng']);


Was This Post Helpful? 0
  • +
  • -

#8 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1836
  • View blog
  • Posts: 5,784
  • Joined: 15-January 14

Re: Javascript pass on value to a popup window

Posted 26 May 2016 - 12:50 PM

First, you have 2 elements with the same ID, you need to use unique IDs for those.

Your variable has the actual element, you need the selected value. The select element object has a property for the options, and a property for the selectedIndex:

var selectEng= document.getElementById("engineers");
var selectedVal = selectEng.options[selectEng.selectedIndex];

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1