Stepformwizard is not getting hidden. Overflowing on right of the screen - javascript

Am not very expert in jquery and stepformwizard. Am working on code written by someone else. The issue is the multistepformwizard fieldset is used and the next step should be loaded only when Next button is clicked. But currently both of the steps are visible on the screen with extra horizontal scrollbar. I dont want the step 2 form to be visible. Here is the html and jquery code.
<div class="ztab-sec ztab-desbrd bksrvsec bksecrv2">
<div class="row">
<div class="col-md-12">
<form action="<?php echo base_url()?>service/service_request" method="POST" id="wizard_example_6" autocomplete="off">
<input type="hidden" value="<?php echo $ownerArr[0]['email_id']; ?>" name="email_id">
<input type="hidden" value="<?php echo $ownerArr[0]['phone']; ?>" name="mobile">
<fieldset>
<legend>Basic information about your car</legend>
<div class="row bkmargin">
<div class="col-lg-4 col-sm-4">
<div class="form-group">
<label>Vehicle Brand</label>
<select id="u_car_id" class="form-control" name="car_id" required>
<option selected disabled value="">Select a Car</option>
<?php foreach ($cars as $car_details) : ?>
<option value="<?php echo $car_details['user_car_id']; ?>"><?php echo $car_details['makesTitle']; ?> (<?php echo $car_details['modelsTitle']; ?>) <?php echo $car_details['car_reg_no']; ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="col-lg-4 col-sm-4">
<div class="form-group">
<label>Variants</label>
<input type="text" class="form-control" name="variant" placeholder="Variants" required data-parsley-group="block0" id="variant" readonly pattern="^[a-zA-Z\s]*$">
</div>
</div>
<div class="col-lg-4 col-sm-4">
<div class="form-group">
<label>Transmission</label>
<input type="text" class="form-control" placeholder="Transmission" name="transmission" readonly required data-parsley-group="block0" id="transmission" pattern="^[a-zA-Z\s]*$">
</div>
</div>
</div>
<legend class="clearfix">Select service for your car? <a href="#" class="car-link pull-right" data-toggle="modal" data-target="#myModal3" >Add New Car</a></legend>
<div class="row bkmargin">
<div class="col-md-4 col-sm-4">
<div class="form-group besrvx">
<input id="option-one" name="service_type" value="1" class="styled-radio " type="radio" data-parsley-group="block0" required data-required-message="Please check one service">
<label class="srvlabel" id="1" for="option-one"><strong>Basic Service: </strong>
<span class="srvspa">3 months or 5000 kms (whichever is earlier)</span>
</label>
</div>
</div>
</fieldset>
<fieldset>
<legend>Vehicle picked up address </legend>
<div class="row bkmargin">
<div class="col-lg-4 col-sm-4">
<div class="form-group">
<label>Select Address</label>
<select class="form-control" id="user_add_id" name="pick_id">
<option selected disabled>Select Address</option>
<?php $i=1; foreach ($address as $user_details) : ?>
<option value="<?php echo $user_details['add_id'] ?>"> Address <?php echo $i; ?></option>
<?php $i++; endforeach; ?>
<option id="neww" class="neww" value="neww">Select new Address</option>
</select>
</div>
</div>
<div class="col-lg-4 col-sm-4">
<div class="form-group">
<label>Address Type</label>
<select class="form-control" id="add_type" name="add_type" disabled>
<option value="" selected disabled>Select Address Type</option>
<option value="Home">Home Address</option>
<option value="Office">Office Address</option>
<option value="Other">Other Address</option>
</select>
</div>
<div class="row bkmargin">
<noscript>
<input class="nocsript-finish-btn sf-right nocsript-sf-btn" type="submit" value="submit"/>
</noscript>
</div>
</fieldset>
</form>
I have skipped some part as its a long form. I want the second fieldset should only be visible when user clicks on next button
here is the jquery
w6 = $("#wizard_example_6").stepFormWizard({
onNext: function(b, a) {
return $("#wizard_example_6").parsley().validate("block" + b)
},
onFinish: function(b) {
return $("#wizard_example_6").parsley().validate()
}
});
var d = window.location.hash.match(/^#step-(\d+)/),
c = 0;
null !== d && (c = d[1] - 1);
w7 = $("#wizard_example_7").stepFormWizard({
startStep: c,
onNext: function(b, a) {
window.location.hash = "#step-" + (b + 2)
},
onPrev: function(b, a) {
window.location.hash = "#step-" + b
},
onFinish: function(b) {
window.location.hash = "#form-sended"
}
})
};
$(document).ready(function() {
prepare_example();
$("pre code").each(function(c, b) {
hljs.highlightBlock(b)
});
var d = $(location).attr("search").match(/t=([a-z]+)/);
"undefined" != typeof d && null != d ? ($(".sf-wizard").parent().removeClass("sf-sea").addClass("sf-" + d[1]), $(".bt-" + d[1]).removeClass("btn-default").addClass("btn-info")) : $(".bt-sea").removeClass("btn-default").addClass("btn-info")
});
Please help me with this. I have tried using but no luck also changed css display:none inplace of block but couldnt resolve the issue.

