Sending a different column instead of this.value in php to javascript function (Query)

Question

I've made a select list and filled it with info from a DB. Now i'm trying to make it so whenever you select a different item in the list it calls a javascript function that checks if the selected item/entity (or whatever it's supposed to be called) has a comment or not, and reacts accordingly.

So far I have this, which does work, and only shows the paragraph if the ID of the selected item sent is over 5. However, I don't know how to send the comment that is in the query as the parameter, so that it can then check the length and react.

This is what I have so far:

// Create connection
$conn = mysql_connect("localhost", "root", "admin") 
or die("Could not connect: " . mysql_error());

// Selecting the DB
mysql_select_db("tickets") or die("Could not connect: " . mysql_error());

$query = mysql_query("SELECT * FROM tickets order by ID");
$numrows = mysql_num_rows($query);

//I want to change this.value to be the selected item's comment
echo '<select name="Tick" size='.$numrows.' onChange="checkSelectedValue(this.value)">';

while ($row = mysql_fetch_array($query)) {
    echo '<option value="'.$row['ID'].'">Comment: '.$row['comments'].' </option>';
}

echo '</select>';

echo '<p id="commentNotifier" style='display:none;'> Selected item has a comment. </p>';

How would I modify this so the parameter of onChange="checkSelectedValue(this.value)" would be the selected item's comment instead of this.value which is, in my case, the ID.

Note that I don't want to change the value of each option to be comments instead of ID.

This is the javascript functon that works with the ID sent, and if it is over 5 it shows the paragraph that's otherwise hidden:

<script type="text/javascript">
    function checkSelectedValue(val){
        var element=document.getElementById('commentNotifier');
        if(val > 5) //I would change this to val.length > 0 to check if comments exists or not
            element.style.display='block';
        else
            element.style.display='none';
    }
</script>

Pretty straightforward function. Cheers in advance!

Phate01 · Answer 1 · 2016-03-02T08:52:08.930

2

You can use this to select the comment from the dropdown:

$('#mySelect').find(":selected").text()

But it requires you to use jQuery

Working fiddle: https://jsfiddle.net/b1qjw214/

In pure javascript:

function findElem() {
    var elem = document.getElementById("mySelect");
    var elemTxt = elem.options[elem.selectedIndex].text;
}

Fiddle: https://jsfiddle.net/dsy3tgmy/

edited Mar 02 '16 at 08:52

answered Mar 02 '16 at 08:33

Phate01

2,499
2
30
55

score 2 · Answer 2 · edited May 23 '17 at 11:59

2

In a pure javascript solution the best answer of this stack would helps : Get selected value in dropdown list using JavaScript?

edited May 23 '17 at 11:59

Community

1
1

answered Mar 02 '16 at 08:37

Maxooo

153
5

score 0 · Answer 3 · answered Mar 02 '16 at 08:41

Use data-* attributes and instead of this.value, pass this as argument so that you can deal with element and all its attributes.

Element.dataset returns the object of all the data-* attributes of the element

Try this:

function checkSelectedValue(elem) {
  console.log('Value: ' + elem.value);
  console.log('Comment: ' + elem.options[elem.selectedIndex].dataset.comment);
}

<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<select onChange="checkSelectedValue(this)">
  <option data-comment='Comment goes here' value="volvo">Volvo</option>
  <option data-comment='Comment goes here' value="saab">Saab</option>
  <option data-comment='Comment goes here' value="mercedes">Mercedes</option>
  <option data-comment='Comment goes here' value="audi">Audi</option>
</select>

Make sure you have generated valid markup using PHP as provided snippet works fine.... — Rayon, Mar 02 '16 at 09:44

Sending a different column instead of this.value in php to javascript function (Query)

3 Answers3