將輸入類型“按鈕”更改為“提交按鈕”以驗證php表單

Question

我需要改變的幫助

    <input type="button"> 

至

    <input type="submit"> 

所以我可以通過使用

    if(isset($name_of_submit_button)){
        if(!empty($_POST['input_text_name'])){
          /* code that will go to the next radio button */
      }}

我嘗試轉換它，但問題是，每當我將其更改為提交按鈕時，下一個按鈕的結果都會出現故障，並且不會轉到下一個單選按鈕。

這是我形式的形象

我希望該div的下一個按鈕成為“提交”按鈕，以便我可以驗證div的輸入框，這就是我想做的事情：

1. 如果不是所有字段都填充有數據，它將不會轉到下一個單選按鈕。
2. 如果所有字段都填充了數據，則可以轉到下一個單選按鈕。

這些是我的代碼：

HTML *注：我僅在此處使用了兩個單選按鈕以縮短代碼

<form action="reservation_next_sample.php" method="POST">
<input type="radio" name="next[]" value="1" checked="checked">
<input type="radio" name="next[]" value="2" />

<div id="next1" class="desc">   
        <div class="div-details">
            <h4>Event's Detail</h4>

                <table>
                    <tr>
                        <td>
                            Street
                        </td>
                        <td>
                            <input type="text" name="event_street">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Barangay
                        </td>
                        <td>
                            <input type="text" name="event_brgy">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Town/City
                        </td>
                        <td>
                            <input type="text" name="event_town_city">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Province
                        </td>
                        <td>
                            <input type="text" name="event_province">
                        </td>
                    </tr>

                </table>
                <br>
        <button type="button" onclick="dayNavigation('next');" data-role="none" class="slick-prev" aria-label="Next" tabindex="0" role="button">Next</button>                       
            </div>

   <div id="next2" class="desc" style="display: none;">
   <p> inside of next 2 </p>   
   <button type="button" onclick="dayNavigation('prev');" data-role="none" class="slick-next" aria-label="Previous" tabindex="0" role="button">Previous</button>
   <button type="button" onclick="dayNavigation('next');" data-role="none" class="slick-prev" aria-label="Next" tabindex="0" role="button">Next</button>
    </div>
</form>

JAVASCRIPT *注：此代碼是下一個和上一個按鈕，當選中其單選按鈕時，顯示和隱藏div。

        <script>
        $(document).ready(function() {
        $("input[name$='next[]']").click(function() {
          var test = $(this).val();

          $("div.desc").hide();
          $("#next" + test).show();
          });
        });

         //this is in the bla bla next and previous -->
         var index = 0;
         dayNavigation = function(direction) {
         var curr = $('input[name="next[]"]:checked');

         if (direction == 'next') {

         curr.next().attr("checked", "checked");
         curr.next().click();

        } else {
          curr.prev().attr("checked", "checked");
          curr.prev().click();
        }

        };
        </script>

我沒有PHP代碼，因為我還不能將其轉換為Submit按鈕

Answer 1

因為這是一個多步驟的表單，所以我建議在呈現下一部分之前向每個零件提交數據庫以確保數據安全。 然后，您不必擔心顯示單選按鈕（使用那些按鈕，其他人也可以輕松跳到下一部分）。

一種替代方法是將數據傳遞到下一部分，並繼續對每個部分進行操作。 然后進行一次大表單提交。 設置時間較長，但並不困難。 您甚至可以將表單提交給自己。 這是個主意（我沒有時間來全部構建或測試它。）

 <?php


// $page is the page number after the one just submitted
// ?? or null coalesce operator defaults answer to '' if nothing is found (you can change this, but it shouldn't matter because of your validation)

$postURL = 'formPage.php?';

switch ($page) {

    case 5:
        $data4 = $_POST['data4'] ?? '';
        $data5 = $_POST['data5'] ?? '';
        $postURL .= 'data4=' . $data4;
        $postURL .= 'data5=' . $data5;

    case 4:
        $data2 = $_POST['data2'] ?? '';
        $data3 = $_POST['data3'] ?? '';
        $postURL .= 'data2=' . $data2;
        $postURL .= 'data3=' . $data3;

    case 3:
        $data1 = $_POST['data1'] ?? '';
        $postURL .= 'data1=' . $data1;

    case 2:
        $event = $_POST['event'] ?? '';
        $date = $_POST['date'] ?? '';
        $postURL .= 'event=' . $event;
        $postURL .= 'date=' . $date;

        break;
}

// if it's the last page, use all of these values to submit to database



// put html into correct sections instead of blank strings

switch ($page) {

    case 1:  $pageHTML = '';  break;
    case 2:  $pageHTML = '';  break;
    case 3:  $pageHTML = '';  break;
    case 4:  $pageHTML = '';  break;
    case 5:  $pageHTML = '';  break;
}


// php to render page (could also use switch statement..)
// on the form action, set the found params after the post url

?>

<html>
<form action="<?php echo $postURL ?>">
        <!-- Render form html -->
    <?php echo $pageHTML ?>
</form>
</html>

Answer 2

您可以嘗試此操作，只需修改適用於您的應用的內容即可。

 $(document).ready(function() { var prevStep = curStep = $('input.step-progress:checked'); $("input.step-progress").click(function(e) { var step = $(this).val(); // validate forms var canSkip = true; if (step > prevStep.val()) { for (var x = prevStep.val(); x < step; x++) { var form = $('.step-form#next' + x); var emptyInputs = form.find('input').filter(function() { return !this.value; }); if (emptyInputs.length > 0) { canSkip = false; break; } } } if (!canSkip) { e.preventDefault(); e.stopPropagation(); return false; } $('.step-form#next' + prevStep.val()).hide(); $(".step-form#next" + step).show(); prevStep = curStep = $(this); }); }); var dayNavigation = function(direction) { if (direction == 'next') { curStep.next().click(); } else { curStep.prev().click(); } }; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="reservation_next_sample.php" method="POST"> <input class="step-progress" type="radio" name="next[]" value="1" checked="checked"> <input class="step-progress" type="radio" name="next[]" value="2" /> <input class="step-progress" type="radio" name="next[]" value="3" /> <div id="next1" class="desc step-form"> <div class="div-details"> <h4>Event's Detail</h4> <table> <tr> <td> Street </td> <td> <input type="text" name="event_street"> </td> </tr> <tr> <td> Barangay </td> <td> <input type="text" name="event_brgy"> </td> </tr> <tr> <td> Town/City </td> <td> <input type="text" name="event_town_city"> </td> </tr> <tr> <td> Province </td> <td> <input type="text" name="event_province"> </td> </tr> </table> <br> </div> <div class="step-buttons"> <button type="button" onclick="dayNavigation('next');" data-role="none" class="slick-prev" aria-label="Next" tabindex="0" role="button">Next</button> </div> </div> <div id="next2" class="step-form desc" style="display: none;"> <p> inside of next 2 </p> <input> <br/> <button type="button" onclick="dayNavigation('prev');" data-role="none" class="slick-next" aria-label="Previous" tabindex="0" role="button">Previous</button> <button type="button" onclick="dayNavigation('next');" data-role="none" class="slick-prev" aria-label="Next" tabindex="0" role="button">Next</button> </div> <div id="next3" class="step-form desc" style="display: none;"> <p> inside of next 3 </p> <button type="button" onclick="dayNavigation('prev');" data-role="none" class="slick-next" aria-label="Previous" tabindex="0" role="button">Previous</button> <button type="button" onclick="dayNavigation('next');" data-role="none" class="slick-prev" aria-label="Next" tabindex="0" role="button">Next</button> </div> </form>