Related

How to make complete button process the data ? mean submit

i wanna ask how to make the final step process the data ? , i've tried use form method to redirect process but it not work . i'm using modal-steps.
Already search on stackoverflow but i got nothing, if somebody know how to do it please tellme.
i'm using this wizard https://www.jqueryscript.net/other/Wizard-Modal-Bootstrap-jQuery.html
! function(a) {
"use strict";
a.fn.modalSteps = function(b) {
var c = this,
d = a.extend({
btnCancelHtml: "Cancel",
btnPreviousHtml: "Previous",
btnNextHtml: "Next",
btnLastStepHtml: "Complete",
disableNextButton: !1,
completeCallback: function() {},
callbacks: {},
getTitleAndStep: function() {}
}, b),
e = function() {
var a = d.callbacks["*"];
if (void 0 !== a && "function" != typeof a) throw "everyStepCallback is not a function! I need a function";
if ("function" != typeof d.completeCallback) throw "completeCallback is not a function! I need a function";
for (var b in d.callbacks)
if (d.callbacks.hasOwnProperty(b)) {
var c = d.callbacks[b];
if ("*" !== b && void 0 !== c && "function" != typeof c) throw "Step " + b + " callback must be a function"
}
},
f = function(a) {
return void 0 !== a && "function" == typeof a && (a(), !0)
};
return c.on("show.bs.modal", function() {
var l, m, n, o, p, b = c.find(".modal-footer"),
g = b.find(".js-btn-step[data-orientation=cancel]"),
h = b.find(".js-btn-step[data-orientation=previous]"),
i = b.find(".js-btn-step[data-orientation=next]"),
j = d.callbacks["*"],
k = d.callbacks[1];
d.disableNextButton && i.attr("disabled", "disabled"), h.attr("disabled", "disabled"), e(), f(j), f(k), g.html(d.btnCancelHtml), h.html(d.btnPreviousHtml), i.html(d.btnNextHtml), m = a("<input>").attr({
type: "hidden",
id: "actual-step",
value: "1"
}), c.find("#actual-step").remove(), c.append(m), l = 1, p = l + 1, c.find("[data-step=" + l + "]").removeClass("hide"), i.attr("data-step", p), n = c.find("[data-step=" + l + "]").data("title"), o = a("<span>").addClass("label label-success").html(l), c.find(".js-title-step").append(o).append(" " + n), d.getTitleAndStep(m.attr("data-title"), l)
}).on("hidden.bs.modal", function() {
var a = c.find("#actual-step"),
b = c.find(".js-btn-step[data-orientation=next]");
c.find("[data-step]").not(c.find(".js-btn-step")).addClass("hide"), a.not(c.find(".js-btn-step")).remove(), b.attr("data-step", 1).html(d.btnNextHtml), c.find(".js-title-step").html("")
}), c.find(".js-btn-step").on("click", function() {
var m, n, o, p, b = a(this),
e = c.find("#actual-step"),
g = c.find(".js-btn-step[data-orientation=previous]"),
h = c.find(".js-btn-step[data-orientation=next]"),
i = c.find(".js-title-step"),
j = b.data("orientation"),
k = parseInt(e.val()),
l = d.callbacks["*"];
if (m = c.find("div[data-step]").length, "complete" === b.attr("data-step")) return d.completeCallback(), void c.modal("hide");
if ("next" === j) n = k + 1, g.attr("data-step", k), e.val(n);
else {
if ("previous" !== j) return void c.modal("hide");
n = k - 1, h.attr("data-step", k), g.attr("data-step", n - 1), e.val(k - 1)
}
parseInt(e.val()) === m ? h.attr("data-step", "complete").html(d.btnLastStepHtml) : h.attr("data-step", n).html(d.btnNextHtml), d.disableNextButton && h.attr("disabled", "disabled"), c.find("[data-step=" + k + "]").not(c.find(".js-btn-step")).addClass("hide"), c.find("[data-step=" + n + "]").not(c.find(".js-btn-step")).removeClass("hide"), parseInt(g.attr("data-step")) > 0 ? g.removeAttr("disabled") : g.attr("disabled", "disabled"), "previous" === j && h.removeAttr("disabled"), o = c.find("[data-step=" + n + "]"), o.attr("data-unlock-continue") && h.removeAttr("disabled"), p = o.attr("data-title");
var q = a("<span>").addClass("label label-success").html(n);
i.html(q).append(" " + p), d.getTitleAndStep(o.attr("data-title"), n);
var r = d.callbacks[e.val()];
f(l), f(r)
}), this
}
}(jQuery);
<div class="modal fade" id="order" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="js-title-step"></h4>
</div>
<div class="modal-body">
<form method="post" action="<?php echo base_url(); ?>pemesanan/submitorder">
<div class="row hide" data-step="1" data-title="Detail Pemesanan">
<div class="col-md-4">
<div class="form-group">
<label>Tanggal Pemesanan</label>
<input type="date" class="form-control" name="tanggal_pemesanan" id="tanggal_pemesanan" value="<?php if (empty($this->session->userdata('tanggal_pemesanan'))){
echo date('Y-m-d');
} else {
echo $this->session->userdata('tanggal_pemesanan');
} ?>" width="50%">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Closer</label>
<select name="id_closer" id="id_closer" class="form-control selectpicker" data-live-search="true">
<option value="">Pilih Closer</option>
<?php
foreach($listcloser->result() as $closer) { ?>
<option value="<?php echo $closer->id_closer; ?>" <?php if ($this->session->userdata('id_closer') == $closer->id_closer ) {
echo "selected";
} ?>><?php echo $closer->nama_closer; ?></option>
<?php } ?>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Pelayanan</label>
<input type="text" name="pelayanan" class="form-control" id="pelayanan" placeholder="Pelayanan" value="<?php echo $this->session->userdata('pelayanan'); ?>">
</div>
</div>
</div>
<div class="row hide" data-step="2" data-title="Data Customer">
<div class="col-md-6">
<input type="hidden" name="halaman" value="pemesanan">
<label>Input Customer Baru</label>
<div class="form-group">
<input type="text" class="form-control" placeholder="Nama Customer" name="nama_customer" id="nama_customer">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="No. HP/WA" name="nohp_wa" id="nohp_wa">
</div>
<div class="form-group">
<div class="form-group">
<input maxlength="100" type="text" id="sumber_informasi" class="form-control" placeholder="Sumber Informasi" />
</div>
</div>
<div class="form-group">
<label for="">Atau</label><br>
<select class="form-control selectpicker" data-live-search="true">
<option value="">Yang sudah ada</option>
<?php
foreach($listcustomers->result_array() as $cs)
{
$pilih='';
if($cs['id_customer']==$this->session->userdata("id_customer"))
{
$pilih='selected="selected"';
?>
<option value="<?php echo $cs['id_customer']; ?>" <?php echo $pilih; ?>><?php echo $cs['nama_customer']; ?></option>
<?php
}
else
{
?>
<option value="<?php echo $cs['id_customer']; ?>"><?php echo $cs['nama_customer']; ?></option>
<?php
}
}
?>
</select>
</div>
</div>
<div class="col-md-6">
<label>Input Data Anak</label>
<div class="form-group">
<input maxlength="100" type="text" id="nama_anak" required="required" class="form-control" placeholder="Nama Anak" />
</div>
<div class="form-group">
<select id="jenis_kelamin" class="form-control" required="required">
<option value="">Pilih Jenis Kelamin</option>
<option value="Laki-laki">Laki-laki</option>
<option value="Perempuan">Perempuan</option>
</select>
</div>
<div class="form-group">
<input maxlength="100" type="date" id="tanggal_lahir" max="<?php echo date('Y-m-d'); ?>" class="form-control" />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Nama Ayah" name="nama_ayah" id="nama_ayah">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Nama Ibu" name="nama_ibu" id="nama_ayah">
</div>
<div class="form-group">
<input maxlength="100" type="text" id="lahir_di" class="form-control" placeholder="Dilahirkan di" />
</div>
</div>
<!-- total tagihan -->
<!-- <div class="col-md-6">
<div class="form-group">
<label>Total Tagihan</label>
<span class="pull-right"><h1><?php echo $this->session->userdata('total') ?></h1></span>
</div>
</div>-->
<!-- end-->
</div>
<div class="row hide" data-step="3" data-title="Pesanan Hewan">
<div class="col-md-3">
<h3>Data Hewan</h3>
<div class="form-group">
<label>Tipe Hewan</label>
<select onchange="hitungpaketaqiqahsatuan()" class="form-control" style="width: 100%;" name="id_paketaqiqah" id="id_paketaqiqah" required>
<option value="">Pilih Tipe Hewan</option>
<?php
foreach($listpaketaqiqah->result_array() as $pa)
{
?>
<option value="<?php echo $pa['id_paketaqiqah']; ?>"><?php echo $pa['tipe_hewan']; ?></option>
<?php } ?>
</select>
</div>
<div class="form-group">
<label>Pilih Kandang</label>
<select onchange="" class="form-control" style="width: 100%;" name="id_kandang" id="id_kandang" required>
<option value="">Pilih Kandang</option>
<?php
foreach($listkandang->result() as $kandang) { ?>
<option value="<?php echo $kandang->id_lembaga; ?>"><?php echo $kandang->nama_lembaga; ?></option>
<?php } ?>
</select>
</div>
<div class="form-group">
<label>Tanggal Pemotongan</label>
<input type="date" min="<?php echo $this->session->userdata('tanggal_pemesanan');//date_format(date_add(date_create($this->session->userdata('tanggal_pemesanan')), date_interval_create_from_date_string('1 days')), 'Y-m-d'); ?>" class="form-control pemotongan" name="tanggal_potong" id="tanggal_potong" required >
</div>
<div class="form-group">
<label>Jam Pemotongan</label>
<div class="row">
<div class="col-md-6">
<input type="time" class="form-control pemotongan" name="jam_potong1" id="jam_potong1" required>
</div>
<div class="col-md-6">
<input type="time" class="form-control pemotongan" name="jam_potong2" id="jam_potong2" required>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<h3> </h3>
<div class="form-group">
<label>Disaksikan/Tidak</label>
<select class="form-control pemotongan" style="width: 100%;" name="disaksikan_tidak" id="disaksikan_tidak" required >
<option value="Disaksikan">Disaksikan</option>
<option value="Tidak disaksikan">Tidak disaksikan</option>
</select>
</div>
<div class="form-group">
<label>Catatan untuk kandang</label>
<textarea class="form-control" rows="4" placeholder="Catatan untuk kandang" name="catatan_untuk_kandang" id="catatan_untuk_kandang"></textarea>
</div>
<div class="form-group">
<label>Jumlah</label>
<input onchange="hitungpaketaqiqahsatuan()" type="number" class="form-control" placeholder="Jumlah" name="jumlah_paketaqiqah" id="jumlah_paketaqiqah" min="1" value="1" required>
</div>
</div>
<div class="col-md-3">
<h3>Paket Nasi Boks</h3>
<div class="form-group">
<label for="">Pilih Paket</label>
<select onchange="hitungpaketnasiboxsatuan()" class="form-control chosen-select" style="width: 100%;" name="id_paketnasibox" id="id_paketnasibox" required>
<option value="">Pilih</option>
<?php foreach($listpaketnasibox->result() as $pn) { ?>
<option value="<?php echo $pn->id_paketnasibox; ?>"><?php echo $pn->nama_paketnasibox; ?></option>
<?php } ?>
</select>
</div>
<div class="form-group">
<label>Jumlah</label>
<input onchange="hitungpaketaqiqahsatuan()" type="number" class="form-control" placeholder="Jumlah" name="jumlah_paketaqiqah" id="jumlah_paketaqiqah" min="1" value="1" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Catatan untuk dapur</label>
<textarea class="form-control" rows="4" placeholder="Catatan untuk dapur" name="catatan_untuk_dapur" id="catatan_untuk_dapur"></textarea>
</div>
</div>
<!--<div class="pull-right">
<div class="form-group">
<label style="margin-right: 10px">Total Tagihan</label>
<span class="" style="margin-right: 10px"><h1>Rp.0</h1></span>
</div>
</div>
-->
</div>
<div class="row hide" data-step="4" data-title="Pengantaran">
<div class="col-md-6">
<label> Input Data Pengiriman</label>
<div class="form-group">
<textarea class="form-control" placeholder="Alamat" name="alamat" id="alamat"></textarea>
</div>
<div class="form-group">
<label >Input URL Gmaps</label>
<input type="text" name="urlmaps" class="form-control">
</div>
<div class="form-group">
<label>Tanggal Pengiriman</label>
<input type="date" name="tanggal_kirim" class="form-control" min="<?php echo date_format(date_add(date_create($this->session->userdata('tanggal_pemesanan')), date_interval_create_from_date_string('1 days')), 'Y-m-d'); ?>" required>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Jam Kirim</label>
<input type="time" name="jam_kirim" class="form-control" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Jam Sampai</label>
<input type="time" name="jam_sampai" class="form-control" required>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Tarif / Ongkos</label>
<input type="number" name="ongkos" class="form-control" min="0">
</div>
<div class="form-group">
<label>Petugas Pengantaran</label>
<?php foreach ($listdelivery->result() as $ld) { ?>
<div class="input-group">
<span class="input-group-addon">
<input type="radio" class="radiopetugaspengantaran" name="petugas_pengantaran" value="<?php echo $ld->id_lembaga;?>">
</span>
<input type="text" class="form-control" value="<?php echo $ld->nama_lembaga;?>" readonly>
<?php } ?>
</div>
<div class="input-group">
<span class="input-group-addon">
<input type="radio" class="radiopetugaspengantaran" name="petugas_pengantaran" value="Lainnya">
</span>
<input type="text" class="form-control" id="petugas_pengantaran" name="petugas_pengantaran_teks" value="Lainnya" disabled>
</div>
</div>
<!--<div class="form-group">
<label>Total Tagihan</label>
<span class="pull-right"><h1>Rp. 0</h1></span>
</div>-->
</div>
</div>
<div class="row hide" data-step="5" data-title="Pembayaran dan Tagihan">
<div class="col-md-6">
<div class="form-group">
<label>Diskon</label>
<input type="number" min="0" onkeyup="hitungtotaldansisa()" onchange="hitungtotaldansisa()" class="form-control" placeholder="Diskon" name="diskon" id="diskon" value="<?php echo $this->session->userdata('diskon'); ?>">
</div>
<div class="form-group">
<label>DP</label>
<input type="number" min="0" onkeyup="hitungtotaldansisa()" onchange="hitungtotaldansisa()" class="form-control" placeholder="DP" id="dp" name="dp" value="<?php echo $this->session->userdata('dp'); ?>">
</div>
<div class="form-group">
<label>Mekanisme Pembayaran</label>
<select class="form-control" id="mekanisme_pembayaran" name="mekanisme_pembayaran">
<option value="TUNAI" <?php if ($this->session->userdata('mekanisme_pembayaran') == "TUNAI" ) {
echo "selected";
} ?>>Tunai</option>
<option value="TRANSFER" <?php if ($this->session->userdata('mekanisme_pembayaran') == "TRANSFER" ) {
echo "selected";
} ?>>Transfer</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Sisa</label>
<span class="pull-right"><h2>Rp. 0</h2></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Total Tagihan</label>
<span class="pull-right"><h2>Rp. 0</h2></span>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default js-btn-step pull-left" data-orientation="cancel" data-dismiss="modal"></button>
<button type="button" class="btn btn-warning js-btn-step" data-orientation="previous"></button>
<button type="button" class="btn btn-success js-btn-step" data-orientation="next"></button>
</div>
</form>
</div>
</div>
</div>

