将记录集发布到表中,然后选择一行并发布到另一页

时间:2018-07-15 19:43:17

标签: javascript php post

我最近遇到了一个我不太确定如何解决的问题。在这里分享它,以防其他人使用。

用例:用户在PHP页面上的搜索框中输入字符串。提交后,页面将查询数据库,然后将结果发布到同一页面上的表中。然后,用户使用单选按钮选择一个记录,并且只需要将该记录发布到另一个PHP页面。第二页无权访问数据库。

我拿了实际的页面并创建了一个示例页面以进行清晰和测试,因为原始页面大约有15个表格列。

<div class="container">
    <div class="row" style="margin-top: 1rem;">
        <div class="col-sm">                         
            <form action="" method="post">                    
                <table class="fit" id="entry">
                    <tr>
                        <td class="fit"><label for="start">Planet (try <strong>Caprica</strong> or <strong>Picon</strong>): </label></td>                            
                    </tr>
                    <tr>                            
                        <td class="fit"><input type="test" id="planet" name="planet" required autofocus /></td>
                    </tr>                        
                </table>                        
                <input class="btn btn-primary" type="submit" value="Get Characters" />
            </form>
        </div>
    </div>
</div>  

<div class="container" style="margin-top: 2rem;">
    <div class="row">
        <div class="col-sm">               
            <?php
            require_once('./resources/pdo.php');

            if ( isset($_POST['planet']) ) {

                $planet = strtolower($_POST['planet']);      
                $pdo = new myPDO('phppostpost');

                try {
                    $stmt = $pdo->prepare('CALL devCharacters(?)');
                    $stmt->bindParam(1, $planet, PDO::PARAM_STR);                    
                    $stmt->execute();                        
                    $stmt->setFetchMode(PDO::FETCH_ASSOC);
                } catch (PDOException $e) {
                    die("Error occurred: " . $e->getMessage());
                }
                ?>

                <div class="table-responsive">

                    <table class="table table-striped table-hover">
                        <thead class="thead-light">
                            <tr>
                                <th class="fit">Select</th>                                           
                                <th class="fit" scope="col">Customer First</th>
                                <th class="fit" scope="col">Customer Last</th>
                                <th class="fit" scope="col">Planet</th>
                            </tr>
                        </thead>
                        <tbody>
                        <?php while ($r = $stmt->fetch()): ?>                             
                            <tr>                                    
                                <?php echo "<td class='fit'><input type='radio' id='cust-" . $r['customer_id'] ."' name='cust-id' value='". $r['customer_id'] . "' </td>"; ?>
                                <?php echo "<td class='fit'>" . $r['first_name'] . "</td>"; ?>
                                <?php echo "<td class='fit'>" . $r['last_name'] . "</td>"; ?>
                                <?php echo "<td class='fit'>" . $r['origin_planet'] . "</td>"; ?>
                            </tr>
                        <?php endwhile; ?>
                        </tbody>
                    </table>
                </div>
                <input class="btn btn-primary" onclick="getSelectedRowData();" type="submit" value="Send" />
            <?php } ?>
        </div>
    </div>
</div> 

作为一个相对较新的开发人员,我不知道如何(1)仅抓取所选行,以及(2)仅从该行而不是从原始搜索表单发布有关提交的数据。

经过多次谷歌搜索以及Stack Overflow用户的一脚踢,他提醒我我需要实际上研究超过20分钟(谢谢!),我能够解决这个问题。

我将在下面将答案发给遇到类似问题的其他人。

1 个答案:

答案 0 :(得分:0)

为解决此问题,我使用JavaScript来抓取所选行。为了有效地获取正确的记录,我将每个TD元素更新为具有唯一的,动态生成的ID:

<?php echo "<td class='fit' id='fname-" . $r['customer_id'] ."'>" . $r['first_name'] . "</td>"; ?>
<?php echo "<td class='fit' id='lname-" . $r['customer_id'] ."'>" . $r['last_name'] . "</td>"; ?>
<?php echo "<td class='fit' id='planet-" . $r['customer_id'] ."'>" . $r['origin_planet'] . "</td>"; ?>

我还给了表主体一个ID,这样我就可以迅速抓住它,而不必抓住父母,然后再抓住孩子,等等。

<tbody id="results-body">

最后,这是JavaScript。

function getSelectedRowData() {             
    const tableRowArray = Array.from([document.getElementById('results-body')][0].rows);

    let custFirst;
    let custLast;
    let custPlanet;

    tableRowArray.forEach((tableRow, i) => {                
        cellButton = tableRow.getElementsByTagName('input');
        if (cellButton[0].checked == true ) {                                                          
            const rowID = cellButton[0].id.split('-').pop();
            custFirst = document.getElementById('fname-' + rowID).innerHTML;
            custLast = document.getElementById('lname-' + rowID).innerHTML;
            custPlanet = document.getElementById('planet-' + rowID).innerHTML;
        }
    });

    /* Build a hidden form solution to prep for post.
       Source: https://stackoverflow.com/questions/26133808/javascript-post-to-php-page */
    let hiddenForm = document.createElement('form');

    hiddenForm.setAttribute('method', 'post');
    hiddenForm.setAttribute('action', 'newpage.php');
    hiddenForm.setAttribute('target', 'view');

    const fieldCustFirst = document.createElement('input');
    const fieldCustLast = document.createElement('input');
    const fieldCustPlanet = document.createElement('input');

    fieldCustFirst.setAttribute('type', 'hidden');
    fieldCustFirst.setAttribute('name', 'custFirst');
    fieldCustFirst.setAttribute('value', custFirst);

    fieldCustLast.setAttribute('type', 'hidden');
    fieldCustLast.setAttribute('name', 'custLast');
    fieldCustLast.setAttribute('value', custLast);

    fieldCustPlanet.setAttribute('type', 'hidden');
    fieldCustPlanet.setAttribute('name', 'custPlanet');
    fieldCustPlanet.setAttribute('value', custPlanet);

    hiddenForm.appendChild(fieldCustFirst);
    hiddenForm.appendChild(fieldCustLast);
    hiddenForm.appendChild(fieldCustPlanet);

    document.body.appendChild(hiddenForm);

    // Post
    window.open('', 'view');
    hiddenForm.submit();
} 

这对我有用,但是我敢肯定有更好的方法可以做到这一点。希望这(1)可以帮助其他人,并且(2)可以发布更好的解决方案!

这是一个有效的演示:https://postfrompost.paulmiller3000.com/

此处提供完整资料:https://github.com/paulmiller3000/post-selected-from-post