So I'm building a form and a field within the form needs to be capped at a certain length.
I then need a simple progress bar which displays how close the user is to exceeding the maximum length on the input field. So let's say the input is capped at 50 characters. When the user hits 25 characters in the input, the progress bar should be at 50%.
I've given this a go with the below code, but I'm not sure on how to do it based on keypress or the max characters.
Something similar to what I'm after:
Vue Code:
Vue.component('count-fieldtype', {
mixins: [Fieldtype],
template: `
<div>
<input type="text" class="form-control type-text mb-2" placeholder="" :maxlength="max" v-model="text" />
<small class="help-block">You have: <strong><span v-text="(max - text.length)"></span></strong> characters left.</small>
<progress max="100" :value="calculatePercentage(value)" id="progress"></progress>
</div>
`,
methods: {
calculatePercentage(value) {
let contentLentg = handleKeyUp();
return 50;
}
},
data: function() {
return {
max: 50,
text: ''
};
},
});
Any help would be appreciated!
You should use computed property to calculate progress https://v2.vuejs.org/v2/guide/computed.html
new Vue({
el: "#app",
data() {
return {
text: '',
max: 150
}
},
computed: {
progress() {
return this.text.length / this.max * 100
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div id="app">
<div>
<input type="text" class="form-control type-text mb-2" placeholder="" :maxlength="max" v-model="text" />
<small class="help-block">You have: <strong><span v-text="(max - text.length)"></span></strong> characters left.</small>
<progress max="100" :value="progress" id="progress"></progress>
</div>
</div>
You might not need to check for keypress events. A computed property on the text length can be used to map the progress bar.
template: `
<div>
<input type="text" class="form-control type-text mb-2" placeholder="" :maxlength="max" v-model="text" />
<small class="help-block">You have: <strong><span v-text="(max - text.length)"></span></strong> characters left.</small>
<progress max="100" :value="progress" id="progress"></progress>
</div>
`,
computed: {
progress: function(){
return Math.floor((this.text.length/this.max)*100)
}
}
Here is a version with some styling, if it can help. It uses too a computed property for calculating the progress bar value. (the snippet need to be run expanded).
new Vue({
el: "#app",
data: function() {
return {
max: 50,
text: ''
};
},
computed: {
calculatePercentage() {
let contentLength = this.text.length;
return (contentLength / this.max) * 100;
}
}
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
.container {
width: 30%;
}
progress, input {
width: 100%;
box-sizing: border-box;
}
progress {
height: 8px;
background-color: white;
appearance: none;
}
progress[value]::-webkit-progress-bar {
background-color: lightgrey;
border-radius: 2px;
}
progress[value]::-webkit-progress-value {
background-color: orange;
border-radius: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="container">
<div >
<input type="text" class="form-control type-text mb-2" placeholder="" :maxlength="max" v-model="text" />
</div>
<progress max="100" :value="calculatePercentage" id="progress"></progress>
<small class="help-block">You have: <strong><span v-text="(max - text.length)"></span></strong> characters left.</small>
</div>
</div>
Related
So I have been trying to highlight the words as the TTS speaks but I am unable to do so. This is my first project so I'm quite stuck at where I am now. I'm also not practically fond with programming so I'm using this opportunity to learn. Below are the codes I have done. If you could guide me through I would greatly appreciate it!
// Initialize new SpeechSynthesisUtterance object
let speech = new SpeechSynthesisUtterance();
// Set Speech Language
speech.lang = "en";
let voices = []; // global array of available voices
window.speechSynthesis.onvoiceschanged = () => {
// Get List of Voices
voices = window.speechSynthesis.getVoices();
// Initially set the First Voice in the Array.
speech.voice = voices[0];
// Set the Voice Select List. (Set the Index as the value, which we'll use later when the user updates the Voice using the Select Menu.)
let voiceSelect = document.querySelector("#voices");
voices.forEach((voice, i) => (voiceSelect.options[i] = new Option(voice.name, i)));
};
document.querySelector("#rate").addEventListener("input", () => {
// Get rate Value from the input
const rate = document.querySelector("#rate").value;
// Set rate property of the SpeechSynthesisUtterance instance
speech.rate = rate;
// Update the rate label
document.querySelector("#rate-label").innerHTML = rate;
});
document.querySelector("#volume").addEventListener("input", () => {
// Get volume Value from the input
const volume = document.querySelector("#volume").value;
// Set volume property of the SpeechSynthesisUtterance instance
speech.volume = volume;
// Update the volume label
document.querySelector("#volume-label").innerHTML = volume;
});
document.querySelector("#pitch").addEventListener("input", () => {
// Get pitch Value from the input
const pitch = document.querySelector("#pitch").value;
// Set pitch property of the SpeechSynthesisUtterance instance
speech.pitch = pitch;
// Update the pitch label
document.querySelector("#pitch-label").innerHTML = pitch;
});
document.querySelector("#voices").addEventListener("change", () => {
// On Voice change, use the value of the select menu (which is the index of the voice in the global voice array)
speech.voice = voices[document.querySelector("#voices").value];
});
document.querySelector("#start").addEventListener("click", () => {
// Set the text property with the value of the textarea
speech.text = document.querySelector("textarea").value;
// Start Speaking
window.speechSynthesis.speak(speech);
});
document.querySelector("#pause").addEventListener("click", () => {
// Pause the speechSynthesis instance
window.speechSynthesis.pause();
});
document.querySelector("#resume").addEventListener("click", () => {
// Resume the paused speechSynthesis instance
window.speechSynthesis.resume();
});
document.querySelector("#cancel").addEventListener("click", () => {
// Cancel the speechSynthesis instance
window.speechSynthesis.cancel();
});
.btn-success {
width: 22%;
}
.btn-warning {
width: 22%;
}
.btn-info {
width: 22%;
}
.btn-danger {
width: 22%;
}
.center {
margin: auto;
width: 75%;
padding: 5px;
}
.Settings {
justify-content: center;
}
input[type="range"] {
accent-color: #0d6efd;
}
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="css/index.css" />
<title>Text to Speech</title>
</head>
<div class = "mb-5">
<center><img src = img/TweenLogo.png></center>
</div>
<body class="container mt-5 bg-light">
<h2 style="text-align: center; font-family: Poppins;"><span style="color: rgb(31, 31, 31);">Experience</span> <span style="color: rgb(0, 194, 255);">AI Voices</span></h2>
<br>
<h4 style="text-align: center; font-size: 20px; font-family: Poppins;"><span style="color: rgb(31, 31, 31);">Try out our live demo without logging in, or login to enjoy the features!</span></h4>
<h4 style="text-align: center; font-size: 20px; font-family: Poppins;"><span style="color: rgb(31, 31, 31); font-weight: 300;">For a better sounding, use voices which are marked (Natural).</span></h4>
<br>
<p class="mt-4" style= "font-size: 20px; font-family: Poppins;">Select Voice</p>
<select id="voices" class="form-select bg-primary text-light" style= "font-size: 18px; font-family: Poppins;"></select>
<div class="d-flex mt-5 container Settings" style= "font-size: 20px; font-family: Poppins;">
<div>
<p class="">Volume</p>
<input type="range" min="0.01" max="1" value="1" step="0.01" id="volume" class = "bg-primary"/>
<span id="volume-label" class="ms-2">1</span>
</div>
<div class="mx-5">
<p class="">Speed</p>
<input type="range" min="0.1" max="10" value="1" id="rate" step="0.1" />
<span id="rate-label" class="ms-2">1</span>
</div>
<div>
<p class="">Pitch</p>
<input type="range" min="0" max="2" value="1" step="0.1" id="pitch" />
<span id="pitch-label" class="ms-2">1</span>
</div>
</div>
<textarea class="form-control bg-light mt-5 shadow-sm" style= "font-size: 18px; font-family: Poppins;" cols="30" rows="10" placeholder="Type here..."></textarea>
<center><div class="mb-5">
<button id="start" class="btn btn-success mt-5 me-3 shadow-sm" onmousedown="speak();">Start</button>
<button id="pause" class="btn btn-warning mt-5 me-3 shadow-sm">Pause</button>
<button id="resume" class="btn btn-info mt-5 me-3 shadow-sm">Resume</button>
<button id="cancel" class="btn btn-danger mt-5 me-3 shadow-sm">Cancel</button>
</div>
<div id="marker"></div>
<br><br>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<script src="js/main.js"></script>
</body>
</html>
I am trying to create a Component for titles that can be edited when they get double clicked.
The Component takes the h-tag that should be used and the title as props and should produce a normal h-tag, that turns into an input field once double clicked.
This already works if there is only one title on the page, however once there are multiple Components used on one page, it breaks as the Component is not scoped properly. But I can't figure out how.
Here is the code:
<template>
<div class="edit-on-click">
<input
:class="sizeClass"
type="text"
v-if="edit"
v-model="editedTitle"
#blur="finishEdit"
#keyup.enter="finishEdit"
v-focus="true"
/>
<span v-show="!edit" #dblclick.prevent="edit = true"></span>
</div>
</template>
The mounted hook I can't figure out how to scope:
mounted() {
let node = document.createElement(this.size); // Takes h-tag (h1, h2 etc.)
let titleText = document.createTextNode(this.finalTitle); // Takes title
node.appendChild(titleText);
node.classList.add("editable-title");
// This breaks the code once there are multiple components in the document
document.getElementsByTagName("span")[0].appendChild(node);
},
How can I scope this in an efficient way? Thank you very much in advance!
Well, with Vue, you'll probably want to avoid creating DOM elements the "native" way whenever possible, as you might run into race condition where Vue is unaware of the existence of these elements which you probably want be reactive at some point in time (in your case, the <span> double-clicking).
What you could do instead, is perhaps to dynamically "switch between" these different headings with this <component> and the v-bind:is prop. Consider the following example:
Vue.component('EditableHeading', {
template: '#editable-heading',
props: {
size: {
type: String,
default: 'h1'
},
value: {
type: String,
required: true
}
},
data() {
return {
editing: false
}
},
methods: {
confirm(e) {
this.$emit('input', e.target.value);
this.close();
},
start() {
this.editing = true;
this.$nextTick(() => {
this.$el.querySelector('input[type="text"]').select();
});
},
close() {
this.editing = false;
}
}
})
new Vue({
el: '#app',
data: () => ({
titleList: [],
text: 'New Title',
size: 'h3'
}),
methods: {
addNewTitle() {
this.titleList.push({
text: this.text,
size: this.size
});
}
}
})
.edit-on-click {
user-select: none;
}
.heading-size {
margin-top: 1rem;
width: 24px;
}
p.info {
background-color: beige;
border: 1px solid orange;
color: brown;
padding: 4px 5px;
margin-top: 2rem;
}
<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="app">
<editable-heading
v-for="(title, index) of titleList" :key="index"
v-model="title.text"
:size="title.size">
</editable-heading>
<div>
<label>
Heading size:
<input v-model="size" class="heading-size" />
</label>
</div>
<div>
<label>
Title:
<input v-model="text" />
</label>
</div>
<div>
<button #click="addNewTitle()">Add new title</button>
</div>
<p class="info">
[double-click]: Edit <br />
[enter]: Confirm <br />
[esc/mouseleave]: Cancel
</p>
</div>
<script id="editable-heading" type="text/x-template">
<div class="edit-on-click">
<input
type="text"
v-if="editing"
:value="value"
#blur="close"
#keydown.enter="confirm"
#keydown.esc="close" />
<component :is="size" v-else #dblclick="start">{{value}}</component>
</div>
</script>
My form is made using the “bootstrap” styles. To check for input fields, I use “jquery” validation. Label with the name is on top of input, when you click on input, “label” moves over “input”. When you click “Next”, the error “validation” appears on top of the “label” with the name, and should be located under the “input”. How to fix so that “label” moves above “input” and the error is below “input”?
my code
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
</script>
<style type="text/css">
#step2,#step3,#step4,#step5{
display: none;
}
.form-group label
{
position: absolute;
top: 3px;
pointer-events: none;
left: 20px;
transition: .5s;
}
.container .form-group input:focus ~label,
.container .form-group input:valid ~label
{
left: 20px;
top: -20px;
color: rgb(66,133,244);
font-size: 12px;
font-weight: bold;
}
</style>
<script>
$(document).ready(function(e){
$.validator.addMethod("minlenghtname", function (value, element) {
return /^[a-z]+$/i.test(value);
}," does not match the format");
$.validator.addMethod("requiredname", function (value, element) {
return value.length > 2;
}," fill this field");
var v = $("#commentForm").validate({
rules: {
fname: {
requiredname: true,
minlenghtname: true
},
lname: {
requiredname: true,
minlenghtname: true
}
},
submitHandler: function() {
alert("Submitted, thanks!");
}
})
$(".next1").click(function() {
if (v.form()) {
$("#step2").show();
$("#step1").hide();
$("#progressText").html("Step 2 of 4");
}
});
});
</script>
</head>
<body>
<div class="container">
<div id="progressText" style="margin-bottom:20px;">Step 1 of 4</div>
<form class="cmxform" id="commentForm" method="get" action="">
<div id="step1">
<div class="row">
<div class="form-group col-md-6 col-sm-6">
<input class="form-control" id="fname" name="fname" required="">
<label>First Name:</label>
</div>
<div class="form-group col-md-6 col-sm-6">
<input class="form-control" id="lname" name="lname" required="">
<label>Last Name:</label>
</div>
<p class="buttonWrapper">
<input name="formNext1" type="button" class="next1 nextbutton" value="Next" alt="Next" title="Next">
</p>
</div>
</div>
<div id="step2">
Next
</div>
</form>
</div>
</body>
</html>
Validation also uses labels to show errors so you end up with double label for each field. Those from validation come with error class, so you can target them and either show it normally:
.form-group label.error {
position: static;
}
or treat it like that label but move down:
.form-group label.error {
top: 35px;
}
i am working on payment gateway, in that when i try to submit form with jquery it doesn't submit the form $('#checkout_form').submit(); here is my whole code for that
braintree.client.create({
authorization: 'sandbox_g42y39zw_348pk9cgf3bgyw2b'
}, function (err, clientInstance) {
if (err) {
console.error(err);
return;
}
braintree.hostedFields.create({
client: clientInstance,
styles: {
'input': {
'font-size': '14px',
'font-family': 'helvetica, tahoma, calibri, sans-serif',
'color': '#3a3a3a'
},
':focus': {
'color': 'black'
}
},
fields: {
number: {
selector: '#card-number',
placeholder: '4111 1111 1111 1111'
},
cvv: {
selector: '#cvv',
placeholder: '123'
},
expirationMonth: {
selector: '#expiration-month',
placeholder: 'MM'
},
expirationYear: {
selector: '#expiration-year',
placeholder: 'YY'
},
postalCode: {
selector: '#postal-code',
placeholder: '90210'
}
}
}, function (err, hostedFieldsInstance) {
if (err) {
console.error(err);
return;
}
hostedFieldsInstance.on('validityChange', function (event) {
var field = event.fields[event.emittedBy];
if (field.isValid) {
if (event.emittedBy === 'expirationMonth' || event.emittedBy === 'expirationYear') {
if (!event.fields.expirationMonth.isValid || !event.fields.expirationYear.isValid) {
return;
}
} else if (event.emittedBy === 'number') {
$('#card-number').next('span').text('');
}
// Remove any previously applied error or warning classes
$(field.container).parents('.form-group').removeClass('has-warning');
$(field.container).parents('.form-group').removeClass('has-success');
// Apply styling for a valid field
$(field.container).parents('.form-group').addClass('has-success');
} else if (field.isPotentiallyValid) {
// Remove styling from potentially valid fields
$(field.container).parents('.form-group').removeClass('has-warning');
$(field.container).parents('.form-group').removeClass('has-success');
if (event.emittedBy === 'number') {
$('#card-number').next('span').text('');
}
} else {
// Add styling to invalid fields
$(field.container).parents('.form-group').addClass('has-warning');
// Add helper text for an invalid card number
if (event.emittedBy === 'number') {
$('#card-number').next('span').text('Looks like this card number has an error.');
}
}
});
hostedFieldsInstance.on('cardTypeChange', function (event) {
// Handle a field's change, such as a change in validity or credit card type
if (event.cards.length === 1) {
$('#card-type').text(event.cards[0].niceType);
} else {
$('#card-type').text('Card');
}
});
$('.panel-body').submit(function (event) {
if($('#nonce').val() == '') {
event.preventDefault();
hostedFieldsInstance.tokenize(function (err, payload) {
if (err) {
console.error(err);
return false;
}
$('#nonce').val(payload.nonce);
$('#checkout_form').submit();
return true;
});
} else {
return true;
}
});
});
});
body {
background-color: #fff;
}
.panel {
width: 80%;
margin: 2em auto;
}
.bootstrap-basic {
background: white;
}
.panel-body {
width: 90%;
margin: 2em auto;
}
.helper-text {
color: #8A6D3B;
font-size: 12px;
margin-top: 5px;
height: 12px;
display: block;
}
/* Braintree Hosted Fields styling classes*/
.braintree-hosted-fields-focused {
border: 1px solid #0275d8;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}
.braintree-hosted-fields-focused.focused-invalid {
border: 1px solid #ebcccc;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(100,100,0,.6);
}
#media (max-width: 670px) {
.btn {
white-space: normal;
}
}
<script src="https://js.braintreegateway.com/web/3.36.0/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.36.0/js/hosted-fields.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<div class="panel panel-default bootstrap-basic">
<div class="panel-heading">
<h3 class="panel-title">Enter Card Details</h3>
</div>
<form class="panel-body" action="checkout.php" method="post" id="checkout_form">
<div class="row">
<div class="form-group col-sm-8">
<label class="control-label">Card Number</label>
<!-- Hosted Fields div container -->
<div class="form-control" id="card-number"></div>
<span class="helper-text"></span>
</div>
<div class="form-group col-sm-4">
<div class="row">
<label class="control-label col-xs-12">Expiration Date</label>
<div class="col-xs-6">
<!-- Hosted Fields div container -->
<div class="form-control" id="expiration-month"></div>
</div>
<div class="col-xs-6">
<!-- Hosted Fields div container -->
<div class="form-control" id="expiration-year"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-sm-6">
<label class="control-label">Security Code</label>
<!-- Hosted Fields div container -->
<div class="form-control" id="cvv"></div>
</div>
<div class="form-group col-sm-6">
<label class="control-label">Zipcode</label>
<!-- Hosted Fields div container -->
<div class="form-control" id="postal-code"></div>
</div>
</div>
<input type="hidden" name="payment_method_nonce" id="nonce">
<button type="submit" value="submit" id="submit" class="btn btn-success btn-lg center-block">Pay with <span id="card-type">Card</span></button>
</form>
</div>
Can anyone please help to resolve this issue ?
I'm coding a page with some radio buttons and stuck with some problems. Here is my
current output
Below is my code
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
#sitehtn {
display: none
}
.container {
width: 100%;
height: 600px;
background-color: rgb(179, 174, 174);
}
#datepickerT {
margin-left: 2em;
}
.eventDateDiv {
height: 150px;
width: 30%;
margin-left: auto;
margin-right: auto;
}
#daysBetween {
margin-top: -1.4em;
margin-left: 30%;
}
.eventShowDiv {
height: 250px;
width: 30%;
margin-left: auto;
margin-right: auto;
}
.event {
color: green;
margin-top: 5px;
}
</style>
<script>
$(function() {
$( "#datepickerF" ).datepicker({
showOn : "button",
buttonImage : "calendar.gif",
buttonImageOnly : true
});
$( "#datepickerT" ).datepicker({
showOn : "button",
buttonImage : "calendar.gif",
buttonImageOnly : true
});
$('#getdays').click(function() {
var start = $('#datepickerF').datepicker('getDate');
var end = $('#datepickerT').datepicker('getDate');
var days = (end - start)/1000/60/60/24;
document.getElementById("daysBetween").innerText=days;
});
$('input[type=radio]').change(function() {
$('#sitehtn').hide()
$(this).parent().next().show()
});
function displayResult(browser) {
document.getElementById("result").value=browser
}
});
</script>
</head>
<body>
<div class="container">
<div class="eventDateDiv">
<div class="event">
EVENT DATE
</div>
<p>FROM: <input type="text" id="datepickerF" /></p>
<p>To: <input type="text" id="datepickerT" /></p>
<button id="getdays">NO.OF DAYS </button>
<p id="daysBetween"> </p>
</div>
<div class="eventShowDiv">
<div class="event">
EVENT SHOW TIME
</div>
<p>TYPE OF SHOW: </p>
<label>
<input type="radio" name="sitewebGroup" value="Courtier" id="courtierRadio" />
Unique
</label>
<input type="text" name="site" id="sitehtn" />
<br />
<label>
<input type="radio" name="sitewebGroup" value="Agence" id="agenceRadio" />
Varied
</label>
<input type="text" name="textfield3" id="sitehtn" />
</div>
</div>
</body>
</html>
My actual expected output is.
When I click on Unique radioButton, A textbox will appear and automatically Next
Radio Button(Varied)will hide
The Text Box include..Four Text Fields Inside it..two fields For The FROM and
TO Date picker and a Content Placeholder,and Last a Button To add same 4
Fields to the next Line in the same Text Box
As I'm new in this field, I need your support and valuable comments to solve this.
This may work with the date picker. You have to add the content holder and textbox though.
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
#sitehtn {
display: none
}
.container {
width: 100%;
height: 600px;
background-color: rgb(179, 174, 174);
}
#datepickerT {
margin-left: 2em;
}
.eventDateDiv {
height: 150px;
width: 400px;
margin-left: 0;
margin-right: auto;
}
#daysBetween {
margin-top: -1.4em;
margin-left: 30%;
}
.eventShowDiv {
height: 250px;
width: 30%;
margin-left: auto;
margin-right: auto;
}
.event {
color: green;
margin-top: 5px;
}
</style>
<script>
function loading() {
$( ".datepickerF" ).datepicker({
showOn : "button",
buttonImage : "calendar.gif",
buttonImageOnly : true
});
$( ".datepickerT" ).datepicker({
showOn : "button",
buttonImage : "calendar.gif",
buttonImageOnly : true
});
$('.getdays').click(function() {
var start = $(this).prev().prev().find('input').datepicker('getDate');
var end = $(this).prev().find('input').datepicker('getDate');
var days = (end - start)/1000/60/60/24;
$(this).next().text(days);
});
$('input[id=courtierRadio]').change(function() {
$('#hideRadio').html("");
$('#hideRadio').append(getAppleInfo());
});
function displayResult(browser) {
document.getElementById("result").value=browser
}
};
window.onload = loading;
// anti-pattern! keep reading...
function getAppleInfo() {
var eventDateDiv ="";
eventDateDiv = $("<div></div>").addClass("eventDateDiv");
eventDateDiv.append($("<p></p>").text("FROM: ").append($("<input>").attr("class", "datepickerF").attr("type", "text")));
eventDateDiv.append($("<p></p>").text("TO: ").append($("<input>").attr("class", "datepickerT").attr("type", "text")));
eventDateDiv.append($("<button></button>").text("NO.OF DAYS ").attr("class", "getdays"));
eventDateDiv.append($("<p></p>").attr("class", "daysBetween"));
eventDateDiv.append($("<a>").text("Add Another").attr("href", "#").attr("onclick", "belowDiv(this)"));
return eventDateDiv;
}
function belowDiv(self){
$('#hideRadio').append(getAppleInfo());
loading();
}
</script>
</head>
<body>
<div class="container">
<div class="eventDateDiv" title="numb">
<div class="event">
EVENT DATE
</div>
<p>FROM: <input type="text" class="datepickerF" /></p>
<p>To: <input type="text" class="datepickerT" /></p>
<button class="getdays">NO.OF DAYS </button>
<p class="daysBetween"> </p>
</div>
<div class="eventShowDiv" title="dumb">
<div class="event">
EVENT SHOW TIME
</div>
<p>TYPE OF SHOW: </p>
<label>
<input type="radio" name="sitewebGroup" value="Courtier" id="courtierRadio" />
Unique
</label>
<input type="text" name="site" />
<br />
<div id="hideRadio">
<label>
<input type="radio" name="sitewebGroup" value="Agence" id="agenceRadio" />
Varied
</label>
<input type="text" name="textfield3" />
</div>
</div>
</div>
</body>
</html>
For your #1 question try this.
$('#courtierRadio').on('change', function () {
$('#sitehtn').show();
$('#agenceRadio').hide();
});