You can add one more button below the next button. Keep that button hidden till you reach the last step. When you reach the last step make it visible and on click of it write the logic to process your data.

3 dynamic combobox use php and jquery

Need help...
How if I want to make 3 select options use jquery,
Parent
Child
Grandchild
Can anyone help?
I will appreciate your help...
This is my code:
<?php
$parentQuery = $db->query("SELECT * FROM kategori WHERE parent = 0 ORDER BY nama_kategori");
$kategori = ((isset($_POST['parent']) && !empty($_POST['parent']))?sanitize($_POST['parent']):'');
?>
<div class="form-group col-md-3">
<label for="parent">Kategori 1:</label>
<select class="form-control" id="parent" name="parent">
<option value="" <?php echo (($kategori =='')?'selected':''); ?>> Select</option>
<?php while($p = mysqli_fetch_assoc($parentQuery)): ?>
<option value="<?php echo $p['id_kategori'];?>" <?php echo (($kategori == $p['id_kategori'])?'selected=':''); ?>>
<?php echo $p['nama_kategori'];?>
</option>
<?php endwhile; ?>
</select>
</div>
<div class="form-group col-md-3">
<label for="child">Kategori 2:</label>
<select class="form-control" name="child" id="child"></select>
</div>
<div class="form-group col-md-3">
<label for="child">Kategori 3:</label>
<select class="form-control" name="grandchild" id="grandchild"></select>
</div>

