how do i convert a next button to a working submit button

Question

so I am trying to build a multiple step form with two tabs, tab has a user name, while tab two has the password, on page load, tab one is visible, if i click the next button, i m hide the tab1 and show tab2 with jquery, but when tab two show, i m finding it difficult converting the next button submit button to enable me submit the form.

tried this

$(function () {
    $('.tab1').show();

    $('#cracc').show();

    $('#nextBtn').on('click', () => {
        /* $('#nextBtn').html('Submit'); */
        $('.tab1').hide();
        $('#cracc').hide();
        $('.tab2').show(() => {
           $('.forgotPass').show(); 
           $('#nextBtn').html('Submit')
          
        })  
       
     })
        
        


   if (('.tab2').show()) {
        $('#nextBtn').attr('type', 'submit')
         $('#nextBtn').on('click', () => {
            $('form').submit(() => {
                alert('submitted')
            })
        })
   }

    

    
})

Do the same as you do with the tabs - render/include both buttons, then show/hide the one(s) you want as needed. Depending on your HTML, you could have the buttons/show automatically via css with no need for an JS. — freedomn-m, Jan 23 '23 at 17:15
Alternatively, within `$('#nextBtn').on('click',` check which tab you're on — freedomn-m, Jan 23 '23 at 17:17
I recommend *against* changing the attributes. It'll probably work, but the seems to be too much risk that it'll end up in the wrong state (eg if you add a back/reset button then don't add the reset code - though same can be said for a non-css (js) hide/show solution) — freedomn-m, Jan 23 '23 at 17:18
I second that. Way better would be to use two different buttons and change their visibility. — Andy, Jan 23 '23 at 17:57
yah, i could use an alternative button, show/hide visibility, but as i believe that i should be possible to use one element while toggling between two attributes ie, the on tab1, the button should be next, and on tab2 it should be a submit button, that actually works. — payiyke, Jan 23 '23 at 18:19
Problem is that your if statement is inside your "ready" function. so basicly you ask at the start if tab2 is show. After that you never check it again — Carsten Løvbo Andersen, Jan 23 '23 at 20:01

score -1 · Answer 1 · answered Jan 23 '23 at 20:58

Here is a jQuery UI example.

$(function() {
  function openTab(i) {
    // Conditionally trigger activation of a tab
    $("#showUser").html($("#user").val());
    if (i == 1) {
      if ($("#user").val() != "") {
        $("#tabs li").eq(i).find("a").click();
      } else {
        return false;
      }
    } else {
      $("#tabs li").eq(i).find("a").click();
    }
  }

  function submitForm(u, p) {
    // Submit Username and Password to a script via AJAX
    $.post("login.php", {
      user: u,
      password: p
    }, function(result) {
      if (result === "success") {
        window.location.href = "portal-entry.php"
      } else {
        openTab(0);
        $("#error").html(result.error);
      }
    })
  }

  $("#tabs").tabs({
    beforeActivate: function(e, ui) {
      // Prevent moving forward without filling in Username
      if ($("#user").val() == "") {
        $("#user").addClass("ui-state-error");
        return false;
      }
      $("#user").removeClass("ui-state-error");
    }
  });

  $("#nextBtn, #submitBtn").button();

  $("#nextBtn").click(function() {
    openTab(1);
  });

  $("#submitBtn").click(function() {
    submitForm($("#user").val(), $("#pass").val());
  })
});

.ui-tabs div[id^='tabs-']>* {
  display: block;
  margin: 10px 0;
}

#user, #pass, #showUser {
  width: 200px;
  padding: 3px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">User Name</a></li>
    <li><a href="#tabs-2">Password</a></li>
  </ul>
  <div id="tabs-1">
    <div id="error">&nbsp;</div>
    <input type="text" id="user" placeholder="john@smith.com" class="ui-widget" />
    <button id="nextBtn">Next</button>
  </div>
  <div id="tabs-2">
    User: <span id="showUser" class="ui-widget ui-widget-content"></span>
    <input type="password" id="pass" />
    <button id="submitBtn">Login</button>
  </div>
</div>

Here you can see how you can change the Tab with a Button click. This uses basic checks to confirm the User has entered some value in the text field.

This example uses AJAX instead of the traditional Form element.

how do i convert a next button to a working submit button

1 Answers1