CODEWITHSUNDEEP
jquery
jeffrey desjardins
jeffrey desjardins

Reputation: 25

How do I update value of input on blur

Trying to figure out why this code auto unfocused when I click it -

the idea is when the url param's action = edit these fields are editable - with what I have at this point I can switch to edit mode, click the title, get the context into the placeholder - problem is when I then click inside the input field to edit it, it goes white and the cursor leaves instantly...

var getUrlParameter = function getUrlParameter(sParam) {
  var sPageURL = window.location.search.substring(1),
    sURLVariables = sPageURL.split('&'),
    sParameterName,
    i;
  for (i = 0; i < sURLVariables.length; i++) {
    sParameterName = sURLVariables[i].split('=');
    if (sParameterName[0] === sParam) {
      return typeof sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
    }
  }
  return false;
};

//fa-clone send to index.php?action=edit
$('.fa-clone').on('click', function(event) {
  window.location.replace("index.php?action=edit");
})

//edit Param
$('.card-title').on('click', function(event) {
  var id = $(this).prop('id');
  var context = $(this).text();
  if (getUrlParameter('action') == 'edit') {
    $(this).html("<input type='text' name='card-edit' placeholder='" + context + "'>");
    // on blur send ajax request
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet">
<div class="col-sm-3">
  <div class="card">
    <div class="card-body">
      <h5 class="card-title" id='.$id.'>'.$title.'</h5>
      <p class="card-text" id='.$id.'>'.$body.'</p>
      <span class="stampDate">'.$timeIn.'</span>
      <div class="row" id="footer">
        <div class="col-sm-3">
          <i id="'.$id.'" class="fa fa-check"></i>
        </div>
        <div class="col-sm-3">
          <i class="fa fa-clone" id='.$id.'></i>
        </div>
        <div class="col-sm-3">
          <i class="fab fa-expeditedssl"></i>
        </div>
        <div class="col-sm-3">
          <i class="fa fa-eye-slash"></i>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 467

Answers (1)

Barmar
Barmar

Reputation: 781096

When you click on the input, the click event bubbles up to the <h5> element, so it replaces the input with another input.

You can check whether the click actually occurred on the <h5> or a nested element, and only perform the action when it's on the <h5>. event.target is the element that was actually clicked on, while event.currentTarget is the element that the handler was bound to.

//edit Param
$('.card-title').on('click', function(event) {
  if (event.target != event.currentTarget) {
    return;
  }
  var id = $(this).prop('id');
  var context = $(this).text();
  if (getUrlParameter('action') == 'edit') {
    $(this).html("<input type='text' name='card-edit' placeholder='" + context + "'>");
  }
})

$('.card-title').on('blur', '[name=card-edit]', function() {
  console.log("blurred");
  $(this).closest(".card-title").text($(this).val());
});

function getUrlParameter() {
  return 'edit';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h5 class="card-title" id="id">Card Title</h5>

Upvotes: 1

Related Questions