jQuery - Changing value of input - javascript

I have this field in one form:
<input type="text" name="promocode" id="promoCode" value="" style="width:24%" maxlength="5">
and this field in another form:
<input type="hidden" name="custom" class="promo" value="" />
How can I do, so whenever the value of #promoCode is changed, it will also change the value of .promo
Currenlty, I have this:
var promo = $("#promoCode").val();
$("#promoCode").change(function(){
$('.promo').val(promo);
});
But that doesn't work.

$(function(){
$("#promoCode").change(function(){
$('.promo').val(this.value);
});
});
Make sure the DOM is ready when you attach your callback to the change event
this inside callback is the element the event attached to.
If you cache #promoCode value outside the change callback it will be out of sync right after the first change! use this.value inside the callback just like I did.

Related

NgModel call onchange function

I hava this type of code:
<div ng-repeat="point in points">
<input type="text" ng-model="point.oy" onchange="angular.element(this).scope().changeLocation(point.name)">
<input type="text" ng-model="point.ox" onchange="angular.element(this).scope().changeLocation(point.name)">
<!--.... other inputs -->
</div>
What should I do to make the onchange function not run on the first bind on ng-model.
It means that function changeLocation() should run only if user change text input.
What you can do is bind a watcher to your scope variable point in order to listen for user changes after the initialization of point. ex.
$scope.$watchCollection('point' , function(newPoint , oldPoint){
//something
});

Cannot hide/unhide button inside form

I am not able to unhide a button inside a form. Outside the form it is working.
Also, is there a better way to easily do what I am trying?
<script>
function action() {
document.getElementById('hidden').style.visibility = 'visible';
}
</script>
<input type="text" onChange="action();" id="textfield" name="textfield" />
<input type="button" style="visibility: hidden" id="hidden" value="i am here" />
I try to be careful with id names that I don't accidentally use key words with the id name. Try changing the id="hidden" to id="btnIAmHere". Also action is already a method of a form.
Another way to hide something is to set style.display="none". To make it visible again, set style.display="block"
The difference between these two ways to make something invisible is that setting the visibility doesn't remove the space the object took up.
just call the method like this :
<input type="text" onChange="window.action();" id="textfield" name="textfield" />
I'm not sure but I think it's because the scope is not the same.
See the fiddle
That is due to the function name action(). May be the <form> confuses the function name -action with the form attribute- action. Thus, to make it working, just rename the function to action1() for example and it will work.
See the js
function action1() {
document.getElementById('hidden').style.visibility = 'visible';
}

JQuery attribute (empty) value selector, not working

The elements & the code.
HTML
<input value="" name="data[Filter][address]" type="text" />
<input value="" name="data[Filter][client]" type="text" />
<input value="" name="data[Filter][tenant]" type="text" />
<input value="" name="data[Filter][contract_end_date]" type="text" />
Javascript
console.log($("[name*='data\\[Filter\\]'][value!='']").serialize());
The problem: even if they are all empty, they are serialized.
Why?
You're looking at the value attribute. You can filter off of the value property instead:
http://jsfiddle.net/Y2P6w/
var $filledElems = $("[name*='data\\[Filter\\]']").filter(function () {
return $.trim(this.value).length;
});
The point is when the input tag gets inserted to the page, no matter it is in the page load or in your dynamic JavaScript codes, if it has the value attribute your selector query would use it or if you change your input's value using setAttribute in JavaScript or .attr() in jQuery, their value attribute actually gets changed, but if you change it with .value in JavaScript or .val() in jQuery or simply change the value in the page as a textbox, the attribute won't change, so you better not use value attributes in your selectors, because they are not reliable, an instead use $("[name*='data\\[Filter\\]']") and filter it as #JasonP has pointed out.

Refresh value in text field with JavaScript/jquery

