How jQuery stops the submission of a form

Question

How jQuery stops the submission of a form

Sample HTML Code

<p><select name="status" class="form-control" id="showThisItem">
    <option value="">
        Select Status
    </option>
    <option value="Paid">
        Paid
    </option>
    <option value="Unpaid">
        Unpaid
    </option>
</select></p>

<td id="showHide">
    <label>Due Date</label>
    <input type="text" name="due_date" class="form-control" data-date-format="mm/dd/yy" id="datepicker" required="true"> 
</td>

JavaScript Function for jQuery

$('#showHide').hide(500);
var showThis = $('#showThisItem');
var select = this.value;
showThis.change(function () {
    if ($(this).val() == 'Unpaid') {
        $('#showHide').show(500);
    }
    else {
        $('#showHide').hide(500);
    }
});

The code above is used to toggle the visibility of a td element. When "Paid" is selected, the td is hidden, and when "Unpaid" is selected, the td is displayed. It starts off hidden initially on page load.

However, there seems to be an issue where submitting the form works when "Unpaid" is selected, but not when "Paid" is selected.

javascript jquery html css

Answer 1

Answer №1

Your entry must be marked as mandatory:

<input type="text" name="due_date" class="form-control" data-date-format="mm/dd/yy" id="datepicker" required="true">

If it is always required regardless of selection, the form will not validate and cannot be submitted. To make it required only when Unpaid is chosen, you may want to consider using jQuery to dynamically set that attribute.

Here is an example:

<script>
 $('#showHide').hide(500);
  var showThis = $('#showThisItem');
  var select = this.value;
  showThis.change(function () {
    if ($(this).val() == 'Unpaid') {
        $('#showHide').show(500).find('input').prop('required',true);
    }
    else {
      $('#showHide').hide(500).find('input').prop('required',false);;
    }
});
</script>

Answer 2

Your entry must be marked as mandatory:

<input type="text" name="due_date" class="form-control" data-date-format="mm/dd/yy" id="datepicker" required="true">

If it is always required regardless of selection, the form will not validate and cannot be submitted. To make it required only when Unpaid is chosen, you may want to consider using jQuery to dynamically set that attribute.

Here is an example:

<script>
 $('#showHide').hide(500);
  var showThis = $('#showThisItem');
  var select = this.value;
  showThis.change(function () {
    if ($(this).val() == 'Unpaid') {
        $('#showHide').show(500).find('input').prop('required',true);
    }
    else {
      $('#showHide').hide(500).find('input').prop('required',false);;
    }
});
</script>

Answer 3

Answer №2

It's possible that this information might be helpful to you, although I'm uncertain if it directly addresses your query. In the future, consider clarifying your question for better assistance.

I wasn't certain if you required the date field to be mandatory at all times or only under the condition of marking it as paid.

$(document).ready(function() {
  
  $('#showHide').hide();
  // Event binding should be within a document ready function 
  // This ensures that the binding occurs after the elements are loaded

  $('#showThisItem').change(function(e) {
    // Binds a change event to the select element
    console.log('VALUE: ' + $(this).val())
    if ($(this).val() == 'Unpaid') {
      $('#datepicker').prop("disabled", true);
      
      $('#showHide').hide(500);
    } else {
      $('#datepicker').prop("disabled", false);
      $('#showHide').show(500);
    }

  });

  $('.submit').click(function(){
    var data = $('#paidForm').serialize();
    console.log(data);
  });
  

});

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<form id="paidForm">
  <table>
    <tr>
      <td>
        <select name="status" class="form-control" id="showThisItem">
          <option value="">
            Select Status
          </option>
          <option value="Paid">
            Paid
          </option>
          <option value="Unpaid">
            Unpaid
          </option>
        </select>
      </td>
    </tr>
    <tr>
      <td id="showHide">
        <label>Due Date</label>
        <input type="Date" name="due_date" class="form-control" data-date-format="mm/dd/yy" id="datepicker" required='required' disabled='disabled'>
      </td>
    </tr>
    <tr>
      <td>
        <button class='submit' type="submit" class="btn btn-default">Submit</button>
        <td>
    </tr>
  </table>
