1 Пользователь нажимает кнопку добавления драйвера
2 скрипт Проверяет, был ли создан какой-либо div с (name = driver1).
3 Если этого не произошло: он создает div с использованием приведенного ниже кода для его создания.с именем (name = driver1)
4 Если он имеет (name = driver1), он создает другой div с использованием (name = driver2) и т. д.
В основном я хочу, чтобы он создавал только именаОт 1 до 5 на всех именах ввода. Независимо от того, сколько раз пользователь нажимает кнопки добавления драйвера и удаления драйвера.
Используя приведенный ниже код, я могу достичь этого, однако, если пользователь нажимает кнопкуКнопка 5 раз, затем удаляет их все и щелкает 5 раз. Мне нужно было бы убедиться, что у почтовой программы php будет до 10 имен (name = "name10") для каждого входа, и это будет выглядеть беспорядочно для бизнеса.
Ps Я знаю, что мне нужно сменить идентификатор на класс, это просто быстрый пример.
Теперь я думаю, что могу использовать оператор IF или Switch, чтобы проверить, создан ли каждый div.Но я новичок в JavaScript и не уверен, что это лучший метод для достижения моей цели, или если это вообще возможно до того, как я начал изменять свой код.
Также кажется, что у меня может быть 2 разных скрипта jquery и JavaScript?Есть ли простой способ использовать только JavaScript?Вот рабочая скрипка
https://jsfiddle.net/oyks8jb1/1/
var count = 0;
$(document).on('click', '.aaa', function(){
var html = '
/* delete all the whitespace and returns between ‘’ to get the code below to work I formatted it to make it easier to read*/.
<div id="formwrap2" class="test'+count+'" name="test'+count+'">
<div id="ddd">
<div id="driverinfo">Driver Info<button type="button" name="remove" id="test2" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus">Remove Vechicle</span></button>
/* below is the only code that matters are input name= */.
</div>
<div id="formwrap"><div id="ftx1">YEAR:</div>
<input type="text" name="year'+count+'" class="box" maxlength="40" min="9" max="40"placeholder=""/>
</div>
<div id="formwrap">
<div id="ftx1">MAKE:</div>
<input type="text" name="make'+count+'" class="box" maxlength="40" min="9" max="40"placeholder=""/>
</div>
<div id="formwrap">
<div id="ftx1">MODEL:</div>
<input type="text" name="model'+count+'" class="box" maxlength="40" min="9" max="40"placeholder=""/>
</div>
<div id="formwrap">
<div id="ftx1">manual or stick:</div>
<section class="plan cf">
<input type="radio" name="'+count+'mors" id="'+count+'manual" value="manual"><label class="free-label four col" for="'+count+'manual">manual</label>
<input type="radio" name="'+count+'mors" id="'+count+'stick" value="stick" checked><label class="basic-label four col" for="'+count+'stick">stick</label>
</section>
</div>
</div><br><br><br></div>';
count++;
$('#item_table1').append(html);
$(document).on('click', '.remove', function(){
$(this).closest('#formwrap2').remove();
});
});
#formwrap2{
border:2px solid red;
height:230px;
width:250px;
}
<head>
<script src="scripts/modernizr-2.6.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<table class="table table-bordered" id="item_table1">
<tr>
<th><button type="button" name="aaa" id="test1" class="aaa"><span class="glyphicon glyphicon-plus">Click to Add Driver</span></button></th>
</tr>
</table>