Jquery Question posted in
The official Jquery Api Documentation can be found here.

SET text property of a span element in jQuery

On post request, this code checks if the date input field given on a form contains today’s date. If so, the span element placed next to the date input field must display an error message. My work is as following

$('.submit-btn').click(function() {
  var d = new Date();
  var month = d.getMonth();
  var month_actual = month + 1;
  if (month_actual < 10) {
    month_actual = "0" + month_actual;
  }
  var day_val = d.getDate();
  if (day_val < 10) {
    day_val = "0" + day_val;
  }
  if ($('input[type="date"]').val() == d.getFullYear() + "-" + month_actual + "-" + day_val) {
    var inputValue = $(this).attr("name");
    $('.text-danger-' + inputValue).text("This date is incorrect");
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<input asp-for="@Model.DateOfBirth" class="form-control" type="date" name="inputDateOfBirth" />
<span class="text-danger-inputDateOfBirth"></span>
<button class="submit-btn">Submit</button>

span is not showing the error-message text (This date is incorrect).

Tags:

3

Answers


  1. 0

    In this code

    $(this).attr("name");

    this is pointing to the button – which doesn’t have a name – not the input (which you wanted).

    So

    $('.text-danger-' + inputValue)

    will actually be

    $('.text-danger-')

    which won’t find an element, thus it cannot set the text.

    Had you not used jQuery you’d have found an error in the console helping you, namely cannot access property "text" of null.

    Login or Signup to reply.
  2. 0

    this in the context where you used it was the button and it had no name. Fixed version:

    $('.submit-btn').click(function() {
  var d = new Date();
  var month = d.getMonth();
  var month_actual = month + 1;
  if (month_actual < 10) {
    month_actual = "0" + month_actual;
  }
  var day_val = d.getDate();
  if (day_val < 10) {
    day_val = "0" + day_val;
  }
  let myDate = $('input[type=date]');
  var inputValue = myDate.attr("name");
  if (myDate.val() == (d.getFullYear() + "-" + month_actual + "-" + day_val)) {
    $('.text-danger-' + inputValue).text("This date is incorrect");
  } else {
    $('.text-danger-' + inputValue).text("");
  }
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<input asp-for="@Model.DateOfBirth" class="form-control" type="date" name="inputDateOfBirth" />
<span class="text-danger-inputDateOfBirth"></span>
<button class="submit-btn">Submit</button>
    Login or Signup to reply.
  3. 0

    I am not entirely sure what you wanted to achieve with your snippet, but you used the wrong this inside your function, as it will point to the button element and not the input element with the value inside. Your addressing mechanism involving the name attribute and creating a class name out of it seems overly complicated. The snippet below addresses the elements n a relative way through the jQuery .prev() method:

    $('.submit-btn').click(function() {
  const d=new Date(), $span=$(this).prev("span");
  $span.text($span.prev("input").val()==(d.getFullYear()+"-"+String(d.getMonth()+1).padStart(2,"0")
    +"-"+String(d.getDate()).padStart(2,"0"))?"The date is right":"You got the wrong date!")
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<input asp-for="@Model.DateOfBirth" class="form-control" type="date">
<span></span>
<button class="submit-btn">Submit</button><br>
<input asp-for="@Model.somethingElse" class="form-control" type="date">
<span></span>
<button class="submit-btn">Submit</button>

    (( The above snippet contains two groups of input and button elements to demonstrate the relative DOM element selection with $(this).prev(). ))

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search