unable to print dropdown value using Ajax

Question

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

Hi @epascarello, thanks for this, But I'm confused on where there is this onChange going to impact/get the result, I'm trying to print the value when I click on Start button — Rakesh
– Rakesh, Commented Jun 10, 2016 at 13:41
Does this mean that without this onChange, I won't be getting the result of what I'm trying to achieve? (Just want to confirm) — Rakesh
– Rakesh, Commented Jun 10, 2016 at 13:43
You really really should cache var subtask = document.getElementById("subtask"), instead of making one request to the DOM per line of code. — Jeremy Thille
– Jeremy Thille, Commented Jun 10, 2016 at 13:44

epascarello · Accepted Answer · 2016-06-10 13:49:14Z

1

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.

answered Jun 10, 2016 at 13:49

epascarello

208k20 gold badges206 silver badges246 bronze badges

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

Comments

Telman · Accepted Answer · 2016-06-10 13:59:12Z

0

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());

answered Jun 10, 2016 at 13:59

Telman

1,5071 gold badge9 silver badges12 bronze badges

Comments

Parvez Rahaman · Accepted Answer · 2016-06-10 14:10:56Z

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>

Collectives™ on Stack Overflow

unable to print dropdown value using Ajax

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related