I have a function that calculate price for a product. I'm not JavaScript developer so my knowledge is very limited.
By changing the value in the text field script calculate price for product.
<input type="text" value="" name="options[22]" class="input-text"
onfocus="opConfig.reloadPrice()">
Problem is that the script triggers only if the following is done:
insert value into the textfield
click somewhere outside the textfield
click back into the text field
All I need is a button saying refresh that by clicking it will have functionality of step 2 and step above.
I'm not sure if I explained it properly so if there is any more information required to resolve this issue please let me know.
Here is the link to the site.
http://www.floorstodoors.mldemo.co.uk/spotlight/oak-value-lacquered-3-strip.html
The field im trying to amend/add refresh button is Enter Square Metre
You'd add your event to a button, and retrieve a reference to your input by assigning an ID:
<input type="text" value="" name="options[22]" id="price" class="input-text" />
<input type="button" value="Refresh" onclick="reloadPrice();" />
function reloadPrice() {
var price = "0.00"; // set your price here
// get a ref to your element and assign value
var elem = document.getElementById("price");
elem.value = price;
}
I'm not sure I fully understand you, but is this what you need?
<input type="text" value="" name="options[22]" class="input-text">
<input type="button" onclick="opConfig.reloadPrice()" value="Refresh" />
A button with an click-event listener, so that when you click the refresh-button the opConfig.reloadPrice() method gets executed.
Edit based on comment:
I'm not sure what JavaScript library you are using, but you have these two lines in you code that seems to add event-listeners to the input with id qty.
$('qty').observe('focus',function(){
$('qty').setValue($('qty').getValue().replace(/[^0-9]/g,''));
});
$('qty').observe('focus',this.getFromQties.bind(this))
They are listening for the focus event, thus only triggers when your input field gains focus.
If you modify those to listen for the keyup event instead, I believe it will work better. Without being familiar with the framework, I guess the only thing to change would be this:
$('qty').observe('keyup',function(){
$('qty').setValue($('qty').getValue().replace(/[^0-9]/g,''));
});
$('qty').observe('keyup',this.getFromQties.bind(this))
Use onchange or onblur instead of onfocus!
use onchange. This will activate anytime the value changes:
<input type="text" value="" name="options[22]" class="input-text" onchange="opConfig.reloadPrice()">
First: this is JavaScript and not Java - so you have to be a javascript and not a java developer.
to solve your problem you can make a new button with a onclick attribute and execute your function there which you have in your onfocus attribute in the text-field.
or you can take another event - like onchange or onblur for instance..
<input type="text" onchange="..yourfunctionhere...">
http://www.w3schools.com/js/js_events.asp
All I need is a button saying refresh that by clicking it will have functionality
For that you need a button with onclick listener,
do the below things.
<input type="button" value="Refresh" onclick="opConfig.reloadPrice();" />
<input type="text" value="" name="options[22]" class="input-text"/>

Fire up ajax request when some inputs has changed

I have the following inputs:
<input class="input-text" type="text" name="nombres" id="nombres" />
<input class="input-text" type="text" name="apellidoP" id="apellidoP" />
<input class="input-text" type="text" name="apellidoM" id="apellidoM" />
<input class="input-text" type="text" name="nacimiento" id="nacimiento" />
I want to make an ajax request when the "nombres" and "nacimiento" inputs has changed and are not empty, and when "apellidoP" or "apellidoM" also has changed and are not empty.
How can I do that with jQuery? The only solution I have in mind is to trigger "change" event of every input and check if conditions are met, do you have another solution?
Thanks
If you are only interested in completed changes to field values you may want to look into jQuery's blur handler.
That's generally the way you will do it, check for the requirements in the change event.
Your talking about javascript events. Check this out: http://www.w3schools.com/js/js_events.asp
The following would execute checkEmail() whenever you changed something. Just check the text value of the input element in your function before doing whatever you wanted.
<input type="text" size="30" id="email" onchange="checkEmail()" />
$('#nombres').change(function(){
if($(this).val() !== '') {
//function to execute
}
});
Same applies for apellidoP and apellidoM.

Categories