Tolong pilih kategori sesuai, jenis posting (diskusi atau bukan) dan sertakan tag/topik yang sesuai seperti komputer, java, php, mysql, dll. Promosi atau posting tidak pada tempatnya akan kami hapus!
- Bagi Anda yang ingin mendaftar, baca link berikut:
http://diskusiweb.com/discussion/50491/how-to-registrasi-diskusiweb-com-baca-ini-terlebih-dahulu
- Cara menyisipkan kode program supaya tampil rapi dan terformat dengan baik di diskusiweb.com: http://www.diskusiweb.com/discussion/50415/cara-menyisipkan-kode-program-di-diskusiweb-com
- Cara posting gambar/image di post Anda: http://www.diskusiweb.com/discussion/47345/cara-menyisipkan-menyertakan-image-pada-posting/p1

loop multiple show

</pre
 
<pre lang="java"> <script type="text/javascript">
$(document).ready(function () {
$("input[id^='input_size']").each(function () {
var id = parseInt(this.id.replace("input_size", ""));
$("#input_size" + id).change(function () {
if ($("#input_size" + id).val() !== "") {
$("#moreInputSizeLink").show();
}
});
});
$("input[id^='input_color']").each(function () {
var id = parseInt(this.id.replace("input_color", ""));
$("#input_color" + id).change(function () {
if ($("#input_color" + id).val() !== "") {
$("#moreColorInputLink").show();
}
});
});
$('#sizeMore').click(function () {
var input_size= 2;
//add more size
var moreInputTag = '';
moreInputTag += '<div class="form-pallete col-lg-6">';
moreInputTag += '<div class="container">';
moreInputTag += '<div class="row">';
moreInputTag += '<!-- Text input-->';
moreInputTag += '<div class="col-lg-3">';
moreInputTag += '<input type="file" name="size[]" id="input_size' + input_size+ '" maxlength="25" class="form-control" placeholder=""/>';
moreInputTag += '</div>';
moreInputTag += '<div class="col-lg-9">';
moreInputTag += '<div class="element">';
moreInputTag += '<div class="row">';
moreInputTag += '<!-- Text input-->';
moreInputTag += '<div class="col-lg-4 mb-3">';
moreInputTag += '<input type="file" name="color[]" id="input_color2" maxlength="25" class="form-control" value="1"/>';
moreInputTag += '</div>';
moreInputTag += '<div class="col-lg-4 mb-3">';
moreInputTag += '<input type="number" name="quantity[]" maxlength="25" class="form-control" placeholder=""/>';
moreInputTag += '</div>';
moreInputTag += '<div class="col-lg-4 mb-3">';
moreInputTag += '<input type="number" name="soldout[]" maxlength="25" class="form-control" placeholder=""/>';
moreInputTag += '</div>';
moreInputTag += '<!-- Text input-->';
moreInputTag += '</div>';
moreInputTag += '</div>';
moreInputTag += '<div id="moreColorInput"></div>';
moreInputTag += '<div style="clear:both;"></div>';
moreInputTag += '<div id="moreColorInputLink" style="margin-left: 10px;">';
moreInputTag += '<a href="javascript:void(0);" id="colorMore' + input_size+ '">Attach another Color</a>';
moreInputTag += '</div>';
moreInputTag += '</div>';
moreInputTag += '<!-- Text input-->';
moreInputTag += '</div>';
moreInputTag += '</div>';
moreInputTag += '</div>';
$('<dl id="delete_size' + input_size+ '">' + moreInputTag + '</dl>').fadeIn('slow').appendTo('#moreInputSize');
input_size++;
});
$('#colorMore').click(function () {
var input_color = $(this).attr("id");
//add more Color
var moreInputTag = '';
moreInputTag += '<div class="element">';
moreInputTag += '<div class="row">';
moreInputTag += '<div class="col-lg-4 mb-3">';
moreInputTag += '<input type="file" name="color[]" id="input_color' + input_color + '" value="' + input_color + '" maxlength="25" class="form-control" placeholder=""/>';
moreInputTag += '</div>';
moreInputTag += '<div class="col-lg-4 mb-3">';
moreInputTag += '<input type="number" name="quantity[]" maxlength="25" class="form-control" placeholder=""/>';
moreInputTag += '</div>';
moreInputTag += '<div class="col-lg-4 mb-3">';
moreInputTag += '<input type="number" name="soldout[]" maxlength="25" class="form-control" placeholder=""/>';
moreInputTag += '</div>';
moreInputTag += '</div>';
moreInputTag += '&nbsp;<a href="javascript:void" style="cursor:pointer;" onclick="deletecolorLink(' + input_color + ')">Delete ' + input_color + '</a>';
moreInputTag += '</div>';
$('<dl id="delete_color' + input_color + '">' + moreInputTag + '</dl>').fadeIn('slow').appendTo('#moreColorInput');
input_color++;
});
});
function deletesizeLink(eleId) {
if (confirm("Are you really want to delete ?")) {
var ele = document.getElementById("delete_size" + eleId);
ele.parentNode.removeChild(ele);
}
}
function deletecolorLink(eleId) {
if (confirm("Are you really want to delete ?")) {
var ele = document.getElementById("delete_color" + eleId);
ele.parentNode.removeChild(ele);
}
}
</script>

Comments

  • edited April 24
            <meta charset="UTF-8">
    <title>Input Multiple size(s)</title>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"; integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    </head>
    <body>
    <div id="container">
    <form name="Input_form" enctype="multipart/form-data" action="sizes_Input.php" method="POST">
    <fieldset>
    <legend>Input Multiple size(s)</legend>
    <section>
    <label>Browse a size</label>
     
    <div class="form-pallete col-lg-6">
    <div class="container">
    <div class="row">
    <!-- Text input-->
    <div class="col-lg-3">
    <input type="file" name="input_size1" id="input_size1" maxlength="25" class="form-control" placeholder=""/>
    </div>
    <!-- step input-->
    <div class="col-lg-9">
    <div class="element">
    <div class="row">
    <!-- Text input-->
    <div class="col-lg-4 mb-3">
    <input type="file" name="color[]" id="input_color1" maxlength="25" class="form-control" placeholder=""/>
    </div><strong><strong></strong></strong>
    <div class="col-lg-4 mb-3">
    <input type="number" name="quantity[]" maxlength="25" class="form-control" placeholder=""/>
    </div>
    <div class="col-lg-4 mb-3">
    <input type="number" name="soldout[]" maxlength="25" class="form-control" placeholder=""/>
    </div>
    <!-- Text input-->
    </div>
    </div>
    <div id="moreColorInput"></div>
    <div style="clear:both;"></div>
    <div id="moreColorInputLink" style="display:none;margin-left: 10px;">
    <a href="javascript:void(0);" id="colorMore">Attach another Color</a>
    </div>
    </div>
    <!-- end input-->
    </div>
    </div>
    </div>
    <div id="moreInputSize"></div>
    <div style="clear:both;"></div>
    <div id="moreInputSizeLink" style="display:none;margin-left: 10px;">
    <a href="javascript:void(0);" id="sizeMore">Attach another size</a>
    </div>
     
    </section>
    </fieldset>
    <div>&nbsp;</div>
    <footer>
    <input type="submit" name="Input" value="Input"/>
    </footer>
    </form>
    </div>
Sign In or Register to comment.