Okay, I have javascript to calculate a dynamic price for an HTML form. The code is as follows:
jQuery("input[name='Amount']").change(function() {
if (isNaN(parseFloat(this.value)) || !isFinite(this.value)) {
jQuery(this).val('');
return false;
}
var calc = parseFloat(this.value) * 0.95;
jQuery(this).parents("form").find("input[name='price']").val(calc);
});
This, with this input:
<input class="irrelevant typeahead" type="text" placeholder="Amount" name="Amount"/>
The javascript takes that value, calculates the price, and I want it to fill this:
<input type="hidden" name="price" value=""/>
I believe my javascript is correct. What do I need to do to the price to make it work?
Make sure you have these items wrapped in a <form> tag.
<form>
<input class="irrelevant typeahead" type="text" placeholder="Amount" name="Amount"/>
<br />
<input type="hidden" name="price" value=""/>
</form>
jQuery("input[name='Amount']").change(function() {
if (isNaN(parseFloat(this.value)) || !isFinite(this.value)) {
jQuery(this).val('');
return false;
}
var calc = parseFloat(this.value) * 0.95;
jQuery(this).parents("form").find("input[name='price']").val(calc);
});
I have a working demo here: http://jsfiddle.net/P55ge/
In the demo I have made the price input a text field instead of a hidden field for ease of seeing the value being set.
Also note, that the field is only updated when you enter a valid number and then click off the field input. The following quote is from the jquery documentation for .change() http://api.jquery.com/change/
Now when the second option is selected from the dropdown, the alert is
displayed. It is also displayed if you change the text in the field
and then click away. If the field loses focus without the contents
having changed, though, the event is not triggered.
Related
How can I set the maxlength attribute in my text input field equal to the value the user enters in the number input field in the same form?
<form action="/action_page.php">
<input id="number" type="number" value="20" max="40">
<input type="text" id="username" name="username" maxlength="10"><br><br>
<input type="submit" value="Submit">
</form>
I'm guessing this maybe requires JavaScript?
You can set the maxlength property on the input event.
document.querySelector("#number").addEventListener("input", function(e){
document.querySelector("#username").maxLength = this.value;
});
<form>
<input id="number" type="number" value="20" max="40">
<input type="text" id="username" name="username" maxlength="20"><br><br>
<input type="submit" value="Submit">
</form>
Yes, this requires JavaScript. You would do something like this:
document.querySelector('#number').addEventListener('input', (e) => {
e.target.closest('form').querySelector('[name="username"]').maxLength = e.target.value;
});
JSFiddle: https://jsfiddle.net/63cpv8rk/
Here, we add an event handler for the input event for the element selected by #number. (You should avoid using these ID attributes though... they clutter up the global scope needlessly.)
Then on input, we find the parent form, and then select the input by name. Finally, we set its max length to the value that was just put in our field.
I have a user with certain number assigned to them let's say 100. I have the value 100 passed to my view. There is an input field such that user can enter any value but if the value user enter is greater than 100 a warning must be displayed. I want this warning to be displayed as soon as user is finished entering the value and move to next input field. I want the warning to be shown without any button click.
Just add an oninput event to your input field and validate it with JavaScript.
<input type="text" value="100" oninput="validate()">
<script>
function validate() {
// validate
}
</script>
Or do it like here setting oninput event with Javascript
Suppose <input type="text" id="number" /> is input field.
$('#number').on('change', function(){
if(isNaN(parseInt($(this).val())) || $(this).val() > 100){
alert('You are doing wrong.');
$(this).focus().val(100);
}
})
$(document).ready(function(){
$('#number').on('change', function(){
if(isNaN(parseInt($(this).val())) || $(this).val() > 100){
alert('You are doing wrong.');
$(this).focus().val(100);
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<label>Number: <input type="text" id="number" /></label><br>
<label>Another Input<input type="text" id="number" /></label>
I have 3 input elements. i want to use onkeyup event to get the value from the first input and copy it to the third input. But I still get an empty value in the third input when i typed in the first one. The function changethree() does not automatically get value from input second when user typed in input first. Please help me
<html>
<input type="text" id="satu" onkeyup="changetwo(this)" placeholder="input 1">
<br><br>
<input type="text" id="dua" onkeyup="changethree(this)" placeholder="input 2"><br><br>
<input type="text" id="tiga" placeholder="input 3">
<script>
function changetwo(a){
var target = document.getElementById('dua');
target.value = a.value;
}
function changethree(a){
var target = document.getElementById('tiga');
target.value = a.value;
}
</script>
</html>
changethree() only fires when the user types something into dua. If you want tiga to be updated when you type in satu you have to add to its keyup event:
<input type="text" id="satu" onkeyup="changetwo(this); changethree(this)" placeholder="input 1">
I have the following code for a HTML form:
<input type="text" name="myText" value="Enter Your Name" readonly>
<input type="button" onclick="inn()" value="edit">
When I click on the edit button I would like the read only property of the textfield to be removed so that the user can edit the value of the text-field. I do not want to change any other property.
I also do not want to edit the entire form also with:
formId.innerHTML=
The above code shows only one text-field and one button. On my page there are 12 text-fields and 5 buttons. I would like to remove the property not re-edit the entire property again.
Please suggest some JavaScript code that would help.
function inn()
{
// What do I type here to remove the readonly property of the "MyText" text-field?
}
Firstly, you need to get the <input> element from DOM. One possible way:
var element = document.getElementsByName("myText")[0];
Then, to remove readonly you can either change the readOnly property:
element.readOnly = false;
or to explicitly remove the attribute:
element.removeAttribute("readonly");
Try:
Give an ID to your input element:
HTML
<input type="text" name="myText" id="myText" value="Enter your name" readonly />
JS
function inn() {
document.getElementById('myText').readonly = false;
}
First Assign an ID to your textbox.
i.e.
<input type="text" name="myText" id ="txt" value="Enter Your Name" readonly>
<input type="button" onclick="inn()" value="edit">
Then you can write in your javascript -
function inn()
{
if ($('#txt').attr("readonly") == true)
{
$('#txt').val('');
$('#txt').removeAttr("readonly");
}
}
I've tried to make A input text box & an output text box with a convert button where, if someone clicks the convert button, the input must be displayed in the output box with some change. but it didn't work.
For example,
If the input is "something"
The output should be "##:{something}0"
that is , input value must be present within the characters i specify.
Can someone get me the code for this?
Here's my code so far:
function ConvertText() {
document.form1.outstring.value = document.form1.instring.value.to##{
instring.value}0();
}
<form name="form1" method="post"> <input name="instring" type="text" value="" size="50">
<input type="button" name="Convert" value="Convert" onClick="ConvertText();">
<input name="outstring" type="text" value="" size="50">
</form>
Without spilling all the code. Here is some JavaScript of how to get the value of an input field and make some modifications. And then how to set that string to the value of the output field.
In your html
<input id="first"></input>
<input id="output"></input>
In your javascript (The event is not included)
document.getElementById('first').value
And you can append some stuff to that string.
var string = document.getElementById('first').value
var newString = "##:{"+string+"}0"
And.. heres what you want.
document.getElementById('output').value = newString
Hope this helps, let me know if you have trouble.
Try like this
<input type="text" id="box1"><br/>
<input type="text" id="box2"><br/>
<input type='button' onclick='convert()' value='convert'>
function convert() {
var value1=document.getElementById('box1').value;
document.getElementById('box2').value = '##:{'+value1+'}0';
}
Demo