Bootstrap Codeigniter 3 Form Click on edit

<legend data-target="#basic_information" data-toggle="collapse">Basic Information</legend>
<fieldset id="basic_information" class="collapse">
<!-- Text input-->
<div class="form-group">
<label class="col-sm-2 control-label" for="textinput">Screen Name</label>
<div class="col-sm-10">
<input type="text" name="screen_name" placeholder="Screen Name" class="form-control">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-sm-2 control-label" for="textinput">First Name</label>
<div class="col-sm-10">
<input type="text" name="first_name" placeholder="First Name" class="form-control">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-sm-2 control-label" for="textinput">Middle Name</label>
<div class="col-sm-10">
<input type="text" name="middle_name" placeholder="Middle Name" class="form-control">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-sm-2 control-label" for="textinput">Last Name</label>
<div class="col-sm-10">
<input type="text" name="last_name" placeholder="Last Name" class="form-control">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-sm-2 control-label" for="textinput">Birthdate</label>
<div class="col-sm-2">
<select name="birthdate-month" id="birthdate-month">
<option value="">month</option>
<?php foreach($month as $month_number => $month_name) { ?>
<option value="<?php echo $month_number; ?>" <?php echo set_select('birthdate-month', $month_number); ?>><?php echo $month_name; ?></option>
<?php } ?>
</select>
</div>
<div class="col-sm-2">
<select name="birthdate-day" id="birthdate-day">
<option value="">day</option>
<?php for($i=1; $i<=31; $i++){ ?>
<option value="<?php echo $i; ?>" <?php echo set_select('birthdate-day', $i); ?>><?php echo $i; ?></option>
<?php } ?>
</select>
</div>
<div class="col-sm-2">
<select name="birthdate-year" id="birthdate-year">
<option value="">year</option>
<?php for($i=(date("Y")-10); $i>=1930; $i--) { ?>
<option value="<?php echo $i; ?>" <?php echo set_select('birthdate-month', $i); ?>><?php echo $i; ?></option>
<?php } ?>
</select>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-sm-2 control-label" for="textinput">Gender</label>
<div class="col-sm-10">
<select name="gender" id="gender">
<option value=""></option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-sm-2 control-label" for="textinput">Occupation</label>
<div class="col-sm-10">
<input type="text" name="job" placeholder="Occupation" class="form-control">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-sm-2 control-label" for="textinput">Address</label>
<div class="col-sm-10">
<input type="text" name="address" placeholder="Address" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="pull-right">
<button type="submit" class="btn btn-default">Cancel</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</fieldset>
I've added the collapse feature of Bootstrap on the above code. Whenever i click on the BASIC INFORMATION text, it would show the details, as it is hidden by default.
What i want to do is the same as the collapse feature.
I want the above code to be read only, i'm pretty sure i can do that with html.
What i want to do is to make it so that i only have to click on the input and it will be available for me to edit one by one or clicking a button and everything will be editable.
solely using bootstrap, like with what i did with collapse.
Is it possible? or do i need to use jquery.

