Question

我现在卡住了，我不知道该怎么办。解决方案可能很简单，但由于我是JavaScript环境的新手，我有点迷失。

我创建了一个检查选项，按下该选项后，它会生成一个输入表单，以填充“添加新”按钮以生成另一个输入表单。

在我的代码中，当按下“添加新”按钮时，它已经创建了一个带有“删除”按钮的动态输入表单但是，按下时我似乎无法使这个“删除”禁止工作。

欢迎所有帮助。我正在使用JavaScript与JavaScript。最终我将使用pup作为我的中间人在sql数据库中保存这些表单值。

PS：我正在使用WordPress作为Web开发，因为页面已经在其中创建了，是的，我知道我应该在主html页面之外使用JavaScript和CSS。

这是我到目前为止的代码：

    <!DOCTYPE html>
<html>
<style type="text/css">
  label{
    float:left;
    width: 10em;
    text-align: right;
    margin-right: 10px;
  }
</style>


<script type="text\javascript">
  function checkform(form) {
    // get all the inputs within the submitted form
    var inputs = form.getElementsByTagName('input');
    for (var i = 0; i < inputs.length; i++) {
        // only validate the inputs that have the required attribute
        if(inputs[i].hasAttribute("required")){
            if(inputs[i].value == ""){
                // found an empty field that is required
                alert("Please fill all required fields");
                return false;
            }
        }
    }
    return true;
}
</script>



<script type="text/javascript">

//This function adds another form input when button "Add" is pressed
  var counter = 1;
var limit = 5;
function addInput(divName){
     if (counter == limit)  {
          alert("You have reached the limit of adding " + counter + " Co-PI or Co-Investigators");
     }
     else {
          var divName = divName;
          var newDivName = (divName + counter);
          var newdiv = document.createElement('div');
          newdiv.id = "dynamicInput" + counter;
          newdiv.innerHTML = (counter + 1) + ". Co-PI or Co-Investigator Information: <br>" +
          "<label>First Name  : </label><input type='text' name='fname[]' maxlength='35' required><br> " +
           "<label>Last Name  : </label><input type='text' name='lname[]' maxlength='35'><br> " +
           "<label>Degree  : </label><input type='text' name='degree[]' maxlength='10'><br> " +
           "<label>Current Position  : </label><input type='text' name='cPos[]' maxlength='30'><br> " +
           "<label>Institution  : </label><input type='text' name='inst[]' maxlength='40'><br> " +
           "<label>School  : </label><input type='text' name='school[]' maxlength='40'><br> " +
           "<label>Department  : </label><input type='text' name='depart[]' maxlength='40'><br> " +
           "<label>Program  : </label><input type='text' name='program[]' maxlength='40'><br> " +
           "<label>Email  : </label><input type='text' name='email[]' maxlength='255'><br> " +
           "<label>Phone (xxx-xxx-xxxx)  : </label><input type='text' name='phone[]' maxlength='10'> <br><br>"  + 
           "<input type='button' value='Delete Previous Form' onClick='removeForm(divName, newDivName);'>  ";

          document.getElementById(divName).appendChild(newdiv);
          counter++;
     }
}

//Delete div form when delete button is pressed
function removeForm(parentDiv, childDiv){
    if(childDiv == parentDiv)
    {
        alert("Cannot delete anymore form entries!");
    }

    else if (document.getElementById(childDiv))
    {
        var child = document.getElementById(childDiv);
        var parent = document.getElementById(parentDiv)
        parent.removeChild(child);
        counter--;
    }

    else
    {
        alert("Form has been removed or does not exist.");
        return false;
    }
}
</script>


<script type="text/javascript">
function aff_div(ladiv) {
  document.getElementById(ladiv).style.display = "inline";
}

function cach_div(ladiv) {
  document.getElementById(ladiv).style.display = "none";
}

function affich_conj() {
  if (document.forms.CoPI_CoInv_Info.yesNoChkbox[0].checked == true) {
    aff_div("dynamicInput");
    aff_divBtn("btn_New_CoPI_Inv");
  }

  if (document.forms.CoPI_CoInv_Info.yesNoChkbox[1].checked == true) {
    cach_div("dynamicInput");
    cach_divBtn("btn_New_CoPI_Inv");
  }
}


