基于HTML表单中的多个下拉选项更改输入名称？

Question

我想用jQuery动态地创建添加/删除表单域，用户可以根据下拉选择提交多个查询。最后，它应该生成具有选择组合的URL。到目前为止，我已经设法使用多个查询选项创建添加/删除表单字段。

例如，如果用户对汽车提交的输入，然后它会生成URL，如：

exmaple.com/?car=xxx

和工作。

如果用户提交输入，汽车和自行车，它应产生：

exmaple.com/?car=xxx&bike=yyy 

但产生这样的：

exmaple.com/?car=xxx&car=yyy 

因此，如何能解决我这个问题？先谢谢你。

$(function() { 
 
    $.fn.addmore = function(options) { 
 
    var moreElement = this, 
 
     singlePreSelectedValue = '', 
 
     selectedValue = [], 
 
     defaultOption = { 
 
     addText: 'add more', 
 
     removeText: 'Remote', 
 
     selectBoxDuplicate: true, 
 
     avoidDuplicationSelection: function(e) { 
 
      var o = e; 
 
      if ($.inArray($(o).val(), selectedValue) != -1) { 
 
      $(o).val(singlePreSelectedValue); 
 
      alert('Value already selected.'); 
 
      } else { 
 
      var hasSelectValue = true; 
 
      $.each($('.removeDuplication'), function(i, v) { 
 
       if ($(this).val() == 'select') { 
 
       hasSelectValue = false; 
 
       return false; 
 
       } 
 

 
      }); 
 

 
      } 
 
     }, 
 
     prevSelectedValue: function(e) { 
 
      var o = e; 
 
      selectedValue = []; 
 
      $.each($('.removeDuplication'), function(i, v) { 
 
      if ($(this).val() != 'select') { 
 
       selectedValue.push($(this).val()); 
 
      } 
 
      }); 
 
      singlePreSelectedValue = $(o).val(); 
 
     } 
 
     } 
 
    defaultOption = $.extend(true, defaultOption, options); 
 

 
    /*  $(this).find('select').prepend('<option value="select" selected>Select</option>');*/ 
 
    $(moreElement).after('<a href="javascript:void(0)" data-id="more">' + defaultOption.addText + '</a>'); 
 
    $('[data-id="more"]').click(function() { 
 
     var dataMore = this, 
 
     removeDuplication = []; 
 
     $(dataMore).before($(moreElement).clone().find('input').not('input[type="submit"]').val('').end().end().find('select.removeDuplication').focus(function() { 
 
     if (!defaultOption.selectBoxDuplicate) { 
 
      defaultOption.prevSelectedValue(this); 
 
     } 
 
     }).change(function() { 
 
     if (!defaultOption.selectBoxDuplicate) { 
 
      defaultOption.avoidDuplicationSelection(this); 
 
     } 
 
     }).end().append(function() { 
 
     return $('<a href="javascript:void(0)" class="circular deleteCons icon icon-functional button" data-id="remove"><i class="fa fa-trash"></i> ' + +'</a>').click(function() { 
 
      $(this).parent().remove(); 
 
     }); 
 
     })); 
 
     if (!defaultOption.selectBoxDuplicate) { 
 
     $.each($('.removeDuplication'), function(i, v) { 
 
      if ($(this).val() != 'select') { 
 
      removeDuplication.push($(this).val()); 
 
      } 
 
     }); 
 
     $.each(removeDuplication, function(i, v) { 
 
      $('.removeDuplication').last().find('option[value="' + removeDuplication[i] + '"]').remove(); 
 
     }); 
 
     } 
 
    }); 
 
    $('.removeDuplication').focus(function(e) { 
 
     defaultOption.prevSelectedValue(this); 
 
    }).change(function() { 
 
     defaultOption.avoidDuplicationSelection(this); 
 
    }); 
 
    return this; 
 
    } 
 

 
    $('dl').addmore({ 
 
    addText: 'Add', 
 
    removeText: 'Remove', 
 
    selectBoxDuplicate: false 
 
    }); 
 
}); 
 

 

 

 

 
$(document).ready(function() { 
 
    $("select").change(function() { 
 
    var str = $(this).val(); 
 
    $("#searchtermid").attr("name", str); 
 

 
    }); 
 
});

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
 
<form class="navbar-form" action="" method="get" action="demo_form.asp"> 
 
    <dl> 
 
    <select class="removeDuplication"> 
 
\t \t \t <option value="car">Car</option> 
 
\t \t \t <option value="bike">Bike</option> 
 
\t \t \t <option value="plane">Plane</option> 
 
\t \t </select> 
 
    <textarea class="form-control custom-control" name="car" id="searchtermid" placeholder="Search term" data-toggle="tooltip" data-placement="bottom" rows="3" style="resize:none" required></textarea> 
 
    </dl> 
 
    <input class="btn btn-primary" type="submit" value="Submit"> 
 
</form>

从标准质量获得输入后，我修改了我的脚本和HTML。 https://jsfiddle.net/paul85/wjhqszmg/

但还是不让用户提交输入表格。最重要的是，当用户从它提交时，应该重定向到正确生成的URL的页面。 如果用户提交输入，汽车和自行车，然后重定向页面地址或URL将是：

exmaple.com/?car=xxx&bike=yyy 

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
<form id="main-form" class="navbar-form" action="/results.html" method="get"> 
    <div class="input_fields_wrap"> 
     <div class="form-field"> 
     <select class="removeDuplication"> 
      <option value="car" >Car</option> 
      <option value="bike">Bike</option> 
      <option value="plane">Plane</option> 
     </select> 
     <textarea class="form-control custom-control" name="car" id="searchtermid" placeholder="Search term" data-toggle="tooltip" data-placement="bottom" rows="3" style="resize:none"></textarea> 
     </div> 
    </div> 
    <button class="add_field_button">Add More Fields</button> 
    <input class ="btn btn-primary" type="submit" value="Submit" > 
