I have a registration form where client can select via dropdown select box how many offices they want to see. So in that case I need my code to work next way - I select the option value (for example 4) and it clones me 4 office forms that I can fill. I've already done the "add-new form" when opton is changed, now I need to clone this form as many times as the value in my select box.
<div class="inner6 register-form">bla-bla-bla, code with inputs and
<div class="amount-offices fright">
<div class="headers">Anzahl teilnehmende Standorte:</div>
<select name="number_offices" class="number-offices" style="padding: 5px 5px 6px 5px;border: 1px solid #76ab26;margin-right: 10px;margin-bottom: 15px;">
<?php for ($i=1 ; $i <=1 2; $i++) { ?>
<option value="<?php echo $i; ?>">
<?php echo $i; ?>
</option>
<?php } ?>
</select>
</div>
</div>
Hidden form which I copy and append into my main form
<div class="copy-area">
<div class="register-form-extra">bla-bla-bla, code with inputs</div>
</div>
and js
$('.number-offices').change(function(){
var extraForm = $(".register-form-extra").wrap("<div>").parents('.copy-area').html();
var officesAmount = $(this).find('option:selected').val();
$('.copy-form').find('.register-form-extra').remove();
$('.register-form').after(extraForm);
});
$('.number-offices').on('change', function () {
var parent = $('.register-form');
parent.find('.register-form-extra').remove();
var num = parseInt(this.value);
var tmpForm = $(".copy-area .register-form-extra:eq(0)");
for (var i = 0; i < num; i++) {
parent.append(tmpForm.clone());
}
});
Something like this would work:
$('.copy-area').hide(); $('.number-offices').change(function() { var officesAmount = parseInt($(this).val(), 10); var e = $('.copy-area .register-form-extra').eq(0); $('.copy-area .register-form-extra').remove(); for (var i = 0; i < officesAmount; i++) { e.clone().appendTo('.copy-area'); } $('.copy-area').show(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="inner6 register-form"> <div class="amount-offices fright"> <div class="headers">Anzahl teilnehmende Standorte:</div> <select name="number_offices" class="number-offices" style="padding: 5px 5px 6px 5px;border: 1px solid #76ab26;margin-right: 10px;margin-bottom: 15px;"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> </div> <div class="copy-area"> <div class="register-form-extra"> bla-bla-bla, code with inputs </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.