function aff_divBtn(BtnDiv) {
  document.getElementById(BtnDiv).style.display = "inline";
}

function cach_divBtn(BtnDiv) {
  document.getElementById(BtnDiv).style.display = "none";
}

</script>


<form id="CoPI_CoInv_Info" onsubmit="return checkform(this)">

<label1>Do you want to add a Co-PI or Co-Investigator? </label1>
  <input type="radio" name="yesNoChkbox" value="yes" onclick="affich_conj();"> yes
  <input type="radio" name="yesNoChkbox" value="no" checked="checked" onclick="affich_conj();"> no
<br><br>

  <div id="dynamicInput">
                 1. Co-PI or Co-Investigator Information: <br>
       <label>First Name  : </label><input type="text" name="fname[]" maxlength="35" required><br> 
       <label>Last Name  : </label><input type="text" name="lname[]" maxlength="35"><br> 
       <label>Degree  : </label><input type="text" name="degree[]" maxlength="10"><br>
       <label>Current Position  : </label><input type="text" name="cPos[]" maxlength="30"><br>
       <label>Institution  : </label><input type="text" name="inst[]" maxlength="40"><br>
       <label>School  : </label><input type="text" name="school[]" maxlength="40"><br>
       <label>Department  : </label><input type="text" name="depart[]" maxlength="40"><br>
       <label>Program  : </label><input type="text" name="program[]" maxlength="40"><br>
       <label>Email  : </label><input type="text" name="email[]" maxlength="255"><br>
       <label>Phone (xxx-xxx-xxxx)  : </label><input type="text" name="phone[]" maxlength="10"> <br><br>

     </div>
<divBtn id="btn_New_CoPI_Inv">     
<input type="button" value="Add New Co-PI or Co-Investigator..." onClick="addInput('dynamicInput');">  

</divBtn>    
</form>

<script type="text/javascript">
  cach_div("dynamicInput");
  cach_divBtn("btn_New_CoPI_Inv");
</script>
</html>

Answer 1

您需要引用并转义字符串中的变量〜查看内联事件处理程序。

  var divName = divName;
  var newDivName = (divName + counter);
  var newdiv = document.createElement('div');
  newdiv.id = "dynamicInput" + counter;
  newdiv.innerHTML = (counter + 1) + ". Co-PI or Co-Investigator Information: <br>" +
  "<label>First Name  : </label><input type='text' name='fname[]' maxlength='35' required><br> " +
   "<label>Last Name  : </label><input type='text' name='lname[]' maxlength='35'><br> " +
   "<label>Degree  : </label><input type='text' name='degree[]' maxlength='10'><br> " +
   "<label>Current Position  : </label><input type='text' name='cPos[]' maxlength='30'><br> " +
   "<label>Institution  : </label><input type='text' name='inst[]' maxlength='40'><br> " +
   "<label>School  : </label><input type='text' name='school[]' maxlength='40'><br> " +
   "<label>Department  : </label><input type='text' name='depart[]' maxlength='40'><br> " +
   "<label>Program  : </label><input type='text' name='program[]' maxlength='40'><br> " +
   "<label>Email  : </label><input type='text' name='email[]' maxlength='255'><br> " +
   "<label>Phone (xxx-xxx-xxxx)  : </label><input type='text' name='phone[]' maxlength='10'> <br><br>"  + 
   "<input type='button' value='Delete Previous Form' onClick='removeForm(\""+divName+"\", \""+newDivName+"\");'>  ";

如果您要使用removeForm选择器，parentNode功能可以简化，因为按钮是您创建的div的直接子项，因此您可能会这样做：

function removeForm(e){
    e.target.parentNode.parentNode.removeChild( e.target.parentNode );
}

并使用

在HTML中调用它

    <input type='button' value='Delete Previous Form' onClick='removeForm(event);'>

Answer 2

尝试要删除的Div的传递ID：

newdiv.id = "dynamicInput" + counter;
newdiv.innerHTML = (counter + 1) + "... <input type='button' value='Delete Previous Form' onClick='removeForm(\"dynamicInput\"" + counter");'>";

然后，在removeForm（）中：

function removeForm(id){
  if(document.getElementById(id)) document.getElementById(id).outterHTML ='';
}

如何使用javascript动态删除在html中创建的输入表单

2 个答案: