How to sync slider value with form placeholder passthrough? - javascript

Pardon as I am a newbie coder. I have a slider that outputs a value as I drag it and display it with a span tag
<div class="slidecontainer">
<input type="range" min="0" max="10" value="5" class="slider1" id="myRange1">
</div>
<h4>Score: <span id="demo1"></span></h4>
<div class="login-box">
<form action="https://sheetdb.io/api/v1/69kvuydqzi9bu" method="post" id="sheetdb-form">
<div class="user-box">
<input type="text" placeholder="Enter name of panel" name="data[Panel]" required>
</div>
<div>
<input type="text" id="txtInput1">
</div>
<ul class="actions">
<li><button type="submit">Submit Score</button></li>
</ul>
</form>
</div>
which is linked to javascript code
var slider1 = document.getElementById("myRange1");
var output1 = document.getElementById("demo1");
var input1 = document.getElementById("txtInput1");
output1.innerText = slider1.value; // Display the default slider value
input1.value = slider1.value;
// Update the current slider value (each time you drag the slider handle)
slider1.addEventListener("input1", function() {
const slider1Value = this.value;
output1.innerText = input1Value;
input.value = slider1Value;
});
slider1.oninput = function() {
output1.innerHTML = this.value;
}
because I want to pass the output of the slider value to a form tag because I want to submit the value to a googlesheet using API
everything is working, however, whenever I drag the slider the value displayed on the form placeholder is not updating. I want to sync them and update in real-time. Is this possible? Am I missing anything obvious?
Please save me. Thanks!

There was couple of mistakes, mostly in the naming of the variables, but the most important one is was inside your eventListener.
As you can see, the first element inside () should be the type of the event, not the name of the variable. So I've put change (see more info here), instead of input1.
Other changes are mostly typing errors, as I've said.
var slider1 = document.getElementById("myRange1");
var output1 = document.getElementById("demo1");
var input1 = document.getElementById("txtInput1");
output1.innerText = slider1.value; // Display the default slider value
input1.value = slider1.value;
// Update the current slider value (each time you drag the slider handle)
slider1.addEventListener("change", function() {
const slider1Value = this.value;
output1.innerText = slider1Value;
input1.value = slider1Value;
});
slider1.oninput = function() {
output1.innerHTML = this.value;
}
<div class="slidecontainer">
<input type="range" min="0" max="10" value="5" class="slider1" id="myRange1">
</div>
<h4>Score: <span id="demo1"></span></h4>
<div class="login-box">
<form action="https://sheetdb.io/api/v1/69kvuydqzi9bu" method="post" id="sheetdb-form">
<div class="user-box">
<input type="text" placeholder="Enter name of panel" name="data[Panel]" required>
</div>
<div>
<input type="text" id="txtInput1">
</div>
<ul class="actions">
<li><button type="submit">Submit Score</button></li>
</ul>
</form>
</div>

Related

showing the result of multiply two input value in a div called result

I just want to show the result in this div ,i tried to use nodeValue instead value and call the finalCalc fun in js file but it show nothing when i click on the button.
var billValue=document.getElementById("dollars").value,
peopleValue=document.getElementById("people").value,
theResult=document.getElementById("result"),
calculateButton=document.getElementById("calculateButton");
function calculateTip(x,y){
var reso=x*y;
theResult.innerHTML=reso;
}
function finalCalc() {
calculateTip(billValue,peopleValue);
}
<form>
<label>how much was your bill?</label>
<label for ="dollars">$</label>
<input value ="0" type="text" id="dollars" placeholder="Bill Amount ">
<br>
<label for="people">How many people are sharing the bill?</label>
<input value ="0" type="text" id="people">
<button type="button" id="calculateButton" onclick()="finalCalc()">CALCULATE</button>
<div id="result"></div>
</form>
onClick is written as onClick="" instead of onclick()="", reworked your code a little, hope this helps.
var billValue = document.getElementById("dollars").value,
peopleValue = document.getElementById("people").value,
theResult = document.getElementById("result"),
calculateButton = document.getElementById("calculateButton");
function calculateTip(x, y) {
return x * y;
}
function finalCalc() {
theResult.innerHTML = calculateTip(billValue, peopleValue);
}
<button type="button" id="calculateButton" onClick="finalCalc()">CALCULATE</button>

How align static labels with a scrolling container of dynamically created forms?

