How to target a specific element using javascript

Question

After a CLICK on the taskYes icon, i need to get the value on the input with the inputMins class

<form method="post" action="">
    <span class="taskTitle">
        <input id="newInput" type="text" /> 
        <button class="taskYes"></button>
    </span>

    <span class="taskMinutes">
        <input class="col-md-2 inputMins" type="text" />
    </span>
</form>

Can you help me saying what is the best way to target my input?

I've tried this but ... without success :

$(".taskYes").click(function(){
    var valeurTime = $(this).parent().next("span").val();
    alert(valeurTime);
});

So what you asking is when you click button it should give you the id of the input or what ? — Endrit Shala
– Endrit Shala, Commented Oct 5, 2015 at 18:36
Hello :) I need to get the value on the input with the inputMins class (the last input on my code) — Alan
– Alan, Commented Oct 5, 2015 at 18:38
I think you need to give it a value first like <input class="col-md-2 inputMins" type="text" value="alan" /> — Endrit Shala
– Endrit Shala, Commented Oct 5, 2015 at 18:41
Nah, the value is given by the user before he clicks on the button — Alan
– Alan, Commented Oct 5, 2015 at 19:01

victorfern · Accepted Answer · 2015-10-05 20:58:46Z

1

On my browser this code is working, please send me your result!

<head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js">
    </script>
    <script>
        function init() {
            console.log("here");
            $(".taskYes").click(function(evt){
var value = $(evt.target).parent().next('span').find('.inputMins').val();
alert(value);
});
        }
    </script>
</head>
<body onload="init()">
<form method="post" action="">
    <span class="taskTitle">
        <input id="newInput" type="text" />
        <button class="taskYes"></button>
    </span>

    <span class="taskMinutes">
        <input class="col-md-2 inputMins" type="text" />
    </span>
</form>

</body>
</html>

answered Oct 5, 2015 at 20:58

victorfern

464 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

victorfern · Accepted Answer · 2015-10-05 18:47:25Z

1

Are you using jQuery? Or VanillaJS?

Jquery Solution:

 $('.inputMins').val()

VanillaJS Solution:

document.getElementsByClassName('inputMins')[0].value

edited Oct 5, 2015 at 18:47

answered Oct 5, 2015 at 18:42

victorfern

464 bronze badges

5 Comments

Endrit Shala Over a year ago

I don't think this works because he doesn't have a value on the input. I mean how can you get a value on the input with the inputMins class when there is no value.

victorfern Over a year ago

Yes it works! The value of inputMins is the text inside of input element.

Alan Over a year ago

That works but the problem is that i got a lot of input with the inputMins class. I need to target the input with the inputMins class on the form where the button is clicked

victorfern Over a year ago

Ok, for that you'll need to catch clickEvent

Alan Over a year ago

Yes, but it doesn't work :/ Check my JS code on the question

victorfern · Accepted Answer · 2015-10-05 18:53:40Z

0

And now the full implementation:

<!DOCTYPE html>
<html>

<head>
    <script>
        function checkTaskMinutes() {
            debugger;
            alert(document.getElementsByClassName('inputMins')[0].value);
        }
    </script>
</head>

<form method="post" action="">
    <span class="taskTitle">
        <input id="newInput" type="text" />
        <button class="taskYes" onclick="checkTaskMinutes()"></button>
    </span>

    <span class="taskMinutes">
        <input class="col-md-2 inputMins" type="text" />
    </span>
</form>


</html>

answered Oct 5, 2015 at 18:53

victorfern

464 bronze badges

5 Comments

Alan Over a year ago

Hello :) I have to give this precision : i got a lot of input with the inputMins class. I need to target the input with the inputMins class on the form where the button is clicked

victorfern Over a year ago

For that, add a unique id like <input id="yes" class="col-md-2 inputMins" type="text" /> and use document.getElementById('yes').value or if you are using jQuery $("#yes").val()

Alan Over a year ago

That won't work for me because i will have a lot of input and i can't give a function by input, that will be too much

victorfern Over a year ago

Try this:

$(".taskYes").click(function(evt){     var valeurTime = $(evt.currentTarget).closest(".inputMins").val();     alert(valeurTime); });

Alan Over a year ago

I got a "undefined" alert

victorfern · Accepted Answer · 2015-10-05 19:28:40Z

0

is more simple! Try this:

$(".taskYes").click(function(evt){
var value = $(evt.target).parent().next('span').find('.inputMins').val();
console.log(value);
});

answered Oct 5, 2015 at 19:28

victorfern

464 bronze badges

1 Comment

Alan Over a year ago

Hello :) The console.log result is "undefined"

Collectives™ on Stack Overflow

How to target a specific element using javascript

4 Answers 4

Comments

5 Comments

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

5 Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related