Javascript 更改输入类型（&Q）；按钮“；至；“提交”按钮；验证php表单的步骤

我需要帮忙换衣服

    <input type="button"> 

我尝试转换它，但问题是，每当我将其更改为“提交”按钮时，“下一个”按钮的结果就会出现故障，无法转到“下一个”单选按钮

这是我表格的图像

我希望这个div的next按钮是一个submit按钮，这样我就可以验证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>

活动详情
街头
巴郎涯
城镇
省


下一个
下一个2的内部

以前的
下一个

JAVASCRIPT *注意：此代码是选中单选按钮时显示和隐藏div的next和prev按钮

        <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>

$（文档）.ready（函数（）{
$（“输入[name$='next[]']”）。单击（函数（）{
var test=$（this.val（）；
$（“div.desc”）.hide（）；
$（“#下一步”+测试）.show（）；
});
});
//这在bla bla下一个和上一个-->
var指数=0；
dayNavigation=功能（方向）{
var curr=$（'input[name=“next[]”：checked'）；
如果（方向==“下一步”）{
curr.next（）.attr（“选中”、“选中”）；
当前下一步（）。单击（）；
}否则{
curr.prev（）.attr（“checked”、“checked”）；
当前版本（）。单击（）；
}
};

---

我没有PHP代码，因为我还不能将其转换为Submit按钮，因为这是一个多步骤表单，我建议在渲染下一个部分之前，提交到每个部分的数据库以确保数据的安全。这样，您就不必担心显示单选按钮（同样，有人可以轻松地跳到下一节）

另一种方法是将数据传递到下一个部分，并对每个部分继续这样做。然后做一个大表单提交。这需要更长的时间来设置，但并不困难。您甚至可以让表单自行提交。 这是我的想法（我没有时间全部构建或测试）

---

因为这是一个多步骤表单，所以我建议在呈现下一部分之前，提交每个部分的数据库以确保数据的安全。这样，您就不必担心显示单选按钮（同样，有人可以轻松地跳到下一节）

另一种方法是将数据传递到下一个部分，并对每个部分继续这样做。然后做一个大表单提交。这需要更长的时间来设置，但并不困难。您甚至可以让表单自行提交。
这是我的想法（我没有时间全部构建或测试）

您可以试试这个，只需修改任何适用于您的应用程序的内容即可


$（文档）.ready（函数（）{
var prevStep=curStep=$（'input.step progress:checked'）；
$（“input.step progress”）。单击（函数（e）{
var step=$（this.val（）；
//验证表单
var canSkip=true；
如果（步骤>prevStep.val（））{
对于（var x=prevStep.val（）；x0）{
canSkip=false；
打破
}
}
}
如果（！canSkip）{
e、 预防默认值（）；
e、 停止传播（）；
返回false；
}
$（'.step form#next'+prevStep.val（））.hide（）；
$（“.step form#next”+step.show（）；
prevStep=curStep=$（此）；
});
});
var dayNavigation=功能（方向）{
如果（方向==“下一步”）{
curStep.next（）.单击（）；
}否则{
curStep.prev（）。单击（）；
}
};

活动详情
街头
巴郎涯
城镇
省


下一个
下一个2的内部



以前的
下一个
下一个3的内部

以前的
下一个
您可以试试这个，只需修改任何适用于您的应用程序的内容即可


$（文档）.ready（函数（）{
var prevStep=curStep=$（'input.step progress:checked'）；
$（“input.step progress”）。单击（函数（e）{
var step=$（this.val（）；
//验证表单
var canSkip=true；
如果（步骤>prevStep.val（））{
对于（var x=prevStep.val（）；x<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>

        <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


// $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>