I have a form with width and height input fields.
I want to listen to changes made in any one of the fields by the user
and change the value in the other field wile constraint proportions using Jquery.
the user can see the changes as he typs.
<form>
<p>
<label>Width</label><br />
<input type="text" id="width" value="16" />
</p>
<p>
<label>Height</label>
<input type="text" id="height" value="9" />
</p>
</form>
How about this. I am storing the original value in data-value attribute, that I use to recount the ratio
<form>
<p>
<label>Width</label><br />
<input type="text" id="width" data-value="16" value="16" />
</p>
<p>
<label>Height</label>
<input type="text" id="height" data-value="9" value="9" />
</p>
</form>
Here is the listener for changing width (you can write the one for height in the same way)
$("#width").bind("keyup", function(){
var width = $(this).data("value")
, newwidth = $(this).val()
, $height = $("#height")
, height = $height.val();
$height.val(height*(newwidth/width));
})
Here is the fiddle
try attaching an event to .keypress( handler(eventObject) ) that for every keypress that the used does it performs what you said above.
Related
I have a multiple-input field and an onchange function. When we change the input field from the event it triggered, I want to get the name or id of the input field (to distinguish it from other input fields). Many thanks.
$('input[type="text"]').on('change', function(){
// name is a unique attribute
$(this).attr("name"));
});
<input type="text" name="text1" />
<input type="text" name="text2" />
<input type="text" name="text3" />
I have these two text inputs:
<input type="text" value="" id="width" name="width" />
<input type="text" value="" id="height" name="height" />
And below there is:
<h1>Summ: xxxxxx</h1>
I want to replace xxxxx with the following math:
(width * height) / 2
Whenever I type a new value at width or height inputs, the Summ should change realtime.
Is this possible at all?
Thank you.
You have multiple options to do that. There are many technologies frameworks, libraries, and ways to do it.
In my case (as I'm more familiar with this), the easier would be to use JQuery like this.
$('#width, #height').on('input', function(){
var width = $('#width').val();
var height = $('#height').val();
if (width != "" && height != "")
$('#result').text(width*height/2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" value="" id="width" name="width" />
<input type="number" value="" id="height" name="height" />
<h1>Result: <span id='result'>0</span></h1>
Obs: I changed your input fields to numeric type, so the user won't enter non-numeric data.
Quick fix:
<input type="text" value="" id="width" name="width" />
<input type="text" value="" id="height" name="height" />
<h1 class="calc"></h1>
And:
$('#width, #height').on('input', function () {
var widthInput = $('#width').val()
var heightInput = $('#height').val()
var result = widthInput * heightInput / 2
$('.calc').text(result)
})
You might wanna put a placeholder value like 1 for each field so it doesn't begin calculating with a 0. Also, it's spelled "sum" and not "summ", and it's not a sum anyway.
Fiddle here.
The main pieces of the problem are:
How do I get the value of an input box?
How do I execute code whenever input changes?
How do I set the text of an element?
The relevant functions are val(), change(), and text() respectively. The examples in the documentation should help you figure out how to piece it all together.
This question seem to be very silly! but I am looking for the best answer,
I have a input field and a hidden field. How to set the value of the input field as value of the hidden field?
<input class="class1" id="id1" name="name1" value="06/30/2015" />
<input type="hidden" name="hidden" id="hidden" value="I want the value of above field">
Please try this
$(document).ready(function(){
$("#id1").change(function(){
$("#id1").val($("#hidden").val());
});
});
DEMO
You can use a change event handler to update the value of hidden field
//set the initial value
hidden.value = id1.value;
<input class="class1" id="id1" name="name1" value="06/30/2015" onchange="window.hidden.value=this.value" />
<input type=hidden name="hidden" id="hidden" value="I want the value of above field">
You can this by below why, i used onblur for set values from input to hidden. same why you can use different method for this.
Or if you strictly want to use javascript then add one onblur function and do code as i do with callthis() function.
$("#id1").blur(function(){
$("#hidden").val($(this).val())
console.log($("#hidden").val());
});
function callthis(inputobj)
{
document.getElementById("hidden").value = inputobj.value;
console.log(document.getElementById("hidden").value)
}
<input class="class1" id="id1" name="name1" onblur="callthis(this)" value="06/30/2015" />
<input type="hidden" name="hidden" id="hidden" value="I want the value of above field">
I've been working on a script that lets a user set a setting using HTML5' <input type="range", I've got it to work and got it to show a value on my site, but the thing is that I want the user set setting to be posted as a form input $_POST['gearsdrag'].
For clearification I'm providing a JSfiddle.
http://jsfiddle.net/hqdesf70/
The input I want to be sent is
<input id="r" type="text" name="gearsdrag" value="6000" />
But what the script set's is <input id="r" type="text" name="gearsdrag" />6000</input> and that's not being sent with $_POST.So is there a way to do this or maybe with get parameters or something.I can't figure it out.
Changing the function to this will insert the value into the input and from there you can post it is that what your after?
<script>function showValue(newValue)
{
//changing the "innerHTML" to "value" is what inserts it into the text field
document.getElementById("r").value = newValue;
document.getElementById("rr").innerHTML = newValue;
}
</script>
Keisti pavarą prie: <span id="rr">0</span> / RPM
<form action="test.php" method="post">
<input type="range" min="0" max="7800" value="0" step="100" onchange="showValue(this.value)" />
<input id="r" type="text" name="gearsdrag" value=""/>
<input type="submit" value="Nustatyti" />
</form>
There is a great http://acko.net/blog/farbtastic-jquery-color-picker-plug-in/
I need to do 2 things:
a. Hide color code that we can see under
<input readonly="readonly" type="text" id="color" name="color" value="#123456" />
b. Keep this code to some other hidden field.
How it can be done?
Thank you!
Try this
HTML
<form>
<input type="text" id="color" name="color" />
<input type="hidden" id="colorValue" name="colorValue" />
</form>
<div id="colorpicker"></div>
JS
$(document).ready(function() {
var picker = $.farbtastic('#colorpicker');
picker.setColor("#fff");
picker.linkTo(function onColorChange(color) {
$('#color').css({'background-color':color});
$('#colorValue').val(color);
});
});
DEMO.
I cannot see the script you're referring, page won't load, but I'm pretty sure you just need to change the type into hidden, when it's hidden you can also remove the readonly attribute:
<input type="hidden" id="color" name="color" value="#123456" / >
I assume that script automatically updated the field you mentioned, if it's hidden it will still update it.