jQuery   发布时间:2022-04-19  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了javascript – php / jQuery – formvalidation,获取动态添加输入的值大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图使用 Formvalidation.io plugin,动态添加输入字段.

这些是我的意见:

<div class="col-lg-4">

    <label class="control-label">Model</label>
    <SELEct name="Box[0].model" class="ui dropdown dropdown-model semantic-dropdown">
        <option value="">Choose Model</option>
        <option value="model_one">Model One</option>
        <option value="model_two">Model Two</option>
        <option value="model_three">Model Three</option>
    </SELEct>

</div>

<div class="col-lg-4">
    <label class="control-label">Type</label>
    <SELEct name="Box[0].type" class="ui dropdown dropdown-type semantic-dropdown">
        <option value="">Choose Type</option>
        <option value="0">Ingen Konfiguration</option>
        <option value="1">Sommer</option>
        <option value="2">Vinter</option>
    </SELEct>

</div>

<div class="col-lg-4">
    <label class="control-label">Temperatur</label>

    <SELEct name="Box[0].temperatur" class="ui dropdown dropdown-temperatur semantic-dropdown">
        <option value="">Choose Temperatur</option>
        <option value="0">No Temperature</option>
        <option value="1">2-8 Grader</option>
        <option value="2">15-25 Grader</option>
        <option value="3">Frozen</option>
    </SELEct>

</div>
<a href="#" class="addButton">Add extra input</a>

而且,我的隐藏字段模板:

<!-- The template for adding new field -->
<div class="form-group hide" id="bookTemplate">
    <div class="col-lg-4">
        <SELEct name="model" class="ui dropdown dropdown-model semantic-dropdown">
            <option value="">Choose Model</option>
            <option value="model_one">Model One</option>
            <option value="model_two">Model Two</option>
            <option value="model_three">Model Three</option>

        </SELEct>

    </div>
    <div class="col-lg-4">
        <SELEct name="type" class="ui dropdown dropdown-type semantic-dropdown">
            <option value="">Choose Type</option>
            <option value="0">Ingen Konfiguration</option>
            <option value="1">Sommer</option>
            <option value="2">Vinter</option>
        </SELEct>

    </div>
    <div class="col-lg-4">

        <SELEct name="temperatur" class="ui dropdown dropdown-temperatur semantic-dropdown">
            <option value="">Vælg Temperatur</option>
            <option value="0">No Temperature</option>
            <option value="1">2-8 Grader</option>
            <option value="2">15-25 Grader</option>
            <option value="3">Frozen</option>
        </SELEct>

    </div>
    <div class="col-xs-1">
        <button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i></button>
    </div>
</div>
<!-- END HIDDEN TEMPLATE-->

添加字段并动态验证它们就像它应该的那样.但是,在提交表单时,我没有看到输入的值:这是上面的var_dump($_ POST):

"array(4) {
  ["Box"]=>
  array(3) {
    [0]=>
    String(1) "0"
    [1]=>
    String(1) "2"
    [2]=>
    String(1) "1"
  }
  ["model"]=>
  String(0) ""
  ["type"]=>
  String(0) ""
  ["temperatur"]=>
  String(0) ""

表单使用AJAX提交:

//Submit the form:
$('#bookingform').on('submit',function(E) { 
    e.preventDefault(); //prevent form from submitTing
    $form = $(this);
    // Use Ajax to submit form data
    $.ajax({
        url: '/api/submit-form',type: 'POST',data: $form.serialize(),dataType: "json",success: function(data) {
            console.log(data.result);
            if (data.result == 'success') {
                console.log(data);
            } else {
                alert('Error #1');
            }
        },error: function(data) {
            console.log("ERROR");

        }
    });

});

运行console.log($form.serialize());在表格上:

Box%5B0%5D.model=model_one&Box%5B0%5D.type=1&Box%5B0%5D.temperatur=1&model=&type=&temperatur=

正如你所看到的,我没有得到框[o] .name的值 – 此外,我对隐藏字段的输入值不感兴趣,只有它们可见(Box [].Name)

编辑:
 以下是添加输入的javascript代码

bookIndex = 0;
.. code here that is not relevant ..          
// Add button click handler
          .on('click','.addButton',function() {
              bookIndex++;
              var $template = $('#bookTemplate'),$clone = $template
                  .clone()
                  .removeClass('hide')
                  .removeAttr('id')
                  .attr('data-book-index',bookIndeX)
                  .insertBefore($templatE);

              // update the name attributes
              $clone
                  .find('[name="model"]').attr('name','Box[' + bookIndex + '].model').end()
                  .find('[name="type"]').attr('name','Box[' + bookIndex + '].type').end()
                  .find('[name="temperatur"]').attr('name','Box[' + bookIndex + '].temperatur').end();

              //Semantic Dropdown - refresh dynamic added dropdowns:
              $('.semantic-dropdown').dropdown();

              // Add new fields
              // Note that we also pass the validator rules for new field as the third parameter
              $('#bookingform')
                  .formValidation('addField','Box[' + bookIndex + '].model',titleValidators)
                  .formValidation('addField','Box[' + bookIndex + '].type',isbnValidators)
                  .formValidation('addField','Box[' + bookIndex + '].temperatur',priceValidators);
          })

但是,如上所述,我可以动态添加输入,问题是从动态添加的输入中获取值.我似乎无法在formvalidation.io插件文档中找到它.

解决方法

我认为问题出在dataType中,因为你发送x-www-form-urlencoded而不是json数据,所以试着改变:

dataType:“html”并添加contentType:“application / x-www-form-urlencoded; charset = UTF-8”//认设置

$.ajax({
    url: '/api/submit-form',dataType : "html",contentType: "application/x-www-form-urlencoded; charset=UTF-8",....
});

大佬总结

以上是大佬教程为你收集整理的javascript – php / jQuery – formvalidation,获取动态添加输入的值全部内容,希望文章能够帮你解决javascript – php / jQuery – formvalidation,获取动态添加输入的值所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。