Allow the submission button to be activated only when both the FromDate and ToDate have been

Question

Allow the submission button to be activated only when both the FromDate and ToDate have been

I am looking to activate the submit button once both the FromDate and ToDate fields are selected.

In my scenario, all form fields must be filled out in order to enable the submit button.

 $('#myform > input').on('input', function() {
   var empty = false;
   $('form > input, form > select').each(function() {
     if ($(this).val() == '') {
       empty = true;
     }
   });

   if (empty) {
     $('#register').attr('disabled', 'disabled');
   } else {
     $('#register').removeAttr('disabled');
   }
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
  Name
  <input type="text" id="" name="name" />
  <br/>
  <br/>From Date
  <input type="date" name="fdate" />
  <br/>
  <br/>To Date
  <input type="date" name="fdate" />
  <br/>
  <br/>

  <input type="submit" id="register" value="Register" disabled="disabled" />
</form>

My goal is to have the submit button enabled only when both the FromDate and ToDate fields are selected.

javascript jquery html css

Answer 1

Answer №1

$('#myform > input').on('input', function () {
        var empty = false;
        $('form > input[type=date], form > select').each(function () {
            if ($(this).val() == '') {
                empty = true;
            }
        });
        if (empty) {
            $('#register').attr('disabled', 'disabled');
        } else {
            $('#register').removeAttr('disabled');
        }
    });

<form id="myform">
Name
<input type="text" id="" name="name" /><br/><br/>

From Date
<input type="date"  name="fdate1" /><br/><br/>
To Date
<input type="date"  name="fdate2" /><br/><br/>

<input type="submit" id="register" value="Register" disabled="disabled" />
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>></script>

This solution works perfectly ;), your implementation was commendable, though just keep in mind that $("form > input") will validate all input fields including dates and names ;)

Answer 2

$('#myform > input').on('input', function () {
        var empty = false;
        $('form > input[type=date], form > select').each(function () {
            if ($(this).val() == '') {
                empty = true;
            }
        });
        if (empty) {
            $('#register').attr('disabled', 'disabled');
        } else {
            $('#register').removeAttr('disabled');
        }
    });

<form id="myform">
Name
<input type="text" id="" name="name" /><br/><br/>

From Date
<input type="date"  name="fdate1" /><br/><br/>
To Date
<input type="date"  name="fdate2" /><br/><br/>

<input type="submit" id="register" value="Register" disabled="disabled" />
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>></script>

This solution works perfectly ;), your implementation was commendable, though just keep in mind that $("form > input") will validate all input fields including dates and names ;)

Answer 3

Answer №2

To ensure that the submit button is disabled whenever the user provides input or modifies the date fields, you can implement the following script:

var $formInputsDate = $('#myform > input[type="date"]'),
    $submit = $('#register');

$formInputsDate.on('input change', function () {
  var isEmpty = false;
  $formInputsDate.each(function () {
    $(this).val() === '' && (isEmpty = true);
  });
  return isEmpty ? $submit.attr('disabled', 'disabled') : $submit.removeAttr('disabled');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="myform">
  Name
  <input type="text" id="" name="name"><br><br>

  From Date
  <input type="date"  name="fdate1"><br><br>

  To Date
  <input type="date"  name="fdate2"><br><br>

  <input type="submit" id="register" value="Register" disabled="disabled">
</form>

Remember, you can apply the event handler function to all form inputs using $('#myform > input').

Answer 4

To ensure that the submit button is disabled whenever the user provides input or modifies the date fields, you can implement the following script:

var $formInputsDate = $('#myform > input[type="date"]'),
    $submit = $('#register');

$formInputsDate.on('input change', function () {
  var isEmpty = false;
  $formInputsDate.each(function () {
    $(this).val() === '' && (isEmpty = true);
  });
  return isEmpty ? $submit.attr('disabled', 'disabled') : $submit.removeAttr('disabled');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="myform">
  Name
  <input type="text" id="" name="name"><br><br>

  From Date
  <input type="date"  name="fdate1"><br><br>

  To Date
  <input type="date"  name="fdate2"><br><br>

  <input type="submit" id="register" value="Register" disabled="disabled">
</form>

Remember, you can apply the event handler function to all form inputs using $('#myform > input').

Answer 5

Answer №3

Here is a solution using the submit event:

$('#myform').on('submit', function () {
    var empty = false;
    $('form > input, form > select').each(function () {
        if ($(this).val() == '') {
            empty = true;
        }
    });
    if (empty) {
        return false;
    }
});

Additionally, make sure to remove the disabled attribute from the registration button:

<input type="submit" id="register" value="Register"/>

Answer 6

Here is a solution using the submit event:

$('#myform').on('submit', function () {
    var empty = false;
    $('form > input, form > select').each(function () {
        if ($(this).val() == '') {
            empty = true;
        }
    });
    if (empty) {
        return false;
    }
});

Additionally, make sure to remove the disabled attribute from the registration button:

<input type="submit" id="register" value="Register"/>

Allow the submission button to be activated only when both the FromDate and ToDate have been

Answer №1

Answer №2

Answer №3

Similar questions

Is your Firebase Google sign-in popup window flashing and not successfully signing in while using Vue.js?

The check is ineffective: if (isset ($_PHP["form_name"]))

Image is positioned absolutely and appears when the parent element is flipped

Show a directional indicator on hover in the date selection tool

jQuery: Issue Encountered with POST Request when Offline (iOS & Chrome)

What is the best method for incorporating a JavaScript redirect into an Android WebView?

`How to implement a dark mode feature in Tailwind CSS with Next.js and styled-jsx`

Shift all content to the right when viewing on mobile devices

Refresh dynamically generated list item (produced through PHP) following ajax request

I keep receiving an error in Angular JS but I'm unsure of the reason

AJAX Response Type in ASHX Handler

javascript/jquery - steps to design an effective modal page overlay

Is there a way to attach a canvas image to an email using VB.NET?

The popover displays the text "[object Object]" when triggered by an ajax event

When the CKEDITOR is set to fullPage mode, it cannot properly apply styles from an external stylesheet that is configured in the config.contentscss setting

Using HTTP POST to subscribe and implementing a try-catch block

What is the method for acquiring the final shape of a particular type?

Issues with Firebase-admin preventing writing to the database are occurring without any error messages being displayed

Utilizing jQuery to confine the function's scope solely to the specified element

What is the recommended method for establishing synchronous communication between the client and server during calls?