I want the labels and description of the inputs to be to the left of a horizontally scrolling array of forms. Ideally all with their own submit buttons and a submit all button. I've experimented with a much smaller version of what I want. Here's what I've got right now in a fiddle:
https://jsfiddle.net/RedGoblin17/2r3hufpa/58/ .
I think I'm pretty close on the view model:
function FormViewModel(){
var self = this;
self.firstName = ko.observable("");
self.lastName = ko.observable("");
self.number = ko.observable();
self.data = ko.computed(
function(){
return self.firstName() + " " + self.lastName() + " " + (typeof self.number() == "undefined" ? "" : self.number());
}, this
);
}
function AppViewModel(){
var self = this;
self.forms = new ko.observableArray([new FormViewModel()]);
self.addForm = function(){
self.forms.push(new FormViewModel());
}
}
ko.applyBindings(new AppViewModel());
But I don't know how to put the labels in a separate div than the inputs and still line them up properly:
<div class="scroll-grid-container">
<div class="frozelabels">
<label for="fn">First Name</label>
<label for="ln">Last Name</label>
<label for="nn">Number</label>
<label for="fullN">Full Name:</label>
</div>
<div class="scrolling-wrapper" data-bind="foreach: forms">
<div class="card" >
<form class="form-group">
<input id="fn" type="text" data-bind="textInput: firstName"/><br>
<input id="ln" type="text" data-bind="textInput: lastName"/><br>
<input id="nn" type="number" min="1" data-bind="value: number"/>
</form>
<p>
<br /><strong id="fullN" data-bind="text: data"></strong>
</p>
</div>
</div>
</div>
<button data-bind="click: addForm">Add New Form</button>
I can't get the labels to line up correctly with the inputs. I've got it scrolling and adding forms but it's pretty hackly put together, and doesn't look very good. I'm gonna keep working on it and I'll update this post if I figure it out. In the mean time here are some questions that would help me out:
Is there a way to align the labels with the inputs of the form? Is there a way to present a scrollable list of forms next to it? If I'm not too far off base can you point me to examples?
Thank you very much!

How can I get the source code of a specific div on radio oncheck?

