Unable to get TextBox value through JavaScript

Question

I have a textbox othervalue which is enabled/disabled based on the selection of the select tag.

<select id="capability" name="capability[]" style="background-color: #ffffff;" onchange="selection(this)">
<option value="locMgm">Security</option>
<option value="satelliteComm">Maritime</option>
<option value="othersolution">Other</option>
</select>

Value:

<script type="text/javascript">  
    $(function() {
        $("#capability").change(function() {
            if ($(this).val() == "othersolution") {
                console.log(true);
                $("#othervalue").removeAttr("disabled");
            }
            else {
                console.log(false);
                $("#othervalue").attr("disabled", "disabled");
            }
        });
    });                                    
</script>

I am trying to read the value of othervalue in another JavaScript file:

var othertb = $("#othervalue").val();

and then check whether the textbox is empty or contains value:

if (othertb == "") {
            message = "What solutions are you looking for - no text"

        }
        else
            {
        message = "What solutions are you looking for? "+othertb;
            }

The problem: othertb has nothing (empty) and the if else doesnt work either. How can I read the value and why doesnt the if else work.

EDIT1: var othertb = $("#othervalue").val(); is unable to read the value of the input field.

All I am trying now is to read the value and show it in an alert(othertb) to ensure the value is read but it is empty. Can you help read the value?

EDIT2: This is what I am trying on a single file abc.com:

<td style="background-color: #ffffff;color:#3f3f3f;">
     <ol start="4" style="width:auto;" class="container_16" >
      <li class="grid_8">What solutions are you looking for?</li></ol>
      <select id="capability" name="capability[]" style="background-color: #ffffff;" onchange="selection(this)">
        <option value="locMgm">Security</option>
        <option value="securityTrc">HSE</option>
        <option value="ivms">Transport and Logistics</option>
        <option value="satelliteComm">Maritime</option>
        <option value="all">Defence</option>
        <option value="othersolution">Other</option>
    </select>
    <label style="font-size:16px" for="value">Value:</label>
    <input type="text" id="othervalue" disabled="true"/>
    <script type="text/javascript">  
    var othertb = 'test';
    $(function() {
        $("#capability").change(function() {
            if ($(this).val() == "othersolution") {
                console.log(true);
                $("#othervalue").removeAttr("disabled");
                othertb = $('#othervalue').val();
            }
            else {
                console.log(false);
                $("#othervalue").attr("disabled", "disabled");
            }

        });
    });

</script>
</td>

<div id="btn-nxt">
<a href= "javascript:void(0)" 
onclick = "alert(othertb)> Submit here &raquo;</a>
</div>

When the textbox is empty the page shows alert Test. When the textbox is not empty the alert shown has no value and I see am empty alert pop. Why is the value not being read?

Are you reading to a variable called `othertb` or `$othertb`? — Marco Sandrini, Mar 08 '15 at 09:18
even if I dont go through the `if else` I still cannot read value `var othertb = $("#othervalue").val();` — Sarah, Mar 08 '15 at 09:28
Is the control othervalue an asp.net control or html control? — Sanjeev Singh, Mar 08 '15 at 09:33
Not sure what are you trying to do (as both parts of your scripts are not connected together) but you could play with this: http://jsfiddle.net/rr6ybuk6/ — Artur Filipiak, Mar 08 '15 at 09:36
Post your code in a fiddle please. Assuming the problem with no proper base would only generate more and more comments and not a solution. — lshettyl, Mar 08 '15 at 09:39
@ArturFilipiak, @LShetty saw part of the code missing in my question. I have edited. Pls check. The code is too long to write on jsfiddle. All I am trying now is to read the value and show it in an `alert(othertb)` to ensure the value is read but it is empty. Can you help read the value? — Sarah, Mar 08 '15 at 10:14
As I wrote in previous comment - *both parts of your scripts are not connected together*. Please post **complete** part of code, which has a beginning and ending, not just cuts of code. **Where** is the `if (othertb == "") {...` located (is it inside an event handler or what)? **Where** do you set the `var othertb = $("#othervalue").val();` ? — Artur Filipiak, Mar 08 '15 at 10:19
@ArturFilipiak yes i understand but I have omitted other files (where the `if else` is called). It is hard to write complete code. Let me edit my question to show parts of the code located in one file. — Sarah, Mar 08 '15 at 10:40
@LShetty, http://jsfiddle.net/sarahfarukh/jb18b67d/. Does not work. Can you help? — Sarah, Mar 08 '15 at 11:05
Yes, it does work : http://jsfiddle.net/jb18b67d/5/ . You have not included jQuery library in your demo. — Artur Filipiak, Mar 08 '15 at 11:38
@Sarah, you forgot to include jQuery in your demo. I have also cleaned up your code a bit. Is [this what you wanted?](http://jsfiddle.net/jb18b67d/7/) — lshettyl, Mar 08 '15 at 15:51

score 0 · Answer 1 · answered Mar 08 '15 at 15:54

You've had few issues in your code. I have updated your fiddle and it now works. Take a look at this.

var ov = $("#othervalue");

$("#capability").change(function() {
    ov.prop("disabled", true).val("");
    if ($(this).val() == "othersolution") {
        ov.prop("disabled", false);
    }
});

$("#getVal").click(function() {
    var cap = 'blah', othertb = ov.val();
    var message = "What solutions are you looking for? ";        
    cap = othertb ? othertb : cap;
    message += cap;
    $('#console').html("<br/><br/>" + message);
});

Unable to get TextBox value through JavaScript

1 Answers1