В настоящее время я построил систему «Добавить больше», чтобы генерировать больше полей для пользователей в форме, а затем проверять строку запроса в случае сбоя формы. Однако это делается более процедурным образом, так как каждая версия является своей собственной, что приводит меня к дублированию аналогичного кода примерно 5 раз (по одному для каждой версии и для каждой функции), и мне было интересно, не могли бы вы помочь мне преобразовать его в более ООП, поэтому только один набор кода облегчает выполнение в моей системе и, таким образом, не заставляет меня запускать так много кода и более упрощенный код
Я пытался сделать это несколько ООП, но я продолжаю получать ошибки, потому что я не очень хорош в JavaScript или ООП, я получил его для работы с базовым JavaScript, но это означает, что у меня так много дополнительных строк кода
Итак, вот базовый код, который работает, как показано, он будет продублирован еще 3 раза после этих
<script>
<!-- MORE BIKES -->
var max_fields_morebikes = 4;
var wrapper_bike = $("#currentbikes");
var add_button_morebikes = $("#morebikes");
var counter_bikes = 1;
<!-- add and delete for morebikes -->
$(add_button_morebikes).click(function (e) {
e.preventDefault();
if (counter_bikes < max_fields_morebikes) {
counter_bikes++;
$(wrapper_bike).append('<div class="morebikesadd"><input type="text" name="currentbike[]" class="currentbikesadd" placeholder="Current Bikes" ><button class="delete">Delete</button></div>');
//add input box
} else {
alert('You Reached the limits')
}
});
$(wrapper_bike).on("click", ".delete", function (e) {
e.preventDefault();
$(this).parent('div').remove();
counter_bikes--;
});
</script>
, а также есть версии, где добавляются 2 набора входов
<script>
<!-- RACES HISTORY -->
var max_fields_racehist = 5;
var wrapper_racehist = $("#racinghistoryresults");
var add_button_racehist = $("#moreracehist");
var counter_racehist = 1;
<!-- add and delete for RaceHistory -->
$(add_button_racehist).click(function (e) {
e.preventDefault();
if (counter_racehist < max_fields_racehist) {
counter_racehist++;
$(wrapper_racehist).append('<div style=" margin-top: 10px; margin-bottom: 10px;"><input type="text" name="racehist[]" class="racehist addmoreracehistory" placeholder="Race History"> <input type="text" name="results[]" class="results addmorementionableresults" placeholder="Mentionable Results"> <button class="delete">Delete</button></div>');
//add input box
} else {
alert('You Reached the limits')
}
});
$(wrapper_racehist).on("click", ".delete", function (e) {
e.preventDefault();
$(this).parent('div').remove();
counter_racehist--;
});
</script>
Это метод, который я пробовал по крайней мере, если есть один вход
<button type="button" onclick="return addMoreRows(5,1, 'morebikesadd', 'currentbike','currentbikesadd','Current Bike', 'delete')"> Add More</button>
<script>
function addMoreRows(numFields, maxCounter, addMoreClass, inputName, inputClass, placeHolderName,buttonClass){
var max_fields = numFields;
var wrapper = document.createElement("div");
var counter = maxCounter;
if (counter < max_fields) {
counter++;
wrapper.appendChild('<div class="' + addMoreClass + '"><input type="text" name="'+ inputName +'[]" class="'+ inputClass +'" placeholder="'+ placeHolderName +'"><button class="'+ buttonClass +'"> Delete </button></div>');
}
else {
alert('You Have Reached the limits')
}
}
</script>
Я хочу знать, если это возможно, как я могу объединить его, чтобы он просто принимал значения, которые я ввел и работал, поэтому мне нужно только 1, возможно, 2 функции (зависит, если он может объединить только 1 вход и 2 входа) чтобы я мог сделать onclick=" addMoreRows(values,values,etc)", чтобы можно было сделать проще