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

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')
            })
        })
   }

    

    
})

CodePudding user response：

You need to change button type attribute to submit like this:

<button type="submit">Submit</button>

See this.

CodePudding user response：

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="[email protected]"  />
    <button id="nextBtn">Next</button>
  </div>
  <div id="tabs-2">
    User: <span id="showUser" ></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.