Clever Geek Handbook

Get selected value of dropdown menu without submit button

I have 2 dropdowns outside of the html table generated by PHP code. I am submitting a button in this table
 as explained by the following code.

 <!doctype html>
            Select Year:
                   <select name=\"year\" id=\"year\"  style="width: 200px">
                      <option value=\"2014\">2014</option>
                      <option value=\"2015\">2015</option>
                    </select>

                Select Trimester: 
                    <select name=\"trimester\" id=\"trimester\" style="width: 200px">
                        <option value=\"1st\">1st</option>
                        <option value=\"2nd\">2nd</option>
                        <option value=\"3rd\">3rd</option>
                    </select> 

<?php
     while($row = mysql_fetch_array($result)){
                      $ict_id= $row['id'];
                      $name= $row['name'];
          echo "<tr><form name=\"form$id\" id=\"form$id\"><td>".$name."</td>

        <td>
          <select name=\"absent$id\" id=\"absent$id\" style=\"width: 200px\">
            <option value=\"1\">1</option>
            <option value=\"2\">2</option>
          </select>
        </td>

        <td>
          <select name=\"creative$id\" id=\"creative$id\" style=\"width: 200px\">
            <option value=\"1\">1</option>
            <option value=\"2\">2</option>
          </select>
        </td>

        <td>
          <select name=\"problem$id\" id=\"problem$id\" style=\"width: 200px\">
            <option value=\"1\">1</option>
            <option value=\"2\">2</option>
          </select>
        </td>

    <td>
    <input type=\"button\" name=\"submit$id\"  id=\"submit$id\" value=\"Submit\"      onclick=\"getVal(this.id)\">
?>

When this button is clicked, the following javascript function is loaded.

function getVal(clicked_id){

}

My problem is how can I get the selected year and trimester value and use it inside the getVal function.

Any hints are greatly appreciated.

+3


source to share


5 answers


To get the selected year and trimester ID text

function getVal(clicked_id){

 $('#year :selected').text();

 $('#trimester :selected').text();
}


To get the selected value

 function getVal(clicked_id){
  $('#year').val();

 $('#trimester').val();
}
+2


source


Use jquery val function



function getVal(){
  $('#year').val();
  $('#trimester').val();
}
+1


source


If you are using JQuery you can get it like

function getVal(){

 var ddlYear= $('#year').val();
 var ddlTrimester= $('#trimester').val();    

}
+1


source


See how you get value. You need to return data, their logical thing. Don't just store it in a variable.

function getValYear(){
 return $('#year').val();
}

function getValTrimester(){
 return $('#trimester').val();    
}
0


source


I saw your other question about getting UI elements in table cells before deleting it. This seemed like a follow-up to this question, so I figured I'd post it here. I thought you might consider moving select boxes and ui elements visually to table cells.

Here's a jsfiddle I made before you deleted your question and thought you might see it. It seems to have something to do with what you are asking here, if only a few steps in development ...

$("select").addClass("hidden");

$("#abc-td").on("click focus", function (){
    var $offset = $(this).offset();
    var $top = $offset.top - 9,
        $left = $offset.left - 9,
        $height = $(this).outerHeight(),
        $width = $(this).outerWidth();
    $("#abc").css({
        position: "absolute",
        top: $top,
        left: $left,
        height: $height,
        width: $width
    }).removeClass("hidden").focus();
});
0


source






More articles:


All Articles