Search code examples
javascriptgrailsinnerhtmlappendchild

How can I　add <g:textField> in ".innerHTML"?

I want to make 2 input type=radio. when I click second radio button, I want to add four button by tag "". How can I　add input tag in ".innerHTML" ? Don't answer by JQuery cuz this system can't using jquery's append() method.

<script type='text/javascript'>
function appendChildDM()
{
  var so = document.createElement('span');
  so.innerHTML="<b> Name:  </b><g:textField name="name" value="${name}" required="true"　maxlength="30" ></g:textField><br><br>";
  so.innerHTML="<b> Company:  </b><g:textField name="company" value="${company}" maxlength="30" ></g:textField><br><br>";
  so.innerHTML="<b>E-mail:  </b><g:textField name="email" required="true" value="${email}"></g:textField><br><br>";
  so.innerHTML="<b>Phone:  </b><g:textField name="phone" value="${phone}"></g:textField>";
 document.getElementById('apch').appendChild(so);
}
</script>

in "Body" tag

   <font size="2"><b>　　System Contact Information:  <input type="radio" name="sessionUserInfo" value="1"  checked="true"/></b>　　　 <b>Name:</b>　${t.memid_name}

  <g:hiddenField name="sessionName" value = "${t.memid_name}" id="subscribeField"/>
  <g:hiddenField name="sessionOrgName" value = "${t.contract_eorg}"/>
  <g:hiddenField name="sessionEmail" value = "${t.memid_email}"/>
  <g:hiddenField name="sessionPhone" value = "${t.memid_home}"/>
  <g:hiddenField name="memdataId" value = "${t.memdata_id}"/>
                    </font>
<br><br>
<div id='apch'>
<font size="2"><p><b>　Other Contact Information:　<input type="radio" name="sessionUserInfo"  value="2" onclick="appendChildDM();"/></b></p><br>

　</font>
</div>
Solution

  • well you are using = instead of +=, using = will replace ur existing innerhtml. Is the below what you expect?

    <script type='text/javascript'>
function appendChildDM()
{
  var so = document.createElement('span');
  so.innerHTML+="<b> Name:  </b><g:textField name="name" value="${name}" required="true"　maxlength="30" ></g:textField><br><br>";
  so.innerHTML+="<b> Company:  </b><g:textField name="company" value="${company}" maxlength="30" ></g:textField><br><br>";
  so.innerHTML+="<b>E-mail:  </b><g:textField name="email" required="true" value="${email}"></g:textField><br><br>";
  so.innerHTML+="<b>Phone:  </b><g:textField name="phone" value="${phone}"></g:textField>";
 document.getElementById('apch').appendChild(so);
}
</script>