将输入类型“按钮”更改为“提交按钮”以验证 php 表单

Posted 2023-05-09

【中文标题】将输入类型“按钮”更改为“提交按钮”以验证 php 表单

【英文标题】：Changing input type "Button" to "Submit Button" to validate php form

【发布时间】：2017-12-29 12:41:06

【问题描述】：

我需要帮助来改变

    <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 的输入框，这些是我想要发生的：

如果不是所有字段都填充了数据，它将不会转到下一个单选按钮。 如果所有字段都填写了数据，则可以进入下一个单选按钮。

这些是我的代码：

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 代码，因为我还不能将其转换为提交按钮

【问题讨论】：

您是否希望最后一个“页面”显示提交而不是下一个？这是你的问题吗？

不，我希望下一个按钮成为提交按钮，以便验证表单的输入框。

但只有最后一个，对吧？

例如上图。在该 div 中填写所有字段之前，下一个按钮不会转到下一个单选按钮。

如果点击下一个并且字段填充了数据，那么它可以转到下一个单选按钮。

【参考方案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>

【讨论】：

我知道这可能有问题，但重要的是想法。

【参考方案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>

【讨论】：

哇，这非常有效！谢谢:)

虽然我认为这是一个很好的解决方案，但它的问题是它可以很容易地使用控制台进行更改/破解。没有后端验证。

@GoogleMac 是的，应该对此类表单或提交的任何其他表单进行后端验证。我只是没有添加它，我只给出了提问者想要的内容:)

没关系，我有后端解决方案，谢谢大家！