CODEWITHSUNDEEP
phpjavascript
user1387409
user1387409

Reputation: 3

retrieve selected value in row using javascript

I've a table with multiple rows, each row has a drop down list. I am new to javascript and is unable to retrieve the selected value from the row. Any idea how can it be done? Thanks in advance.

Code:

function chng_page(serialNum, rowid)
{
    alert(rowid);
    alert(serialNum);
    var select_index = document.getElementById('orderStatus').selectedIndex; 
    //get the value of selected option
    var option_value = document.getElementById('orderStatus').options[select_index].value;

    //redirect with value as a url parameter
    window.location = 'orderStatus.php?serialNum=' + serialNum + '&status=' + option_value;
}
</script>

//code for drop down list

<select id="orderStatus" name="orderStatus" onchange="chng_page(<?php echo $serialNum?    >, this.parentNode.parentNode.rowIndex)">
   <option value="Pending" <?php echo ($status == "Pending") ? ' selected="selected"' : ''; ?>>Pending</option>
   <option value="Cooking" <?php echo ($status == "Cooking") ? ' selected="selected"' : ''; ?>>Cooking</option>
   <option value="On The Way" <?php echo ($status == "On The Way") ? ' selected="selected"' : ''; ?>>On The Way</option>
   <option value="Delivered" <?php echo ($status == "Delivered") ? ' selected="selected"' : ''; ?>>Delivered</option>   
</select>

Upvotes: 0

Views: 477

Answers (3)

Kneel-Before-ZOD
Kneel-Before-ZOD

Reputation: 4221

You didn't mention if the select element in each row has a unique id or not, but it somehow shows in your code that they do.
In that case, you can use JQuery (a popular JavaScript framework) to retrieve the selected value.
Assuming you have included the JQuery file in your HTML, and attached an event handler to the select element (to make it easier, pass in the id of the current select element as a parameter in the function), do this:

var selected_value = $("#id_of_select_element option:selected").val();

If the ids of the select elements are unique, that single line of code will definitely work.

Upvotes: 3

Okan Kocyigit
Okan Kocyigit

Reputation: 13441

If there is a dropdownlist in each row with same id-> #orderStatus, you should try this,

function chng_page(serialNum, ddlist)
{
    var rowid = ddlist.parentNode.parentNode.rowIndex
    alert(rowid);
    alert(serialNum);
    var select_index = ddlist.selectedIndex; 
    //get the value of selected option
    var option_value = ddlist.options[select_index].value;

    //redirect with value as a url parameter
    window.location = 'orderStatus.php?serialNum=' + serialNum + '&status=' + option_value;
}

<select name="orderStatus" onchange="chng_page(<?php echo $serialNum?>, this)">
   <option value="Pending" <?php echo ($status == "Pending") ? ' selected="selected"' : ''; ?>>Pending</option>
   <option value="Cooking" <?php echo ($status == "Cooking") ? ' selected="selected"' : ''; ?>>Cooking</option>
   <option value="On The Way" <?php echo ($status == "On The Way") ? ' selected="selected"' : ''; ?>>On The Way</option>
   <option value="Delivered" <?php echo ($status == "Delivered") ? ' selected="selected"' : ''; ?>>Delivered</option>   
</select>

Upvotes: 0

Nuno Costa
Nuno Costa

Reputation: 423

You have the same name/id for the drop down in all table rows

Upvotes: 0

Related Questions