I add few input fields & labels in bootstrap.
Then i add jQuery/javascript code to add & remove dynamically features.The script works fine.
But these dynamically inserted HTML elements are not displaying with proper alignment.
Please check image given below
I think,i put some elements in wrong position.
please suggest me about bringing proper alignment back.
Here is the source code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Add/Remove</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form class="form-inline" role="form">
<div class="form-group" id="parent_div">
<div class="row form-group child_div">
<div class="col-xs-12 col-lg-3">
<label for="form-input-col-xs-2" class="wb-inv">Other Job Position:</label>
<div class="input-group" style="">
<select class="form-control " id="employeetype" onchange="updateText('')">
<option value="" disabled="" selected="">Select Job Type</option>
<option value="10">1</option>
<option value="10">2</option>
<option value="10">3</option>
</select>
</div>
</div>
<div class="col-xs-12 col-lg-3">
<label for="form-input-col-xs-3" class="wb-inv">Date:</label>
<div class="input-group">
<input type="text" class="form-control" id="form-input-col-xs-3" placeholder="DD/MM/YYYY" />
<span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
<div class="col-xs-12 col-lg-3">
<label for="form-input-col-xs-3" class="wb-inv">Amount:</label>
<div class="input-group">
<input type="text" class="form-control" id="form-input-col-xs-3" placeholder=".00" />
<span class="input-group-addon"><i class="glyphicon glyphicon-usd"></i></span>
</div>
</div>
<div class="form-group ">
<div class="input-group">
<input class="btn btn-danger deleteButton" type="button" value="-" />
</div>
</div>
</div>
</div>
<label for="day" class="col-xs-2 control-label"></label>
<input class="btn btn-success " type="button" id="create_button" value="+" />
</form>
</div>
<script type="text/javascript">
$('#create_button').click(function() {
var html = $('.child_div:first').parent().html();
$(html).insertBefore(this);
});
$(document).on("click", ".deleteButton", function() {
$(this).closest('.child_div').remove();
});
</script>
</body>
</html>
please let me know if any further information is required.
Thanks :)
So here's the complete html with some style to fix the alignment:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Add/Remove</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
div.child_div:first-child {
margin-top: 0px;
padding-top: 0px;
}
div.child_div {
width: 615px;
}
div.job-position {
width: 220px;
}
div.job-type {
width: 180px;
}
div.job-amount {
width: 180px;
}
div.form-group {
padding-top: 25px;
}
input#create_button {
margin-top: 50px;
}
</style>
</head>
<body>
<div class="container">
<form class="form-inline" role="form">
<div class="form-group" id="parent_div">
<div class="row form-group child_div">
<div class="col-xs-12 col-lg-3 job-position">
<label for="form-input-col-xs-2" class="wb-inv">Other Job Position:</label>
<div class="input-group" style="">
<select class="form-control " id="employeetype" onchange="updateText('')">
<option value="" disabled="" selected="">Select Job Type</option>
<option value="10">1</option>
<option value="10">2</option>
<option value="10">3</option>
</select>
</div>
</div>
<div class="col-xs-12 col-lg-3 job-date">
<label for="form-input-col-xs-3" class="wb-inv">Date:</label>
<div class="input-group">
<input type="text" class="form-control" id="form-input-col-xs-3" placeholder="DD/MM/YYYY" />
<span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
<div class="col-xs-12 col-lg-3 job-amount">
<label for="form-input-col-xs-3" class="wb-inv">Amount:</label>
<div class="input-group">
<input type="text" class="form-control" id="form-input-col-xs-3" placeholder=".00" />
<span class="input-group-addon"><i class="glyphicon glyphicon-usd"></i></span>
</div>
</div>
<div class="form-group ">
<div class="input-group">
<input class="btn btn-danger deleteButton" type="button" value="-" />
</div>
</div>
</div>
</div>
<input class="btn btn-success " type="button" id="create_button" value="+" />
</form>
</div>
<script type="text/javascript">
$('#create_button').click(function() {
var html = $('.child_div:first').parent().html();
$(html).insertBefore(this);
});
$(document).on("click", ".deleteButton", function() {
$(this).closest('.child_div').remove();
});
</script>
</body>
</html>
You still have two problems though:
The page allows you to delete the last item. The code should handle this situation. The problem is, if the last item is deleted, you can't create a new one from the first item.
Load the page, click add, remove the first item, then click add again, you get multiple green buttons. You should fix that.
Remove this line:
<label for="day" class="col-xs-2 control-label"></label>
It doesn't seem to have any purpose, yet it causes the mis-alignment.
Another issue you have is the red button is aligned to the top with the other divs. Add padding-top to that div should push it down to line up with the other fields and buttons.
You wrote:
$('#create_button').click(function() {
var html = $('.child_div:first').parent().html();
$(html).insertBefore(this);
});
That takes the contents of child-div's parent (i.e. the content of #parent-div) and appends it before this. In the case of the click handler - which is assigned to #create_button - this is the button itself. If you use insertBefore(this) in that context you are inserting your content between the label and the button.
<label for="day" class="col-xs-2 control-label"></label>
<!-- You just inserted a code block here! -->
<input class="btn btn-success " type="button" id="create_button" value="+" />
I'm pretty sure that's not what you intended to do.
P.S. be careful about copying code this way. The elements you're copying have IDs attached, but IDs should be unique across any given document.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Add/Remove</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
</head>
<body>
<div class="container">
<form class="form-inline" role="form">
<div class="col-lg-2">
<label for="day" class="col-xs-2 control-label"></label>
<input class="btn btn-success " type="button" id="create_button" value="+" />
</div>
<div class="col-lg-10">
<div class="form-group" id="parent_div ">
<div class="row child_div col-lg-12">
<div class="col-lg-4">
<label for="form-input-col-xs-2" class="wb-inv">Other Job Position:</label>
<div class="input-group" style="">
<select class="form-control " id="employeetype" onchange="updateText('')">
<option value="" disabled="" selected="">Select Job Type</option>
<option value="10">1</option>
<option value="10">2</option>
<option value="10">3</option>
</select>
</div>
</div>
<div class="col-lg-4">
<label for="form-input col-xs-3" class="wb-inv">Date:</label>
<div class="input-group">
<input type="text" class="form-control" id="form-input-col-xs-3" placeholder="DD/MM/YYYY" />
<span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
<div class="col-lg-3">
<label for="form-input-col-xs-3" class="wb-inv">Amount:</label>
<div class="input-group">
<input type="text" class="form-control" id="form-input-col-xs-3" placeholder=".00" />
<span class="input-group-addon"><i class="glyphicon glyphicon-usd"></i></span>
</div>
</div>
<div class="col-lg-1">
<div class="input-group">
<input class="btn btn-danger deleteButton" type="button" value="-" />
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<script type="text/javascript">
var html = $('.form-group').html();
$('#create_button').on("click", function() {
$('.form-group').append(html);
});
$(document).on("click", ".deleteButton", function() {
$(this).closest('.child_div').remove();
});
</script>
Related
I have built out a pop-up button module using Bootstrap with the intent in adding it to each of my product pages. The roadblock Issue I am having is listed below.
*This is my first post here so If there is anything posted that would not be necessary or how I format the issue should be different please let me know.
The issue is I have set a drop down to allow the site's users to select the topic of their email information request. The other option presented me with the question, should I remove the drop down and provide a text filed for the user to fill out to best suit their needs for the evolution.
I am unable to figure a response in the console (at my tech ability) so I know how to assign it to disappear and allow the other field to appear when the "other" option is selected. I have two variants attached and was hoping to get one of them to work but have been unsuccessful. Please advise.
Thank you!
J
//What I expected to work and did not.
/* First attempt code start */
// $(document).ready(function(){
// console.log("Do Something rad today...");
// $('#mce-other-subject').hide();
// });
// $('#tenth-choice').on("click", function () {
// $('#mce-MMERGE3').hide();
// $('#mce-other-subject').show();
// });
/* First attempt code end */
/* Second attempt code start */
// var newDiv = document.getElementById('tenth-choice');
// newDiv.addEventListener("click", listener, false);
// function listener() {
// document.getElementById('tenth-choice').innerHTML = "other";
// $('#mce-MMERGE3').hide();
// $('#mce-other-subject').show();
// }
// /* Second attempt code end */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Working primary content for button click - Module pop out -->
<!doctype html>
<html lang="en">
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- additional meta tags -->
<meta author=" Jxxxx Sxxxx ">
<meta copyright="© 2019 | Jxxxx Sxxxx ">
<meta user="RxxxxxxxxxxxxSxxxx.com">
<meta keywords="bootstrap, html, jquery, module, button, contact, form, javascript">
<!-- Jquery | Javascript -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous" async></script>
</head>
<body>
<!--------------- primary button ---------------------------------->
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#exampleModalLong" id="ques-btn" style=" margin-left: 40%; margin-top:10%;">
Have Questions
</button>
<!--------------- Modal Begin ----------------------->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header" style="background-color: rgba(255,255,255, .003);">
<h5 class="modal-title text-center" id="exampleModalLongTitle">Contact Our Tech Department</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup {
background-color: "rgba(255,255,255, .003)";
clear: left;
font: 14px Helvetica, Arial, sans-serif;
}
/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="https://thedomain.com/things/morethings/onelastthing" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Have questions? We are here to help</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL"> <span class="asterisk"></span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder=" * Your#email.com * ">
</div>
<div class="mc-field-group">
<label for="mce-FNAME"> </label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME" placeholder="First Name">
</div>
<div class="mc-field-group">
<label for="mce-LNAME"> </label>
<input type="text" value="" name="LNAME" class="" id="mce-LNAME" placeholder="Last Name">
</div>
<div class="mc-field-group">
<label for="mce-Link"> </label>
<input type="text" value="" name="LINK" class="" id="mce-LNAME" placeholder="https://linkGoesHere.com">
</div>
<div class="mc-field-group size1of2">
<label for="mce-MMERGE4"> </label>
<input type="number" name="MMERGE4" class="" value="" id="mce-MMERGE4" placeholder="5 5 5 - 5 5 5 - 5 5 5 5">
</div>
<div class="mc-field-group">
<label for="mce-MMERGE3"> </label>
<select name="MMERGE3" class="" id="mce-MMERGE3">
<option value="">Email Subject</option>
<option value="First Choice">Schedule a Bike Fit</option>
<option value="Second Choice">Schedule Bike Service</option>
<option value="Third Choice">Order Question</option>
<option value="fourth Choice">Overseas shipping</option>
<option value="fifth Choice">I want to do a custom build</option>
<option value="Sixth Choice">I dont see it on your site, Can you get it for me?</option>
<option value="Seventh Choice">Request a call back</option>
<option value="Eigth Choice">Upcoming Rides</option>
<option value="Nineth Choice">Waranty</option>
<option value="Tenth Choice" id="tenth-choice">Other</option>
</select>
<div class="mc-field-group">
<label for="mce-other-subject"> </label>
<input type="text" value="" name="other-subject" class="" id="mce-other-subject" placeholder="RE: ( alt: Custom subject )">
</div>
</div>
<div class="mc-field-group">
<label for="mce-MMERGE5"> <span class="asterisk">*</span>
</label>
<input type="text" value="" name="MMERGE5" class="required" id="mce-MMERGE5" placeholder=" * Your quesitons go here . . . * ">
</div>
<div class="mc-field-group input-group">
<strong>Format </strong>
<ul>
<li><input type="radio" value="html" name="EMAILTYPE" id="mce-EMAILTYPE-0"><label for="mce-EMAILTYPE-0"> html</label></li>
<li><input type="radio" value="text" name="EMAILTYPE" id="mce-EMAILTYPE-1"><label for="mce-EMAILTYPE-1"> text</label></li>
</ul>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_0e27360bc21d21bdeb3dc8509_e155794398" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
<script type='text/javascript'>
(function($) {
window.fnames = new Array();
window.ftypes = new Array();
fnames[0] = 'EMAIL';
ftypes[0] = 'email';
fnames[1] = 'FNAME';
ftypes[1] = 'text';
fnames[2] = 'LNAME';
ftypes[2] = 'text';
fnames[4] = 'MMERGE4';
ftypes[4] = 'number';
fnames[3] = 'MMERGE3';
ftypes[3] = 'dropdown';
fnames[5] = 'MMERGE5';
ftypes[5] = 'text';
}(jQuery));
var $mcj = jQuery.noConflict(true);
</script>
<!--End mc_embed_signup-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-info" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
link to an image of console and client-side
You don't really need to listen the click on the option 10 of your list. What you need to do is listen to the onChange event of the select tag and compare the value with the option you want to condition the visibility of the input, in your case "Tenth Choice".
If the comparison is true you will be able to change the visibility as you wish. let's have a look to this example:
$('#mce-MMERGE3').on("change", function (e) {
if (e.target.value == "Tenth Choice") {
$('#mce-MMERGE3').hide();
$('#mce-other-subject').show();
}
});
.mce-other-subject {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mc-field-group">
<label for="mce-MMERGE3"> </label>
<select name="MMERGE3" class="" id="mce-MMERGE3">
<option value="">Email Subject</option>
<option value="First Choice">Schedule a Bike Fit</option>
<option value="Second Choice">Schedule Bike Service</option>
<option value="Third Choice">Order Question</option>
<option value="fourth Choice">Overseas shipping</option>
<option value="fifth Choice">I want to do a custom build</option>
<option value="Sixth Choice">I dont see it on your site, Can you get it for me?</option>
<option value="Seventh Choice">Request a call back</option>
<option value="Eigth Choice">Upcoming Rides</option>
<option value="Nineth Choice">Waranty</option>
<option value="Tenth Choice">Other</option>
</select>
<div class="mc-field-group mce-other-subject" id="mce-other-subject">
<label for="mce-other-subject"> </label>
<input type="text" value="" name="other-subject" class="" placeholder="RE: ( alt: Custom subject )">
</div>
</div>
This is the function you need to toggle the custom subject input field group:
$(function () {
var subjectInputGroup = $('#mce-other-subject').closest('.mc-field-group');
subjectInputGroup.hide()
$('#mce-MMERGE3').on('change', function (e) {
if ($('option:selected', this).attr('id') == 'tenth-choice') {
subjectInputGroup.show()
}
else {
subjectInputGroup.hide()
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Working primary content for button click - Module pop out -->
<!doctype html>
<html lang="en">
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- additional meta tags -->
<meta author=" Jxxxx Sxxxx ">
<meta copyright="© 2019 | Jxxxx Sxxxx ">
<meta user="RxxxxxxxxxxxxSxxxx.com">
<meta keywords="bootstrap, html, jquery, module, button, contact, form, javascript">
<!-- Jquery | Javascript -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous" async></script>
</head>
<body>
<!--------------- primary button ---------------------------------->
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#exampleModalLong" id="ques-btn" style=" margin-left: 40%; margin-top:10%;">
Have Questions
</button>
<!--------------- Modal Begin ----------------------->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header" style="background-color: rgba(255,255,255, .003);">
<h5 class="modal-title text-center" id="exampleModalLongTitle">Contact Our Tech Department</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup {
background-color: "rgba(255,255,255, .003)";
clear: left;
font: 14px Helvetica, Arial, sans-serif;
}
/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="https://thedomain.com/things/morethings/onelastthing" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Have questions? We are here to help</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL"> <span class="asterisk"></span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder=" * Your#email.com * ">
</div>
<div class="mc-field-group">
<label for="mce-FNAME"> </label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME" placeholder="First Name">
</div>
<div class="mc-field-group">
<label for="mce-LNAME"> </label>
<input type="text" value="" name="LNAME" class="" id="mce-LNAME" placeholder="Last Name">
</div>
<div class="mc-field-group">
<label for="mce-Link"> </label>
<input type="text" value="" name="LINK" class="" id="mce-LNAME" placeholder="https://linkGoesHere.com">
</div>
<div class="mc-field-group size1of2">
<label for="mce-MMERGE4"> </label>
<input type="number" name="MMERGE4" class="" value="" id="mce-MMERGE4" placeholder="5 5 5 - 5 5 5 - 5 5 5 5">
</div>
<div class="mc-field-group">
<label for="mce-MMERGE3"> </label>
<select name="MMERGE3" class="" id="mce-MMERGE3">
<option value="">Email Subject</option>
<option value="First Choice">Schedule a Bike Fit</option>
<option value="Second Choice">Schedule Bike Service</option>
<option value="Third Choice">Order Question</option>
<option value="fourth Choice">Overseas shipping</option>
<option value="fifth Choice">I want to do a custom build</option>
<option value="Sixth Choice">I dont see it on your site, Can you get it for me?</option>
<option value="Seventh Choice">Request a call back</option>
<option value="Eigth Choice">Upcoming Rides</option>
<option value="Nineth Choice">Waranty</option>
<option value="Tenth Choice" id="tenth-choice">Other</option>
</select>
<div class="mc-field-group">
<label for="mce-other-subject"> </label>
<input type="text" value="" name="other-subject" class="" id="mce-other-subject" placeholder="RE: ( alt: Custom subject )">
</div>
</div>
<div class="mc-field-group">
<label for="mce-MMERGE5"> <span class="asterisk">*</span>
</label>
<input type="text" value="" name="MMERGE5" class="required" id="mce-MMERGE5" placeholder=" * Your quesitons go here . . . * ">
</div>
<div class="mc-field-group input-group">
<strong>Format </strong>
<ul>
<li><input type="radio" value="html" name="EMAILTYPE" id="mce-EMAILTYPE-0"><label for="mce-EMAILTYPE-0"> html</label></li>
<li><input type="radio" value="text" name="EMAILTYPE" id="mce-EMAILTYPE-1"><label for="mce-EMAILTYPE-1"> text</label></li>
</ul>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_0e27360bc21d21bdeb3dc8509_e155794398" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
<script type='text/javascript'>
(function($) {
window.fnames = new Array();
window.ftypes = new Array();
fnames[0] = 'EMAIL';
ftypes[0] = 'email';
fnames[1] = 'FNAME';
ftypes[1] = 'text';
fnames[2] = 'LNAME';
ftypes[2] = 'text';
fnames[4] = 'MMERGE4';
ftypes[4] = 'number';
fnames[3] = 'MMERGE3';
ftypes[3] = 'dropdown';
fnames[5] = 'MMERGE5';
ftypes[5] = 'text';
}(jQuery));
var $mcj = jQuery.noConflict(true);
</script>
<!--End mc_embed_signup-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-info" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Here's an ES6 shorthand alternative:
const subjectInputGroup = $('#mce-other-subject').closest('.mc-field-group').hide();
$('#mce-MMERGE3').on('change', e => subjectInputGroup[
$('option:selected', e.target).attr('id') == 'tenth-choice' ? 'show' : 'hide'
]());
I have this dynamic form that lets me add more form inputs if user selects the + button or remove it if they select the - button. In this form I have a drop down selector I wanted to take this selector and make it so the user can select multiple options in the select box. I have included the select2 API however I am not able to select multiple options. Is there anything I can do to make this work?
var room = 1;
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;
divtest.innerHTML = '<div class="col-sm-3 nopadding"><div class="form-group"> <input type="text" class="form-control" id="Schoolname" name="Schoolname[]" value="" placeholder="School name"></div></div><div class="col-sm-3 nopadding"><div class="form-group"> <input type="text" class="form-control" id="Major" name="Major[]" value="" placeholder="Major"></div></div><div class="col-sm-3 nopadding"><div class="form-group"> <input type="text" class="form-control" id="Degree" name="Degree[]" value="" placeholder="Degree"></div></div><div class="col-sm-3 nopadding"><div class="form-group"><div class="input-group"> <select multiple="multiple" class="form-control" id="educationDate" name="educationDate[]"><option value="">Date</option><option value="2015">2015</option><option value="2016">2016</option><option value="2017">2017</option><option value="2018">2018</option> </select><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>';
objTo.appendChild(divtest)
}
function remove_education_fields(rid) {
$('.removeclass'+rid).remove();
}
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<title>Dynamic Form Fields - Add & Remove Multiple fields - Bootsnipp.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<!-- select2 boxes-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>
</head>
<div class="panel panel-default">
<div class="panel-heading">Dynamic Form Fields - Add & Remove Multiple fields</div>
<div class="panel-heading">Education Experience</div>
<div class="panel-body">
<div id="education_fields">
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control" id="Schoolname" name="Schoolname[]" value="" placeholder="School name">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control" id="Major" name="Major[]" value="" placeholder="Major">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control" id="Degree" name="Degree[]" value="" placeholder="Degree">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<div class="input-group">
<select multiple="multiple" class="form-control" id="educationDate" name="educationDate[]">
<option value="">Date</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
</select>
<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>
<button class="btn btn-primary" type="submit">Next</button>
<div class="clear"></div>
</div>
<div class="panel-footer"><small>Press <span class="glyphicon glyphicon-plus gs"></span> to add another form field :)</small>, <small>Press <span class="glyphicon glyphicon-minus gs"></span> to remove form field :)</small></div>
</div>
<script type="text/javascript">
// select2 place holder text
$('#educationDate').select2({
placeholder: 'Pick An Option'
});
</script>
Select2 adopts to standard HTML attributes.
https://select2.org/configuration/options-api
You need to add multiple to your select
<select multiple
function getOption(){
var select = document.getElementById("dynamic-select");
if(select.options.length > 0) {
var option = select.options[select.selectedIndex];
alert("Text: " + option.text + "\nValue: " + option.value);
} else {
window.alert("Select box is empty");
}
}
function addOption(){
var select = document.getElementById("dynamic-select");
select.options[select.options.length] = new Option('New Element', '0', false, false);
}
<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete Address Form</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.pac-container {
z-index: 10000 !important;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Shipping Method</h2>
<form>
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="optradio" checked>Deliver To *</label>
</div>
</div>
<div class="form-group">
<select id="dynamic-select">
<option value="None">Select Shipping</option>
</select>
</div>
<div class="form-group">
<a data-toggle="modal" data-target="#myModal">Add Delivery Address</a>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><span><i class="fa fa-map-marker" aria-hidden="true"></i></span>Add your Delivery Details</h4>
</div>
<div class="modal-body">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Address</h3>
</div>
<div class="panel-body">
<input id="autocomplete" placeholder="Enter your address"
onFocus="geolocate()" type="text" class="form-control">
<br>
<div id="address">
<div class="row">
<div class="col-md-6">
<label class="control-label">Street address</label>
<input class="form-control" id="street_number">
</div>
<div class="col-md-6">
<label class="control-label">Route</label>
<input class="form-control" id="route">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">City</label>
<input class="form-control field" id="locality">
</div>
<div class="col-md-6">
<label class="control-label">State</label>
<input class="form-control" id="administrative_area_level_1">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">Zip code</label>
<input class="form-control" id="postal_code">
</div>
<div class="col-md-6">
<label class="control-label">Country</label>
<input class="form-control" id="country">
</div>
</div>
</div>
<button type="submit" onclick="addOption()">Add NEW</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
I'm new to Javascript and in this example, basically I have created a Shipping Method Page. In the "ADD Delivery Address" link, on clicking there is a address form which needs to be filled out and after pressing the ADD NEW button, all the address form data should appear in the select menu option like in the picture below. But I'm unable to do so. Can someone please enlighten me on his. It would be a immense help to me. Thank you
This is line bug, id newopt don't exist in html.
var newopt = $('#newopt').val();
currently i am trying to to a calendar using the full calendar plugin. Here is my code,
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='fullcalendar.css' rel='stylesheet' />
<link href='fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='moment.min.js'></script>
<script src='jquery.min.js'></script>
<script src='fullcalendar.min.js'></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select: function(start, end, jsEvent, view){
window.location = "testing.php";
},
});
});
</script>
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
Currently, when i click on a date, the calendar redirect me to the test.php (which is what i wanted). Here nows the tricky part. How do i code it in a way that, For example, when the user pressed on january 10th, the details( which is in the database) will be echo out to that php. (testing.php).
Any suggestion on how my testing.php file should be done? sorry in advance if i happen to ask a stupid question.
To add on , it is somehow a feature which is similar to this http://www.w3schools.com/php/php_ajax_database.asp thank you in advance for any helpful tips.
You would probably need to append the start date as a url parameter in your window.location
...
select: function(start, end, jsEvent, ){
window.location = "testing.php?start=" + start;
},
Then on the php side you'd $_GET['start']
On the other hand, you could make an ajax post request in the select function.
I used a modal to pop-up when selecting a date from the calendar from which I supplied required values.
Script
select: function (start, end, allDay) {
$('#eventTitle').val('');
$('#eventStart').val('');
$('#eventEnd').val('');
$('#eventDescription').val('');
$('#eventType').val('');
$('#eventStart').val('');
$('#eventEnd').val('');
$('#myModal').modal();
$('#eventStart').val(moment(start).format('YYYY-MM-DD, HH:mm:ss'));
$('#eventEnd').val(moment(end).format('YYYY-MM-DD, HH:mm:ss'));
HTML
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-primary">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Create Event</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="form-group"><div class="col-sm-12">
<label class="label bg-primary">Title</label> <input type="text" name="eventTitle" id="eventTitle" class="form-control" />
</div>
</div>
<div class="form-group"><div class="col-sm-12">
<label class="label bg-primary">Description</label> <textarea name="eventDescription" id="eventDescription" class="form-control" rows="5"></textarea>
</div>
</div>
<div class="form-group"><div class="col-sm-6">
<label class="label bg-primary">Event Reason</label> <select id="eventType" class="form-control" name="event_type">
<option value="">---Select One---</option>
<option value="meeting">Meeting</option>
<option value="reminder">Reminder</option>
<option value="holiday">Holiday</option>
<option value="vacation">Vacation</option>
<option value="anniversary">Anniversary</option>
<option value="unsched">Unscheduled Leave</option>
<option value="sickleave">Sick Leave</option>
</select>
</div>
</div>
<label class="label bg-primary">Event Type</label>
<div class="form-group"><div class="col-sm-6">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active" >
<input type="radio" id="optionsRadio" name="quality[25]" checked="checked" value="false" /> Timed
</label>
<label class="btn btn-default" >
<input type="radio" id="optionsRadio" name="quality[25]" value="true" /> All Day
</label>
</div>
</div>
</div>
<div class="col-lg-pull-2">
<div class="col-sm-6">
<div class="form-group"><label class="label bg-primary">Start Date</label>
<div class="input-group date" id="datetimepicker1" >
<input type="text" class="form-control" id="eventStart"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<div class="col-lg-pull-2">
<div class="col-sm-6"><input type="text" class="form-control hidden" id="eventHide"/>
<div class="form-group"><label class="label bg-primary">End Date</label>
<div class="input-group date" id="datetimepicker2">
<input type="text" class="form-control" id="eventEnd"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer"><button type="Submit" class="btn bg-primary" id="event_submit" onClick="addEvent()"><span><i class="glyphicon glyphicon-check"></i></span> Submit</button>
<button type="Reset" class="btn btn-default" data-dismiss="modal"><span><i class="glyphicon glyphicon-erase"></i></span> Close</button>
</div>
</div>
</div>
</div>
Note : Above code using Modal require bootstrap plug-ins
I have the following HTML:
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://gregpike.net/demos/bootstrap-file-input/bootstrap.file-input.js"></script>
<meta charset="utf-8">
</head>
<body>
<form id="id-method1Form" class="form-horizontal" method="post" > <input type='hidden' name='csrfmiddlewaretoken' value='vr5MftcSxGGUeIOwKioeUlalXJdXNgkl' /> <div id="div_id_clustering_method_param" class="form-group"> <label for="id_clustering_method_param" class="control-label col-lg-2">
Clustering method
</label> <div class="controls col-lg-8"> <select class="select form-control" id="id_clustering_method_param" name="clustering_method_param">
<option value="complete">Complete linkage</option>
<option value="average">Average linkage</option>
<option value="ward" selected="selected">Ward</option>
</select> </div> </div> <div id="div_id_distance_method_param" class="form-group"> <label for="id_distance_method_param" class="control-label col-lg-2">
Distance measure
</label> <div class="controls col-lg-8"> <select class="select form-control" id="id_distance_method_param" name="distance_method_param">
<option value="euclidean" selected="selected">Euclidean</option>
<option value="manhattan">Manhattan</option>
<option value="pearsond">Pearson Correlation</option>
</select> </div> </div> <div class="form-group"> <div class="aab controls col-lg-2"></div> <div class="controls col-lg-8"> <input type="submit"
name="submit"
value="Submit"
class="btn btn-primary"
id="submit-id-submit"
/> </div> </div> </form>
<!--- END FORM DISPLAY-->
</body>
<html>
What I want to do is to set the condition. Namely the clustering method ward can only be applied with distance measure euclidean. If the user pass all other distance measure to ward it should return error message.
How can I do it using JavaScript?
To disable some of the menu options based on which option is selected, you can hook into the "on change" event for the first select element. Every time the first select element is changed, a bit of JavaScript then determines which options should be available in the second menu.
The following code uses an if-else block to show the general idea of how you can enable/disable the option elements in the second box. To make this solution more elegant, I would use a JavaScript object to keep track of which options in the second menu should be available when a certain option is selected in the first select element. Then whenever the first element is changed you can do a lookup and set the options in the second menu to be enabled or disabled as needed.
Live Demo:
var method = $("#id_clustering_method_param");
var dist = $("#id_distance_method_param");
function refreshOptions() {
// The following can be refactored to use a
// lookup instead if more option rules are needed.
if (method.find(':selected').text() === "Ward") {
dist.find("option[value='manhattan']").attr("disabled", true);
dist.find("option[value='pearsond']").prop("disabled", true);
} else {
dist.find("option").prop("disabled", false)
};
}
refreshOptions();
method.on("change", refreshOptions);
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<meta charset="utf-8">
</head>
<body>
<form id="id-method1Form" class="form-horizontal" method="post">
<input type='hidden' name='csrfmiddlewaretoken' value='vr5MftcSxGGUeIOwKioeUlalXJdXNgkl' />
<div id="div_id_clustering_method_param" class="form-group">
<label for="id_clustering_method_param" class="control-label col-lg-2">
Clustering method
</label>
<div class="controls col-lg-8">
<select class="select form-control" id="id_clustering_method_param" name="clustering_method_param">
<option value="complete">Complete linkage</option>
<option value="average">Average linkage</option>
<option value="ward" selected="selected">Ward</option>
</select>
</div>
</div>
<div id="div_id_distance_method_param" class="form-group">
<label for="id_distance_method_param" class="control-label col-lg-2">
Distance measure
</label>
<div class="controls col-lg-8">
<select class="select form-control" id="id_distance_method_param" name="distance_method_param">
<option value="euclidean" selected="selected">Euclidean</option>
<option value="manhattan">Manhattan</option>
<option value="pearsond">Pearson Correlation</option>
</select>
</div>
</div>
<div class="form-group">
<div class="aab controls col-lg-2"></div>
<div class="controls col-lg-8">
<input type="submit" name="submit" value="Submit" class="btn btn-primary" id="submit-id-submit" />
</div>
</div>
</form>
<!--- END FORM DISPLAY-->
</body>
<html>