Question

我目前一直在研究这个代码，我似乎无法弄明白。我打算这样做，以便如果按下单选按钮，运送不是免费的，则会弹出一个输入字段，指定使用DOM的添加成本。我还试图弄清楚如何添加文本来描述输入字段，并验证输入字段。

<!DOCTYPE html>
<html>
    <head>        
    </head>
    <body>
        <script>

        function myFunction() {
            var x = document.createElement("INPUT");
            var c = 1;
            if (c = 1) {
            x.setAttribute("type", "text");

            var sp2 = document.getElementById("emailP");            
    //      var br = document.createElement("br");
    //      sp2.appendChild(br);
    //      alert("added break");           
            var sp2 = document.getElementById("emailP");
            var parentDiv = sp2.parentNode;
            parentDiv.insertBefore(x, sp2); 
            c++;
            alert("Added Text Box");
            }
            }
        </script>
        <form action="#" method="post" onsubmit="alert('Your form has been submitted.'); return false;">

            <p class="boldParagraph">Upload an Image:</p>
            <input type="file" id="pic" accept="image/*" required>

            <p class="boldParagraph">Name of seller:</p> 
            <input class="averageTextBox" type="text" id="seller" value="" required>

            <p class="boldParagraph" id = "tip3P">Shipping costs are free:</p>
            <input type="radio" name="tip3" value="3" checked /> Yes
            <input type="radio" name="tip3" value="4" onclick="myFunction(); this.onclick=null;"/> No

            <p class="boldParagraph" id = "emailP">Email of seller:</p>
            <input class="averageTextBox" type="email" id="emailAddress" value="" required>

            <p class="boldParagraph">Closing date for auction:</p> 
            <input type="date" id="closeDate" value="" required>

            <br><br>
            <button>Submit</button>

        </form>
    </body>
</html>

Answer 1

创建label元素并使用innerHTML填充文字。然后附加到DOM。

示例代码段：

function myFunction() {
  var label = document.createElement("label");
  label.innerHTML = "<br>Shipment Cost : ";
  var x = document.createElement("INPUT");
  var c = 1;
  if (c = 1) {
    x.setAttribute("type", "text");

    var sp2 = document.getElementById("emailP");
    //      var br = document.createElement("br");
    //      sp2.appendChild(br);
    //      alert("added break");           
    var sp2 = document.getElementById("emailP");
    var parentDiv = sp2.parentNode;
    parentDiv.insertBefore(x, sp2);
    parentDiv.insertBefore(label, x);
    c++;
    alert("Added Text Box");
  }
}

<form action="#" method="post" onsubmit="alert('Your form has been submitted.'); return false;">

  <p class="boldParagraph">Upload an Image:</p>
  <input type="file" id="pic" accept="image/*" required>

  <p class="boldParagraph">Name of seller:</p>
  <input class="averageTextBox" type="text" id="seller" value="" required>

  <p class="boldParagraph" id="tip3P">Shipping costs are free:</p>
  <input type="radio" name="tip3" value="3" checked />Yes
  <input type="radio" name="tip3" value="4" onclick="myFunction(); this.onclick=null;" />No

  <p class="boldParagraph" id="emailP">Email of seller:</p>
  <input class="averageTextBox" type="email" id="emailAddress" value="" required>

  <p class="boldParagraph">Closing date for auction:</p>
  <input type="date" id="closeDate" value="" required>

  <br>
  <br>
  <button>Submit</button>

</form>

OR

您可以隐藏文本框，并在用户点击否时显示该文本框。此外，仅在未选择装运单选按钮时才应用验证。

我建议使用jQuery，请参阅下面的代码：

jQuery是一个快速，小巧且功能丰富的JavaScript库。它通过易于使用的API在大量浏览器中运行，使得HTML文档遍历和操作，事件处理，动画和Ajax变得更加简单。通过多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式。

var radioButtons = $("[name=tip3]");
radioButtons.on("change", function() {
  if ($("[name=tip3]:checked").val() == "3") {
    $("#shipmentDetail").hide();
  } else {
    $("#shipmentDetail").show();
  }
})
$("#submit").on("click", function() {
  var flag = true;
  if ($("[name=tip3]:checked").val() == "4") {
    if ($("#shipmentDetail").val() == "") {
      flag = false;
      alert("enter some value");
    }
  }

  //other validations here

  if (flag) {
    $("#form").submit()
  }
})

#shipmentDetail {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form" action="#" method="post">

  <p class="boldParagraph">Upload an Image:</p>
  <input type="file" id="pic" accept="image/*" required>

  <p class="boldParagraph">Name of seller:</p>
  <input class="averageTextBox" type="text" id="seller" value="" required>

  <p class="boldParagraph" id="tip3P">Shipping costs are free:</p>
  <input type="radio" name="tip3" value="3" checked />Yes
  <input type="radio" name="tip3" value="4" />No
  <label id="shipmentDetail" for="price">Shipment Cost:
    <input id="price" type="text" value="" />
  </label>
  <p class="boldParagraph" id="emailP">Email of seller:</p>
  <input class="averageTextBox" type="email" id="emailAddress" value="" required>

  <p class="boldParagraph">Closing date for auction:</p>
  <input type="date" id="closeDate" value="" required>

  <br>
  <br>
  <button id="submit">Submit</button>

</form>

Answer 2

替换警告（＆＃34;添加了文本框＆＃34;）;

使用：

        var additional_fees = prompt("Type in");
        x.setAttribute("value", additional_fees)

使用DOM创建输入

2 个答案: