<fieldset>
<legend>Making a String</legend>
Test1:<br/>
<input type="text" name="Test1Field"/><br/>
Test2:<br/>
<input type="text" name="Test2Field"/><br/>
Test3:<br/>
<select name="Test3Field">
<option value="test1">0</option>
<option value="test2">1</option>
</select>
<br/>
Test4:<br/>
<select name="Test4Field">
<option value="test1">0</option>
<option value="test2">1</option>
</select>
<br/>
Test5:<br/>
<select name="Test5Field">
<option value="test1">0</option>
<option value="test2">1</option>
</select>
<br/>
<br/>
<button> Submit </button>
</fieldset>
I'm fairly new to HTML and trying to make some simple applications. I want to be able to convert the values that are inserted into this HTML <form> into a string once the submit button is pressed.
For example:
"Test1FieldValue, Test2FieldValue, Test3FieldValue, Test4FieldValue, Test5FieldValue"
Is there any way that this can be done?
You can do this with javascript. Basically, add an eventListener on your button, find all fields (inputs and selects) and create the string. The following will do that for you (I've added some comments for what the code does):
document.getElementById("submit").addEventListener("click", function() { // add an listener to the button
var fieldset = document.getElementById("fieldset"); // find the fieldset
var asArray = Array.from(fieldset.querySelectorAll("input, select")).map(v => { // loop over all found input and select elements
return v.name + ":" + v.value; // return the name and the value
});
console.log(asArray);
var asString = asArray.join(); // join the resulting array to a string
console.log(asString);
})
<fieldset id="fieldset">
<legend>Making a String</legend>
Test1:
<br/>
<input type="text" name="Test1Field" />
<br/> Test2:
<br/>
<input type="text" name="Test2Field" />
<br/> Test3:
<br/>
<select name="Test3Field">
<option value="test1">0</option>
<option value="test2">1</option>
</select>
<br/> Test4:
<br/>
<select name="Test4Field">
<option value="test1">0</option>
<option value="test2">1</option>
</select>
<br/> Test5:
<br/>
<select name="Test5Field">
<option value="test1">0</option>
<option value="test2">1</option>
</select>
<br/>
<br/>
<button id="submit"> Submit </button>
</fieldset>
HTML:
<input type="text" name="textfield1" id="textfield1" value="value" />
JS:
var nameValue = document.getElementById("textfield1").value;
I am learning AngularJS and user input. In my code, I tried to set default state for drop down menu and radio button with "selected" and "checked".
However, they do not work together with "ng-model" attribute.
Also, for the first radio button (ascending), the empty value attribute seems to hinder with "checked" attribute.
Could anyone explain why this happens and how to bypass this problem?
<div class="search">
<h1>Artist Directory</h1>
<label> Search: </label>
<input ng-model="query" placeholder="Search for artists" autofocus>
<label class="formgroup">by:
<select ng-model="listOrder" name="direction">
<option value ="name" selected="selected"> Name</option>
<option value="reknown"> Reknown</option>
</select>
</label>
<label class="formgroup">
<input ng-model="direction" type="radio" value=" " checked> Ascending
</label>
<label class="formgroup">
<input ng-model="direction" type="radio" value="reverse"> Descending
</label>
</div>
tie your button and select to an ng-model. Default values are the values you put in the model when the scope is first created. Then values are updated when user clicks :
function test($scope) {
$scope.selected = ['1','3'];
$scope.checked = "green";
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app>
<h2>Todo</h2>
<div ng-controller="test">
<select name="" ng-model="selected" multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br><br>
<input type="radio" ng-model="checked" value="red"> Red <br/>
<input type="radio" ng-model="checked" value="green"> Green <br/>
<input type="radio" ng-model="checked" value="blue"> Blue <br/>
<br>
Selected : {{selected}}
<br>
Checked : {{checked}}
</div>
</div>
See it in action : http://jsfiddle.net/913n30zf/
Select in AngularJS looks likes this:
<select ng-model="selectedOpt"
ng-options="opt for opt in listOrder">
</select>
And back in the controller you set
$scope.selectedOpt = $scope.listOrder[0];
which option you want to be select by default.
I want to have a select option that opens a corresponding text box.
Let's say these are my selections:
<select id="contact">
<option value="email">Email</option>
<option value="phone">Phone</option>
</select>
When you select the Email selection I want it to show a textbox below it (which wasn't there before) that says please enter your Email.
OR
When you select the Phone selection I want it to show a textbox below it (which wasn't there before) that says please enter your Phone Number.
I don't want both the "Enter Email" and "Enter Phone Number" textboxes showing at the same time. I want them to select which one to open and input their contact info.
I currently have this but don't know what else to have in it... please help!
$('#contact').change(function() {
if ($(this).val() === 'email') {
//show email
//hide phone
} else {
//hide email
//show phone
}
});
Thanks,
Chad.
I had similar requirement and the solution is:
<HTML>
<BODY>
<form name="myform">
<table>
<tr>
<td>
<select name="one" onchange="if (this.value=='other') {this.form['other'].style.visibility='visible'}else {this.form['other'].style.visibility='hidden'};">
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="other">Other</option>
</select>
<input type="textbox" name="other" style="visibility:hidden;"/>
</td>
</tr>
</table>
Figured it out, used the following javascript for this:
<script type="text/javascript">
function CheckContact(val){
var element=document.getElementById('email');
if(val=='email')
element.style.display='block';
else
element.style.display='none';
var element=document.getElementById('sms');
if(val=='sms')
element.style.display='block';
else
element.style.display='none';
}
</script>
Then had this in the form:
<select name="contactinfo" id="contactinfo" onchange="CheckContact(this.value);">
<option>Select Contact Option</option>
<option value="email">Email</option>
<option value="sms">Text (SMS)</option>
</select><br />
<div id="email" style="display: none;">Enter Email: <input type="text" name="email" /><br /></div>
<div id="sms" style="display: none;">Enter Cell Number: <input type="text" name="sms" /><br /></div>
I have the following form:
<form method="get" action="http://maps.google.com/maps" target="_blank">
<select name="daddr">
<option selected value="Bovetstrasse 1, 3012 Bern, Switzerland">Missione (a Berna)</option>
<option value="">Zollikofen</option>
<option value="">Bümpliz</option>
<option value="">Ostermundigen</option>
<option value="">Münsingen</option>
<option value="">Konolfingen</option>
<option value="">Worb</option>
</select>
<input type="text" name="saddr" maxlength="255" value="">
<input type="hidden" name="hl" value="it">
<input type="hidden" name="z" value="15">
<input type="hidden" name="t" value="m">
<input type="hidden" name="layer" value="t">
<input type="hidden" name="doflg" value="ptk">
<!--input type="hidden" name="output" value="embed"-->
<button type="submit">Guidami</button>
<p class="Didascalia">Powered by Google</p>
</form>
It opens a new window with the map and the directions on the left side as usual.
What I would like to do is to open this content in an iframe that I have in the same page but
if I symply change the target to the iframe name, I get an error (This content cannot be displayed in a frame. To help protect the security of information you enter into this website, the publisher of this content does not allow it to be displayed in a frame.)
if I also un-comment the output=embed parameter, then only the map is shown with the route but no listing of directions
Does any-one know how to do this?
I am making a website where I want to use range slider(I know it only supports webkit browsers).
I have integrated it fully and works fine. But I would like to use a textbox to show the current slide value.
I mean if initially the slider is at value 5, so in text box it should show as 5, when I slide the value in text box should change.
Can I do this using only CSS or html. I want to avoid JQuery. Is it possible?
For those who are still searching for a solution without a separate javascript code. There is little easy solution without writing a javascript or jquery function:
<input type="range" value="24" min="1" max="100" oninput="this.nextElementSibling.value = this.value">
<output>24</output>
JsFiddle Demo
If you want to show the value in text box, simply change output to input.
Point to note:
It is still Javascript written within your html, we can write something like below in js to do similar thing:
document.registrationForm.ageInputId.oninput = function(){
document.registrationForm.ageOutputId.value = document.registrationForm.ageInputId.value;
}
Instead of element's id, name could also be used, both are supported in modern browsers.
This uses javascript, not jquery directly. It might help get you started.
function updateTextInput(val) {
document.getElementById('textInput').value=val;
}
<input type="range" name="rangeInput" min="0" max="100" onchange="updateTextInput(this.value);">
<input type="text" id="textInput" value="">
version with editable input:
<form>
<input type="range" name="amountRange" min="0" max="20" value="0" oninput="this.form.amountInput.value=this.value" />
<input type="number" name="amountInput" min="0" max="20" value="0" oninput="this.form.amountRange.value=this.value" />
</form>
http://jsfiddle.net/Xjxe6/
an even better way would be to catch the input event on the input itself
rather than on the whole form (performance wise) :
<input type="range" id="rangeInput" name="rangeInput" min="0" max="20" value="0"
oninput="amount.value=rangeInput.value">
<output id="amount" name="amount" for="rangeInput">0</output>
Here's a fiddle (with the id added as per Ryan's comment).
If you want your current value to be displayed beneath the slider and moving along with it, try this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MySliderValue</title>
</head>
<body>
<h1>MySliderValue</h1>
<div style="position:relative; margin:auto; width:90%">
<span style="position:absolute; color:red; border:1px solid blue; min-width:100px;">
<span id="myValue"></span>
</span>
<input type="range" id="myRange" max="1000" min="0" style="width:80%">
</div>
<script type="text/javascript" charset="utf-8">
var myRange = document.querySelector('#myRange');
var myValue = document.querySelector('#myValue');
var myUnits = 'myUnits';
var off = myRange.offsetWidth / (parseInt(myRange.max) - parseInt(myRange.min));
var px = ((myRange.valueAsNumber - parseInt(myRange.min)) * off) - (myValue.offsetParent.offsetWidth / 2);
myValue.parentElement.style.left = px + 'px';
myValue.parentElement.style.top = myRange.offsetHeight + 'px';
myValue.innerHTML = myRange.value + ' ' + myUnits;
myRange.oninput =function(){
let px = ((myRange.valueAsNumber - parseInt(myRange.min)) * off) - (myValue.offsetWidth / 2);
myValue.innerHTML = myRange.value + ' ' + myUnits;
myValue.parentElement.style.left = px + 'px';
};
</script>
</body>
</html>
Note that this type of HTML input element has one hidden feature, such as you can move the slider with left/right/down/up arrow keys when the element has focus on it. The same with Home/End/PageDown/PageUp keys.
Shortest version without form, min or external JavaScript.
<input type="range" value="0" max="10" oninput="num.value = this.value">
<output id="num">0</output>
Explanation
If you wanna retrieve the value from the output you commonly use an id that can be linked from the oninput instead of using this.nextElementSibling.value (we take advantage of something that we are already using)
Compare the example above with this valid but a little more complex and long answer:
<input id="num" type="range" value="0" max="100" oninput="this.nextElementSibling.value = this.value">
<output>0</output>
With the shortest answer:
We avoid the use of this, something weird in JS for newcomers
We avoid new concept about connecting siblings in the DOM
We avoid too much attributes in the input placing the id in the output
Notes
In both examples we don't need to add the min value when equal to
0
Removing JavaScript’s this keyword makes it a better language
If you're using multiple slides, and you can use jQuery, you can do the follow to deal with multiple sliders easily:
function updateRangeInput(elem) {
$(elem).next().val($(elem).val());
}
input { padding: 8px; border: 1px solid #ddd; color: #555; display: block; }
input[type=text] { width: 100px; }
input[type=range] { width: 400px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" min="0" max="100" oninput="updateRangeInput(this)" value="0">
<input type="text" value="0">
<input type="range" min="0" max="100" oninput="updateRangeInput(this)" value="50">
<input type="text" value="50">
Also, by using oninput on the <input type='range'> you'll receive events while dragging the range.
In plain JavaScript:
function displaySliderValue(eSlider){
eSlider.parentElement.querySelector('span').textContent = eSlider.value;
}
<div>
<span>1</span><br>
<input type="range" min="1" max="100" value="1" oninput="displaySliderValue(this);">
</div>
For people don't care about jquery use, here is a short way without using any id
<label> userAvatar :
<input type="range" name="userAvatar" min="1" max="100" value="1"
onchange="$('~ output', this).val(value)"
oninput="$('~ output', this).val(value)">
<output>1</output>
</label>
I have a solution that involves (Vanilla) JavaScript, but only as a library. You habe to include it once and then all you need to do is set the appropriate source attribute of the number inputs.
The source attribute should be the querySelectorAll selector of the range input you want to listen to.
It even works with selectcs. And it works with multiple listeners. And it works in the other direction: change the number input and the range input will adjust. And it will work on elements added later onto the page (check https://codepen.io/HerrSerker/pen/JzaVQg for that)
Tested in Chrome, Firefox, Edge and IE11
;(function(){
function emit(target, name) {
var event
if (document.createEvent) {
event = document.createEvent("HTMLEvents");
event.initEvent(name, true, true);
} else {
event = document.createEventObject();
event.eventType = name;
}
event.eventName = name;
if (document.createEvent) {
target.dispatchEvent(event);
} else {
target.fireEvent("on" + event.eventType, event);
}
}
var outputsSelector = "input[type=number][source],select[source]";
function onChange(e) {
var outputs = document.querySelectorAll(outputsSelector)
for (var index = 0; index < outputs.length; index++) {
var item = outputs[index]
var source = document.querySelector(item.getAttribute('source'));
if (source) {
if (item === e.target) {
source.value = item.value
emit(source, 'input')
emit(source, 'change')
}
if (source === e.target) {
item.value = source.value
}
}
}
}
document.addEventListener('change', onChange)
document.addEventListener('input', onChange)
}());
<div id="div">
<input name="example" type="range" max="2250000" min="-200000" value="0" step="50000">
<input id="example-value" type="number" max="2250000" min="-200000" value="0" step="50000" source="[name=example]">
<br>
<input name="example2" type="range" max="2240000" min="-160000" value="0" step="50000">
<input type="number" max="2240000" min="-160000" value="0" step="50000" source="[name=example2]">
<input type="number" max="2240000" min="-160000" value="0" step="50000" source="[name=example2]">
<br>
<input name="example3" type="range" max="20" min="0" value="10" step="1">
<select source="[name=example3]">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
<br>
</div>
<br>
Here's a vanilla JS way of automatically adding the value to all range inputs without any extra HTML.
Edit: Chrome only. I didn't realize it doesn't work with Firefox.
document.querySelectorAll('input[type=range]').forEach(e => {
e.setAttribute('data-value', e.value);
e.addEventListener('input', () => {
e.setAttribute('data-value', e.value);
});
});
input[type="range"]::after {
content: attr(data-value);
margin-right: -50px;
padding-left: 10px;
}
<input type="range"><br>
<input type="range"><br>
<input type="range">
Try This :
<input min="0" max="100" id="when_change_range" type="range">
<input type="text" id="text_for_show_range">
and in jQuery section :
$('#when_change_range').change(function(){
document.getElementById('text_for_show_range').value=$(this).val();
});
<form name="registrationForm">
<input type="range" name="ageInputName" id="ageInputId" value="24" min="1" max="10" onchange="getvalor(this.value);" oninput="ageOutputId.value = ageInputId.value">
<input type="text" name="ageOutputName" id="ageOutputId"></input>
</form>
if you still looking for the answer you can use input type="number" in place of type="range" min max work if it set in that order:
1-name
2-maxlength
3-size
4-min
5-max
just copy it
<input name="X" maxlength="3" size="2" min="1" max="100" type="number" />