CODEWITHSUNDEEP
jquery
alpariss
alpariss

Reputation: 1

get the value of the class jquery

I am a beginner in jquery, so my problem is

<?php
for($i=0;$i<3;$i++)
{
?>
<form>
<input type="text" class="s" value="v<?php echo $i; ?>" />
<input type="button" value="OK" onclick="test();" />
</form>
<?php
}
?>


<script language="javascript">
function test(){
var a= $(".s").val();
alert(a);
}
</script>

i want to get the value of the text which i click the button, but if i click the first or the second or the last button it show me 'v0' for all. so i want to have 'V0' if i click the first button, 'v1' the second and 'v3' the last.

i think u will understand what i want to explain because i am again a beginner in English

Upvotes: 0

Views: 72

Answers (4)

Maurizio Ferreira
Maurizio Ferreira

Reputation: 476

You are mixing "normal" javascript processing with jquery processing. To do what you want, you don't need jquery, but you can do it in plain javascript.

What you have to do is define the procedure in the head of the page and then in each button click specify the element on which to operate.

I'll show you what your page should generate. It's up to you to write php statements that generates it.

Remember that for your first experiments, you can always write down the text of the page in a plain text file with extension .html and load it in a browser Only after it works you can think of generate it via php.

This is what you php should generate : (the form statement is not really needed)

<html>
<head>
<script>
  function test(elem) {
      alert(elem.value);
  }
</script>
</head>
<body>

<form>
<input type="text" name="e1" value="v0" />
<input type="button" value="OK" onclick="test(e1);" /> <br>
<input type="text" name="e2" value="v1" />
<input type="button" value="OK" onclick="test(e2);" /> <br>
<input type="text" name="e3" value="v2" />
<input type="button" value="OK" onclick="test(e3);" /> <br>
</form>

</body>
</html>

In this way, to every input button is associated a call to the same function "test", but with a different parameter (the associated entry element)

if you want to really use jquery, first of all you have to download it, place it in the same directory of your php file, rename it to jquery.js and include it in the header of the page as follows.

There are as many ways to accomplish what you want as programmers in the world. In this example, the following script works in this way :

$(":button").click(function() {
  alert ($(this).prev().val());
});

Every button is linked to an unnamed function. In this function, the "$this" keyword refers to a jquery object that represent the button that get clicked. The prev() call returns the element immediatly preceding it in the document flow, that is, the entry element on its left. Finally the val() statement returns its value, and that is displayed with Alert.

Here again I'll show only what yout php must produce : write it on a html file and test it before trying to generate it via php.

<html>
<head>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
</head>
<body>

<form>
<input type="text" value="v0" />
<input type="button" value="OK"" /> <br>
<input type="text" value="v1" />
<input type="button" value="OK" /> <br>
<input type="text" value="v2" />
<input type="button" value="OK" /> <br>
</form>

<script>
  $(":button").click(function() {
    alert ($(this).prev().val());
  });
</script>

</body>
</html>

Best regards Maurizio.

Upvotes: 0

Satpal
Satpal

Reputation: 133403

Since you are using jQuery bind event using it. You can add a CSS class to button and bind event using it.

HTML

<form>
<input type="text" class="s" value="v<?php echo $i; ?>" />
<input class="btn" type="button" value="OK" />
</form>

Script

$(function() {
    //Bind event using btn class added to button
    $('.btn').click(function(){
        //Use .prev() to find the prev input
        var a = $(this).prev(".s").val();
        alert(a);
    });
});

Refrences

  1. Document ready handler

    Specify a function to execute when the DOM is fully loaded.

  2. Class Selector (“.class”)

Selects all elements with the given class.

  1. .click()

Bind an event handler to the "click" JavaScript event, or trigger that event on an element.

  1. .prev()

    Get the immediately preceding sibling of each element in the set of matched elements, optionally filtered by a selector.

Upvotes: 2

SYNCRo
SYNCRo

Reputation: 470

$("button").on("click", function() {
  alert($(this).parent().find(".s").val());
});

Upvotes: 0

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

When you get html of the above it will be like one below:

<form>
    <input type="text" class="s" value="v0" />
    <input type="button" value="OK" onclick="test();" />
</form>

<form>
    <input type="text" class="s" value="v1" />
    <input type="button" value="OK" onclick="test();" />
</form>

<form>
    <input type="text" class="s" value="v2" />
    <input type="button" value="OK" onclick="test();" />
</form>

what you can do is add a class to each button as below and remove onclick from button:

<?php
    for($i=0;$i<3;$i++)
    {
    ?>
       <form>
            <input type="text" class="s" value="v<?php echo $i; ?>" />
            <input type="button" value="OK" class="btnGetVal" />
       </form>
<?php
    }
?>

and write a js eventlistener as below:

$('.btnGetVal').on('click',function(){
    var a=$(this).prev('input').val();
    alert(a);
});

Upvotes: 0

Related Questions