I try to generate a simple button by HTML and JavaScript. Unfortunately, I don't know how to it with JavaScript to catch to value from input range HTML to apply for button. How could I use JavaScript to catch value from HTML range?
this is my html code:
<form name='frm'>
<div id="div">
<label>
Width:
<input type="text" id="MyText"/>
<input type="range" id="MyRange" oninput="myfunc()"/>
</label><br/>
<label>
Height:
<input type="text" id="height"/>
<input type="range" id="heights" oninput="myfunc()"/><br/>
</label><br/>
<label>
Background:
<input type="text" id="bdg"/>
<input type="color" id="background"/>
<!--/* <input type="range"/>
<input type="imge" name="imge"/>*/-->
</label><br/>
<label>
Radius:
<input type="text" name="rad" id="Radius"/>
<input type="range" name="rad" id="Rd"/><br/>
</label><br/>
<label>
Margin:
<input type="text" name="margin" id="margin"/><br/>
</label><br/>
<label>
Padding:
<input type="text" name="padding" id="padding"/><br/>
</label><br/>
<label>
Box-shadow:
<input type="text" name="shadow" id="shadow"/><br/>
</label><br/>
</div>
<div id="div">
<label>
Color:<br/>
<input type="text" name="col" id="color"/>
<input type="color" id="colors"/><br/>
</label>
<label>
Border-width:<br/>
<input type="text" name="bdwidths" id="bw"/>
<input type="range" id="bdw"/><br/>
</label>
<label>
Border-style:<br/>
<input type="number" name="bdstyle" id="bdstyle"/><br/>
</label>
<label>
Border-color:<br/>
<input type="number" name="bdcol" id="bdcolor"/>
<input type="color" id="color"/><br/>
</label>
<label>
Text-align:<br/>
<input type="number" name="aligns" id="ta"/><br/>
</label>
<label>
Font-size:<br/>
<input type="number" name="font" id="font"/>
<input type="range" id="font-size"/><br/><br/>
</label>
<label>
<input type="button" value="save change" onclick="save()"/>
</label>
</div>
</form>
My Button
To trigger the javascript function you need to listen for changes/events.
This is using the oninput attribute. This will trigger/call the javascript function myfunc each time the range has a new input.
This is now using id attributes, not name attributes.
document.getElementById('') Is used to target the element
document.getElementById('').value is used to target the elements value.
function myfunc(){
//Assign a variable to the MyRange element.
var MyVariable= document.getElementById('MyRange');
//Target the MyText input and change the value to the value of MyVariable.
document.getElementById('MyText').value=MyVariable.value+'px';
//Target MyBtn's style - width
document.getElementById('MyBtn').style.width=MyRange.value+'px';
}
Width:<input type="text" id="MyText"/><br/>
<input type="range" id="MyRange" oninput="myfunc()"/>
<button id="MyBtn">My Button</button>
If you don't understand any of the source code please leave a comment below and I will explain it line by line for you so you understand how this works. It's better to understand how something works rather than copy/paste and hope for the best.
Javascript should be placed inside of script tags
<script type="text/javascript">
//Place Javascript Here....
</script>
I hope this helps. Happy coding!
Give the element an ID so you can access it:
<input type="range" id="widthrange" name="widths"/>
Then in your Javascript, you can do:
var width = document.getElementById("widthrange").value;
Related
In the following if checkbox is clicked the readonly attribute from the textbox must be removed and on unclicking git should be added.Can this be done by angular directive
<div class="radio">
<label>
<input type="radio">Project</label>
<input type="text" name="project" id="project" readonly/>
</div>
You can just use the built-in directive ngReadonly:
<input type="checkbox" ng-model="readonly">Project</label>
<input type="text" name="project" id="project" value="" placeholder="Project" ng-readonly="!readonly"/>
Here's a working plunkr.
Take a look on https://docs.angularjs.org/api/ng/directive/ngReadonly:
<label>Check me to make text readonly: <input type="checkbox" ng-model="checked"></label><br/>
<input type="text" ng-readonly="checked" value="I'm Angular" aria-label="Readonly field" />
Im looking to do something like #JCOC611 did here: https://stackoverflow.com/a/5099898/3223200
In which you can change the TEXT value depending on the RADIO BUTTON selection
Who ever, I would like to have several forms in the same page, how can this be done?
The original code is
<input type="text" id="it" value="">
<input type="radio" name="hey" value="one">
<input type="radio" name="hey" value="two">
<input type="radio" name="hey" value="three">
<script>
$(document).ready(function(){
$("input[type=radio]").click(function(){
$("#it").val(this.value);
});
});
</script>
Demo here: http://jsfiddle.net/jcoc611/rhcd2/1/
And I would like something like this:
<form action="hello.php" name="form01" method="post">
<input type="hidden" name="productid" value="01" />
<input type="radio" name="price" value="1000">
<input type="radio" name="price" value="2000">
<input type="text" id="it" name="pricevalue" value="">
</form>
<form action="hello.php" name="form02" method="post">
<input type="hidden" name="productid" value="02" />
<input type="radio" name="price" value="6000">
<input type="radio" name="price" value="2400">
<input type="text" id="it" name="pricevalue" value="">
</form>
<form action="hello.php" name="form03" method="post">
<input type="hidden" name="productid" value="03" />
<input type="radio" name="price" value="500">
<input type="radio" name="price" value="700">
<input type="text" id="it" name="pricevalue" value="">
</form>
<script>
$(document).ready(function(){
$("input[type=radio]").click(function(){
$("#it").val(this.value);
});
});
</script>
Using multiple forms in the same page, but to use the same function
How can this be done?
Use:
$(document).ready(function () {
$("input[type=radio]").click(function () {
$(this).closest('form').find("input[type=text]").val(this.value);
});
});
jsFiddle example
By using .closest() and .find() you can pick the text input element closest to the relative radio button selected.
Note that IDs must be unique.
A bit less code if you use siblings().
$(document).ready(function(){
$("input[type=radio]").click(function(){
$(this).siblings("input[type=text]").val(this.value);
});
});
jsFiddle example
<form name="input" action="html_form_action.asp" method="post">
<input type="text" name="a" class="inp">
<input type="text" name="b" class="inp">
<input type="text" name="c" class="inp">
<input type="text" name="d" class="inp">
<input type="submit" name="e" class="inp">
</form>
$("input").focusin(function () {
$("input").not($(this)).not(':input[type=submit]').val("");
});
DEMO
http://jsfiddle.net/PJLQq/1/
This code will clean the post values when i press the submit button. How can be solved? I only want to clean the values when the user change the focus in the user interface, not when the form is submitted.
Based on the comments
$("input:not([type=submit])").focusin(function () {
$("input").not(this).not('[type=submit]').val("");
});
Demo: Fiddle
Looking for a way to enable the submit button of a form when all its inputs are checked/not empty.
I have stumbled upon snippets in both google and other SO questions, where a similar thing is done, but always only for the same type of input, not considering different kinds as it's the case here. Any ideas how to do this?
Below, an example of where I would use such snippet and its link to http://jsfiddle.net/bRKuV/.
P.S Looking for a solution other than the required HTML5 attribute.
EDIT: grouped radios with name attr.
<div id="first">
<form>
<label>Name</label>
<input type="text">
<label>Email</label>
<input type="email">
<label>Age</label>
<input type="number" maxlength="2">
<label>Gender</label>
<input type="radio" name="gender" value="m">Male</input>
<input type="radio" name="gender" value="f">Female</input>
<input type="submit" disabled>
</form>
</div>
<div id="second">
<form>
<label>Question 1</label>
<input type="radio" name="q1" value="y">Yes</input>
<input type="radio" name="q1" value="n">No</input>
<label>Question 2</label>
<input type="radio" name="q2" value="y">Yes</input>
<input type="radio" name="q2" value="n">No</input>
<input type="submit" disabled>
</form>
</div>
Hmm, nothing simpler than this:
$("form").on("change", function() {
$("input").each(function() {
var test = {radio:1, checkbox:1}[this.type] ? $(this).is(":checked") : !!this.value;
if(this.type !== "submit") console.log(test);
});
});
http://jsfiddle.net/bRKuV/3/
I have 2 forms on my page.
The first one is always visible and the second one is hidden at first.
When the user clicks a specified radio option, the second form shows up.
In Chrome and Firefox, everything is fine, but in IE, the form shows, but I cannot write inside the textboxes fields.
The wierdest thing is that I can erase everything inside the textboxes but I cannot add anything.
Here is some code:
The first form:
<form name="calendar" action="" method="post">
<input type="text" name="n" />
<input type="radio" name="t" value="0" onclick="showSecondForm();" />Option 1
<input type="radio" name="t" value="1" onclick="showSecondForm();" />Option 2
<input type="radio" name="t" value="2" onclick="showSecondForm();" />Option 3
<input type="submit" name="submit" value="Submit" onclick="onSubmitAction();return false;">
</form>
The function showSecondForm() checks if option 3 is checked and if so, it shows the second form.
The second form is:
<div id="customForm" style="display: none;">
<form name="custom" action="" method="post">
<input type="text" name="a" />
<input type="text" name="b" />
<input type="text" name="c" />
<input type="text" name="d" />
<input type="text" name="e" />
</form>
</div>
The forms will never submit because everything I have to do is in javascript and I can reach both forms easilly. All my code is working fine except for the typing in textboxes in ie.
My javascript
<script type="text/javascript">
function showSecondForm()
{
if(document.calendar.t[2].checked)
{
document.getElementById('customForm').style.display = 'block';
}
else
{
document.getElementById('customForm').style.display = 'none';
}
}
</script>
In browsers like Google Chorme and Mozilla Firefox, when you put a maxlenght of 0 on a text input field, the textbox lenght is "unlimited". In Internet Explorer, it is really 0, so you cannot write anything in it.
So the code must be:
<div id="customForm" style="display: none;">
<form name="custom" action="" method="post">
<input type="text" name="a" maxlength="255" />
<input type="text" name="b" maxlength="255" />
<input type="text" name="c" maxlength="255" />
<input type="text" name="d" maxlength="255" />
<input type="text" name="e" maxlength="255" />
</form>
</div>
Try this:
<script type="text/javascript">
function showSecondForm() {
document.getElementById('customForm').style.display='block';
}
</script>