Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
Ok,
This is the code I'm using :-
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
$("#rangePoints").change(function() {
var qty = $("#rangePoints").val();
var price = $("#price").val();
$("#qty").val(qty);
$("#total").val(qty*price);
});
});
</script>
</head>
<body>
Price: <input id="price" type="text" value="10.50" readonly /><br/>
Quantity: <input id="qty" type="text" value="1" readonly />
<input id="rangePoints" type="range" min="1" max="100" value="1"/><br/><br/>
Total Price: <input type="text" id="total" readonly />
Price: <input id="price" type="text" value="15.50" readonly /><br/>
Quantity: <input id="qty" type="text" value="1" readonly />
<input id="rangePoints" type="range" min="1" max="100" value="1"/><br/><br/>
Total Price: <input type="text" id="total" readonly />
</body>
</html>
(Thanks to charles360 for helping with this javascript).
In the code above, only the first slider works (which has the price 10.50)...where as..the second one doesn't works.
I need to have multiple of these sliders and each slider has to perform the quantity * price function.
How would I make this happen ?
Thanks.
You've got different elements that have the same id. ids should be unique on the page. It'll only look up the first id since they're supposed to be used only once.
If you want something that can be re-used multiple times on a page, use classes and $(".className") instead of $("#idName")
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I want to select elements that have an autofocus attribute present. For some reason, my jquery selector $("[autofocus]") isn't returning anything.
I imagine this is a simple solution, I just can't see what I'm doing wrong (is it a bug?!).
Browser: Chrome - Version 52.0.2743.116 m (64-bit)
HTML :
<input id="a" type="text" autofocus="autofocus" value="a" />
<input id="b" type="text" autofocus="autofocus" value="b" />
<input id="c" type="text" autofocus="autofocus" value="c" />
Javascript :
console.log($("[type=text]").length); // -> 3
console.log($("[autofocus]").length); // -> 0
console.log($("[autofocus=autofocus]").length); // -> 0
Why can't I select the autofocus attribute?
JSBin
Working fiddle
Your code works just fine as you could see in the example below. the bug come from the JsBin that translate the autofocus="autofocus" to ="autofocus".
Hope this helps.
var focusFn = function(){
console.log("inside fn");
console.log($("[type=text]").length);
console.log($("[autofocus]").length);
console.log($("[autofocus=autofocus]").length);
$("input[type=text]:visible:first").focus();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="focus" onclick="focusFn()"></input><br/>
<input id="a" type="text" autofocus="autofocus" value="a" /><br/>
<input id="b" type="text" autofocus="autofocus" value="b" /><br/>
<input id="c" type="text" autofocus="autofocus" value="c" /><br/>
I'm working on an angular project where i perform calculations on the page. In the textfield where i put the final results, when i get it an ng-model that answer fails to load. When i take out the ng-model, the answer appears.
But i want it working while it have an ng-model="total" because i will send the total value to the database. With the below script, it works
<input name="price" type="text" id="price" ng-model="price">
<input name="quantity" type="text" id="quantity"ng-model="price">
<input name="total" type="text" id="total" value="{{.price*quantity}}">
But with this
<input name="price" type="text" id="price" ng-model="price">
<input name="quantity" type="text" id="quantity"ng-model="price">
<input name="total" type="text" id="total" value="{{.price*quantity}}" ng-model="total">
it fails to works. The answer doesn't appear in the textbox
Try this instead:
<input name="price"
type="text"
ng-model="price" string-to-number>
<input name="quantity"
type="text"
ng-model="quantity" string-to-number>
<span>{{ price * quantity }}</span>
I'm not sure why you're trying to put the calculated value into the 3rd input, but if you are, you'll want to use ng-model-options to tell the total ngModel that it's to treat that value as a getter/setter - https://docs.angularjs.org/api/ng/directive/ngModelOptions
Also note the string-to-number directive. You're dealing with strings in the input. So in order for interpolation to work, you may need to add those.
edit
here is a working example of how I think you were trying to allow an override on the calculated value. You can enter another value in the total input and hit enter to see it working. This uses the ng-model-options - http://codepen.io/jusopi/pen/XKQzzv
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
<input name="input1" id="input1" type="text" value="" class="problem">
<input name="input2" id="input2" type="text" value="" class="hidden">
I'm trying to populate a hidden text input (e.g. input#input2) field with the current value from another text input field (e.g. input#input1) (un-submitted) using jQuery. I've sourced this jsfiddle doing exactly what i require but with a drop down field. And i was wondering if anyone is able to point me in the right direction?
EDIT: Sorry if i wasn't clear, the jsfiddle works perfectly but i'm trying to use a text field instead of a drop down to populate the other field.
i always handle this by storing that value in a variable:
var yourText = document.getElementById("input1").value;
and then just plug it into the hidden field:
$('#input2').val(yourtext);
here's your hidden field:
<input id="input2" type="hidden" />
$("#my_form").submit(function(event){
var visibleInputVal = $("#input1").val();
if(visibleInputVal != ""){
$("#input2").val(visibleInputVal);
}else{
alert("you need to provide a value for input 1");
event.preventDefault();
}
});
<form id="my_form">
<input type="text" value="" id="input1" />
<input type="hidden" value="" id="input2" />
<input type="submit" value="Submit" />
</form>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have a form and it has several fields. There is an ID field which is generated from another form. Now i want to prevent users to change that field value.
How do i do this? DO i need any javascript or anything else?
You can use disabled on the field:
<input type='text' disabled />
Or readonly
<input type='text' readonly />
<input type="text" name="NAME-OF-FIELD" value="VALUE-NOT-TO-CHANE" disabled="disabled" />
or you could use
<input type="text" name="NAME-OF-FIELD" value="VALUE-NOT-TO-CHANE" readonly />
or if you need to hide it
< input type="hidden" name="NAME-OF-FIELD" value="VALUE-NOT-TO-CHANE" />
You will still have access to it when you submit the form.
If you can change the HTML, I'd suggest making the input hidden with type="hidden".
If you can't, apply the CSS style display:hidden to it.
Or did you want to leave it visible?
You have to disable the field:
<input type="text" disabled="disabled" />
Or set it readonly
<input type="text" readonly="readonly" />
A readonly element not editable, but gets sent when the form submits. a disabled element isn't editable and isn't sent on submit.Readonly elements can be focused while disabled elements can't.
<input type="text" readonly />
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I want to use JavaScript to wipe out default text and allow user to enter a his choice word. How do I integrate this thing with my HTML code. I need it for testing purpose. Below is my HTML code.
<html>
<body bgcolor="black"><form method="get" action ="http://localhost:2013">
<center>
<font color="white" size=65>Enter Word:
<input type="text" name="word"></font></center>
</br><center>
<font color="Green" size=65>
<input type="submit" value="SUBMIT"></font></center><
form>
</body>
</html>
Any suggestions?
<!DOCTYPE html>
<body bgcolor="black"><form method="get" action ="http://localhost:2013">
<center>
<font color="white" size=65>Enter Word:
<input type="text" name="word" placeholder='Default Text'></font></center>
</br><center>
<font color="Green" size=65>
<input type="submit" value="SUBMIT"></font></center><
form>
</body>
</html>
Just add placeholder='Default Text' to your input element.
No need of much items, this will help you...
<form action="demo_form">
<input type="text" name="fname" placeholder="Your default text"><br>
<input type="text" name="lname" placeholder="Your default text"><br>
</form>