This is kind of such a specific question that I don't know where to start despite googling so I came here for advice.
Let's say on my page I have three sliders, one has three different color options for a square. The second has three different color options for a circle, and the third has three different color options for say, a triangle. And then a submit button.
How would I go about making it possible for the user to select a color of each and then submit, so it will save the specific combination to the backend? Any advice on how this would be done?
You have to name all your inputs and they values will be sended ehwn you submit the form.
Example:
<form action="" method="post">
<input type="range" min="1" max="100" value="50" name="square">
<input type="range" min="1" max="100" value="50" name="circle">
<input type="range" min="1" max="100" value="50" name="triangle">
<input type="submit" value="">
</form>
You can set a form in HTML with all the inputs format and then send the information of each input to your specific URL
<form action="../doStuff.php" method="post">
<input type="range" min="1" max="3" value="1" name="square">
<input type="range" min="1" max="3" value="1" name="circle">
<input type="range" min="1" max="3" value="1" name="triangle">
<input type="submit" value="Send Information">
</form>
Each input lets you choose a number from 1 to 3. The rest you can define it with javascript
Related
I have a select tag in my page that has multiple elements and on selecting an element I show different div blocks. Each div tag contains different input values and I have a save button that saves all the data in each of the div tags. I am looking to validate all the entered data and I know I should be using forms. The problem I have is that some of the forms will be hidden and if they fail validation then the user may not see the errors. What is the best way to handle this?
<select class="item-select" size=10>
<option ng-repeat="item in items track by $index" value="{{$index}}"
ng-selected="$index == selectedItem" ng-click="ac.itemSelected($index)">
{{item.name}}
</option>
<div ng-show="item.name == 'x'">
<input type="number" min="0" max="100" ng-model="item.options.p" step="0.1" />%
</div>
<div ng-show="item.name == 'y'">
<input type="number" min="0" max="100" ng-model="item.options.p" step="0.1" />%
</div>
Below is my textbox:
<input type="number" id="payement-textbox" name="payment-textbox" min="1" max="100000" maxlength="9" class="payment" placeholder="--" value=""/>
This works fine in Google Chrome. But when I try to enter a floating number in mozilla firefox, it creates a red border around the box. Is there any way to stop firefox to validate float number?
Just specify step attribute.
<input type="number" id="payement-textbox" name="payment-textbox" min="1" max="100000" maxlength="9" class="payment" placeholder="--" step="0.01" value=""/>
Hope this helps.
Chrome is a lot more tolerant to avoid programming errors like this. as Huxdit said, you have to include a step attribute
<input type="number" step="0.01" />
I've created the following code to show the user their range slider value. However, it only shows the value when the user stops moving the slider. Is there a way to show the value WHILE the user drags the range slider? I'm looking for a way to do this in vanilla JS.
function updateInput(val) {
document.getElementById('textInput').innerHTML=val;
}
<input type="range" name="rangeInput" min="0" max="100" onchange="updateInput(this.value);">
<p id="textInput"></p>
Here you go:
<input type="range" name="rangeInput" min="0" max="100" onchange="updateInput(this.value);" oninput="updateInput(this.value)" >
<p id="textInput"></p>
oninput is not supported in IE10, so you have to use both, oninput and onchange.
Here is the demo
Use oninput instead of onchange.
Magical proof!
onmousemove function make this happen:
<input type="range" name="rangeInput" min="0" max="100" onmousemove="document.getElementById('textInput').innerHTML=this.value;">
<p id="textInput"></p>
I'm making a phone gap query mobile iOS app for course evaluation at my uni. This app primary function will be a form that in it's original form uses radio buttons where each value also has a corresponding id - e.g.
<input name="q10" id="1" value="1" type="radio" />
<input name="q10" id="2" value="2" type="radio" />
<input name="q10" id="3" value="3" type="radio" />
<input name="q10" id="4" value="4" type="radio" />
<input name="q10" id="5" value="5" type="radio" />
<input name="q10" id="6" value="6" type="radio" />
But radio buttions aren't that intuitive on iOS devices so I'm using input type range instead.
This works great for changing the value between 1 and 6 but the problem is that one only specifies one id for the whole input, not one id per value.
<input type="range" name="q10" id="q10" value="0" min="0" max="6" />
Is there a way to change the id with the value? I think this should be doable through JavaScript but I lack the know-how. I also cannot change the way the database is set up (requiring both id and value) as this database belongs to the university's IT-department.
You can use the change event
<input type="range" onchange="this.id=this.value" name="q10" id="q10" value="0" min="0" max="6" />
Working example here - http://jsfiddle.net/aVHm8/
Note: I always feel uneasy about changing the ID of a DOM element .. perhaps you should investigate better options to resolve your issue
The database can't know what the id is unless you use JavaScript to send it to the server (standard form submission sends the name and the value). In which case find the bit of JS that pulls out the ID and just send the value twice instead.
I am disabling my range input however in chrome it shows it grayed out but it is still usable.
<input type="range" disabled min="0" max="100"/>
I would assume the above would not allow you to change its value.
Am I doing it wrong?
jsFiddle
Relevant specification Disabled
Here is the Chrome bug report, guess just need to wait for version 15 as the commenters mentioned.
Bug 54820
you can remove all binded events of that specific scroll group to make that scroll disable like:
<div id="fieldset1">
<input type="range" disabled min="0" max="100" readonly="1"/>
</div>
<script>
$(":range").rangeinput();
$('#fieldset1 *').unbind(); // for all events
</script>
its works ..
no need to disable text field; beacause on form submission that field will not be posted ..
My solution JSFIDDLE (Works fine in default android browser)
html
<input id="range" type="range" value="10" min="0" max="30" step="10"/>
<button id="disableBtn">Disable</button>
JS
document.getElementById('disableBtn').addEventListener('input', filter);
document.getElementById('disableBtn').addEventListener('click', disable);
function disable(){
document.getElementById('range').disabled = !document.getElementById('range').disabled;
}
function filter(){
if(document.getElementById('range').disabled){
document.getElementById('range').value = document.getElementById('range').defaultValue;
}
}
I found a corny solution for chrome, because it doesn't seem like you can disable it from user input. Put a div over it so a user cannot interact with it. Not pretty but works:
<div style="position:relative;">
<div style="position:absolute;z-index:5;width:100%;height:100%;"></div>
<input type="range" disbaled=True min="0" max="100" value="0"/><span id="v">100</span>
</div>