There is a form consisting of two parts. The first part is basic information on the order. The second part of the form consists of the added div of the container. The user can add the second part of the container by clicking on the button. I can not understand how to add the second part of the form to the array in separate positions.
When you click the submit button, must create to array:
{'user': xxx, 'Phone ': xxx,' voucher': xxx, etc...}
{'user': xxx, 'Phone ': xxx,' voucher': xxx, etc...}
{'user': xxx, 'Phone ': xxx,' voucher': xxx, etc...}
This is form two parts.
User can add another div container
<div data-container="set">
<div data-item="set">
<h3>Участник</h3>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-3">
<div class="form-group">
<label>ФИО участника</label>
<input type="text" class="form-control " name="fio" id="fio" value=""> </div>
</div>
<div class="col-sm-12 col-md-12 col-lg-3">
<div class="form-group"> <label>Телефон участника</label> <input type="text" class="form-control " name="phone[]" id="phone"> </div>
</div>
<div class="col-sm-12 col-md-12 col-lg-3">
<div class="form-group"> <label>E-mail участника</label> <input type="email" class="form-control " name="email[]" id="email"> </div>
</div>
<div class="col-sm-12 col-md-12 col-lg-3">
<div class="form-group"> <label>Номер купона</label> <input type="text" class="form-control " name="voucher[]" id="voucher" > </div>
</div>
</div>
<div id="form-messages"></div>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-9"><button type="button" data-action="remove" class="btn btn-danger">× Удалить участника</button></div>
<div class="col-sm-12 col-md-12 col-lg-3"><p name="sum[]"></p></div>
</div>
<input type="text" name="amount[]" value="1">
<input type="text" name="sum[]" readonly>
<input type="text" name="osnovanie[]" id="osnovanie">
<input type="text" name="prinadl[]" id="prinadl"><br>
<hr>
</div>
</div>
Solution which helped me with the problem
.on('click', '#payment', function(event) {
var d = document,
user_fio = d.getElementsByName('fio[]'),
user_phone = d.getElementsByName('phone[]'),
//etc
mas = [];
for(var i = 0; i< user_fio.length; i++){
mas[i] = {
'fio': user_fio[i].value,
'phone': user_phone[i].value,
//etc
}
}
})
Related
I have created a web application (i.e. an Ecommerce site). Here I have implemented a radio button where I am selecting one from two options. When I select any of them, then other elements should be visible. For example: I have a time slot option. When I click on multi option (from radio button check) then there are 5 or 6 more options should be displayed. And when I select uni option (from radio button check) then there are 1 option should be visible. I have done with that part. I got stuck where I need to send all those parameters to my servlet controller.
I want when multi option selected then only those 5 or 6 parameters should be sent when forms submitted. Below code is to show and hide div for selected radio button. I am facing problem when I select uni option, then I am getting as message - some parameters missing.
function selectoption(id){
if(id == 'multitime'){
document.getElementById('multidiv').style.display= 'contents';
document.getElementById('unidiv').style.display = 'none';
}else{
document.getElementById('unidiv').style.display = 'contents';
document.getElementById('multidiv').style.display = 'none';
}
}
Below code is to submit all data of form and send to controller of springboot.
function setpincode(){
var pincode = document.getElementById('pincode').value;
var delivercityid = document.getElementById('deliverycityid').value;
var status = "";
if(document.getElementById('activestatus').checked){
status = document.getElementById('activestatus').value;
}else{
status = document.getElementById('inactivestatus').value;
}
var timeslot = "";
if(document.getElementById('multitime').checked){
timeslot = document.getElementById('multitime').value;
}else{
timeslot = document.getElementById('unitime').value;
}
var nightservice = "";
if(document.getElementById('multinightservice').checked){
nightservice = document.getElementById('multinightservice').value;
}else{
nightservice = document.getElementById('uninightservice').value;
}
var midnightcharge = document.getElementById('midnightcharge').value;
var morningservice = "";
if(document.getElementById('activeservice').checked){
morningservice = document.getElementById('activeservice').value;
}else{
morningservice = document.getElementById('inactiveservice').value;
}
var earlymorningcharge=document.getElementById('morningcharge').value;
var fixedtimeservice = "";
if(document.getElementById('afixedtimeservice').checked){
fixedtimeservice=document.getElementById('afixedtimeservice').value;
}else{
fixedtimeservice=document.getElementById('inacfixedtimeservice').value;
}
var fixedcharge = document.getElementById('fixedcharge').value;
var fixedtimeslot = document.getElementById('fixedtimeslot').value;
var deliverycharge = document.getElementById('deliverycharge').value;
var deliveryslot = document.getElementById('deliveryslot').value;
var unitimeslot = document.getElementById('unitimeslot').value;
var deliverytime = document.getElementById('deliverytime').value;
document.getElementById('addpincodeform').submit();
}
Below is my HTML code:
<form action="addpincode" method="post" id="addpincodeform"
name="addpincodeform" enctype="multipart/form-data">
<div class="floating-form">
<div class="row">
<div class="col-md-6 col-12 mt-4">
<div class="floating-label">
<input class="floating-input" type="text" name="pincode"
id="pincode" placeholder=" ">
<span class="highlight"></span>
<label>Pin Code</label>
</div>
</div>
<div class="col-md-6 col-12 mt-4">
<div class="floating-label">
<input class="floating-input" type="text" name="city"
id="city" placeholder=" ">
<span class="highlight"></span>
<label>City</label>
</div>
</div>
<div class="col-md-6 col-12 mb-4">
<div class="row">
<div class="col-md-6 col-12">
<h6>Status</h6>
</div>
<div class="col-md-3 col-12">
<input type="radio" name="status" id="activestatus" value="1">Active
</div>
<div class="col-md-3 col-12">
<input type="radio" name="status" id="inactivestatus" value="0">
InActive
</div>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="row">
<div class="col-md-6 col-12">
<h6>Time Slot</h6>
</div>
<div class="col-md-3 col-12">
<input type="radio" name="timeslot" id="multitime" value="multi"
onchange="selectoption('multitime')">Multi
</div>
<div class="col-md-3 col-12">
<input type="radio" name="timeslot" id="unitime" value="uni"
onchange="selectoption('unitime')">Uni
</div>
</div>
</div>
<div style="display:none;" id="multidiv">
<div class="col-md-6 col-12 mb-2">
<div class="row">
<div class="col-md-6 col-12">
<h6>Mid Night Service</h6>
</div>
<div class="col-md-3 col-12">
<input type="radio" name="nightservice" id="multinightservice"
value="yes">Yes
</div>
<div class="col-md-3 col-12">
<input type="radio" name="nightservice" id="uninightservice"
value="no">No
</div>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="floating-label">
<input class="floating-input" type="text" name="midnightcharge"
id="midnightcharge" placeholder=" ">
<span class="highlight"></span>
<label>Mid Night Charge</label>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="row">
<div class="col-md-6 col-12">
<h6>Early Morning Service</h6>
</div>
<div class="col-md-3 col-12">
<input type="radio" name="morningservice" id="activeservice"
value="yes">Yes
</div>
<div class="col-md-3 col-12">
<input type="radio" name="morningservice" id="inactiveservice"
value="no"> No
</div>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="floating-label">
<input class="floating-input" type="text" name="earlymorningcharge"
id="morningcharge" placeholder=" ">
<span class="highlight"></span>
<label>Early Morning Charge</label>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="row">
<div class="col-md-6 col-12">
<h6>Fixed Time Service</h6>
</div>
<div class="col-md-3 col-12">
<input type="radio" name="fixedtimeservice" id="afixedtimeservice"
value="yes">Yes
</div>
<div class="col-md-3 col-12">
<input type="radio" name="fixedtimeservice" id="inacfixedtimeservice"
value="no"> No
</div>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="floating-label">
<input class="floating-input" type="text" name="fixedcharge"
id="fixedcharge" placeholder=" ">
<span class="highlight"></span>
<label>Fixed Charge</label>
</div>
</div>
<div class="col-md-6 col-12">
<div class="floating-label">
<input class="floating-input" type="text" name="deliverycharge"
id="deliverycharge" placeholder=" ">
<span class="highlight"></span>
<label>Standard Delivery Charge</label>
</div>
</div>
<div style="display:none;" id="unidiv">
<div class="col-md-6 col-12">
<div class="floating-label">
<input class="floating-input" type="text" name="unitimeslot"
id="unitimeslot" placeholder=" ">
<span class="highlight"></span>
<label>Uni Time Slot</label>
</div>
</div>
</div>
<div class="col-md-6 col-12">
<div class="floating-label">
<input class="floating-input" type="text" name="deliverytime"
id="deliverytime" placeholder=" ">
<span class="highlight"></span>
<label>Last Delivery Time</label>
</div>
</div>
<div class="col-12 mt-4">
<button type="button" class="btn btn-outline-danger px-5"
onclick="setpincode()">Save</button>
</div>
</div>
</div>
</form>
I have the following HTML:
<div class="field text-left">
<div class="col-lg-6 col-sm-6 col-xs-12">
<label class="text-left">Name</label>
<input type="text" id="name" name="name" placeholder="Name"/>
</div>
<div class="col-lg-6 col-sm-6 col-xs-12">
<label class="text-left">Surname</label>
<input type="text" id="surname" name="surname" placeholder="Surname"/>
</div>
</div>
<div class="field">
<div class="col-lg-6 col-lg-offset-3 col-sm-8 col-sm-offset-2 col-xs-12 col-xs-offset-0">
<div class="col-lg-12 col-sm-12 col-xs-12">
Next Step
</div>
</div>
</div>
The above is in a multi-step form with other values and hidden panel.
I am trying to figure out how to remove the Class disabled from the a tag with id fullnameBtn only when both surname and name fields are entered using JavaScript or jQuery.
Can someone help on the right path?
Thanks
1-check if both the fields are filled
2- then remove the "selected" class
if($("name") && $("surname")){
$("#fullnameBtn").removeClass("disabled");
}
Here is something to toggle class [but still i guess you want to disable and enable the nextPage link for which you have to manually handle in disabled class]
$(document).ready(function(){
// lets monitor the input of values for inputs you can use a class also
$('input').on('input',function(){
// added for bit of simplicity or you can directly get valuess
var surname = $('#surname').val();
var name = $('#name').val();
if(surname != "" && name != "" )
{
// values seems filled remove class
$('#fullnameBtn').removeClass('disabled');
}
else
{
// user has emptied some input so add class again.
$('#fullnameBtn').addClass('disabled');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field text-left">
<div class="col-lg-6 col-sm-6 col-xs-12">
<label class="text-left">Name</label>
<input type="text" id="name" name="name" placeholder="Name"/>
</div>
<div class="col-lg-6 col-sm-6 col-xs-12">
<label class="text-left">Surname</label>
<input type="text" id="surname" name="surname" placeholder="Surname"/>
</div>
</div>
<div class="field">
<div class="col-lg-6 col-lg-offset-3 col-sm-8 col-sm-offset-2 col-xs-12 col-xs-offset-0">
<div class="col-lg-12 col-sm-12 col-xs-12">
Next Step
</div>
</div>
</div>
I have div with multiple tags in it. I want to add the with so i can convert my existing to bootstrap grid view. Here is my html as below:
<div class="render-wrap" id="fb-render-wrap">
<div class="fb-text form-group customdiv col-md-12 field-text-1505825076921">
<label for="text-1505825076921" class="fb-text-label">Name<span class="fb-required">*</span></label>
<input type="text" name="text-1505825076921" id="text-1505825076921" required="required" aria-required="true" data-msg="Name is requird.">
</div>
<div class="fb-date form-group customdiv col-md-12 field-date-1505825086301">
<label for="date-1505825086301" class="fb-date-label">From Date<span class="fb-required">*</span></label>
<input type="date" name="date-1505825086301" id="date-1505825086301" required="required" aria-required="true" data-msg="From Date is requird.">
</div>
</div>
And I want the output as below:
<div class="render-wrap" id="fb-render-wrap">
<div class="fb-text form-group customdiv col-md-12 field-text-1505825076921">
<div class="col-md-3">
<label for="text-1505825076921" class="fb-text-label">Name<span class="fb-required">*</span></label>
</div>
<div class="col-md-5">
<input type="text" name="text-1505825076921" id="text-1505825076921" required="required" aria-required="true" data-msg="Name is requird.">
</div>
</div>
<div class="fb-date form-group customdiv col-md-12 field-date-1505825086301">
<div class="col-md-3">
<label for="date-1505825086301" class="fb-date-label">From Date<span class="fb-required">*</span></label>
</div>
<div class="col-md-3">
<input type="date" name="date-1505825086301" id="date-1505825086301" required="required" aria-required="true" data-msg="From Date is requird.">
</div>
</div>
</div>
I have tried to iterate through div using customdiv css but don't know how to append the div.
$('.customdiv').children().each(function () {
if ($(this).prop("tagName").toLowerCase() == "label") {
$(this).prepend('<div class="col-md-3">');
$(this).append("</div>");
} else {
$(this).prepend('<div class="col-md-5">');
$(this).append("</div>");
}
});
Somebody help me out to achieve this in best way.
Create a div and append the child and then add the new element into the parent, so that you can achieve your result html
$(document).ready(function() {
$(".form-group").each(function(i, obj) {
var tt = $('<div class="col-md-3"></div>');
$(tt).append($(obj).find("label"));
$(obj).append(tt);
var tt = $('<div class="col-md-5"></div>');
$(tt).append($(obj).find("input, select, textarea"));
$(obj).append(tt);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="render-wrap" id="fb-render-wrap">
<div class="fb-text form-group customdiv col-md-12 field-text-1505825076921">
<label for="text-1505825076921" class="fb-text-label">Name<span class="fb-required">*</span></label>
<input type="text" name="text-1505825076921" id="text-1505825076921" required="required" aria-required="true" data-msg="Name is requird.">
</div>
<div class="fb-date form-group customdiv col-md-12 field-date-1505825086301">
<label for="date-1505825086301" class="fb-date-label">From Date<span class="fb-required">*</span></label>
<input type="date" name="date-1505825086301" id="date-1505825086301" required="required" aria-required="true" data-msg="From Date is requird.">
</div>
</div>
Have a look:
$('.customdiv').children().each(function () {
if ($(this).is('label')) {
$(this).wrap('<div class="col-md-3"></div>');
} else {
$(this).wrap('<div class="col-md-5"></div>');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="render-wrap" id="fb-render-wrap">
<div class="fb-text form-group customdiv col-md-12 field-text-1505825076921">
<label for="text-1505825076921" class="fb-text-label">Name<span class="fb-required">*</span></label>
<input type="text" name="text-1505825076921" id="text-1505825076921" required="required" aria-required="true" data-msg="Name is requird.">
</div>
<div class="fb-date form-group customdiv col-md-12 field-date-1505825086301">
<label for="date-1505825086301" class="fb-date-label">From Date<span class="fb-required">*</span></label>
<input type="date" name="date-1505825086301" id="date-1505825086301" required="required" aria-required="true" data-msg="From Date is requird.">
</div>
</div>
I need to disable the textbox inside my angularJS dynamic form after I clicked the button. my code seems to be working fine if I am going to disable textbox outside the dynamic form but when I get the ID of the textbox inside the dynamic form it is not working. What could be the problem.
$scope.copyText = function () {
document.getElementById('copyText').disabled=true;
document.getElementById('bName').disabled=true;
document.getElementById('pName').disabled=true;
// $('#bName').attr('disabled', true);
//alert('#bName');
$scope.LanguageFormData.language = [
{ bName: document.getElementById('brandName').value, pName: document.getElementById('prodName').value, pNameSub: document.getElementById('prodNameSub').value, lFeature: document.getElementById('pfeatureNew').value, lIngredient: document.getElementById('pingredientNew').value, lInstruction: document.getElementById('pinstructionNew').value, languageCat: null }
];
My View looks like this
<div class="col-md-12" class="pull-right" >
<button class="btn btn-primary pull-right" type="button" ng-click="copyText()" id="copyText" value="">COPY</button>
</div>
</div>
<div id="web" ng-repeat="languageItem in LanguageFormData.language">
<div class="row col-xs-12">
<div class="col-xs-6">
<br/><br/>
<div class="form-group">
<label class="col-md-6 control-label">Brand Name: </label>
<div class="col-md-6">
<input type="text" class="form-control" ng-required="true" name="bName" id="bName" class="form-control" ng-model="languageItem.bName" required/>
</div>
</div><br/><br/><br/>
<div class="form-group">
<label class="col-md-6 control-label">Product Name: </label>
<div class="col-md-6">
<input type="text" class="form-control" name="pName" ng-required="true" id="pName" ng-model="languageItem.pName" required/>
</div>
</div><br/><br/><br/>
Why not use ng-disabled. You need to change $scope.disableThis=false; back to false to re-enable the text somewhere else inside the controller code.
$scope.copyText = function () {
$scope.disableThis=true;
$scope.LanguageFormData.language = [
{ bName: document.getElementById('brandName').value, pName: document.getElementById('prodName').value, pNameSub: document.getElementById('prodNameSub').value, lFeature: document.getElementById('pfeatureNew').value, lIngredient: document.getElementById('pingredientNew').value, lInstruction: document.getElementById('pinstructionNew').value, languageCat: null }
];
Suggestions:
I have some doubts on the above code, you can just use the $scope.LanguageFormData.language as is, since you are using ng-model in the input fields, the data of the variable is updated dynamically, you can check this by {{LanguageFormData.language}} printing the output in the HTML
HTML:
<div class="col-md-12" class="pull-right" >
<button class="btn btn-primary pull-right" type="button" ng-click="copyText()" id="copyText" ng-disabled="disableThis" value="">COPY</button>
</div>
</div>
<div id="web" ng-repeat="languageItem in LanguageFormData.language">
<div class="row col-xs-12">
<div class="col-xs-6">
<br/><br/>
<div class="form-group">
<label class="col-md-6 control-label">Brand Name: </label>
<div class="col-md-6">
<input type="text" class="form-control" ng-required="true" name="bName" id="bName" ng-disabled="disableThis" class="form-control" ng-model="languageItem.bName" required/>
</div>
</div><br/><br/><br/>
<div class="form-group">
<label class="col-md-6 control-label">Product Name: </label>
<div class="col-md-6">
<input type="text" class="form-control" name="pName" ng-required="true" id="pName" ng-model="languageItem.pName" ng-disabled="disableThis" required/>
</div>
</div><br/><br/><br/>
Suggestions:
It would be good if you restrict the ID for one particular element alone, its a good practice to follow in general!
Can someone help me. sorry i'm new in PHP and jquery. i was thinking if the user change the select tag. the details from the database will be print on the textbox without refreshing the page using ajax. i don't have ajax code right now. because i don't know what im going to do.
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12">
<p>Full Name</p>
<select class="form-control" name="FullName" id="FullName" onchange="">
<option value="undefine">Select</option>
<?php
$query = mysql_query('SELECT tbluserdetail.FirstName,
tbluserdetail.MiddleName,
tbluserdetail.LastName,
tblchurchs.ChurchName,
tblchurchs.Address,
useraccounts.AccountID,
useraccounts.AccountNo
FROM useraccounts
INNER JOIN tbluserdetail
ON tbluserdetail.UserID = useraccounts.UserID
INNER JOIN tblchurchs
ON tblchurchs.AChurchID = tbluserdetail.AChurchID
');
while($get_info = mysql_fetch_array($query)){
$FName = specialchar($get_info['FirstName']);
$MName = specialchar($get_info['MiddleName']);
$LName = specialchar($get_info['LastName']);
$CName = specialchar($get_info['ChurchName']);
$CAdd = specialchar($get_info['Address']);
$AN = specialchar($get_info['AccountNo']);
$AI = specialchar($get_info['AccountID']);
echo '<option value="'.$AI.'">'.$FName." ".$MName." ".$LName." (".$CName."-".$CAdd.")".'</option>';
}
?>
</select>
</div>
<div class="col-md-6 col-sm-12 col-xs-12 ">
<p>Account No</p>
<input type="text" class="form-control" name="AccountNo" value=""Placeholder="000000" readonly>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12 ">
<p>Address</p>
<input type="text" class="form-control" name="Address" readonly>
</div>
<div class="col-md-6 col-sm-12 col-xs-12 ">
<p>Contact No</p>
<input type="text" class="form-control" name="ContactNo" readonly>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12 ">
<p>Gender</p>
<input type="text" class="form-control" name="Gender" readonly>
</div>
<div class="col-md-6 col-sm-12 col-xs-12 ">
<p>Age</p>
<input type="text" class="form-control" name="Age" readonly>
</div>
</div>
This link might answer our question. It is live filtering.
http://www.jqueryscript.net/demo/Create-Basic-Product-Filters-using-jQuery/