Move cursor to next field with Javascript - javascript

Basically the function below is a listener for a change in selection of one dropdown. I want the cursor to move to the next field on the page as well the below function is executed. How do I do this in Javascript? The next field on the page is an ExtJs textbox.
function changeVehicleCondition() {
var ValuationSource = getCurrentValuationSource();
var vehicleConditionId = vehiclePnl.VehicleConditions.getValue();
if (ValuationSource == 0) {
vehiclePnl.VehicleConditionId.setValue(0);
} else {
vehiclePnl.VehicleConditionId.setValue(vehicleConditionId);
}
}
Edit: focus() doesn't work for me, because I tried this already:
vehiclePnl.Mileage.focus();
with no luck..

For ExtJs you apparentley have to do this:
focus( true, false );
true tells it to select the text in the next field and false tells it whether or not to delay. it actually didn't work for me but i think thats because my controls don't match up, but that's the code to do it.

This is with no knowledge of extjs
<select id="listen">...</select>
<input id="focus" />
<script type="text/javascript">
document.getElementById('listen').onchange = function () {
changeVehicleCondition()
document.getElementById('focus').focus()
}
</script>
The script tag can be anywhere after the select. You can also do it this way:
<select id="listen" onchange="changeVehicleCondition(); document.getElementById('focus').focus()">...</select>
<input id="focus" />

Lets say your form panel is defined as variable "vehiclePnl" and the next field your wanted to focused is have name attribute "Mileage".
Instead using your previous code
vehiclePnl.Mileage.focus();
Then you should use this code bellow
vehiclePnl.getForm().findField("Mileage").focus();

Related

Show all elements on typeahead focus