</form>

Answer 4

It's possible that this information might be helpful to you, although I'm uncertain if it directly addresses your query. In the future, consider clarifying your question for better assistance.

I wasn't certain if you required the date field to be mandatory at all times or only under the condition of marking it as paid.

$(document).ready(function() {
  
  $('#showHide').hide();
  // Event binding should be within a document ready function 
  // This ensures that the binding occurs after the elements are loaded

  $('#showThisItem').change(function(e) {
    // Binds a change event to the select element
    console.log('VALUE: ' + $(this).val())
    if ($(this).val() == 'Unpaid') {
      $('#datepicker').prop("disabled", true);
      
      $('#showHide').hide(500);
    } else {
      $('#datepicker').prop("disabled", false);
      $('#showHide').show(500);
    }

  });

  $('.submit').click(function(){
    var data = $('#paidForm').serialize();
    console.log(data);
  });
  

});

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<form id="paidForm">
  <table>
    <tr>
      <td>
        <select name="status" class="form-control" id="showThisItem">
          <option value="">
            Select Status
          </option>
          <option value="Paid">
            Paid
          </option>
          <option value="Unpaid">
            Unpaid
          </option>
        </select>
      </td>
    </tr>
    <tr>
      <td id="showHide">
        <label>Due Date</label>
        <input type="Date" name="due_date" class="form-control" data-date-format="mm/dd/yy" id="datepicker" required='required' disabled='disabled'>
      </td>
    </tr>
    <tr>
      <td>
        <button class='submit' type="submit" class="btn btn-default">Submit</button>
        <td>
    </tr>
  </table>
</form>

Answer 5

Answer №3

The reason is due to the fact that the due_date input field contains the required attribute.

When adjusting the visibility, it's important to also handle this toggling:

showThis.change(function () {
    if ($(this).val() == 'Unpaid') {
        $('#showHide').show(500);
        $('#showHide :input').prop('required', true);
    }
    else {
        $('#showHide').hide(500);
        $('#showHide :input').prop('required', false);
    }
});

Answer 6

The reason is due to the fact that the due_date input field contains the required attribute.

When adjusting the visibility, it's important to also handle this toggling:

showThis.change(function () {
    if ($(this).val() == 'Unpaid') {
        $('#showHide').show(500);
        $('#showHide :input').prop('required', true);
    }
    else {
        $('#showHide').hide(500);
        $('#showHide :input').prop('required', false);
    }
});

How jQuery stops the submission of a form

Sample HTML Code

JavaScript Function for jQuery

Answer №1

Answer №2

Answer №3

Similar questions

Issue: Incorrect parameters for executing the MySQL statement

"Owlcarousel Slider: A beautiful way to showcase

Transfer the controller of the parent directive to a directive controller, similar to how it is executed in the "link" function

The problem with utilizing the Node `util.inherits` method

"Viewed By" aspect of Facebook communities

When a child of a flex-item does not inherit the height of its parent in a flex container with a column direction and flex-basis set

Inspecting JavaScript for any attachments

Can you explain the sequence of steps involved in setting up a server in node.js?

What is the default delay when utilizing the $timeout function in AngularJS?

Manipulate text with jQuery

Is it common practice to provide a callback function as a parameter for an asynchronous function and then wrap it again?

Ending a timed function in AngularJS 1

Tips for revealing a link after the user clicks on the submit button

Ensure the initial value in the dropdown menu is automatically set to the first value in VueJs

Preserve Chinese characters using Spring-MVC in Java

Where is the best place to import Bootstrap in my SCSS file when customizing it with Sass?

Utilizing $asyncValidators in angularjs to implement error messages in the HTML: A guide

Traversing through JSON main sections, checking for operation and subsequently retrieving data

Is there a way to attach a mouseover event to a Vue ref element in Javascript?

Customize Material UI components by incorporating SASS classes