Daftar dan Belajar Sekarang!

Menimpan data array dalam ajax,

foto samsularifin05
114 Kontribusi 13 Coto
6 bulan yang lalu
bagaimana cara menyimpan data array kedalam ajax
<!-- Modal -->
<div class="modal fade" id="modalFormberlian" tabindex="-1" role="dialog" aria-labelledby="modalFormberlian" aria-hidden="true">
	<div class="modal-dialog modal-lg  modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="modalFormberlian">Form Berlian</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">

				<div class="row">
					<div class="col-12">
						<div class="form-group">
							<label>Jenis Batu</label>
							<select class="form-control select2" name="jenis_batu[]" id="jenis_batu" style="width: 100%;">
								<option>Pilih</option>
								<?php foreach ($DataBatu as $row) : ?>
									<option class="Upercase">
										<div class="Upercase" value="<?= $row->jenis_batu ?>"><?= $row->jenis_batu ?></div>
									</option> <?php endforeach; ?>
							</select>
						</div>
						<div class="form-group">
							<label for="berat">Jumlah</label>
							<div class="input-group">
								<input type="text" class="form-control Upercase" id="jumlah" name="jumlah[]" placeholder="Jumlah">
								<div class="input-group-append">
									<span class="input-group-text">Pcs</span>
								</div>
							</div>
						</div>
						<div class="form-group">
							<label for="berat_asli">Karat Batu</label>
							<div class="input-group">
								<input type="text" class="form-control Upercase" id="karat_batu" name="karat_batu[]" placeholder="Karat Batu">
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer space-between">
					<div>
						<button type="button" class="btn btn-secondary" data-dismiss="modal">Kembali</button>
						<button type="button" value="Add Row" class="add-row btn btn-primary btn-save">Simpan</button>
						<button type="button" value="Hapus Data" class="delete-row btn btn-warning btn-save">Hapus</button>
					</div>
				</div>
				<table id="example1" class="table table-bordered table-striped">
					<thead>
						<tr>
							<th>#</th>
							<th>Jenis Batu</th>
							<th>Jumlah</th>
							<th>Karat Batu</th>
						</tr>
					</thead>
					<tbody>


					</tbody>
				</table>
			</div>

		</div>
	</div>
</div>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
	$(document).ready(function() {
		
		$(".add-row").click(function() {
			var jenis_batu = $("#jenis_batu").val();
			var jumlah = $("#jumlah").val();
			var karat_batu = $("#karat_batu").val();
			var markup = `"
			<tr>
				<td><input type='checkbox' name='record'></td>
				<td>` + jenis_batu + `</td>
				<td>` + jumlah + `</td>
				<td>` + karat_batu + `</td></tr>"`;
			$("table tbody").append(markup);
		});

		// Find and remove selected table rows
		$(".delete-row").click(function() {
			$("table tbody").find('input[name="record"]').each(function() {
				if ($(this).is(":checked")) {
					$(this).parents("tr").remove();
				}
			});
		});
	});
</script>

Tag: ajax



Login untuk diksusi di forum sekolah koding