I am looking for a smart head.
I am using Bootstrap's typeahead and currently when I click my textfield, nothing happens.
How can I make it so, that when my typeahead textfield is clicked or gets focused, it shows all the options in the typeahead? Because currently I have to start writing for it to show anything. Maybe use a scrollbar if there's a lot of items in my list.
Thank you kindly.
I use a get to get all my items, and then this is my code. I have more than one autocomplete on this page, so they all have different id's.
$.get('link', function (data) {
var autocomplete = $('#typeahead-1').typeahead();
autocomplete.data('typeahead').source = data;
autocomplete.data('json', data);
}, 'json');
Would something like this work for you?
<input class="typeahead" type="text" >
<script type="text/javascript">
$(document).ready(function() {
$(".typeahead").on("click", function() {
$(this).typeahead('open');
});
}
</script>

how to pass value of textbox to another textbox in a modal using javascript?

I have a textbox in my page, what I want is to do some sort of "preview" using a modal, but i cannot display the value of textbox which I put the information i need. Can someone help me?
I use javascript in doing this, but my modal displays empty textbox.
$('#<%= txtDetails.ClientID %>').on('change', function () {
$('input[id$="txtKBDecription"]').text($(this).val());
});
$('#<%= txtIssue.ClientID %>').on('keyup', function () {
$('input[id$="txtKBSummary"]').text($(this).val());
});
$('#<%= area.ClientID %>').on('change', function () {
$('input[id$="txtKBResolution"]').text($(this).val());
});
Really need more specifics, but essentially you're going to grab the value form one and put it in the other whenver it changes.
this goes in your preview modal
<input type="text" id="preview" onchange="Copy();">
and this one goes in your final modal
<input type="text" id="final">
and code...
<script>
function Copy()
{
document.getElementById("final").value = document.getElementById("preview").value;
}
</script>
though it should really be something closer to
<script>
function Copy()
{
var previewValue = document.getElementById("preview").value;
if(previewValue != "" /* Or Other Validation */)
document.getElementById("final").value = previewValue;
}
</script>
you should also consider checking to make sure the elements exist if you are planning on having other people edit the page and/or to make it more robust.

How to set the value of a input hidden field through JavaScript?

I am trying to call the resetyear function and it's getting called also, but the flow stops at alert("over"). It doesn't transfer its control to resetmaster.
String flag = "";
flag = (String) session.getAttribute("flag");
System.out.println("flag = " + flag);
if (flag == null) {
flag = "";
}
if (flag.equals("yes")) {
%>
<script>
alert(1);
// resetyear();
dontreset();
//document.getElementById("checkyear").value = "1";
//alert(document.getElementById("checkyear").value);
</script>
<%} else if(flag.equals("no"))
{%>
<script>
alert(2);
//document.getElementById("checkyear").value = "2";
//alert(document.getElementById("checkyear").value);
resetyear();
</script>
<%}else{}%>
function resetyear(){
if(confirm("DO YOU WANT TO RESET THE YEAR?"))
{
alert("hello");
//document.forms['indexform'].action = "resetmaster";
//alert(document.forms['indexform'].action);
//document.forms['indexform'].submit();
alert("over");
form.action = "resetmaster";
form.submit();
alert(1);
}
For me it works:
document.getElementById("checkyear").value = "1";
alert(document.getElementById("checkyear").value);
http://jsfiddle.net/zKNqg/
Maybe your JS is not executed and you need to add a function() {} around it all.
You need to run your script after the element exists. Move the <input type="hidden" name="checkyear" id="checkyear" value=""> to the beginning.
It seems to work fine in Google Chrome. Which browser are you using?
Here the proof http://jsfiddle.net/CN8XL/
Anyhow you can also access to the input value parameter through the document.FormName.checkyear.value. You have to wrap in the input in a <form> tag like with the proper name attribute, like shown below:
<form name="FormName">
<input type="hidden" name="checkyear" id="checkyear" value="">
</form>
Have you considered using the jQuery Library? Here are the docs for .val() function.
The first thing I will try - determine if your code with alerts is actually rendered. I see some server "if" code in what you posted, so may be condition to render javascript is not satisfied. So, on the page you working on, right-click -> view source. Try to find the js code there. Please tell us if you found the code on the page.
Your code for setting value for hidden input is correct. Here is the example. Maybe you have some conditions in your if statements that are not allowing your scripts to execute.

Javascript getElementById value setting getting reset on function return

I have a simple function to show / hide a div element. I have a javascript function to do that. I debugged this with Opera. The function sets the hidden value properly on the div element. I can see the div element disappear. However, when the function returns the div element reappears. The javascript function is in its own file:main.js:
function showhide(name){
var elem = document.getElementById(name) ;
if( elem.hidden == false ) {
document.getElementById(name).hidden = true ;
} else {
document.getElementById(name).hidden = false ;
}
}
The Html is:
<div class=wrap><p>
<div class=sidebar>
<FORM><input type="submit" value="Toggle" onclick="showhide('specname');"/></FORM></div>
<div class=main>main Div
<div id="specname">collapsible text</div></div></p></div>.
I have set debugging breakpoints in the javascript function showhide to see that the value is being set properly. But on function return, the value is reset.
It is probably something simple I am missing but can't seem to see it? Any ideas? Thanks!
The answers solved my problem. I was missing the fact that the submit repainted the page and I lost my changes. I changed the type=submit to type=button. And I removed the form to just an input element with type button. That worked very nicely. Thanks everyone for your help!!! I really appreciate your answers!
The following wont do anything in some browsers:
document.getElementById(name).hidden = true
change it to
document.getElementById(name).style.display = 'block' // and 'none' for the matching line
does that make it do what you need?
As others have pointed at, it is also submitting the page - either use a different element or change the function to start :
function showHide(e, name) {
e.preventDefault();
//do the toggle here
return false;
}
The problem is you are using a submit control which will submit to the server and refresh the page. You want to stop the submit or change the control type. Both of the following should work. I recommend the 2nd one.
Try this
<FORM><input type="submit" value="Toggle" onclick="showhide('specname'); return false;"/>
or this
<input type="button" value="Toggle" onclick="showhide('specname');"/>
Probably because when you click the button the form submits and it refreshes the page ?
You should not be using a form just to have a button that does something. Instead, try using
<button onClick="showhide('specname');">Toggle</button> (and get rid of the form entirely)
Try this for your showhide().
function showhide(name){
var elem = document.getElementById(name);
(elem.style.visibility == 'hidden'?elem.style.visibility = 'visible':elem.style.visibility = 'hidden');
}
OR similarly:
function showhide(name){
var elem = document.getElementById(name);
(elem.style.display== 'none'?elem.style.display= 'inline':elem.style.display= 'none');
}
Maybe try them both and see which you need.
Cheers.

Basic Javascript Question - What trigger to use?

I'm using this script to auto populate my date field on a form:
function clearText(thefield){
if (thefield.defaultValue==thefield.value)
thefield.value = ""
}
function zp(n){
return n<10?("0"+n):n;
}
function insertDate(t,format){
var now=new Date();
var DD=zp(now.getDate());
var MM=zp(now.getMonth()+1);
var YYYY=now.getFullYear();
var YY=zp(now.getFullYear()%100);
format=format.replace(/DD/,DD);
format=format.replace(/MM/,MM);
format=format.replace(/YYYY/,YYYY);
format=format.replace(/YY/,YY);
t.value=format;
}
Then using this to trigger the event:
onfocus="insertDate(this,'DD/MM/YYYY')"
My question (which is probably a basic one!) is what should I use to auto populate the field when the page loads rather than when I click on the field?
Do not use onload then, there is no need to wait until all page requisite complete loading. Put you script which invokes insertDate right after desired <input>. eg:
<form name="theform">
<input type="text" name="thefield" value="fallback date from server-side">
<script type="text/javascript">
// able to reference field now
insertDate(document.theform.thefield,'DD/MM/YYYY');
</script>
window.onload = function () {
//your code here
}
If you want to populate it when the page loads, you can use the onload handler on <body>, like so: <body onload="foo ();">.
If you are auto populating the field, I believe it is less confusing to the user if it is populated when then page loads rather than when the field gets the focus.

Categories

Resources