CODEWITHSUNDEEP
javascriptjqueryajax
Rakesh
Rakesh

Reputation: 594

unable to print dropdown value using Ajax

I'm writing a code and I am selecting a dropdown and when I click the button I want to print the value in console, but it is printing null.

Below is my code.

<form name="formSec" id="formSec">
        <div class="bodytag1">
            <table>
                <tr>
                    <td colspan="2" align="center">Breaks</td>
                </tr>
                <tr>
                    <td>Break Task</td>
                    <td><select id="task" name="task"
                        onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);">
                            <option value="" disabled selected>Select</option>
                            <option value="break" id="break">Break</option>
                            <option value="ORD" id="ORD">ORD Meetings</option>
                            <option value="Training" id="Training">Training</option>
                            <option value="project" id="project">Adhoc Project</option>
                    </select></td>
                </tr>
                <tr>
                    <td>SubTask</td>
                    <td><select id="subtask" name="subtask">
                            <option value="Subtask">Subtask</option>
                    </select></td>
                </tr>
                <tr>
                    <td><input type="button" value="Start" name="Start" id="Start" /></td>
                    <td><input type="button" value="Stop" name="Stop" id="Stop" /></td>
                </tr>
            </table>
        </div>
    </form>

And here is my js

<script type="text/javascript"
    src="http://code.jquery.com/jquery-1.10.0.min.js"></script>

<link rel="stylesheet" type="text/css" href="CSSFiles/myCssFile.css">
<script type="text/javascript">
    function dynamicdropdown(listindex) {
        document.getElementById("subtask").length = 0;
        switch (listindex) {
        case "break":
            document.getElementById("subtask").options[0] = new Option(
                    "Please select Break type");
            document.getElementById("subtask").options[0].disabled = true;
            document.getElementById("subtask").options[1] = new Option(
                    "Casual Break ", "Casual Break");
            document.getElementById("subtask").options[2] = new Option(
                    "Lunch Break", "Lunch Break");
            break;
        case "ORD":
            document.getElementById("subtask").options[0] = new Option(
                    "Please select type of Meeting", "");
            document.getElementById("subtask").options[0].disabled = true;
            document.getElementById("subtask").options[1] = new Option("Calls",
                    "Calls");
            document.getElementById("subtask").options[2] = new Option(
                    "Team Meeting", "Team Meeting");
            document.getElementById("subtask").options[3] = new Option(
                    "Thomson Activity (Fire Drill, RnR)",
                    "Thomson Activity (Fire Drill, RnR)");
            document.getElementById("subtask").options[4] = new Option(
                    "System Downtime", "System Downtime");

            break;
        case "Training":
            document.getElementById("subtask").options[0] = new Option(
                    "Please select Type of Training", "");
            document.getElementById("subtask").options[0].disabled = true;
            document.getElementById("subtask").options[1] = new Option(
                    "EDP Training", "EDP Training");
            document.getElementById("subtask").options[2] = new Option(
                    "Process Training", "Process Training");

            break;
        case "project":
            document.getElementById("subtask").options[0] = new Option(
                    "Please select type of Project", "");
            document.getElementById("subtask").options[0].disabled = true;
            document.getElementById("subtask").options[1] = new Option(
                    "Others", "Others");
            break;

        }
        return true;
    }  
</script>

<script type="text/javascript">
    var form = $('#formSec');
    var task = $('#task');
    var subtask = $('#subtask');
    $(document).ready(function() {
        $('#Start').on("click", function() {
            console.log(task);
            $.ajax({
                type : "post",
                url : "UpdateTime",
                data : form.serialize(),
                success : function(data) {
                    if (data) {
                        alert("worked");
                    }
                    //$('#result').attr("value", result);
                }
            });
            return false;
        });
    });
</script>

please let me know where am I going wrong and how can I fix this.

Thanks

Upvotes: 0

Views: 197

Answers (3)

Parvez Rahaman
Parvez Rahaman

Reputation: 4397

Use console.log(task.val()) instead of console.log(task)

function dynamicdropdown(listindex) {
  document.getElementById("subtask").length = 0;
  switch (listindex) {
    case "break":
      document.getElementById("subtask").options[0] = new Option(
        "Please select Break type");
      document.getElementById("subtask").options[0].disabled = true;
      document.getElementById("subtask").options[1] = new Option(
        "Casual Break ", "Casual Break");
      document.getElementById("subtask").options[2] = new Option(
        "Lunch Break", "Lunch Break");
      break;
    case "ORD":
      document.getElementById("subtask").options[0] = new Option(
        "Please select type of Meeting", "");
      document.getElementById("subtask").options[0].disabled = true;
      document.getElementById("subtask").options[1] = new Option("Calls",
        "Calls");
      document.getElementById("subtask").options[2] = new Option(
        "Team Meeting", "Team Meeting");
      document.getElementById("subtask").options[3] = new Option(
        "Thomson Activity (Fire Drill, RnR)",
        "Thomson Activity (Fire Drill, RnR)");
      document.getElementById("subtask").options[4] = new Option(
        "System Downtime", "System Downtime");

      break;
    case "Training":
      document.getElementById("subtask").options[0] = new Option(
        "Please select Type of Training", "");
      document.getElementById("subtask").options[0].disabled = true;
      document.getElementById("subtask").options[1] = new Option(
        "EDP Training", "EDP Training");
      document.getElementById("subtask").options[2] = new Option(
        "Process Training", "Process Training");

      break;
    case "project":
      document.getElementById("subtask").options[0] = new Option(
        "Please select type of Project", "");
      document.getElementById("subtask").options[0].disabled = true;
      document.getElementById("subtask").options[1] = new Option(
        "Others", "Others");
      break;

  }
  return true;
}

var form = $('#formSec');
var task = $('#task');
var subtask = $('#subtask');
$(document).ready(function() {
  $('#Start').on("click", function() {
    console.log(task.val());
    $.ajax({
      type: "post",
      url: "UpdateTime",
      data: form.serialize(),
      success: function(data) {
        if (data) {
          alert("worked");
        }
        //$('#result').attr("value", result);
      }
    });
    return false;
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form name="formSec" id="formSec">
  <div class="bodytag1">
    <table>
      <tr>
        <td colspan="2" align="center">Breaks</td>
      </tr>
      <tr>
        <td>Break Task</td>
        <td>
          <select id="task" name="task" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);">
            <option value="" disabled selected>Select</option>
            <option value="break" id="break">Break</option>
            <option value="ORD" id="ORD">ORD Meetings</option>
            <option value="Training" id="Training">Training</option>
            <option value="project" id="project">Adhoc Project</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>SubTask</td>
        <td>
          <select id="subtask" name="subtask">
            <option value="Subtask">Subtask</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>
          <input type="button" value="Start" name="Start" id="Start" />
        </td>
        <td>
          <input type="button" value="Stop" name="Stop" id="Stop" />
        </td>
      </tr>
    </table>
  </div>
</form>

Upvotes: 0

Telman
Telman

Reputation: 1487

You should get the selected option first, and then you can get the value of that option.

You can use this code, for example:

var selectedOption = task.find("option:selected");
console.log(selectedOption.text());

Upvotes: 0

epascarello
epascarello

Reputation: 207537

Move the references to the elements inside the document ready

$(document).ready(function() {
    var form = $('#formSec');
    var task = $('#task');
    var subtask = $('#subtask');
    $('#Start').on("click", function() {
        console.log(task);
    });
});

Now when you click on the button, it will have a reference to the task input. Other option, if you want to have them as globals is to move the script so it appears after the elements you are referencing.

Upvotes: 1

Related Questions