表单HTML5和PHP＆Javascript选项卡

This is the two code I have for one of my projects. The goal of this project is to have first page send information that opens into a new tab with the message from the information selected in the form. I am not fimilair with coding that much so my question is the following:

When I click submit the php page will open in a new tab showing the message and information. How do I or what direction should I look into to achieve the following tasks:

  • click submit => open new tab with the php page
  • click submit again => refreshes the php page tab that's already open with the updated information without opening up a new tab.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <script language="javascript" type="text/javascript">
            function dynamicdropdown(listindex) {
              document.getElementById('senator').className = listindex;
            }
            
            </script>
      
            <style>
            optgroup {
              display: none;
            }

            select.agriculture 
            optgroup.agriculture
      {
              display: block;
            }
            
            div#header{
            padding: 1px;
            color: yellow;
            padding-left: 9px;
            background-color: #000080;
            }
            
            .room130{
            padding: 9px;
            float: left;
            width: 50%;
            }
    
            </style>
    </head>
    
<body>

    <div class="header" id="header">
    <h1>test header</h1>
    </div>

    <div class="room130">
    <h3>Room 130</h3>
    <form target="_blank" action = "room130.php" method="POST">
        <div class="category_div" id="category_div">Committee:
            <select id="committee" name="committee" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);">
                <option value="">Select Committee</option>
                <option value="agriculture">AGRICULTURE</option>
            </select>
        </div>
        
        <br>
        
        <div class="sub_category_div" id="sub_category_div">
        Individual:
            <select name="senator" id="senator">
                <option value="">Select individual</option>
                    <optgroup class="agriculture">
                        <option value="the chair">THE CHAIR</option>
                        <option value="the presenter">THE PRESENTER</option>
                        <option value="test">test</option>
                        <option value="test">test</option>
                        <option value="test">test</option>
                        <option value="test">test</option>
                        <option value="test">test</option>
                        <option value="test">test</option>
                        <option value="test">test</option>
                        <option value="test">test</option>
                    </optgroup>
            </select>
        </div>

PHP:

<html>
    <header>
        <title>Room 130</title>


        <style>
            div {
                height: 200px;
                width: 400px;

                position: fixed;
                top: 50%;
                left: 50%;
                margin-top: -100px;
                margin-left: -200px;
                
                background-color: #000080;
                color: white;
            }
            
        </style>
    </header>

<body>

    <div class="message" id="message">
        <h2>Message <?php echo $_POST["senator"]; ?>. Thank you. </h2>
    </div>

</body>
</html>

</div>

Your second file room130.php contains next title :

<title>Room 130</title>

You can use that title as target in the <form of your first file :

                 ▼
<form target="Room 130" action = "room130.php" method="POST">

The first time the <form is submitted the target will open a new tab, if the same form is submitted again it will not open a new tab, instead it will refresh the already opened tab because it contains the title "Room 130".

  • click submit => open new tab with the php page

Setting the target attribute on the form element already does that.

  • click submit again => refreshes the php page tab that's already open with the updated information without opening up a new tab.

Use a different name than _blank for the target. _blank always opens a new tab, whereas if the target attribute is pointing at any other named tab, it will re-use that one when you re-submit the form.

There are a few "reserved" tab names besides _blank, such as _self (explicitly open in current tab), _parent (next level up in any frame environment) and _top (top-most frame). So choose a tab name yourself, something that fits the "meaning" of what happens in the new tab maybe. It doesn't have to start with an underscore - that is rather a convention for those reserved ones - so something along the lines of target="result"