</form> 

JAVASCRIPT

$(document).ready(function() { 
    var max_fields  = 3; //maximum input boxes allowed 
    var wrapper   = $(".input_fields_wrap"); //Fields wrapper 
    var add_button  = $(".add_field_button"); //Add button ID 
    var form = $('#main-form'); 
    var x = 1; //initlal text box count 
    $(add_button).click(function(e){ //on add input button click 
     e.preventDefault(); 
     if(x < max_fields){ //max input box allowed 
      x++; //text box increment 
      $(wrapper).append('<div class="form-field">\ 
           <select class="removeDuplication">\ 
            <option value=""></option>\ 
            <option value="car">Car</option>\ 
            <option value="bike">Bike</option>\ 
            <option value="plane">Plane</option>\ 
           </select>\ 
           <textarea class="form-control custom-control" name="car" id="searchtermid" placeholder="Search term" data-toggle="tooltip" data-placement="bottom" rows="3" style="resize:none"></textarea>\ 
           <a href="#" class="remove_field">Remove</a>\ 
           </div>'); //add input box 
     } else { 
     alert("Sorry, you have reached maximum add options."); 
     } 
    }); 

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text 
     e.preventDefault(); 
     $(this).parent('div').remove(); 
     x--; 
    }); 

    $(document).on('change','select.removeDuplication',function(e) { 
     e.preventDefault(); 
     var cI = $(this); 
     var others=$('select.removeDuplication').not(cI); 
     $.each(others,function(){ 
      if($(cI).val()==$(this).val() && $(cI).val()!="") { 
       $(cI).val(''); 
       alert($(this).val()+' already selected.'); 
      } 
     }); 
    }); 
    /*$(form).submit(function(e){*/ 
    form.on('submit', function(e) { 
     e.preventDefault() 
     var queries = []; 
     var slectedall=true; 
     var fillupfield=true; 
     form.find('.form-field').each(function(index, field) { 
      var query = {}; 
      query.type = $(field).find('select').val(); 
      query.value = $(field).find('textarea').val(); 
      if (query.type !=""){ 
       queries.push(query); 
      } else{ 
       slectedall=false; 
      } 
     }); 

     for (i = 0; i < queries.length; i += 1) { 
      var query = queries[i]; 
      if (query.value.trim() ===""){ 
       fillupfield=false; 
      }  
     }; 
     if (slectedall===false){ 
      alert('Please select option.'); 
     } else { 
      if (fillupfield===false){ 
       alert('Please insert your searchterm.'); 
      } else { 
      $("form").submit(); 
      } 

     } 

    }); 
}); 

Answer 1

它看起来像你正在扩展jQuery，whic h不是必需的，并且有助于使代码更加清晰易读。说实话，我甚至没有通过它找到问题 - 相反，我从头开始写了一些东西。 StackOverflow的片段不允许形式，所以这里的工作JSBin：http://jsbin.com/gokodaluna/edit?html,js,output

（请注意，我已经改变了你的HTML标记一点点）

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
</head> 
<body> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
<form id="main-form" class="navbar-form" action="" method="get" action="demo_form.asp"> 
    <div class="fields"> 
    <div class="form-field"> 
     <select class="removeDuplication"> 
     <option value="car">Car</option> 
     <option value="bike">Bike</option> 
     <option value="plane">Plane</option> 
     </select> 
     <textarea class="form-control custom-control" name="car" id="searchtermid" placeholder="Search term" data-toggle="tooltip" data-placement="bottom" rows="3" style="resize:none" required></textarea> 
    </div> 
    </div> 
    <input class="btn btn-secondary" type="button" value="Add" id="form-add"> 
    <input class="btn btn-primary" type="submit" value="Submit"> 
</form> 

<h2 id="final-url"></h2> 

</body> 
</html> 

的Javascript ：

/* Save your initial variables */ 
var form = $('#main-form'); 
var formFields = form.find('.fields') 
var addButton = $('#form-add'); 
var emptyInput = $('.form-field').clone(); // clone this at initialization so we always have an empty field 
var finalUrl = $("#final-url"); 

addButton.on('click', function() { 
    emptyInput.clone().appendTo(formFields); 
    /* clone this again so our initial field is always empty and available */ 
}) 

form.on('submit', function(e) { 
    e.preventDefault() 
    var queries = []; 
    form.find('.form-field').each(function(index, field) { 
    var query = {}; 
    query.type = $(field).find('select').val(); 
    query.value = $(field).find('textarea').val(); 
    queries.push(query); 
    }); 
    var url = window.location.href; 
    for (i = 0; i < queries.length; i += 1) { 
    var query = queries[i]; 
    var ampOrQ = (i === 0) ? "?" : "&"; 
    url += ampOrQ + query.type + "=" + query.value; 
    } 

    /* print the URL into the dom if you want to see it working */ 
    finalUrl.text(url); 

    /* or forward users to the new URL you've generated */ 
    window.location.href = url; 

}) 

编辑：在您的问题中修改后的代码中，您在该if-else语句中调用$("form").submit()。当您触发此功能时，较大的功能仍会捕获submit事件，因此它会立即再次运行e.preventDefault()。如果您只需将用户转到新网址，只需将其设置为window.location.href =即可。看到我上面的（编辑）代码的最后几行。