Changing input type “Button” to “Submit Button” to validate php form

Question

I need help in changing

    <input type="button"> 

to

    <input type="submit"> 

so I can validate my form easily by using

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

I tried converting it but the problem is that whenever I change it to submit button, the next button result's glitches and doesn't go to the next radio button.

this is the image of my form

I wanted this div's next button to be a submit button so I can validate the div's input boxes, these are what I wanted to happen:

1. It won't go to the next radio button if not all fields are filled with data.
2. If all fields are filled with data, it can proceed to the next radio button.

these are my codes:

HTML *note: I used only two radio buttons here to shorten the code

<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 *note: this code is the next and prev button that shows and hide div when their radio button is checked.

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

I don't have PHP code since I couldn't convert it to Submit button yet

Answer 1

Because this is a multi-step form, I suggest submitting to a database on each part to keep the data secure before rendering the next part. Then you don't need to worry about displaying radio buttons (also with those, someone could easily skip to the next section).

An alternative is to pass the data to the next part and keep doing that for each part. Then do one big form submission. This takes longer to set up, but is not difficult. You could even have the form submit to itself. Here is the idea (I don't have time to build it all or test it..)

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

You can try this, just modify whatever that's applicable to your app.

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