I am trying to get the input value from within a mycontainer div when a Click Me div is clicked.

I only want it to happen if the input is a password type, I have this so far...

function myFunction(el) {
  theInput = $(el).closest("input type=['password]").value();
  console.log(theInput);
}

.mycontainer {
    display: flex;
    padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mycontainer">
  <input type="text" value="myinput1">
  <div onclick="myFunction(this)">Click Me</div>
</div>

<div class="mycontainer">
  <input type="password" value="myinput2">
  <div onclick="myFunction(this)">Click Me</div>
</div>

<div class="mycontainer">
  <input type="number" value="22">
  <div onclick="myFunction(this)">Click Me</div>
</div>

<div class="mycontainer">
  <input type="password" value="myinput4">
  <div onclick="myFunction(this)">Click Me</div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

This is throwing an error whenever I click anything, where am I going wrong?

CodePudding user response：

You have multiple issues in your code. First you are looking for a parent. The input is not a parent, it is a sibling. So you can either look for a common parent with closest() and then look for the input with find(), you can use siblings(), or you can use prev()

Second your selector to find an input by attribute is wrong. The bracket needs to be around the entire attribute, not the value.

Third, there is no .value() in jQuery

function myFunction(el) {
  const theInput = $(el).closest(".mycontainer").find('input[type="password"]');
  if (theInput.length) {
    console.log(theInput.val());
  }

  // other ways to reference the input
  console.log($(el).siblings('input[type="password"]').val());
  console.log($(el).prev('input[type="password"]').val());

}

.mycontainer {
    display: flex;
    padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mycontainer">
  <input type="text" value="myinput1">
  <div onclick="myFunction(this)">Click Me</div>
</div>

<div class="mycontainer">
  <input type="password" value="myinput2">
  <div onclick="myFunction(this)">Click Me</div>
</div>

<div class="mycontainer">
  <input type="number" value="22">
  <div onclick="myFunction(this)">Click Me</div>
</div>

<div class="mycontainer">
  <input type="password" value="myinput4">
  <div onclick="myFunction(this)">Click Me</div>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You have few issues in your code:

1. Your selector is not correct. You should first target the closest element with class mycontainer and find the password element from that. Since the attribute selector and the input element is same there should not be any space between them, also the attribute (type) should be inside the [].

2. You are trying to access the value using value() on a jQuery referenced element (not a jQuery method), should use val()

function myFunction(el) {
  var theInput = $(el).closest(".mycontainer").find("input[type=password]").val();
  console.log(theInput);
}

.mycontainer {
    display: flex;
    padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mycontainer">
  <input type="text" value="myinput1">
  <div onclick="myFunction(this)">Click Me</div>
</div>

<div class="mycontainer">
  <input type="password" value="myinput2">
  <div onclick="myFunction(this)">Click Me</div>
</div>

<div class="mycontainer">
  <input type="number" value="22">
  <div onclick="myFunction(this)">Click Me</div>
</div>

<div class="mycontainer">
  <input type="password" value="myinput4">
  <div onclick="myFunction(this)">Click Me</div>
</div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>