Why don't I see the .value property for my string in javascript?

Question

VS2013, MVC5, VB, in a Razor View

I wanted to set the value for a string that will be posted back to the controller. I'm pretty new to javascript, but I found this (link) which included the following code:

<input type="text" id="mytext">

<script type="text/javascript">
  var elem = document.getElementById("mytext");
  elem.value = "My default value";
</script>

When I try to type that in, the 'value' property as seen on 'elem' above is not available. Why would that be?

Ultimately I am trying to modify a form field that will be returned to a controller. While my question above is what I'm wondering about, I thought it would be useful to include the full context.

The view is setup with:

@Using (Html.BeginForm(Nothing, Nothing, FormMethod.Post, New With {.id = "thisForm"}))

My input element is:

<input type="button" onclick="UserCommit()" value="Next" class="btn btn-default" tabindex="2" />

And the script shell is:

<script type="text/javascript">
  function UserCommit() {
    $("#thisForm").submit()
  }
</script>

The script above works and submits the form the same as the original input element which was:

<input type="submit" value="Next" class="btn btn-default" tabindex="2" />

I wanted to combine the value of multiple checkbox fields together into the single form field the controller is expecting back, so I figure I could use javascript to concatenate all the checked fields into the expect field. But I don't seem to be able to access the form field as the SO post that I linked to above suggests.

My current view uses html helpers and generates the follow html (this was taken looking at the generated source):

<input id="Response1" name="Response1" type="checkbox" value="true" /><input name="Response1" type="hidden" value="false" /> one<br />
<input id="Response2" name="Response2" type="checkbox" value="true" /><input name="Response2" type="hidden" value="false" /> two<br />

The actual form element expected is "Response", so if I concatenate Response1 and Response2 and so on, the Response will capture the data of however many checkboxes were created and checked. The controller is expecting to see "Response" and it is a bound field in the receiving method.

This is what I typed in:

<script type="text/javascript">
  function UserCommit() {
    var myElement = document.getElementById("Response");
    myElement.value = "A new response";
    $("#thisForm").submit()
  }
</script>

But, the '.value' seen above doesn't show up in Intellisense, and of course doesn't run.

Added after original post:

I did also find this (link) SO post for using the checkbox helper which I will study and try to follow. But the javascript question still remains.
added for mplungjan in comments. Is this what you are asking, the line that generates the "Response" field?

@Html.CheckBox("Response", False)

That line in turn generates:

<input id="Response" name="Response" type="checkbox" value="true" /><input name="Response" type="hidden" value="false" />

NEVER submit a form in the submit event or the click of a submit button. Where is your field with id="Response" ? — mplungjan, Jan 20 '15 at 22:01
I added the lines I thought you were asking for above as additional material in the body of the post. I'm not sure I follow the emphatic NEVER. Are you speaking to the javascript submit I used, or the original — Alan, Jan 20 '15 at 22:21
if you want to alter the html, use input.setAttribute("value", 123) instead of just input.value=123; — dandavis, Jan 20 '15 at 23:24
Change the ID from response ifyou have multiple name=response too — mplungjan, Jan 21 '15 at 05:11

score 0 · Answer 1 · answered Jan 21 '15 at 03:58

Your JS code is valid from testing on JSFiddle, so this is likely a bug or limitation of Intellisense. Try setting the value directly on the document.getElementById instead of setting a variable first.

So change

  var elem = document.getElementById("mytext");
  elem.value = "My default value";

To:

 var elem = document.getElementById("mytext").value = "My default value";

Or, use jQuery:

$('#mytext').val("my default value");

Why don't I see the .value property for my string in javascript?

1 Answers1