WCVI
WCVI

Reputation: 1

Make a plain HTML Submit button active again through javascript of jquery

So I run a test website and have come across a unique issue. I have tests that will reload with a event.preventDefault(); so the page they are on does not reload, but the test question does. Everything has been going great, but recently I have found that I need to move the submit button (that up until this point has been reloaded with the question).

The submit button now needs to be listening for the form to be submitted even after a question is submitted, the questions and answers section is reloaded, and replaced with a new question. Now here is the issue, the submit button will now be part of the page that doesn't reload, while the form and the questions/answers will be reloaded every time the submit button is pressed.

Here is the current form handler:

$(document).ready(function () {
  $(document).on("submit", "#quiz", function (event) {

    console.log("Custom submit")

    event.preventDefault(); //prevent default action
    var post_url = $(this).attr("action"); //get form action url
    var form_data = $(this).serialize(); //Encode form elements for submission
    $.post(post_url, form_data, function (response) {

      console.log(response)
      $("#prntqst").html(response);
    });
  });
});

Here is an example of the form:

<form id="quiz" action="someform.php" method="post" onsubmit="event.preventDefault();">
          <input type="hidden" id="next_question" name="next_question" value="2">
          <input type="hidden" id="quiz_type" name="quiz_type" value="learning">
          <input type="hidden" id="quiz_name" name="quiz_name" value="test">

<label class="container" for="a">Ans A.
  <input type="radio" name="answers[1]" id="a" value="a">
  <span class="checkmark"></span>
</label>

<label class="container" for="b">Ans B.
  <input type="radio" name="answers[1]" id="b" value="b">
  <span class="checkmark"></span>
</label>
            

<label class="container" for="c">Ans C.
  <input type="radio" name="answers[1]" id="c" value="c">
  <span class="checkmark"></span>
</label>

The submit button is fairly plain:

    <div class="subbtn_contain">
        <div class="submitbtn">
              <input id="submit" type="submit" class="button" value="Next Question">
        </div>
     </div>
  </form>

Is it even possible to have the reloaded section submitted off of a button that has already fired and was not reloaded? I have tried to unbind it, set the default to false even after a timer it won't submit the second question. I figure it is no longer listening for the second plus sumbit, and has to be reset to accept the click.

I am sure I am missing something.

Thanks for your time.

Here is the full return of the ajax call right now:

<div id="prntqst">
<font class="prntqst-text">Question?</font>

<form id="quiz" action="someform.php" method="post" onsubmit="event.preventDefault();">

<input type="hidden" id="next_question" name="next_question" value="2">
<input type="hidden" id="quiz_type" name="quiz_type" value="learning">
<input type="hidden" id="quiz_name" name="quiz_name" value="test">

<label class="container" for="a">Ans A.
  <input type="radio" name="answers[1]" id="a" value="a">
  <span class="checkmark"></span>
</label>

<label class="container" for="b">Ans B.
  <input type="radio" name="answers[1]" id="b" value="b">
  <span class="checkmark"></span>
</label>
            

<label class="container" for="c">Ans C.
  <input type="radio" name="answers[1]" id="c" value="c">
  <span class="checkmark"></span>
</label>

<div class="subbtn_contain">
<div class="submitbtn">
  <input id="submit" type="submit" class="button" value="Next Question">
</div>
</div>

<script>
$(document).ready(function () {
  $(document).on("submit", "#quiz", function (event) {

    console.log("Custom submit")

    event.preventDefault(); //prevent default action
    var post_url = $(this).attr("action"); //get form action url
    var form_data = $(this).serialize(); //Encode form elements for submission
    $.post(post_url, form_data, function (response) {

      console.log(response)
      $("#prntqst").html(response);
    });
  });
});
</script>

</form>
</div>

Upvotes: 0

Views: 62

Answers (0)

Related Questions