I'd like to get the source code of a div, so example if a div contains some tags I'd like to get them as they are in html format and update it on a textfield.
JsFiddle : https://jsfiddle.net/Lindow/g1sp1ms3/2/
HTML :
<form>
<label class="tp_box_1">
<input type="radio" name="selected_layout" class="selected_layout" value="layout_1">
<div class="box_1">
<h3>box_one</h3>
<p>1</p>
</div>
</label>
<br><hr><br>
<label class="tp_box_2">
<input type="radio" name="selected_layout" class="selected_layout" value="layout_2">
<div class="box_2">
<h3>box_two</h3>
<p>2</p>
</div>
</label>
<textarea id="mytextarea"></textarea>
<input id="submit_form" type="button" value="Send">
</form>
JavaScript :
$('input[type="radio"][name="selected_layout"]').change(function() {
if(this.checked) {
// get the specific div children of $this
var selected_layout = $(this).find('.selected_layout');
// get source code of what's inside the selected_layout
/* example :
<h3>box_two</h3>
<p>2</p>
and put it in someVariable.
*/
// and put in into textarea (all this need to happens when a radio is changed with the source code of the checked div)
var someVariable = ...
$('textarea').val(someVariable);
}
});
How can I achieve this ? How can I get the source code inside a specific div ?
First, you don't want selected_layout to be equal to: $(this).find('.selected_layout') because this already points to that element. You want it to point to the next element that comes after it.
I think this is what you are looking for:
$('input[type="radio"][name="selected_layout"]').change(function() {
if(this.checked) {
// get the index within the set of radio buttons for the radio button that was clicked
var idx = $("[type=radio][class=selected_layout]").index(this);
// Get the div structure that corresponds to the same index
var test = $("[class^='box_']")[idx];
// Now, just make that the value of the textarea
$('textarea').val(test.innerHTML);
}
});
textarea { width:100%; height:75px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<label class="tp_box_1">
<input type="radio" name="selected_layout" id="sl1" class="selected_layout" value="layout_1">
<div class="box_1">
<h3>box_one</h3>
<p>1</p>
</div>
</label>
<label class="tp_box_2">
<input type="radio" name="selected_layout" id="sl2" class="selected_layout" value="layout_2">
<div class="box_2">
<h3>box_two</h3>
<p>2</p>
</div>
</label>
<textarea id="mytextarea"></textarea>
<input id="submit_form" type="button" value="Send">
</form>
Create div element with:
Template inside
class or id for identifying
Set inputs' value to desired template class/id, then on input change find the template element base on input's value and extract the innerHTML of it by using jQuery's .html() method. Then put this HTML as an new value of textarea using also the.html() method on textarea element.
HTML:
<div id="template1" style="display:none;">
<h1>Hi!</h1>
</div>
<input type="radio" onchange="findTemplate(event)" value="template1" />
<textarea class="texta"></textarea>
jQuery:
var findTemplate = function(event) {
var target = $(event.target);
var templateName = target.val();
var template = $("#"+templateName);
var template = template.html();
var textarea = $(".texta");
textarea.html(template);
};
Working fiddle: https://jsfiddle.net/rsvvx6da/1/

Knockout foreach bound to value in inputfield

I want to autogenerate a number of labels on the bottom of my page based on what someone fills in in an inputfield.
So when someone fills in "2", I want 2 labels to pop up, preferable when he typed it without leaving the inputfield or anything.
This is what I have:
HTML
<div class="form-group">
<label class="control-label" for="if_aantalMensen">
Hoeveel extra mensen wil je inschrijven?
</label>
<div>
<input type="text" class="form-control" id="if_aantalMensen" name="if_aantalMensen"
data-bind="textInput: aantalMensen">
</div>
</div>
<div data-bind="foreach: aantalMensenArray" class="form-group">
<label><span data-bind="text: $index"></span></label>
</div>
Javascript
var vm = {
aantalMensen: ko.observable(0),
aantalMensenArray: ko.computed(function() {
var fields = [];
for (var i = 0; i < self.selectedNumberOfFields(); i++) {
fields.push(new Parameter());
}
return fields;
})}
It works if I just make "aantalMensenArray" into an observableArray that already has values in it. However, I can't get it to change the amount of labels shown.
Use valueUpdate:'afterkeydown'
"http://jsfiddle.net/dpa6zk9j/"

associate number in number field with the number of newly created js div's

I have a set of number input fields, labeled small & medium.., and a set of div's with the label small and medium. When you add a number to the small number input field a text input insertsAfter the div labeled small. When you subtract a number from the small number input field, the text input field that was recently added is removed. the adding and removing of the text input is be the last one in the list. This same thing goes for the medium number field and medium label/textfield
please see JSFiddle for reference
http://jsfiddle.net/7PhJZ/53/
Right now my script is working correctly when I click the up or down buttons on the number field. But When I type in, for instance 5 in the small number field, only one new div/name input fields appears under the label small. I need the adding and subtracting of these input fields to be generated when I use the arrows and when I type in a number. So when I type in "5" 5 name/text input fields should appear under the associated label.
html :
<div id="product-1">
<div class="size-field">
<div id="size-label">s</div>
<div class="number-input">
<input id="Small" class="product-quantity" type="number" name="Small"
min="0" max="9999" data-product-id="1"></input>
</div>
</div>
<div id="size-label">m</div>
<div class="number-input">
<input id="Medium" class="product-quantity" type="number"
name="Medium" min="0" max="9999" data-product-id="1"></input>
</div>
<div class="name-number-header">
<h5>HEADER<h5></div>
<div class="name-number-field-container" data-size="Small">small:
</div>
<div class="name-number-field-container" data-size="Medium">medium:
</div>
</div>
<br clear="all">
<div id="product-2">
<div class="size-field">
<div id="size-label">s</div>
<div class="number-input">
<input id="Small" class="product-quantity" type="number" name="Small"
min="0" max="9999" data-product-id="2"></input>
</div>
</div>
<div id="size-label">m</div>
<div class="number-input">
<input id="Medium" class="product-quantity" type="number" name="Medium"
min="0" max="9999" data-product-id="2"></input>
</div>
<br clear="all">
<div class="name-number-header"><h5>HEADER<h5></div>
<div class="name-number-field-container" data-size="Small">small:
</div>
<div class="name-number-field-container" data-size="Medium">medium:
</div>
</div>
js :
$('.product-quantity').each(function () {
$(this).data('val', this.value);
}).on('change', function () {
var val = $(this).val(),
old = $(this).data('val'),
input = $('<div/>', {'class': 'name-number-field'}).html('<input
class="name-field" name="name" placeholder="Name" type="text">'),
ele = $(this).closest('[id^="product"]').find('[data-size="' + this.name + '"]'),
inc = val >= old;
if (inc) {
$(input).insertAfter(ele.nextUntil(':not(.name-number-field)').last()
.length ? ele.nextUntil(':not(.name-number-field)').last() : ele);
} else {
ele.nextUntil(':not(.name-number-field)').last().remove();
}
$(this).data('val', this.value);
});
See this fiddle
You need to put a for loop outside the code that created the elements:
}).on('change', function () {
var val = $(this).val(),
old = $(this).data('val');
for (var count=0; count<Math.abs(val-old) ; count++)
{
...
}
Update based on comments
See this updated fiddle. There were some problems that were in the original code:
The data was not initialised. Fix: if( !startVal || startVal.length == 0 )
The comparison was not with ints. Fix: inc = (parseInt(val) >= parseInt(old));
Your code is checking for the direction of change between old and new only, not how much difference there is. If it's an increase (of any amount), you add an element; if it's a decrease, you remove one.
You need to wrap that code in a loop and execute it as many times as the difference between old and new.
for (var i=0 ; i<Math.abs(val-old) ; i++) {
if (inc) {
$(input).insertAfter(ele.nextUntil(':not(.name-number-field)').last()
.length ? ele.nextUntil(':not(.name-number-field)').last() : ele);
} else {
ele.nextUntil(':not(.name-number-field)').last().remove();
}
}

Categories