如何不允许用户在扩展表单javascript函数中删除原始表单

How do I not allow a user to remove the original form in an extend forms javascript function?

本文关键字：表单 javascript 函数 删除 原始 扩展 不允许 用户      更新时间：2023-09-26

http://www.quirksmode.org/dom/domform.html

我正在尝试实现这个网站中教授的功能，允许用户扩展表单，它运行良好，但第一个/原始表单也有一个删除按钮，因此用户实际上可以删除唯一的表单(尽管他/她可以将其添加回来(。如何不显示第一个表单的删除按钮？

html:

<div id="readroot" style="display: none">
<input type="button" value="Remove review"
    onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br />
<input name="cd" value="title" />
<select name="rankingsel">
    <option>Rating</option>
    <option value="excellent">Excellent</option>
    <option value="good">Good</option>
    <option value="ok">OK</option>
    <option value="poor">Poor</option>
    <option value="bad">Bad</option>
</select><br /><br />
<textarea rows="5" cols="20" name="review">Short review</textarea>
<br />Radio buttons included to test them in Explorer:<br />
<input type="radio" name="something" value="test1" />Test 1<br />
<input type="radio" name="something" value="test2" />Test 2
</div><form method="post" action="/cgi-bin/show_params.cgi">
<span id="writeroot"></span>
<input type="button" onclick="moreFields()" value="Give me more fields!" />
<input type="submit" value="Send form" /></form>

javascript：

<script>
    var counter = 0;
    function moreFields() {
        counter++;
        var newFields = document.getElementById('readroot').cloneNode(true);
        newFields.id = '';
        newFields.style.display = 'block';
        var newField = newFields.childNodes;
        for (var i=0;i<newField.length;i++) {
            var theName = newField[i].name
            if (theName)
                newField[i].name = theName + counter;
            }
        var insertHere = document.getElementById('writeroot');
        insertHere.parentNode.insertBefore(newFields,insertHere);
    }
    window.onload = moreFields;
</script>

根据您提供的代码，如果您不想在默认情况下显示表单，您只需要在页面加载时删除对moreFields((方法的调用。

通过删除js脚本的最后一行

window.onload = moreFields;

您将阻止在页面加载时创建表单。以下是JFiddle中经过调整的代码，无论是否使用window.onload调用，您都可以看到它的作用：

带OnLoad：https://jsfiddle.net/hyyjzjh1/

无OnLoad：https://jsfiddle.net/hyyjzjh1/1/

更新：

我重新阅读了这个问题，意识到阿尔文想阻止第一种形式被取消。我玩过这个代码，我相信这会奏效：

HTML:

 <body>
      <div id="readroot" style="display: none">
             <!--Hide the button by default-->
            <input type="button" value="Remove review" onclick="RemoveReview(this)" style="display: none" /><br /><br />
            <input name="cd" value="title" />
             <select name="rankingsel">
                <option>Rating</option>
                <option value="excellent">Excellent</option>
                <option value="good">Good</option>
                <option value="ok">OK</option>
                <option value="poor">Poor</option>
                <option value="bad">Bad</option>
             </select><br /><br />
            <textarea rows="5" cols="20" name="review">Short review</textarea>
            <br />Radio buttons included to test them in Explorer:<br />
            <input type="radio" name="something" value="test1" />Test 1<br />
            <input type="radio" name="something" value="test2" />Test 2
     </div><form method="post" action="/cgi-bin/show_params.cgi">
     <span id="writeroot"></span>
     <input type="button" onclick="moreFields()" value="Give me more fields!" />
     <input type="submit" value="Send form" /></form>
</body>

JAVASCRIPT

   var counter = 0;
   function moreFields() {
      counter++;
      var newFields = document.getElementById('readroot').cloneNode(true);
      //This will only run the second time a form is created. It basically unhides the Remove Review button
      if (counter >1)
         newFields.childNodes[3].style.display = "block";
      //A separate ID is assigned to each form which is later used to identify the form to be removed 
      newFields.id = counter;
      newFields.style.display = 'block';
      var newField = newFields.childNodes;
      for (var i=0;i<newField.length;i++) {
          var theName = newField[i].name
          if (theName)
            newField[i].name = theName + counter;
      }
      var insertHere = document.getElementById('writeroot');
      insertHere.parentNode.insertBefore(newFields,insertHere);
  }
  function RemoveReview (node){
    //The check below is probably not needed since the remove button will never show for the first form but just in case...
    if (node.parentNode.id > 1)
       node.parentNode.parentNode.removeChild(node.parentNode)
}
相关文章：