Html.TextBoxFor setting value using javascript

Question

I am trying to make a TextBoxFor as a toggle button in a form, changed the type to button as follows:

@using (Html.BeginForm("MyForm", "Home"))
       { 
     @Html.TextBoxFor(model => model.BothProjections1, new {@type = "button", @onclick = "changeButton('BothProjections1')",@style = "background-color: #FFFFFF; font-size: 10px; padding: 1px; width: 18px;" })
}

Using the following javaScript to change the value and background color:

function changeButton(id) {
        var button = document.getElementById(id);
        if (button.value == "") {
            button.value = "1";
            button.style.backgroundColor = 'red';
            button.style.color = 'Black';
        }
        else if (button.value == "1") {
            button.value = "2";
            button.style.backgroundColor = 'cyan';
            button.style.color = 'Black';
        }
        else if (button.value == "2") {
            button.value = "3";
            button.style.backgroundColor = 'yellow';
            button.style.color = 'Black';
        }
        else if (button.value == "3") {
            button.value = "";
            button.style.backgroundColor = 'white';
            button.style.color = 'white';
        }
    }

The value changes on the screen, however it is null when I debug it in the controller by checking the values of form!!

  [HttpPost]
   public ActionResult MyForm (MyModel form)

Everything works if I remove the Type="button" and input the value manually, but that not what I am trying to do. You suggestions will be appreciated.

Answer 1

After a bit of testing, it appears that <input type="button" /> elements DO NOT get their values POSTED in a standard form post.

Three things you could try.

• Post the form with AJAX and manually add the value from the button to the AJAX request
• A <input type="submit" /> DOES get its value POSTED with a form post, so perhaps try input submits instead of input buttons. They do of course have slightly different behavior than buttons (i.e. they submit the form). This would mean they you may have to change your behavior slightly as you probably won't be able to do a click on them and post the form. Also they will only submit there value if they are used to submit the form. Not a proplem if you only have one, but if you have two or more, only the value from the one that is clicked will POST its value, the others will not POST theirs. In your case I think this may still be OK, as you appear to be only changing one?!
• You could sill just use a textbox, make it readonly (so the user cannot type into it, but you can still change its value with javascript) and style it like a button

I think the reason for this is as per the W3C spec, <input type="button" /> is described as a push button and as such have no default behavior and are there for running scripts if needed (although they recommend a <button> if you want better styling)

From W3C Form spec here, relevant line emphasized

[..snip..]

1. If any of the following conditions are met, then skip these substeps for this element:

   • The field element has a datalist element ancestor.
   • The field element is disabled.
   • The field element is a button but it is not submitter.
   • The field element is an input element whose type attribute is in the Checkbox state and whose checkedness is false.
   • The field element is an input element whose type attribute is in the Radio Button state and whose checkedness is false.
   • The field element is not an input element whose type attribute is in the Image Button state, and either the field element does not have a name attribute specified, or its name attribute's value is the empty string.
   • The field element is an object element that is not using a plugin.

Otherwise, process field as follows: [..snip..]