Passing HTML attribute to jQuery function from onclick event

Question

I have a problem in passing one of html element to jQuery. I know that with attr() we can access to attributes. Nevertheless I feel I do something wrong.

This is my simple jQuery function:

<script type="text/javascript">
    function test(value) {
        alert(value);
    }
</script>

I have a dynamic listbox which has been created by foreach loop:

<select  multiple="multiple" name="factors1" id="main_factors" style="width: 200px; height: 200px;">

<?php foreach ($array as $option): ?>
    <option onclick="test(<script>this.attr('title').value</script>);"
            id="<?php echo $option[0]; ?>"
            title="<?php echo $option[2]; ?>" 
            value="<?php echo $option[0]; ?>">
        <?php echo $option[1]; ?>
    </option>
<?php endforeach ?>

</select>

I want when somebody click on items in list box its item show in my messagebox for example. However this code did not work for me.

onclick="test(<script>this.attr('title').value</script>);"

How can I send title attribute value to my function from onclick attribute?

Thanks in advance.

Sender · Accepted Answer · 2012-09-07 04:57:20Z

2

onclick="test(this)"

function test(value)
{
    alert($(value).attr('title'));
}

see demo

answered Sep 7, 2012 at 4:57

Sender

6,91813 gold badges50 silver badges69 bronze badges

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

1 Comment

Ahsan Khurshid Over a year ago

@user108: onchange event is better than onclick events while using select elements

halfer · Accepted Answer · 2017-10-09 10:08:40Z

2

Try this code. I think you make a mistake in your code.

<select  multiple="multiple" name="factors1" id="main_factors" style="width: 200px; height: 200px;" onchange="test(this.value);">

<?php foreach ($array as $option): ?>
<option id="<?php echo      $option[0]; ?>" title="<?php echo $option[2]; ?>" 
value="<?php  echo $option[0]; ?>"><?php echo $option[1]; ?></option>
<?php endforeach ?>


</select>

And in your jQuery:

<script type="text/javascript">
    function test(value)
       {
        alert(value);
       }
    </script>

edited Oct 9, 2017 at 10:08

halfer

20.2k20 gold badges111 silver badges208 bronze badges

answered Sep 7, 2012 at 4:58

Jansha Jansha

961 silver badge10 bronze badges

2 Comments

Ahsan Khurshid Over a year ago

onchange event is better than onclick events while using select elements

Ahsan Khurshid Over a year ago

onchange event should be defined on <select> so it will capture value of option when changed. See my answer.

Ahsan Khurshid · Accepted Answer · 2012-09-07 05:15:36Z

0

You should need to use onchange event on select element.

<select onchange="test(this.value)">

JavaScript:

function test(value) {
    alert(value)        
}

SEE DEMO

edited Sep 7, 2012 at 5:15

answered Sep 7, 2012 at 5:03

Ahsan Khurshid

9,4671 gold badge35 silver badges53 bronze badges

Comments

nbrooks · Accepted Answer · 2012-09-07 06:21:24Z

Since you have imported and are utilizing jQuery, it is better practice to separate your event handlers from your html elements, as a sort of separation of design from functionality:

Remove the onclick altogether from your php:

<select  multiple="multiple" name="factors1" id="main_factors" style="width: 200px; height: 200px;">
<?php foreach ($array as $option): ?>
<option id="<?php echo $option[0]; ?>" title="<?php echo $option[2]; ?>" 
value="<?php  echo $option[0]; ?>"><?php echo $option[1]; ?></option>
<?php endforeach ?>
</select>

And bind a function to the change event from within the javascript:

$(document).ready(function() {
    $('#main_factors').change( function() {
        test( $(this).val() );
        // you can also do:
        // test( this.value );
    });
});

function test(value)
{
    alert(value);
}

Collectives™ on Stack Overflow

Passing HTML attribute to jQuery function from onclick event

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related