Javascript, add input field to form. Not working in IE

Question

I got most of this code from an answer to This question

<script type="text/JavaScript">
  function newInput(NIFormName,NIname,NIvalue,NItype='hidden'){
    var theForm = document.forms[NIFormName];
    var input = document.createElement('input');
    input.type = NItype;
    input.name = NIname;
    input.value = NIvalue;
    theForm.appendChild(input);
    return true;
  }
</script>

That seemed to work in FF but not IE 11.

So, I did a search and it looked like I needed a different method and I tried:

<script type="text/JavaScript">
  function newInput(NIFormName,NIname,NIvalue,NItype='hidden'){
    var theForm = document.forms[NIFormName];
    var input = document.createElement('input');
    input.setAttribute('type', NItype);
    input.setAttribute('name', NIname);
    input.setAttribute('value', NIvalue);
    theForm.appendChild(input);
    return true;
  }
</script>

It still works in FF 26 and does not work in IE.

When I say "it does not work" I mean I see no errors and the field is not added to the submitted data.

This is the top of my form:

<form name="writenew" method="get" action="formtest.php" onSubmit="newInput('writenew','first_added_field','Yep! I was added.');"> 

and this is formtest.php

<?php
  var_export($_GET);
?>

When I submit it with FF, this is included in the display

'first_added_field' => 'Yep! I was added.',

But in IE it is not.

How do I make this work in IE?

Answer 1

Javascript doesn't support parameter defaults like NItype='hidden'. It's a firefox only feature. See here. Try to use just NItype then check it for undefined inside the function. Here is an example.