I want to add dynamic form fields in the database using PHP. I have used angular to add dynamic form fields. The thing is when I am trying to insert this data into the database only last form field is inserting in the database. SO, I used array and loop to increment and update this form field into the database. but somehow query is not working properly and data is also not inserting into the database. can you tell me what is wrong here? I am stuck. Please help. Thanx in advance.
Here is my code:
<form method="post">
<div class="form-group " >
<input type="text" placeholder="Campaign Name" class="form-control c-square c-theme input-lg" name="camp_name"> </div>
<div class="row col-md-12">
<div class="form-group col-md-6">Start Date
<input type="date" placeholder="start date" class="form-control c-square c-theme input-lg" name="start_date">
</div>
<div class="form-group col-md-6">End Date
<input type="date" placeholder="end date" class="form-control c-square c-theme input-lg" name="end_date"> </div>
</div>
<div class="row col-md-12">
<div class="form-group">
<label for="inputPassword3" class="col-md-8 control-label">Select Store</label>
<div class="col-md-6 c-margin-b-20">
<select class="form-control c-square c-border-2px c-theme" multiple="multiple" name="store">
<option value="1">All Stores</option>
<option value="2">Phoenix Mall</option>
<option value="3">1MG Mall</option>
<option value="4">Orion Mall</option>
</select>
</div>
</div>
</div>
<div class="row col-md-12" ng-app="angularjs-starter" ng-controller="MainCtrl">
<fieldset data-ng-repeat="choice in choices">
<label for="inputPassword3" class="col-md-1 control-label">Elements</label>
<div class="form-group col-md-3 ">
<input type="text" placeholder="Campaign Name" ng-model="choice.name" class="form-control c-square c-theme input-lg" name="ele">
</div>
<label for="inputPassword3" class="col-md-1 control-label">Quantity</label>
<div class="form-group col-md-3" >
<select class="form-control c-square c-border-2px c-theme" name="store">
<option value="1">All Stores</option>
<option value="2">Phoenix Mall</option>
<option value="3">1MG Mall</option>
<option value="4">Orion Mall</option>
</select>
</div>
<button class="btn c-theme-btn c-btn-uppercase btn-lg c-btn-bold c-btn-square" ng-click="addNewChoice()" >add</button>
<button ng-show="$last" ng-click="removeChoice()" class="btn c-theme-btn c-btn-uppercase btn-lg c-btn-bold c-btn-square" >Remove</button>
</fieldset>
</div>
</div>
</div>
<div class="form-group">
<input type="text" placeholder="Description" class="form-control c-square c-theme input-lg" name="description">
</div>
<input class="btn c-theme-btn c-btn-uppercase btn-lg c-btn-bold c-btn-square" value="Submit" type="submit">
</form>
// angular script
<script type="text/javascript">
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.choices = [{id: 'choice1'}, {id: 'choice2'}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':'choice'+newItemNo});
};
$scope.removeChoice = function() {
var lastItem = $scope.choices.length-1;
$scope.choices.splice(lastItem);
};
});
</script>
What you can do is simply take input type and put its type="button". It won't refresh your page. You were not specifying any type that's why it was taking type="submit" and the whole page was reloading. So avoid this.
Try this :
<button type="button" class="btn c-theme-btn c-btn-uppercase btn-lg c-btn-bold
c-btn-square" ng-click="addNewChoice()"> add</button>
You should always specify button type, otherwise, it will take submit by default and that's why it is refreshing the page.
Hope this helps
Related
I have been trying to cycle between the disability states of two inputs on my website by using a button attached to some JavaScript. My current code has two buttons in use which both disable one input and enable the other, however this is not very practical. I wanted to know how I can use one button and one script to cycle between the disability states of my inputs, this is my current code:
<script>
function switch_monthlyexpense()
{
document.getElementById("monthlyexpenses").disabled=false;
document.getElementById("monthlypexpenses").disabled=true;
}
</script>
<script>
function switch_monthlypexpense()
{
document.getElementById("monthlyexpenses").disabled=true;
document.getElementById("monthlypexpenses").disabled=false;
}
</script>
<button class="btn btn-primary" onclick="switch_monthlyexpense()" id="monthlyexpensestoggle">Expenses</button>
<button class="btn btn-primary" onclick="switch_monthlypexpense()" id="monthlypexpensestoggle">P Expenses</button>
<form id="expenses_form" style="visibility:visible;">
<div class="form-group">
<div class="form-group col-md-1">
<label for="monthlyexpenses" id="monthlyexpenseslabel">Monthly Expenses</label>
<input type="number" class="form-control" id="monthlyexpenses" placeholder="0" disabled>
</div>
<span class="input-group-text" id="dsign5">$</span>
</form>
<form id="pexpenses_form" style="visibility:visible;">
<div class="form-group">
<div class="form-group col-md-1">
<label for="monthlypexpenses" id="monthlypexpenseslabel">Monthly P Expenses</label>
<input type="number" class="form-control" id="monthlypexpenses" placeholder="0">
</div>
<span class="input-group-text" id="psign4">%</span>
</form>
<script>
// use a variable to note which one is disabled
let selected = "monthlyexpenses"
function switchDisabled () {
// toggle the from "monthlyexpenses" to "monthlypexpenses" or vice versa
selected = selected === "monthlyexpenses" ? "monthlypexpenses" : "monthlyexpenses"
// check if the DOM disabled state is the same as the selected
document.getElementById("monthlyexpenses").disabled = selected === "monthlyexpenses";
document.getElementById("monthlypexpenses").disabled = selected === "monthlypexpenses";
}
</script>
<button class="btn btn-primary" onclick="switchDisabled()" id="switch-button">Switch</button>
<form id="expenses_form" style="visibility:visible;">
<div class="form-group">
<div class="form-group col-md-1">
<label for="monthlyexpenses" id="monthlyexpenseslabel">Monthly Expenses</label>
<input type="number" class="form-control" id="monthlyexpenses" placeholder="0" disabled>
</div>
<span class="input-group-text" id="dsign5">$</span>
</form>
<form id="pexpenses_form" style="visibility:visible;">
<div class="form-group">
<div class="form-group col-md-1">
<label for="monthlypexpenses" id="monthlypexpenseslabel">Monthly P Expenses</label>
<input type="number" class="form-control" id="monthlypexpenses" placeholder="0">
</div>
<span class="input-group-text" id="psign4">%</span>
</form>
disabled is an attribute so you can set it by:
document.getElementById("myId").setAttribute('disabled', '');
And to enable the element:
document.getElementById("myId").removeAttribute('disabled');
Your first function will look like:
function switch_monthlyexpense()
{
document.getElementById("monthlyexpenses").removeAttribute('disabled');
document.getElementById("monthlypexpenses").setAttribute('disabled', '');
}
I have designed a web page which contains multiple forms and each form is provided with its unique submit button and are directed to different servlets on submission.
But at a time only one is getting submitted successfully to the database and another form is not even getting directed to its servlets.
How to do it?
<!-- UPDATE DONOR CARD-->
<div class="col-xl-4 " style="opacity:0.9;">
<div class="card bg-info text-center card-form mb-4">
<div class="card-body">
<h3 class="align-center">Update Donors Detail</h3>
<p>Please fill out this form to update </p>
<form action="UpdateHospitalController" method="post" name="update">
<div class="form-group">
<input type="text" class="form-control form-control-lg" placeholder="Mobile no." id="mobNo" name="mobNo">
</div>
<div class="form-group">
<input type="text" class="form-control form-control-lg" placeholder="Date" id="datepickers" name="date">
</div>
<input type="submit" class="btn btn-dark btn-block" name="updateSubmit">
</form>
</div>
</div>
</div>
<!-- ADD DONOR CARD-->
<div class="col-xl-4 " style="opacity:0.9;">
<div class="card bg-info text-center card-form mb-4">
<div class="card-body">
<h3 class="align-center">Add Donors</h3>
<p>Please fill out this form to add </p>
<form action="HospitalController" method="post" onclick="return(validate())" name="addForm">
<div class="form-group">
<input type="text" class="form-control form-control-lg" placeholder="Mobile no." maxlength="10" id="mobNo" name="mobNos">
<span id="sp1"></span>
</div>
<div class="form-group" >
<input type="text" class="form-control form-control-lg " placeholder="Name" id="name" name="userName">
<span id="sp2"></span>
</div>
<div class="form-group">
<select class="form-control form-control-lg" placeholder="Blood Group" name="bglist" id="list">
<option value="Opos">O+</option>
<option value="Oneg">O-</option>
<option value="Apos">A+</option>
<option value="Aneg">A-</option>
<option value="Bpos">B+</option>
<option value="Bneg">B-</option>
<option value="ABpos">AB+</option>
<option value="neg">AB-</option>
</select>
<span id="sp3"></span>
</div>
<div class="form-group" >
<input type="text" class="form-control form-control-lg " placeholder="Date" id="datepicker" id="date" name="dates">
<span id="sp4"></span>
</div>
<div class="form-group">
<input type="text" class="form-control form-control-lg" placeholder="City" id="city" name="city">
<span id="sp5"></span>
</div>
<input type="submit" class="btn btn-dark btn-block" name="addDonor">
</form>
</div>
</div>
</div>
You can only perform one query in database at a time. You need to direct the servlet to this page again using response.sendRedirect("filename") and then try with other form. Hope it helps.If not lemme know.
I have this form and this is my layout:
I want when the user enters the quantity the total input = qty*price.
My view
<?php $form=array('id'=>'myform');?>
<?php echo form_open('Order/submit',$form);?>
<div class="panel panel-default">
<div class="panel-heading">Customer Details</div>
<div class="panel-body">
<div class="col-xs-3">
<select class="selectpicker" data-show-subtext="true" data-live-search="true" name="customer_name">
<?php foreach ($customerdata as $c):
echo "<option value ='$c->c_id'>" . $c->c_name . "</option>";
endforeach;
?>
</select>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" name="invoice_number" placeholder="Invoice Number"/>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" name="branch" placeholder="Branch"/>
</div>
<div class="col-xs-3">
<select class="selectpicker" data-show-subtext="true" data-live-search="true" name="payment_term"">
<option value="cash">Cash</option>
<option value="bank">Bank</option>
<option value="other">Other</option>
</select>
</div>
</div><!--customer panel-Body-->
<div class="panel-heading">Invoice Details
</div>
<div class="panel-body">
<div id="education_fields">
<div class="col-sm-3 nopadding">
<div class="form-group">
<select class="selectpicker" data-show-subtext="true" data-live-search="true" name="select_product[]">
<option></option>
<?php
foreach($order as $row):
echo"<option data-price='$row->p_price' value ='$row->p_id'>".$row->p_name. "</option>";
endforeach;
?>
</select>
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control qty" name="qty[]" value="" placeholder="Quantity">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control price" name="price[]" value="" placeholder="Price">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control total" name="total[]" value="" placeholder="Total">
<div class="input-group-btn">
<button class="btn btn-success" type="button" onclick="education_fields();"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="panel-footer"><small>Press <span class="glyphicon glyphicon-plus gs"></span> to add another product field :)</small>, <small>Press <span class="glyphicon glyphicon-minus gs"></span> to remove the last product :)</small></div>
</div>
<button type="submit" class="btn btn-primary center-block">Checkout</button>
<?php echo form_close();?>
This is my first jQuery and that used to generate a new row by + button
<script>
var room = 0;
function education_fields() {
room++;
var objTo = document.getElementById('education_fields');
var divtest = document.createElement("div");
divtest.setAttribute("class", "form-group removeclass"+room);
var rdiv = 'removeclass'+room;
var medo='<div class="col-sm-3 nopadding"><div class="form-group"><select class="selectpicker" data-show-subtext="true" data-live-search="true" name="select_product[]"><option></option><?php foreach($order as $row){ ?><option data-price="<?php echo$row->p_price;?>" value ="<?php echo $row->p_id; ?>"><?php echo $row->p_name; ?></option><?php } ?></select></div></div><div class="col-sm-3 nopadding"><div class="form-group"> <input type="text" class="form-control" name="qty[]" value="" placeholder="Quantity"></div></div><div class="col-sm-3 nopadding"><div class="form-group"> <input type="text" class="form-control price" name="price[]" value="" placeholder="Price"></div></div><div class="col-sm-3 nopadding"><div class="form-group"><div class="input-group"> <input class="form-control" name="total[]" placeholder="Total"/><div class="input-group-btn"> <button class="btn btn-danger" type="button" onclick="remove_education_fields('+ room +');"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button></div></div></div></div><div class="clear"></div>';
divtest.innerHTML = medo;
objTo.appendChild(divtest);
$('select').selectpicker();
}
function remove_education_fields(rid) {
$('.removeclass'+rid).remove();
}
</script>
and this 2nd jQuery used to get product price from from drop-menu attributes and add that into price input.
<script>
function set_price( slc ) {
var price = slc.find(':selected').attr('data-price');
slc.parent().parent().next().next().find('.price').val(price);
}
$('#education_fields').on('change','select.selectpicker',function(){
set_price( $(this) );
});
</script>
var sample = $('#sample').html();
$('#sample').on('click', '.generate', function() {
$('#sample').append(sample);
});
$('#sample').on('change', 'select.selectpicker', function () {
// keyword this is your current select element
var select = $(this);
// each group of inputs share a common .form element, so use that to
// look up for closest parent .form, then down for input[name="price[]"]
// and set the input's value
select.closest('.form').find('[name^=price]').val(
select.find('option:selected').data('price')
// trigger input's keyup event (*)
).keyup();
});
// (*) note: input[type=text]'s onchange event triggers only after it loses focus; we'll use keyup event instead
// create onkeyup event on the qty and price fields
$('#sample').on('keyup', '[name^=qty], [name^=price]', function() {
// get related form
var form = $(this).closest('.form');
// get its related values
var qty = parseInt(form.find('[name^=qty]').val(), 10),
price = parseInt(form.find('[name^=price]').val(), 10);
// ensure only numbers are given
if (!isNaN(qty) && !isNaN(price)) {
// set the total
form.find('[name^=total]').val(qty * price);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sample">
<!-- group all related blocks into a div .form -->
<!-- it makes it easier to reference in your JS -->
<div class="form">
<div class="col-sm-3 nopadding">
<div class="form-group">
<select class="selectpicker" data-show-subtext="true" data-live-search="true" name="select_product[]">
<option data-price=200 value=1>tes1</option>
<option data-price=218 value=2>tes2</option>
<option data-price=80 value=3>tes3</option>
</select>
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control" name="qty[]" value="" placeholder="Quantity">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control price" name="price[]" value="" placeholder="Price">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control " name="total[]" value="" placeholder="total" readonly>
</div>
</div>
</div>
<button class="generate" type="button">Generate New Form</button>
</div>
Note, that I am lazy instead of doing [name="price[]"], I simply did [name^=price].
Edit changed onchange to keyup.
I having trouble for adding a multiple Sub Author in my form, I have a form that you can add a sub author. The code works if I only submit one sub author but if multiple sub author the codes not working.
Here's the code of my text box in FormAddBook.
<input type="text" class="form-control" placeholder="Sub Authors" name="SubAuthors[]" maxlength="50" />
And when you want to add another sub author, text box will appear when yun click the Add Sub Author with the same name of textbox.
The codes work when one sub author only but if multiple sub authors the codes not working.
Here's the code of my jquery.
$.ajax({
type: 'POST',
url: 'proc/exec/exec-insert-book.php',
data: $('#FormAddBook').serialize(),
});
Does the Serialize cannot recognize the another text box?
Sorry for my bad english.
Here's the HTML Form code.
<form id="FormAddBook">
<div class="modal-body">
<div class="row">
<div class="col-lg-6 hide" >
<label>Accession No:</label>
<div class="form-group">
<input type="text" class="form-control" placeholder="Accession No" name="AccessionNo" readonly/>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<label>ISBN:</label>
<input type="text" class="form-control" placeholder="ISBN" name="BookISBN" maxlength="20" />
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>Date Book Added:</label>
<div id="DateBookAdded" class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" class="form-control" placeholder="Date Book Added" name="DateBookAdded" readonly/>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>Archived Date Extension:</label>
<div id="BookAuthLast" class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" class="form-control" placeholder="" name="ArchivedDateExt" readonly/>
</div>
</div>
</div>
<div id="subauthcont">
<div class="subAuthors col-lg-12">
<div class="form-group">
<label>Sub authors:</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="Sub Authors" name="SubAuthors[]" maxlength="50" />
<span class="input-group-btn" disabled>
<button id="btnAddSubAuth" class="btn btn-info" type="button" ><i class="fa fa-user" aria-hidden="true"></i></button>
</span>
</div>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="form-group">
<label>Subject:</label>
<select class="form-control" name="Description">
<option>Generalities</option>
<option>Philosophy and Psychology</option>
<option>Religion</option>
<option>Social Science</option>
<option>Languages</option>
<option>Science</option>
<option>Technology</option>
<option>Arts and Recreation</option>
<option>Literature</option>
<option>Geography and History</option>
</select>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label>Status:</label>
<select class="form-control" name="Status" readonly>
<option>Available</option>
</select>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="btnSave2" type="submit" class="btn btn-primary asd">Save</button>
</div>
</form>
</div>
I am trying to get the selected value from the dropdown.
I am creating the controls dynamically. I am not using ID attribute to avoid the problem of having multiple controls with the same ID/ duplicate IDs.
Here is how I am able to get the values of the textbox controls
$('.btn-success').off('click').on('click', function (e) {
e.preventDefault();
var row = $(this).closest(".row");
var lnameval = row.find("input[name='ContactLastName']").val();
});
Is it possible to get the selected value of the dropdown using the name attribute.
something like : var titleVal = row.find("input[name='ContactTitle']").val();
HTML :
<form id="formAddContact" role="form" class="form-horizontal">
<div class="modal-body">
<div id="errorMessageContainer2" class="alert alert-danger" role="alert" style="display:none;">
<ul id="messageBox2" class="list-unstyled"></ul>
</div>
#foreach (string cInfo in Model.emailList)
{
<div class="row" id="#cInfo.Replace("#","")" style="display: none;">
<div class="col-md-6">
<div class="form-group">
<div class="col-md-3 control-label">
<label>Title:</label>
</div>
<div class="col-md-3">
<select class="form-control ToCapture" name="ContactTitle">
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-3 control-label">
<label id="lblfname">First Name:</label>
</div>
<div class="col-md-3">
<input maxlength="50" name="ContactFirstName" type="text" value="">
</div>
</div>
<div class="form-group">
<div class="col-md-3 control-label">
<label id="lbllname">Last Name:</label>
</div>
<div class="col-md-3">
<input maxlength="50" name="ContactLastName" type="text" value="">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="button" value="Add Contact" class="btn btn-success">
<input type="button" value="Cancel" class="btn btn-default">
</div>
<br/>
}
<hr />
</div>
</form>
Just a little change needed :
row.find("select[name='ContactTitle']").val();
It's not an input.