Question

我正在尝试使用JS和jQuery创建SPA。我在其中创建了一个动态表单，用户可以在其中选择添加特定字段。在最终输出中，他未生成和使用的那些字段将导致“未定义”。有没有办法，如果用户不使用它，我可以为它分配一个默认值，如空字符串？

我附上了一段html和js代码。

var count1 = 1;
var limit1 = 6;

function addInput1(divName) {
    if (count1 == limit1) {
        alert("You have reached the limit of adding " + count1 + " interests");
    } else {
        var newdiv = document.createElement('div');

        newdiv.innerHTML = "<input type='text' name='myInputs[]' id='int" + (count1 + 1) + "' style='width:100%;' value='' class='text-center' " +
            "placeholder='technology" + (count1 + 1) + "'><br/><br/>";

        document.getElementById(divName).appendChild(newdiv);
        count1++;
    }
}

 <form class="form1" style="padding-top: 2%;">

  <div class="text-center">

  <h2><b>Full Name</b></h2><br/>
 <input type="text" class="text-center" id="fullname" name="fullname" placeholder="Name" style="width:100%;"><br><br/>

 <h2><b>Interested in:</b></h2>
   <div id="dynamicInput1">
   <input type="text" class="text-center" name="interest1" placeholder="technology1" id="int1" style="width:100%;"><br/><br/>
    </div>

  <input type="button" class="btn-primary" value="Add another interest" onClick="addInput1('dynamicInput1');" style="width:auto">
    </div>
   </form>

一旦表单值被放入，我使用另一个js将原始html文件替换为另一个具有表单值的html文件。如果用户没有生成文本输入，则将undefined作为这些位置的输出。我也附上了一个js代码的nippet。我知道显而易见的部分是未定义的，因为它未定义但是有没有办法像它一样在空字符串中放入一个默认值？

 var experiment1 = function() 
            {
var fullname = $("#fullname").val(); 
              
 var int1 = $("#int1").val();
 var int2 = $("#int2").val();
 var int3 = $("#int3").val();
 var int4 = $("#int4").val();
 var int5 = $("#int5").val();
 var int6 = $("#int6").val();
 '<div class="container">' +
   '<div class="row">' +
   '<div class="col-md-3 col-lg-3 col-sm-3 col-xs-3">' +
   '<h3>Interested in</h3>' +
      '</div>' +
      '<div class="col-md-9 col-lg-9">' +
  '<ul class="pull-left" style="font-size:1.4em; padding-top:3%; list-style:none; margin-left:-4%; word-break:normal;">' +
   '<li class="pull-left">' + int1 + '&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</li>' +
   '<li class="pull-left">' + int2 + '&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</li>' +
   '<li class="pull-left">' + int3 + '&#160;&#160;</li><br/>' +
   '<li class="pull-left">' + int4 + '&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</li>' +
    '<li class="pull-left">' + int5 + '&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</li>' +
'<li class="pull-left">' + int6 + '&#160;&#160;</li><br/>' +
                    '</ul>' +
                    '</div>' +
                    '</div>' +
                    '</div>' +

            }

        //passing the value to the main html file

        $("#bodytag").html(experiment1);

Answer 1

您可以进行条件检查以查看值是否未定义，例如：

var int1 = $("#int1").val();
if (typeof int1 === "undefined") {
     int1 = "";
}

如何设置默认值以形成动态创建的元素？

1 个答案: