How to get value from popup window to parent window by clicking from database selection?

Discussion in 'JavaScript' started by bach1, Sep 26, 2019.

  1. #1
    Originally it was like this and it worked until the crawlers no longer supported it, and even the return No. after the click I got there:

    <scriptlanguage="JavaScript"type="text/javascript">var retVal=""var valReturned;function openModal(){
    retVal=showModalDialog('stranky/modal.php');
    valReturned=retVal;
    document.getElementById("zakaznik").value=valReturned;}</script>


    <td><inputid="zakaznik"type="text"name="zakaznik"value="'.$_POST["zakaznik"].'">&nbsp;<inputclass="odeslat"type="button"name="vybrat"value="Vybrat"onClick="openModal()"></td>


    In the modal window it clicked only this way and it worked and it works even in the historical version of the web browser to this day, but new browsers do not open it anymore:

    <td><ahref="#"onclick="returnValue='.$data["id"].';window.close();">'.$data["id"].'</a></td>

    Unfortunately, I can not modify it to work in new browsers, and therefore please advice: just click on a value and it transferred and the window clicked the value itself closed.

    So I wanted to modify it somehow and use this:

    <scriptlanguage="JavaScript"type="text/javascript">
    var retVal=""
    var valReturned;
    function openModal() {
    retVal = window.open("stranky/modal.php", "_blank", "width=950,height=600");
    valReturned=retVal;
    document.getElementById("zakaznik").value=valReturned;
    //alert('The following text has been returned: "'+valReturned+'"');
    }

    <tr><td>Zákazník:</td><td><inputid="zakaznik"type="text"name="zakaznik"value="">&nbsp;<inputclass="odeslat"type="button"name="vybrat"value="Vybrat"onclick="openModal()"></td></tr>

    in popup window (modal.php) I have this:

    <td><ahref="#"onclick="returnValue='.$data["id"].';window.close();">'.$data["id"].'</a></td>

    window will open to me normally, I can click on the selected value from the database - after clicking on the selected field will close the window, but the form field zakaznik in the parent window does not get the value, only when opening the popup window will form [object Window] zakaznik. I think I miss something, and I think it's wrong. could someone advise what it should look like? Thank you.

     

    Attached Files:

    • vvv.PNG
      vvv.PNG
      File size:
      14 KB
      Views:
      523
    bach1, Sep 26, 2019 IP
  2. hdewantara

    hdewantara Well-Known Member

    Messages:
    537
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #2
    hi,
    If you need to keep using these windows, I guess you should try Window.postMessage() but if I may suggest it's easier to make popup as part of page, don't you think?
    Hendra
     
    hdewantara, Sep 26, 2019 IP
  3. bach1

    bach1 Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    Well I really don't know how to do it, so I'm asking who would help.
     
    bach1, Sep 26, 2019 IP
  4. hdewantara

    hdewantara Well-Known Member

    Messages:
    537
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #4
    Oh, you'd like to post this thread to subforum at https://forums.digitalpoint.com/forums/programming.103/, perhaps?

    Else if you rather want to work this out by yourself then let's see if this link work on your browser(s): http://hd0.000webhostapp.com/pages/parent-modal/index.html

    index.html, as follows:
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>parent</title>
        </head>
        <body>
            <table>
                <tr>
                    <td>
                        <input id="zakaznik" type="text" name="zakaznik" value="$_POST[zakaznik]">
                        <input class="odeslat" type="button" name="vybrat" value="Vybrat"
                            onclick="openModalAndUponCloseReturnValueTo('zakaznik')">
                    </td>
                </tr>
            </table>
           
            <script>
                'use strict';
               
                var idForModal = -1,
                    host = 'http://hd0.000webhostapp.com';
               
                window.addEventListener('message', function(ev){
                    if(ev.origin !== host)
                        return;
                    else{
                        var el = document.getElementById(idForModal);
                        if(!el)
                            alert('can not get element of id:' + idForModal);
                        else
                            el.value = ev.data;
                    }
                }, false);
    
                function openModalAndUponCloseReturnValueTo(id){
                    idForModal = id;
                    var modalWindow = window.open('modal.html', 'modal', 'width=400,height=300');
                    if(modalWindow !== null && !modalWindow.closed)
                        modalWindow.focus();
                }
            </script>
        </body>
    </html>
    HTML:
    modal.html:
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>modal</title>
        </head>
        <body>
            <table>
                <tr>
                    <td><a href="#" onclick="closeModalToReturnValue(this)">data1</a></td>
                    <td><a href="#" onclick="closeModalToReturnValue(this)">data2</a></td>
                    <td><a href="#" onclick="closeModalToReturnValue(this)">data3</a></td>
                 </tr>
            </table>
        </body>
        <script>
            'use strict';
    
            var host = 'http://hd0.000webhostapp.com';
    
            function closeModalToReturnValue(el){
                window.opener.postMessage(el.textContent, host);
                window.close();
            }
        </script>
    </html>
    HTML:
    Note that you need to change the host variable on both html to your current host.

    references:
     
    hdewantara, Sep 26, 2019 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #5
    1) does this "modal" really need JavaScript?

    2) What the blazes makes a <label> and its <input> tabular data... much less where's your bloody LABEL tag?

    3) What makes ANY of this tabular data?

    4) this isn't 1998, you can stop saying language="javaScript". Also this isn't 2008, you can stop saying type="text/javascript".

    5) what you are asking for is a security violation as passing data between windows/tabs is forbidden FOR GOOD REASON. You should likely be using a proper modal dialog created on the current page instead of using window.open like it's still 2003.

    Hell, if all you're doing is trying to return static data from your modal, you probably don't even need to get JavaScript involved in the modal itself, just for passing the value!

    Where you have your button with the 1990's style "onclick" trash?

    <label for="toggle_zakaznikModal">Vybrat</label>
    Code (markup):
    Then for your modal -- on the same page, not as a separate file -- right before </body>

    
    <input type="checkbox" id="toggle_zakaznikModal" class="toggle" hidden>
    <div class="modal">
    	<label for="toggle_zakaznikModal"></label><!-- this is the full-size close -->
    	<div>
    		<label for="toggle_zakaznikModal"></label><!-- inner close -->
    		<!-- your modal content here -->
    	</div>
    <!-- .modal --></div>
    Code (markup):
    For your scripting to close the modal when options are chosen, just set the checkbox to unchecked. The modal appearance can then be controlled completely via CSS as part of the current page via ".toggle:checked + .modal". This could also be done using href="#" and element:target.

    See my articles here on mobile menus and modal dialogs:

    https://cutcodedown.com/tutorial/mobileMenu
    https://cutcodedown.com/tutorial/modalDialogs

    Which show both techniques. I would use the input:checked technique of the mobile menu page with the modal dialogs style to do this since it seems to be part of a form.

    That said, I'd be really tempted to make this a set of radio buttons... if they click on the modal's options, is the user supposed to still be able to type in the input other information? Doesn't seem right.
     
    deathshadow, Sep 26, 2019 IP
  6. bach1

    bach1 Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #6
    Your code doesn't work on my site, it doesn't return a value:
    https://kratochvilovi.net/ubytovani/admin/stranky/parent.html

    if I use it in the form on the original page it throws away this error:
    Parse error: syntax error, unexpected 'zakaznik' (T_STRING), expecting ',' or ';' in /volume1/web/kratochvilovi.net/ubytovani/admin/stranky/pridat_zaznam.php on line 127

    In the attachment I send the original pages where I need to put it into operation

    I understand that this is a trivial matter for someone, but for someone who doesn't program it is a problem. The original creator is no longer available, so I ask for help here and I believe you will help me. Thank you in advance for your willingness and help.
     

    Attached Files:

    • mod.zip
      File size:
      2.3 KB
      Views:
      541
    bach1, Sep 26, 2019 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #7
    HOLY HANNAH. Ok, whoever wrote that for you, needs to back the blazes away from the keyboard and go take up something less dangerous like macramé. That is such a massively insecure train wreck of code I could totally pwn your site remotely with query injections. Much less, NO modern server should even allow that code to RUN!

    See this?

    $dotaz1 = mysql_query("SELECT od, do FROM rezervace WHERE chatka ='".$_GET["chatka"]."'
    Code (markup):
    Yeah... NO!. As of a fifteen years ago we were supposed to stop using PHP's mysql_ functions to access mysql. As of eight years ago they put giant red warning boxes into the online manual telling us to stop using them. As of PHP 5.5 six years ago using said functions threw a warning, and as of PHP 7 said functions no longer exist.

    See who the $_GET and $_POST values are being slopped directly into the query strings? That's the hackable point. "secure" queries should either be sanitizing those values, or better using PDO or mysqli interfaces to do what's called a prepare/execute.

    Even the willy-nilly mixing of camelcase on things that aren't even VALID in anything but lowercase... I'm not sure how the blazes that would even run in the first place. Was PHP ever case insensitive? If so that's before my time using it... which would be scary since I started working with it back in 2000.

    On those grounds alone, the code you presented should be dragged 'round back o' the woodshed with a .30-06 and put down like old yeller.

    ... and that's before we talk the 1997-style markup that's semantic gibberish and flips the bird at usability and accessibility. Table around non-tabular data, nonsensical to nonexistent semantics, no escaping of client-side data allowing for injection of XSS exploits, static scripting in the markup. That person who's "no longer available" was unqualified to write a single line of code, and I'm a bit surprised you haven't been totally pwned by crackers.

    If the rest of your site follows that pattern, you're going to NEED to bring in someone to redo it ALL from scratch. Until that time you're rolling the dice every day on being hacked, and likely alienating large swaths of potential users whilst at it.

    Good thing you didn't include a URI to the site, it's a magnet for infection, malware, crackers, and the like.
     
    deathshadow, Sep 27, 2019 IP
  8. bach1

    bach1 Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #8
    I understand your indignation at the code, but this is only for me and there is only a filter from a particular IP, so it is not out there from another IP. I wanted help and not to instruct how it should be. I just wanted to edit it so I don't have to use an old browser where it still works. Your comments are useless if I don't know how. I just wanted to return the value from the database, nothing more.
     
    bach1, Sep 27, 2019 IP