onChageを用いてappendChildを使用

Question

selectで値を変化させたとき、onchangeを用いて以下２つの値
・status
・staff
をinput type = "hidden"で取ってきたいのですが、

Cannot read property 'appendChild' of undefined

と出てきます。。。hiddenを取ってくるにはどうしたらいいのでしょうか。助力をお願いいたします。以下コードを載せさせていただきます。
またjavascriptについてはhtmlのform記載箇所より下に位置しております。

  　　  <form name="form" id="form">
  　　    <fieldset>
  　　      <p>必要項目を入力して下さい。</p>
  　　　　　<p>
  　　          <label for="name">名</label>
  　　          <select name="name" id="sname" onChange="Search()">
                  <option value=""></option>
                  <?php foreach ($Info as $key => $value) {?>
                    <option value="<?php echo $value['id']?>"><?php echo $value['user_name'] ?></option>
                  <?php } ?>
                </select>
           </p>
  　　    </fieldset>
  　　  </form>

<script type="text/javascript">
function Search(){
  var element = document.getElementById( "name" );
  var tmp = element.value;
  var optionLen = document.form.name.options.length - 1;
    Info = JSON.parse('<?php echo $InfoJs ?>');
    for (var i = 0; i < optionLen; i++) {
      if (studentInfo[i]['id'] === tmp) {
        var inputStatus = document.createElement('input');
        inputStatus.setAttribute('type','hidden');
        inputStatus.setAttribute('name','status');
        inputStatus.setAttribute('value',Info[i]['status']);

        document.form.appendChild(inputStatus);

        var inputCl = document.createElement('input');
        inputCl.setAttribute('type','hidden');
        inputCl.setAttribute('name','status');
        inputCl.setAttribute('value',Info[i]['staff']);
        document.form.appendChild(inputCl);
      }
    }
}
</script>

Answer 1

全体的に参照がうまくできていない

document.getElementById( "name" );

nameというidのタグがどこかにありますか？

document.form

これも参照ができないですね

もし「<form name="form" id="form">」を拾いたいなら

document.querySelector('form');
document.getElementsByTagName('form')[0];
document.querySelector('#form');
document.getElementById('form');
document.querySelector('[name=form]');
document.forms["form"];

などいろんなやり方があるので、目的に近いものを選択して下さい

Answer 2

提示されているhtmlソース内に「document.studentForm」(「<form name="studentForm">」)が見当たらないので、おそらくは取得できていないのかと。

Comments

[naonao11]

申し訳ございません！その個所は書き間違いでしたため修正させていただきました！
ただそれでも直りませんでした。。。

[tkturbo]

いっそ「document.getElementById( "form" )」にappendChildしてはどうですか？

Answer 3

おそらく、document.studentFormが見つからないためにメソッドが繋がらなくなっている状態だと思われます。

document.querySelector()やdocument.getElementById()などで、適切なエレメントを取得してください（name属性と連動した形でJavaScriptから拾うのは、昔のやり方です）。

Comments

[naonao11]

申し訳ございません！studentFormは打ち間違えていました！修正しましたが変わらずです・・・

話が変わりますが、name属性はあまり使わない方がよいということでしょうか？

[maisumakun]

inputなどのname属性は、送る値のキーとなりますので「必要」です。

それ以外のタグについては、name属性をつけること自体、あまり行われなくなっています。