基於HTML表單中的多個下拉選項更改輸入名稱？

我想用jQuery動態地創建添加/刪除表單域，用戶可以根據下拉選擇提交多個查詢。最後，它應該生成具有選擇組合的URL。到目前爲止，我已經設法使用多個查詢選項創建添加/刪除表單字段。基於HTML表單中的多個下拉選項更改輸入名稱？

例如，如果用戶對汽車提交的輸入，然後它會生成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(); 
      } 

     } 

    }); 
});

來源

2017-02-17 Paul85

它看起來像你正在擴展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 =即可。看到我上面的（編輯）代碼的最後幾行。

來源

2017-02-17 22:24:20

感謝您的代碼和反饋。但仍然沒有解決我的問題。我用你的代碼再次更新了我的問題。 – Paul85

查看我上面的編輯！ –

感謝您的幫助，它爲我工作。 – Paul85

基於HTML表單中的多個下拉選項更改輸入名稱？

回答

相關問題