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

"Utilizing jQuery's getJSON method in a session to fetch data

Retrieve all attributes of an element with the help of jQuery

Issues arise with Highcharts Sankey chart failing to display all data when the font size for the series is increased

Extracting Data from JSON Using Vue.js

Convert TypeScript-specific statements into standard JavaScript code

Issues with ontimeupdate event not triggering in Chrome for HTML5 audio files

Using innerHTML in React to remove child nodes Tutorial

`Misconceptions in understanding AngularJS directives`

What is the safest way to convert a local file path to a file:// URL in Node.js?

The Bootstrap modal simply fades away without ever making an appearance

What is the best way to correctly render several React components using a single index.js file?

Issue Encountered While Deploying Next JS Application Utilizing Dynamic Routing

Sending data with React using POST request

PWA JavaScript struggling with GPS geolocation coordinates

Troubleshooting the Hover Effect of Buttons in Next.js when Using Tailwind CSS for Dynamic Color Changes

A guide to update values in mongodb using node.js

Converting XML hierarchy into a flat HTML table using XSLT

With every item retrieved by

Ways to retrieve the mapState property within a method

The Vue.JS application encountered an error while making an API request, resulting in an uncaught TypeError: Cannot read properties of undefined related to the 'quote'