I am facing a problem that i am working on a pre-developed script and adding my custom input fields, and every thing is fine except that an input which contains default value doesn't show the value while it is set in value attribute,
<input id="complete_within" type="text" value="5" class="mr-text">
The value 5 is not showing and i think there is a script that cleans it for some reason.
Why do i think so?
Because the value displays if i called this field through AJAX, but once i add it directly to page, it doesn't.
Is there any way to stop any event applied for specific element or to know which script is doing this?
Related
I have two < input > elements type="radio". One of them is checked by default. In Firefox browser when I check another < input > element which is not a default one, and when I close the tab and restore that tab back I've got that "not a default" < input > element is CHECKED! (In Chrome it's not happening.) That's not ok 'cause the price is from another option and a picture belongs to another option.
$(window).load(function(){
$('input').prop('checked', true);
};
I was trying to add this to "reload" check element, but this "script" forces element to be checked after page is loaded if it was being changed WHILE the page is loading...
This is the page code:
<div class="radio">
<input class="not4kt" autocomplete="off" name="option[23]"
value="52" id="option-value-52" data-price_prefix="-"
data-price="205.0000" onchange="recalculateprice('117_cp');"
onclick="chimg('117', '33')" type="radio">
<label for="option-value-52"></label>
<label for="option-value-52">
<span>33 см</span>
</label>
</div>
<div class="radio">
<input class="rst4kt" autocomplete="off" checked="checked" name="option[23]" value="51"
id="option-value-51" data-price_prefix="+" data-price="0.0000"
onchange="recalculateprice('117_cp');"
onclick="chimg('117', '44')" type="radio">
<label for="option-value-51"></label>
<label for="option-value-51">
<span>44 см</span></label>
</div>
How can I get both? --> (1) keep the element checked by default to be checked after restoring the Firefox tab; (2) prevent switching to the "checked by default" element after the page is loaded if WHILE the page was loading another element was clicked.
UPD!
Actually I have ~20 dynamically changing IDs inside of < input > ... So I can't use #optionval-a ... cause it always might be #optionval-b or #optionval-foo-bar or even #optionval-123... The only possible way to call the elemnt is: $('input') -- and that's the problem...
Now sure what you mean by the first requirement - do you mean reloading the page? If so, you should expect the browser to load the page with the default element checked.
To prevent the checkbox being set to the default if a user has checked a button before the page has finished loading - i.e. before the $(window).load(...) function is called, you could set that function to check on the status of the radio element, though I think you will need to rewrite the function, as at the moment it will run through ticking each box until it finds the last 'input' element, because the jQuery selector in the above code is set to input, although you probably meant :input, but anyway, to allow a user to select a box before the page is loaded without the onload function re-setting the choice, you could check that every other box was not checked to be sure it was OK to check the default box:
$(window).load(function(){
if (!$('#optionval-a').is(':checked' && !$('#option-value-b').is(':checked' && !$('#option-value-c').is(':checked'){
$("#option-value-51").prop("checked", true);
}
}
Also this answer might be helpful.
If you mean that Firefox seems to be caching a user's input if they immediately re-load the page after closing using Ctrl + Shift + t, then I think they would be doing that deliberately to help users they believe wish to open the last tab exactly as they had left it. The only solution I can think of for this case would be a script using setTimeout() or equivalent jQuery function which you could perhaps set on page load, since I doubt Firefox would over-ride any such behaviour on page load. Thus:
$(window).load(function(){
// possibly set radio boxes here...
// ...or better still do everything inside the timeout function, thereby solving both problems at once:
setTimeout(function(){ alert("I really want my page to do this"); }, 3000);
}
One alternative might be not to fully show the form until the page has finished loading. Or you could insert a hidden input radio element (whose name is static - like name="hiddenCheckedRadioElement" ) first in the list with "checked" and then check if it is still checked once the page is loaded. If so, check your chosen field. If it is not checked it would mean the user has selected something else, and so you would then not check your default box.
Is there any way to open the ngx-typeahead when a user enters the input. In other words, on focus
I can get the dropdown to open if I type a single character into the input box, and then hit backspace.
just add this to the input
[typeaheadMinLength]="0"
Setting [typeaheadMinLength]="0" is the way to do this, but it also has the side effect of triggering a search even when nothing is typed in yet. I my case I needed to run the search on focus, but only if the textbox already had some content. I did this using a reference to the input's value:
<input #searchBox
[typeaheadMinLength]="searchBox.value?.length > 0 ? 0 : 1"
/>
You will need to do two things to make this possible:
First, set [typeaheadMinLength]="0" to have the input open when nothing has been typed yet.
Secondly, since the type ahead input is the first field in the form, you may need to add a small delay by also setting [typeaheadWaitMs]="300 (or some value). This is because the input may receive focus before the values are available.
Example:
Ok.
Question is simple.
I want to call some document via ajax when user changed the value of <input type="text">.
Not even just 'keyboard typing' event.
Include that way... you know, the tool tip...which showing last input result of user...
I mean, that tool tip... position is below the input box... showing user's recent typed results... you know that.. hard to explain. don't know its name...
Anyway, I wanna call ajax document right after user changed value of <input type="text">... Not even just keyboard typing, include via choosing one of that tooltips by mouse clicking...
Well, I was able to call document right after 'key typing event'..
This is the code :
sensitiveInput.addEventListener('keyup',function(){
callDocument_viaAjax();
}
So I tried similar method with above code.
This is the code :
document.addEventListener('mouseup',function(){
if(sensitiveInput.value !== '') {
sensitiveInput.onchange=function(){
callDocument_viaAjax();
}
}
});
But this code had some delay.. That means, Failed to realize the ui that I want to make.
When user changed the value of <input type="text" id="sensitiveInput"> via choosing one of the tooltips below input box, callDocument_viaAjax() wasn't executed.
I had to click on the document one more time to execute callDocument_viaAjax()....
I don't know why this happening.
And don't know how to solve this problem...
Please some one show me the mercy...
I solved this problem by using an event trigger 'input'.
'input' event detect change of input even if do not lose the focus from input field.
('change' effects only when input field loses focus)
I have a field that shows a value 4 in the UI. The site is built using a complex build process that I do not totally understand (I work as part of a team).
When I inspect the HTML for the field, I don't see the value 4.
I am confused about how this might happen. Is it possible that javascript is "showing" the value of the input field?
DOM elements have attributes and properties. The two are not always identical. The web inspector, in general, shows attributes as part of the DOM structure, like.
<input type="text" value="4" />
However, if there is no value attribute, this does not mean that the element has no value. For example, consider the following HTML:
<input type="text" id="test" />
When you load the page, the attribute document.getElementById("test").getAttribute("value") is null, and the property document.getElementById("test").value is "" (empty string). When you enter 4 into the input field, the attribute "value" is still null, but the property value has changed to "4".
Long story short, the web inspector is not obligated to show the value of an input since it is does not always appear in the DOM as an attribute.
yes, you can change the value in javascript. and that is what is happening in your case
document.getElementById("materials_price_1").value = "4";
I am not sure what the issue is.
If the input contains a 4 that does not mean the attribute value will be equal to 4.
It just means that the value of the input is 4.
Just check value of this field with JavaScript:
document.getElementById('materials_price_1').value;
Or with jQuery:
$('#materials_price_1').val();
Yes, if you using chrome you can in inspect element stand with the mouse on the elemnet in 'Elements' tab and right click.
Now choose 'Inspect DOM Properties' this will open you bottom of the tab the console tab. there you can find the DOM object of your field. open the object and find property value. this is the active value right now
Sure. it happens in the DOM. you can simply make it blank by writing this code in your body tag :
<script>
document.getElementById('materials_price_1').value='';
</script>
just make sure you put the code after your other Javascript codes.
HI,
In JavaScript when value is set to a hidden input control, which event is fired?
Whenever you change the value of a hidden field using script, it wont fire any event. But you can manually trigger the event if you are using jQuery.
Lets assume that you have the following hidden field
<input type="hidden" id="hid" value="0"
onchange="alert('Caught the hidden event');" />
When you change the value of the field using following code, it will not display the alert message.
$("#hid").val("2");
But you can trigger the change event using the following code
$("#hid").val("2").change();
Above code will display the alert message.
A value (aside from the initial value) can only be set on a hidden input by using scripting, and events do not generally fire in response to scripts.
It might trigger a Mutation event, but browser support for them is not all that widespread yet.
In general, if you want to do something when you script changes the value of a hidden input — make the script do the other thing at the same time.
I'm guessing that 'onchange' would fire.