I've made a each loop that loops through all divs calles opening_class then searches all inputs and saves the value in global openings array.
But.. the openings variable stays empty..
Javascript
var openings = [];
$('.opening_class').each(function () {
var id = $(this).attr('id');
var inputs = [];
$('.opening_class input').each(function (i) {
inputs.push($(this).val());
});
openings[id] = inputs;
});
alert(JSON.stringify(openings));
The inputs has input, but it is not setting it into the global openings array..
If anyone could help that would be awesome
Html
<div class="row justify-content-between justify-content-center align-content-center opening_class" id="openingstijden">
<div class="col-3 p-2 text-center font-weight-bold">Maandag:</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_ma_1" placeholder="Van" required="">
</div>
</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_ma_2" placeholder="Tot" required="">
</div>
</div>
<div class="col-3 p-2 text-center font-weight-bold">Dinsdag:</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_di_1" placeholder="Van" required="">
</div>
</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_di_2" placeholder="Tot" required="">
</div>
</div>
<div class="col-3 p-2 text-center font-weight-bold">Woensdag:</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_wo_1" placeholder="Van" required="">
</div>
</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_wo_2" placeholder="Tot" required="">
</div>
</div>
<div class="col-3 p-2 text-center font-weight-bold">Donderdag:</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_do_1" placeholder="Van" required="">
</div>
</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_do_2" placeholder="Tot" required="">
</div>
</div>
<div class="col-3 p-2 text-center font-weight-bold">Vrijdag:</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_vr_1" placeholder="Van" required="">
</div>
</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_vr_2" placeholder="Tot" required="">
</div>
</div>
<div class="col-3 p-2 text-center font-weight-bold">Zaterdag:</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_za_1" placeholder="Van" required="">
</div>
</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_za_2" placeholder="Tot" required="">
</div>
</div>
<div class="col-3 p-2 text-center font-weight-bold">Zondag:</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_zo_1" placeholder="Van" required="">
</div>
</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_zo_2" placeholder="Tot" required="">
</div>
</div>
</div>
</div>
You have a couple of issues in the code.
needs to be an object, not an array
var openings = {};
With the following code you are selecting all of the opening class elements and grabbing all the inputs. You are NOT grabbing the inputs inside of the class you read the id for
$('.opening_class input').each(function (i) { // here you are
You should be using this and find
$(this).find('input').each(function (i) { // here you are
You can also improve your code to use jQuery's map()
var openings = {};
$('.opening_class').each(function() {
var elem = $(this)
var id = elem.attr('id');
var inputs = elem.find('input').map(function(i) {
return this.value
}).get();
openings[id] = inputs;
});
console.log(JSON.stringify(openings));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row justify-content-between justify-content-center align-content-center opening_class" id="openingstijden">
<div class="col-3 p-2 text-center font-weight-bold">Maandag:</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_ma_1" placeholder="Van" required="">
</div>
</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_ma_2" placeholder="Tot" required="">
</div>
</div>
<div class="col-3 p-2 text-center font-weight-bold">Dinsdag:</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_di_1" placeholder="Van" required="">
</div>
</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_di_2" placeholder="Tot" required="">
</div>
</div>
<div class="col-3 p-2 text-center font-weight-bold">Woensdag:</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_wo_1" placeholder="Van" required="">
</div>
</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_wo_2" placeholder="Tot" required="">
</div>
</div>
<div class="col-3 p-2 text-center font-weight-bold">Donderdag:</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_do_1" placeholder="Van" required="">
</div>
</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_do_2" placeholder="Tot" required="">
</div>
</div>
<div class="col-3 p-2 text-center font-weight-bold">Vrijdag:</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_vr_1" placeholder="Van" required="">
</div>
</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_vr_2" placeholder="Tot" required="">
</div>
</div>
<div class="col-3 p-2 text-center font-weight-bold">Zaterdag:</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_za_1" placeholder="Van" required="">
</div>
</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_za_2" placeholder="Tot" required="">
</div>
</div>
<div class="col-3 p-2 text-center font-weight-bold">Zondag:</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_zo_1" placeholder="Van" required="">
</div>
</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_zo_2" placeholder="Tot" required="">
</div>
</div>
</div>
</div>
JS Array cannot contain keys like arrays in php.
You need use
var openings = {};
Insteadof
var openings = [];
Related
I have group of input elements in my form. The user have to add rows to insert multiple values for different date transaction. Now before adding another row, I have to validate the date field and amount field.
My form:
<div id="content_add" class="d-none">
<div class="row i_bike_servicing">
<div class="col-md-2 ">
<input type="text" class="form-control" name="bike_servicing[from_place][]">
</div>
<div class="col-md-1 ">
<input type="text" class="form-control" name="bike_servicing[from_date][]">
</div>
<div class="col-md-2 ">
<input type="text" class="form-control" name="bike_servicing[to_place][]">
</div>
<div class="col-md-1 ">
<input type="text" class="form-control" name="bike_servicing[to_date][]">
</div>
<div class="col-md-1 ">
<input type="text" class="form-control" name="bike_servicing[expenses][]">
</div>
</div>
</div>
<div class="row ">
<div class="col-md-2 ">From Location</div>
<div class="col-md-1 ">From Date</div>
<div class="col-md-2 ">To Location</div>
<div class="col-md-1 ">To Date</div>
<div class="col-md-1 ">Expenses</div>
<div class="col-md-1 ">
<i class="fa fa-plus"></i> add
</div>
</div>
<div id="content_show">
<div class="row i_bike_servicing">
<div class="col-md-2 ">
<input type="text" class="form-control" name="bike_servicing[from_place][]">
</div>
<div class="col-md-1 ">
<input type="text" class="form-control" name="bike_servicing[from_date][]">
</div>
<div class="col-md-2 ">
<input type="text" class="form-control" name="bike_servicing[to_place][]">
</div>
<div class="col-md-1 ">
<input type="text" class="form-control" name="bike_servicing[to_date][]">
</div>
<div class="col-md-1 ">
<input type="text" class="form-control" name="bike_servicing[expenses][]">
</div>
</div>
</div>
<script>
$('#add_servicing').click(function (e) {
e.preventDefault();
let html_clone = $('#content_add').html();
$('#content_show').append(html_clone);
});
</script>
When the user presses the add button, I have to check for the added row, whether from date is smaller than to date or not and expenses should be always be less than 2500 for each row. How can I do this?
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'm building a web site, and want to show a progress bar that indicates the average of all the input numbers I am getting from a form in html.
I do have experience with javascript. I have my Html and css code but I need the javascript code.
<div class="">
<h3 class="card-header">Notes</h3>
<div class="card-body">
<div class="alert alert-warning" role="alert">
Note: Please introduce the grade of the courses from 0 to 20
</div>
<div class="form-group row">
<label class="col-12 col-sm-4 col-form-label text-sm-right">Math:</label>
<div class="col-12 col-sm-8 col-lg-3">
<input id="math" type="number" required="" name="math" class="form-control" min="0" max="20">
</div>
</div>
<div class="form-group row">
<label class="col-12 col-sm-4 col-form-label text-sm-right">history:</label>
<div class="col-12 col-sm-8 col-lg-3">
<input id="history" type="number" required="" name="history" class="form-control" min="0" max="20">
</div>
</div>
<div class="form-group row">
<label class="col-12 col-sm-4 col-form-label text-sm-right">biology:</label>
<div class="col-12 col-sm-8 col-lg-3">
<input id="biology" type="number" required="" name="biology" class="form-control" min="0" max="20">
</div>
</div>
<div class="form-group row">
<label class="col-12 col-sm-4 col-form-label text-sm-right">geography:</label>
<div class="col-12 col-sm-8 col-lg-3">
<input id="" type="number" required="" name="geography" class="form-control" min="0" max="20">
</div>
</div>
<input type="submit" value="Enviar" class="btn btn-space btn-primary" onclick="submitForms()">
</div>
</div>
</form>
How can I write the javascript code, so after submit the results the averages of the notes give me a horizontal progress bar with the corresponding note?
Can anyone help me?
Thanks in advance.
You need to use Bootstraps progress bar classes to show this
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
<span class="sr-only">70% Complete</span>
</div>
</div>
You can try this out here
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_progressbar1&stacked=h
i cloned some part of my checkout based on user input, i want to insert it with other data into database. this is my html checkout. Class eventdetail is the cloned part. it is shown at id eventdisplay. How can i insert this cloned part together with other parts using ajax into my database?
This is the jquery; i also want to check if all fields are filled but sending it to eventdetail.php.
$("#book").click(function() {
var data = {
totalamount: $('#etamt').val(),
venue: $('#cvenue').val(),
//de: document.getElementById('des').innerHTML,
oname:$('#coname').val(),
// name: document.getElementById('ctitle').innerHTML,
frdate: $('#cedate').val(),
todate: $('#ctodate').val(),
// byno: $('#buynumber').val(),
// byemail: $('#buymail').val(),
// byname: $('#buyname').val(),
num: $('#etqty').val(),
}
$.ajax({
async: true,
url: "eventdetail.php",
method: "POST",
data: $(data).serialize(),
// $('.eventdetail').serialize(),
success: function(rt) {
}
});
console.log(data);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class= "col-12">
<div class= "row">
<div class= "col-6">
<div class="form-group border-dark">
<label><strong>Info: TEST</strong></label><br>
<input id="cinfo" value="TEST" type = "hidden"><br>
</div>
</div>
<div class= "col-6">
<div class="form-group border-dark">
<label><strong>Organized by: Jochuks </strong></label><br>
<input id="coname" value="Jochuks" type = "hidden"><br>
</div>
</div>
</div>
<div class="form-group border-dark" id="datediv">
<label><strong>Date and Time:</strong></label><br>
<label><strong>From: 5th June 2019</strong></label>
<input id="cedate" value="5th June 2019" type = "hidden"><br>
<label><strong>To: 23rd June 2019</strong></label>
<input id="ctodate" value="23rd June 2019" type = "hidden"><br>
</div>
<div class="form-group border-dark" id="vendiv">
<label><strong>Venue: StackOver</strong></label><br>
<input id="cvenue" value="StackOver" type = "hidden"><br>
</div>
<div class = "eventdetail">
<div class="card" style="padding-left:0px;">
<div class="card-body">
<label><b>Individual Details:</b></label>
<div class="form-inline">
<div class="form-group border-dark">
<input type="text" class="form-control" name="epname[]" placeholder="Enter individual's Full Name">
</div>
<div class="form-group border-dark">
<input type="email" class="form-control" name="epmail[]" placeholder="Enter individual's Email">
</div>
<div class="form-group border-dark">
<input type="tel" class="form-control" name="epnubmer[]" placeholder="Enter individual's Phone Number">
</div>
</div>
<section class="row">
<div align="center">
<a class="btn btn-outline-dark remove" >Remove Ticket</a>
</div>
</section>
</div>
</div>
</div>
<div class="card" style="padding-left:0px;">
<div class="card-body">
<label><b>Individual Details:</b></label>
<div class="form-inline">
<div class="form-group border-dark">
<input type="text" class="form-control" name="epname[]" placeholder="Enter individual's Full Name">
</div>
<div class="form-group border-dark">
<input type="email" class="form-control" name="epmail[]" placeholder="Enter individual's Email">
</div>
<div class="form-group border-dark">
<input type="tel" class="form-control" name="epnubmer[]" placeholder="Enter individual's Phone Number">
</div>
</div>
<section class="row">
<div align="center">
<a class="btn btn-outline-dark remove" >Remove Ticket</a>
</div>
</section>
</div>
</div>
<div class="card" style="padding-left:0px;">
<div class="card-body">
<label><b>Individual Details:</b></label>
<div class="form-inline">
<div class="form-group border-dark">
<input type="text" class="form-control" name="epname[]" placeholder="Enter individual's Full Name">
</div>
<div class="form-group border-dark">
<input type="email" class="form-control" name="epmail[]" placeholder="Enter individual's Email">
</div>
<div class="form-group border-dark">
<input type="tel" class="form-control" name="epnubmer[]" placeholder="Enter individual's Phone Number">
</div>
</div>
<section class="row">
<div align="center">
<a class="btn btn-outline-dark remove" >Remove Ticket</a>
</div>
</section>
</div>
</div>
<div class="card" style="padding-left:0px;">
<div class="card-body">
<label><b>Individual Details:</b></label>
<div class="form-inline">
<div class="form-group border-dark">
<input type="text" class="form-control" name="epname[]" placeholder="Enter individual's Full Name">
</div>
<div class="form-group border-dark">
<input type="email" class="form-control" name="epmail[]" placeholder="Enter individual's Email">
</div>
<div class="form-group border-dark">
<input type="tel" class="form-control" name="epnubmer[]" placeholder="Enter individual's Phone Number">
</div>
</div>
<section class="row">
<div align="center">
<a class="btn btn-outline-dark remove" >Remove Ticket</a>
</div>
</section>
</div>
</div>
<div id = "eventdisplay">
</div>
<div class="card" style="padding-left:0px;">
<div class="card-body">
<div class="form-group border-dark pull-right">
<label><strong> Total Amount: 20340</strong></label><br>
<input id="etamt" value="20340" type = "hidden"><br>
</div>
<div class="form-group border-dark pull-right">
<label><strong>Qty: 4</strong></label><br>
<input id="etqty" value="4" type = "hidden">
</div>
</div>
</div>
<button type="button" class="btn btn-success btn-sm btn-block font-weight-bold mt-3 mb-3" id="book">BOOK</button>
<button type="button" class="btn btn-success btn-sm btn-block font-weight-bold mt-3 mb-3" id="back1">BACK</button>
</div>
This isn't going to solve your problem, but here's a snippet where I commented out the bits that weren't working. Try putting a snippet like this into your question, with the things you need, and you'll be able to see what is and isn't working. You can also use https://codepen.io/ to build these things out and test more.
Consider using something other than jQuery, as it's pretty old these days!
create-react-app is a nice starting point if you want to try react.
Writing validation libraries from scratch is a huge task, there are so many tools and plugins now you can use to avoid starting from the ground up:
for jquery: https://jqueryvalidation.org/
for react some insight:
https://www.telerik.com/blogs/up-and-running-with-react-form-validation
If you're just doing this for the joy of learning how to solve this problem with jQuery, that's cool! Feel free to comment on this answer and I'll update it to try and help you. Here's the snippet example for your reference:
$("#book").click(function() {
var data = {
totalamount: document.getElementById('etamt').innerHTML,
venue: document.getElementById('cvenue').innerHTML,
email: $('#cvemail').val(),
// de: document.getElementById('des').innerHTML,
// oname: document.getElementById('coname').innerHTML,
name: document.getElementById('ctitle').innerHTML,
// frdate: document.getElementById('cedate').innerHTML,
// todate: document.getElementById('ctodate').innerHTML,
// byno: $('#buynumber').val(),
// byemail: $('#buymail').val(),
// byname: $('#buyname').val(),
// num: document.getElementById('etqty').innerHTML,
}
$.ajax({
async: true,
url: "eventdetail.php",
method: "POST",
data: $(data).serialize(),
// $('.eventdetail').serialize(),
success: function(rt) {
}
});
console.log(data);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-12">
<input type="hidden" class="form-control" id="userid">
<input type="hidden" class="form-control" id="id">
<input type="hidden" class="form-control" id="cvemail">
<div class="row">
<div class="col-6">
<div class="form-group border-dark">
<label><strong>Info:</strong></label><br>
<label id="cinfo"></label><br>
</div>
</div>
<div class="col-6">
<div class="form-group border-dark">
<label><strong>Organized by:</strong></label><br>
<label id="coname"></label><br>
</div>
</div>
</div>
<div class="form-group border-dark" id="datediv">
<label><strong>Date and Time:</strong></label><br>
<label><strong>From:</strong></label>
<label id="cedate"></label><br>
<label><strong>To:</strong></label>
<label id="ctodate"></label><br>
</div>
<div class="form-group border-dark" id="vendiv">
<label><strong>Venue:</strong></label><br>
<label id="cvenue"></label><br>
</div>
<div style="display:none" class="eventdetail">
<div class="card" style="padding-left:0px;">
<div class="card-body">
<label class="pull-right" id="none"></label>
<label id="con"></label><br>
<label><b>Individual Details:</b></label>
<div class="form-inline">
<div class="form-group border-dark">
<input type="text" class="form-control" name="epname[]" placeholder="Enter individual's Full Name">
</div>
<div class="form-group border-dark">
<input type="email" class="form-control" name="epmail[]" placeholder="Enter individual's Email">
</div>
<div class="form-group border-dark">
<input type="tel" class="form-control" name="epnubmer[]" placeholder="Enter individual's Phone Number">
</div>
</div>
<section class="row">
<div align="center">
<a class="btn btn-outline-dark remove">Remove Ticket</a>
</div>
</section>
</div>
</div>
</div>
<div id="eventdisplay">
</div>
<div class="card" style="padding-left:0px;">
<div class="card-body">
<div class="form-group border-dark pull-right">
<label><strong> Total Amount:</strong></label><br>
<label id="etamt"></label><br>
</div>
<div class="form-group border-dark pull-right">
<label><strong>Qty:</strong></label><br>
<label id="etqty"></label>
</div>
</div>
</div>
<button type="button" class="btn btn-success btn-sm btn-block font-weight-bold mt-3 mb-3" id="book">BOOK</button>
<button type="button" class="btn btn-success btn-sm btn-block font-weight-bold mt-3 mb-3" id="back1">BACK</button>
</div>
I have two radio buttons , two textboxes and a button.
When i click on 1st button then only one text box should appear , when i click on second button , two textboxes should appear.
but i want to do it with visibility:hidden|visible property as I want button position to be fixed below two text boxes.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="form-group">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label">Registration</label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<div class="basic_info_radio_toggle">
<label class="one">
<input type="radio" name="registration_options" checked="checked" ng-click="option='one'" ng-init="option='one'">
<span>One</span></label>
<label class="two">
<input type="radio" name="registration_options" ng-click="option='two'">
<span>Two</span></label>
</div>
</div>
</div>
<div class="form-group" ng-show="option ==='two'">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<form role="form">
<div class="form-group set_margin_0 set_padding_0">
<label>Button</label>
<input class="form-control" placeholder="Enter Button Name" type="text">
</div>
</form>
</div>
</div>
<div class="form-group" ng-show="option ==='two' || option === 'one'">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<span>Link</span>
<input class="form-control" placeholder="http://" type="text">
</div>
</div>
<div class="form-group">
<div class="col-md-12 col-sm-12 col-xs-12 pull-right set_padding_0">
<button class="btn m-b-xs w-xs btn-danger common_btn set_margin_0">Save</button>
</div>
</div>
Thank you.
Try ng-style directive:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
<script>
var app = angular.module("TestApp", []);
app.controller("myCtrl", function () {
});
</script>
<div ng-app="TestApp" ng-controller="myCtrl">
<div class="form-group">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label">Registration</label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<div class="basic_info_radio_toggle">
<label class="one">
<input type="radio" name="registration_options" checked="checked" ng-click="option='one'" ng-init="option='one'">
<span>One</span></label>
<label class="two">
<input type="radio" name="registration_options" ng-click="option='two'">
<span>Two</span></label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<form role="form">
<div class="form-group set_margin_0 set_padding_0">
<label>Button</label>
<input class="form-control" placeholder="Enter Button Name" type="text">
</div>
</form>
</div>
</div>
<div class="form-group" ng-style="{visibility: option == 'two' ? 'visible' : 'hidden'}">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<span>Link</span>
<input class="form-control" placeholder="http://" type="text">
</div>
</div>
<div class="form-group">
<div class="col-md-12 col-sm-12 col-xs-12 pull-right set_padding_0">
<button class="btn m-b-xs w-xs btn-danger common_btn set_margin_0">Save</button>
</div>
</div>
</div>
</body>
</html>
Please try by using a function rather than using the inline definition. Also I will prefer to use ng-if rather than ng-show because ng-if will block rendering the HTML template if the condition is wrong. Please try the below code snippet.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
<script>
var app = angular.module("TestApp", []);
app.controller("myCtrl", function ($scope) {
$scope.setVisibility = function(val){
var resultVal = (val == 'one')? 'one' : 'other';
$scope.option = resultVal;
}
});
</script>
<div ng-app="TestApp" ng-controller="myCtrl">
<div class="form-group">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label">Registration</label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<div class="basic_info_radio_toggle">
<label class="one">
<input type="radio" name="registration_options" checked="checked" ng-click="setVisibility('one')" ng-init="option='one'">
<span>One</span></label>
<label class="two">
<input type="radio" name="registration_options" ng-click="setVisibility('two')">
<span>Two</span></label>
</div>
</div>
</div>
<div class="form-group" ng-if="option ==='other'">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<form role="form">
<div class="form-group set_margin_0 set_padding_0">
<label>Button</label>
<input class="form-control" placeholder="Enter Button Name" type="text">
</div>
</form>
</div>
</div>
<div class="form-group" ng-if="option ==='other' || option === 'one'">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<span>Link</span>
<input class="form-control" placeholder="http://" type="text">
</div>
</div>
<div class="form-group">
<div class="col-md-12 col-sm-12 col-xs-12 pull-right set_padding_0">
<button class="btn m-b-xs w-xs btn-danger common_btn set_margin_0">Save</button>
</div>
</div>
</div>
</body>
</html>
I don't see you have initialized your angular app.
Try this one:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script>
angular.module("MyApp", []); //angular app
</script>
<div ng-app="MyApp">
<div class="form-group">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label">Registration</label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<div class="basic_info_radio_toggle">
<label class="one">
<input type="radio" name="registration_options" checked="checked" ng-click="option='one'" ng-init="option='one'">
<span>One</span></label>
<label class="two">
<input type="radio" name="registration_options" ng-click="option='two'">
<span>Two</span></label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<form role="form">
<div class="form-group set_margin_0 set_padding_0">
<label>Button</label>
<input class="form-control" placeholder="Enter Button Name" type="text">
</div>
</form>
</div>
</div>
<div class="form-group" ng-class="{'invisible':option =='one'}">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<span>Link</span>
<input class="form-control" placeholder="http://" type="text">
</div>
</div>
<div class="form-group">
<div class="col-md-12 col-sm-12 col-xs-12 pull-right set_padding_0">
<button class="btn m-b-xs w-xs btn-danger common_btn set_margin_0">Save</button>
</div>
</div>
</div>
You can try this with ng-class
CSS
<style>
.visibleOff{visibility: hidden;}
</style>
HTML
<div class="form-group">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label">Registration</label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<div class="basic_info_radio_toggle">
<label class="one">
<input type="radio" name="registration_options" checked="checked" ng-click="option='one'" ng-init="option='one'">
<span>One</span></label>
<label class="two">
<input type="radio" name="registration_options" ng-click="option='two'">
<span>Two</span></label>
</div>
</div>
</div>
<div class="form-group" >
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<form role="form">
<div class="form-group set_margin_0 set_padding_0">
<label>Button</label>
<input class="form-control" placeholder="Enter Button Name" type="text">
</div>
</form>
</div>
</div>
<div class="form-group" ng-class="{'visibleOff': option == 'one'}">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<span>Link</span>
<input class="form-control" placeholder="http://" type="text">
</div>
</div>
<div class="form-group">
<div class="col-md-12 col-sm-12 col-xs-12 pull-right set_padding_0">
<button class="btn m-b-xs w-xs btn-danger common_btn set_margin_0">Save</button>
</div>
</div>