You can do this using bootstrap and with jquery code like this :-
<script>
$(document).ready(function() {
$('#basic_information').on('hidden.bs.collapse', function () {
$('#basic_information .form-control').attr('readonly', true);/*It will add the readonly attribute in all input on collapse*/
});
$('#basic_information').on('shown.bs.collapse', function () {
$('#basic_information .form-control').attr('readonly', false);/*It will remove as soon as your basic information get expanded*/
});
});
</script>

Put a <span> adjacent to each form control with a common class like currentvalue, each one holding the text of the current value for that field. Add a single button at the top that uses JS/jQuery to toggle visibility between those spans, and the inputs (including the submit button). Then you have one file but its functionality is switchable. If you're using ajax to submit the form, then you'll also have to update the <span>s' contents on successful submit.

JS, PHP, MySQL Code errors for mathematical operation

I wrote a small script. I have a form in my page. It takes data from MySQL Database. After that, When user select some options from select panels, I need JS will do math summation and write total in a div/input field.
I wrote the page and got errors. I changed a lot of things after searched similar problems on net and here.
I used parseInt($.. ,10) , document.getElementById("testID").innerHTML , document.getElementById("testID").value , document.getElementById("testID").val() and etc...
So, I'm asking your help to correct my errors.
Thanks
Here is the Jsfiddle page link;
jsfiddle page
My Code (this is the latest version that I have) ;
JS:
<script type="text/javascript">
function updatesum() {
var T = 0;
var d = document;
var A = d.getElementById("araclar").val();
var M = d.getElementById("varis").val();
var K = d.getElementById("kisiler").val();
var B = d.getElementById("bavullar").val();
var C = d.getElementById("cocuklar").val();
var Ck = d.getElementById("cocukKoltuk").val();
T = parseInt('A' ,10) * parseInt('M' ,10);
document.getElementById("toplamm").innerHTML = T;
}
</script>
PHP:
<form action="subscribe.php" id="subscribe" method="post" name="subscribe">
<div class="row">
<div class="col-xs-12 col-sm-10">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3">
<label>NAME<input class="form-control" name="name" placeholder="NAME" type="text"></label>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<label>SURNAME<input class="form-control" name="surname" placeholder="SURNAME" type="text"></label>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<label>TELEPHONE<input class="form-control" name="date" placeholder="TELEPHONE" type="tel"></label>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<label>EMAIL<input class="form-control" name="email" placeholder="EMAIL" type="email"></label>
</div>
<hr />
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3">
<label>FROM:<select class="form-control" name="kalkis" id="kalkis" onchange="bolegler(this.value);sifirla();">
<option value="">Please Select</option>
<?php
$boleg= mysql_query("SELECT * FROM areas WHERE ust LIKE 0");
while($bolges = mysql_fetch_array($boleg)) {
echo '<option value="'.$bolges['id'].'">'.$bolges['isim'].'</option>';
}
?>
</select></label>
</div>
<div class="col-xs-12 col-sm-6 col-md-3" id="txtHint">
<!-- This Code will change after #kalkis change by JS start-->
<label>TO:<select name="varis" class="form-control">
<option value="">Please Select</option>
</select></label>
<!-- This Code will change after #kalkis change by JS end-->
</div>
<div id="datetimepicker" class="col-xs-12 col-sm-6 col-md-3 input-append date">
<label>REZERVATION DATE
<input type="text" class="col-xs-8 form-control" name="rezervasyon" style="float:left;"></input>
<span class="add-on col-xs-2" style="float: left; margin: -39px 0; font-size: 23px;"><i class="fa fa-calendar"></i>
</span>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<label>CAR:
<select name="car" id="car" class="form-control" onchange="updatesum();">
<option value="0">Please Select</option>
<?php
$ara= mysql_query("SELECT * FROM cars");
while($arac = mysql_fetch_array($ara)) {
echo '<option value="'.$arac['price'].'" class="'.$arac['id'].'">'.$arac['isim'].'</option>';
}
?>
</select>
</label>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3">
<label>PERSON QTY
<select name="persons" id="persons" class="form-control" onchange="updatesum();">
<option value="0">Please Select</option>
<?php
$kis= mysql_query("SELECT * FROM person");
while($person = mysql_fetch_array($kis)) {
echo '<option value="'.$person['price'].'" class="'.$person['qty'].'">'.$person['qty'].'</option>';
}
?>
</select>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<label>bag QTY
<select name="bags" id="bags" class="form-control" onchange="updatesum();">
<option value="0">Please Select</option>
<?php
$bav= mysql_query("SELECT * FROM bag");
while($bag = mysql_fetch_array($bav)) {
echo '<option value="'.$bag['price'].'" class="'.$bag['qty'].'">'.$bag['qty'].'</option>';
}
?>
</select>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<label>KID QTY
<select name="cocuklar" id="cocuklar" class="form-control" onchange="updatesum();cocukla();">
<option value="0">Please Select</option>
<?php
$coc= mysql_query("SELECT * FROM kidqty");
while($kid = mysql_fetch_array($coc)) {
echo '<option value="'.$kid['price'].'" class="'.$kid['qty'].'">'.$kid['qty'].'</option>';
}
?>
</select>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-md-3" id="koltukalani">
<label>KID CHAIR
<select name='kidchair' id='kidchair' class='form-control' onchange='updatesum();'>
<option value='0'>Please Select</option>
<option value='0'>Do no Want</option>
<option value='<?php echo $genel['kidchair']; ?>'>Need a Kid Chair</option>
</select>
</label>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-2">
<button class="form-control submit-button" id="submit" type="submit">SUBMIT</button>
<br />
TOTAL AMOUNT:
<div id="toplamm" class="toplamm">0</div>
</div>
</div>
</form>
And the Other Codes:
function sifirla:
<script type="text/javascript">
function sifirla() {
document.getElementById("toplamm").innerHTML = "0";
}
</script>
function cocukla:
<script type="text/javascript">
function cocukla() {
var cocuk = parseInt(document.getElementById("cocuklar").value);
if (cocuk < "1") {
document.getElementById("kidchair").innerHTML = " ";
}
else {
document.getElementById("kidchair").innerHTML = "<label>KID CHAIR <select name='kidchair' id='kidchair' class='form-control' onchange='updatesum();'> <option value='0'>Please Select</option> <option value='0'>Do not Want</option> <option value='<?php echo $genel['kidchair']; ?>'>Need a Kid Chair</option> </select> </label>"; }
}
</script>

