Basic Javascript Question - What trigger to use? - javascript

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.

Related

Detecting browser autofill before javascript getDocumentReady

I have a problem with my inputs, i had a custom floating label once there is text inside my input. My problem is chrome autofill add the text after my javascript onDocumentReady check for text. I want my javascript function to be called after chrome as loaded the text or any time of autocompletion. Is it possible?
I have tried launching the javascript function upon documentGetReady.
$( document ).ready(function() {
toggleInputsFloatingLabelCustomClass();
});
Use a change function instead to see if any of your inputs change
jQuery('input').change(function(){
toggleInputsFloatingLabelCustomClass();
}
this will solve your problem of chrome autofilling after your script has run
You can add onkeyup definition for your inputs eq.
<input onkeyup='toggleInputsFloatingLabelCustomClassWithWait();'/>
than you can check if user is stil writing eq. Every one seocond and execute your method if user is writing like this:
var timeout = null;
function toggleInputsFloatingLabelCustomClassWithWait() {
clearTimeout(timeout);
timeout = setTimeout(function () {
toggleInputsFloatingLabelCustomClass();
}, 1000);
}

Javascript two weird problems: POST not working, window.location.href not working

I created an instant search similar to google search using JQuery. The highlighted code doesn't work. It is weird since they work fine by its own and everything else works fine. Any idea why this is happening?
Q1.
searchq() works fine, but the createq() function doesn't work, and the variable txt could be posted to other files(search.php). However, the function createq() can't POST. It does get the global variable txt after testing, but the php file(create_object.php) can't get it no matter what POST method I used. Could anyone helps to write a bit POST code which can work in my code.
Q2
I want to create a function that,when the enter is pressed, the user will be redirected to the first search result(which is anchored with an url) . To achieve this, I create a function that variable redirectUrl got the anchored url as string, however, the redirect function window.location.href doesn't work, the page simply refreshed. I tested window.location.href function by its own in another file, it works though. It is so weird that my page simply refreshed, It even refreshed when I direct to google. window.location.href("www.google.com").
Note that I didn't include the connect to database function here. Coz I think the database username and password setting would be different to yours.So please create your own if you want to test it. The mysql is set with a table is called "objects", and it has one column named "name".
Thanks in advance!
<html>
<!-- google API reference -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- my own script for search function -->
<center>
<form method="POST">
<input type="text" name="search" id="search" style="width:400px " placeholder="Search box" onkeyup="searchq();">
<div id="search_output">
</div>
</form>
</center>
<!-- instant search function -->
<script type="text/javascript">
function searchq(){
// get the value
var txt = $("input").val();
// post the value
if(txt){
$.post("search.php", {searchVal: txt}, function(result){
$("#search_output").html(result+"<div id=\"create\" onclick=\"creatq()\"><br>Not found above? Create.</div>");
});
}
else{
$("#search_output").html("");
}
};
function createq(){
// allert for test purpose: test if the txt has got by the createq function
alert(txt);
**$.post( "create_object.php",{creatVal:txt} );**
}
// if enter key pressed, redirect page to the first search result
$("#search").keypress(function(evt){
if (evt.which == 13) {
// find the first search result in DOM and trigger a click event
var redirectUrl = $('#search_output').find('a').first().attr('href');
alert(redirectUrl);
**window.location.href = "www.google.com";
window.location.href = "www.google.com";**
}
})
</script>
</html>
PHP file (search.php)
<?php
if(isset($_POST["searchVal"])){
//get the search
$search=$_POST["searchVal"];
//sort the search
$search=preg_replace("#[^0-9a-z]#i","",$search);
//query the search
echo "<br/>SELECT * from objects WHERE name LIKE '%$search%'<br/>";
$query=mysqli_query($conn,"SELECT * from objects WHERE name LIKE '%$search%'") or die("could not search!");
$count=mysqli_num_rows($query);
//sort the result
if($count==0){
$output="there was no search result";
}
else{
while($row=mysqli_fetch_assoc($query)){
$object_name=$row["name"];
$output="<div><a href='##'>".$object_name."</a></div>";
}
}
echo $output;
}
?>
php file (create_object.php)
<?php
if(isset($_POST["createVal"])){
$name=$_POST["createVal"];
var_dump($name);
}
?>
In createq() you are trying to access the local variable txt that was defined in another function. If you declare a variable inside a function, only that function has access to the variable.
You can fix this by passing txt as an argument to createq. In order to do this, you need to call createq yourself instead of setting it as an event handler for a click event.
Use jqoery's .click() to add a proper event handler for the click event and from that handler call createq, passing along the value of txt. In order to set the click handler, you need a reference to the element with the id "create", that you currently don't have.
The solution to this particular problem looks something like this:
$.post("search.php", {searchVal: txt}, function(result){
$("#search_output").html(result+"<div id=\"create\"><br>Not found above? Create.</div>");
$("#search_output create").click(function() {
createq(txt);
});
});
...
function createq(txt){
...
}
About the way page refresh. If DOM element with id of window.location.href is missing the page will refresh. For example
assume you have window.location.href="#div1";
If DOM element with id="div1" is missing the page will surely refresh.

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.

Drop down value to Textbox (Not HTML Event Handlers)

Basically, I'm working with static HTML that is written in stone. I cannot add an onclick to the dropdown menu, which is usually what I would do.
The following is what I have:
<script type="text/javascript">
function replicate() {
var tb1 = document.getElementById("ctl00_ContentPlaceHolder1_DropDownList_Country_17");
var tb2 = document.getElementById("ctl00_ContentPlaceHolder1_TextBox_State_19");
tb2.value = tb1.value;
}
</script>
Of course, this works fine for the actual "transfer" of data from the drop down to textbox, but it never gets executed. Usually I would execute the function "onclick" in the HTML, but I cannot do that. Is there another way to "listen" for a click on that dropdown?
Just register the handler:
document.getElementById("yourdropdownID").onchange = replicate;
can you use JQuery? Link to JQuery (like all javascrip files) and do the following in a script tag somewhere (or add to your current script tag.
<script>
$(document).ready(function(){
//Use the ID of the control here:
$("#ct100_ContentPlaceHolder1_DropDownList_Country_17").change(function(){
replicate();
});
});
<script>

Move cursor to next field with 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();

Categories

Resources