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:

It won't go to the next radio button if not all fields are filled with data.
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

Are you wanting the last 'page' to say submit instead of next? Is that your question? — parker_codes
– parker_codes, Commented Jul 24, 2017 at 3:08
no, I wanted the next button to be a submit button so I can validate my form's input boxes. — Zeunee Lo
– Zeunee Lo, Commented Jul 24, 2017 at 3:11
for example, the picture above. The next button won't go to the next radio button until all fields are filled in that div. — Zeunee Lo
– Zeunee Lo, Commented Jul 24, 2017 at 3:12
if next is clicked and fields are filled with data, then it can go to the next radio button. — Zeunee Lo
– Zeunee Lo, Commented Jul 24, 2017 at 3:13

parker_codes · Accepted Answer · 2017-07-24 03:57:34Z

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>

I know that there may be things wrong with this, but it's the idea that counts.

elegisandi · Accepted Answer · 2017-07-24 07:56:01Z

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>

While I think this is a great solution, the issue with it is that it can easily be changed/hacked just using the console. There's no back-end validation.
@GoogleMac yea, there should be a back end validation for forms like this or any other form submitted. I just didn't add it, i only gave what the asker wanted :)
It's alright, I have my backend solution to this, Thanks guys!

Collectives™ on Stack Overflow

Changing input type "Button" to "Submit Button" to validate php form

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related