In this line T = parseInt('A' ,10) * parseInt('M' ,10); you are using trying to get the ASCII code of char A and char M. Whereas you should be parsing variables A and M to integer.
You will need to modify your function as below to get the correct numbers-
T = parseInt(A ,10) * parseInt(M ,10);
Updated as per comment -
Use value instead of val() for getting the values form html id tags.
T = parseInt(A ,10) * parseInt(M ,10) + parseInt(K ,10) + parseInt(B ,10) + parseInt(C ,10) + parseInt(Ck ,10);

How to display multiple form fields of the same type using jquery and fetch their values in php

I have a table named order_master which stores the order_id column. I also have another table order_details having the columns order_id (FK), vendor, purchase_date, delivery_date, and person_name which stores the details of the order corresponding to the order_id from the order_master table.
I want to display a form wherein a button add new item will be displayed. On clicking this button each time, a new block of fields (like vendor, purchase_date, delivery_date, person_name) will be displayed. The user can click the above button and enter as many items as he wants on the same order_id. And when he submits the form, the items on this form must be entered in the database.
How to achieve this?
actually i am using codeigniter framework (MVC architecture). Here i am attaching the view and js file.
<?php echo form_open(); ?>
<div id="emp"></div>
<div class="box">
<div>
</div>
<div class="col-lg-12" style="padding-top: 2%;margin-bottom: 3%" id="form-box">
<div class="col-lg-6 form-group">
<select name="item[]" id="item" class="form-control">
<option value="">--Select Item--</option>
<?php foreach ($items as $item) { ?>
<option value="<?php echo $item["id"]; ?>"><?php echo $item["name"]; ?></option>
<?php } ?>
</select>
</div>
<div class="col-lg-6 form-group">
<select name="vendor[]" id="vendor" class="form-control">
<option value="">--Select Vendor--</option>
<?php foreach ($vendors as $vendor) { ?>
<option value="<?php echo $vendor["id"]; ?>"><?php echo $vendor["name"]; ?></option>
<?php } ?>
</select>
</div>
<div class="col-lg-4 form-group">
<input type="text" name="po_date[]" id="po_date" class="form-control date" placeholder="Purchase Date">
</div>
<div class="col-lg-4 form-group">
<input type="text" name="quantity[]" id="quantity" class="form-control number" placeholder="Item Quantity Individual">
</div>
<div class="col-lg-4 form-group">
<input type="text" name="unit_price[]" id="unit_price" class="form-control number" placeholder="Unit Price" style="text-align: left;">
</div>
<div class="col-lg-4 form-group">
</div>
<div class="col-lg-12 col-md-12 col-sm-12 form-group">
<textarea name="description[]" id="description" class="form-control"></textarea>
</div>
<div class="col-lg-12 col-md-12 col-sm-12" style="height: 3px;background-color: grey"></div>
<div class="col-lg-12 col-md-12 col-sm-12 form-group" id="messageBox">
</div>
</div>
</div>
<a id="add_item" class="col-lg-12" href="">Add new item</a>
<div class="col-lg-12 col-md-12 col-sm-12 text-center form-group">
<input type="button" value="Add Purchase Order" id="addpurchaseOrderBtn" class="btn btn-primary">
</div>
<?php echo form_close(); ?>
**JS File**
$("#main_content").css('minHeight', '400px');
$(document).ready(function() {
$('#add_item').click(function() {
var def_ht = $("#main_content").height() + 300;
$("#main_content").css('minHeight', def_ht);
$("#form-box").clone(true).appendTo("#form-box");
return false;
});
$("#addpurchaseOrderBtn").click(function() {
focusId = null;
var isvalid = false;
if(validateDropDown('item')){
isvalid = true;
}
if(validateDropDown('vendor')){
isvalid = true;
}
if(validatDate('po_date')){
isvalid = true;
}
if(validateTextbox('quantity')){
isvalid = true;
}
if(validateTextbox('unit_price')){
isvalid = true;
}
if(validateTextbox('description')){
isvalid = true;
}
if(isvalid){
focusId.focus();
$("#messageBox").html('<div class="alert alert-danger">There are some error in your submission. Please try again.</div>');
}else{
$("#addPurchaseFrm").submit();
}
});
});
This code works but i am unable to validate all the elements(items) in the form.

You can try the following structure-
<form name="addItem" method="post" action="addItem.php" class="insertItem">
<div class="itemAdd">
<input type="text" name="vendor" >
<input type="text" name="purchase_date" >
<input type="text" name="delivery_date" >
<input type="text" name="person_name" >
</div>
<input type="submit" name="submit" value="Add Item" class="btn btn-primary additem">
$("document").ready(function(){
$(".additem").click(function(){
$(".insertItem").append($(".itemAdd").html);
});
});
Then on addItem.php, you can execute the insert query to insert this data into your database

Categories

Resources