Onchange not detecting field change with Google form autocomplete - javascript

I have google autocomplete form on my page. What I'm trying to do is to use on change on city field from the form to query base and display result on the page via ajax and php. If you are familiar with googles form autocomplete, user inputs something in one input field and when he has finished form is filled with data.
Problem is that nothing is firing when form is filled with googles function, but when I input manually something in city field everything is working like it should. I've tried with onchange and oninput event but no joy.
Here is html layout:
<div id="locationField">
<input id="place" placeholder="Enter your address"
onFocus="geolocate()" type="text"></input>
</div>
<table id="address">
<tr>
<td class="label">City</td>
<td class="wideField" colspan="3"><input class="field" id="locality"
disabled="true" **onchange="getCity(this.value)"**></input></td>
</tr>
</table>
Any other way to detect the change?

Most autocompletes will not trigger an onchange event (true of browser autocompletes too).
You'll need to bind the event you want to the Google Maps autocomplete object using .addListener().
For an example check out this other Stack Overlow answer (by Jorge) and the fiddle posted in the accepted answer there.
Also see Google's own documentation on how to handle events.

Related

Update table as soon as a new database table row is inserted

So I want to know how I should make a table, written in PHP 8, that updates as soon a new insert has been made in the database table (SQL Server 2019). I've created a simple table like this:
<table>
<thead>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
</tr>
</thead>
<tbody>
<tr>
<td>text1.1</td>
<td>text1.2</td>
<td>text1.3</td>
</tr>
</tbody>
</table>
Then I've added a button that creates some input fields, and when these are submitted, the data is inserted into the database. But the only way I know to update the table is to reload the page so the table now has the new row. But I've seen websites that do this without reloading the site, and want to know how? My guess is to make some kind of listener, but how I dont know.
the submit button with some inputs could be something like this:
<form>
<input type="text" id="html" name="fav_language" value="">
<label for="html">HTML</label><br>
<input type="text" id="css" name="fav_language" value="">
<label for="css">CSS</label><br>
<input type="text" id="javascript" name="fav_language" value="">
<label for="javascript">JavaScript</label>
<input type="submit" value="Submit">
</form>
All this should just be pure self written code, not JQuery or something like that.
If you want your forms to submit without reloading, you should use AJAX.
E.g. Almost all of the chat boxes in the websites use AJAX to submit information.
I think this question will help you.
If you want to use AJAX with PHP you can simply make AJAX to call your PHP file for submitting information.
Look at this page to learn more.
If you want to use AJAX without any library you can do that with XMLHttpRequest. more info

Google Chrome autocomplete not working

I get the autocomplete suggestions when I type, but when I select the value it doesn't populate the field.
Here is a GIF to illustrate the issue.
https://media.giphy.com/media/lzwkRcCKiLafkRcjEE/giphy.gif
Here is another example of it working, then stopping to work:
HTML
<input type="text" name="last-name" autocomplete="last-name" value="MacIsaac">
The form is built with React
According to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete, autocomplete="family-name" should autocomplete to the last name.
So the end result should be: <input type="text" name="last-name" autocomplete="family-name" value="MacIsaac">
Ensure your inputs are wrapped in a form element and autocomplete will work.

Submitting a dynamically generated form

I'm creating a website, and I have a form that gets created by Django. Once the page is loaded, the user can add text inputs to the form by clicking a button. The problem is that when the submit button is clicked, only the text inputs that were originally created by Django get submitted. In other words, the extra text inputs that were added dynamically don't get submitted.
I'm guessing that this is due to the fact that the submit button is only "aware" of form elements that were present when the page was loaded, and not dynamically loaded elements. With that in mind, I'm guessing I need to use some kind of Javascript in order to submit all of the form elements, including the dynamically added ones, but I can't figure out how to do it.
I've tried the jQuery submit function, but I don't really know what I'm supposed to do with it. Any tips would be appreciated!
EDIT: Here's a code snippet, which shows what the HTML looks like after 2 more text inputs have been added dynamically to the "origin"
<table>
<form class="dataInput" action="/foner/116" method="post">
<input type='hidden' name='csrfmiddlewaretoken' value='YYuqTzXUVosu1s2HD3zS00DpoPwQ7N0k' />
<tbody class="origin">
<tr>
<th>
<label>Origin:</label>
</th>
<td>
<input id="id_Origin-0" maxlength="200" name="Origin-0" type="text" value="A native of Georgia" /> // PRESENT AT PAGE LOAD
</td>
<td>
<button class="adder origin">+</button> // USER CLICKS THIS TO APPEND MORE TEXT INPUTS TO THE FORM
</td>
</tr>
<tr>
<th>
</th>
<td>
<input type="text" value="" maxlength="200" name="origin[]"></input> // DYNAMICALLY ADDED
</td>
</tr>
<tr>
<th>
</th>
<td>
<input type="text" value="" maxlength="200" name="origin[]"></input> // DYNAMICALLY ADDED
</td>
</tr>
</tbody>
<tr>
<th>
<label>Notes:</label>
</th>
<td>
<input class="submitButton" type="submit" value="S" />
</td>
</tr>
</form>
</table>
Ok, I was able to solve the problem. I had a table that was arranging all of the text inputs for the form, and the table also enclosed the form itself. It turns out that by inverting this, and enclosing the table inside of the form, all of the dynamically generated inputs get POSTed successfully. Thanks again to those who gave input in the comments above -- it's always helpful to get other opinions & perspectives.
So my question is (I know you're not supposed to ask questions in answers, but in case anyone feels like responding...): How was I supposed to know this? If you're using a compiled language, this is something that a compiler would probably catch for you. Is it just the kind of thing that you get the hang of with experience? Are there any books that would help me to get a handle on elementary problems like this? I find web development to be very tedious and frustrating because I often get hung up for long periods of time on trivial errors like this, and I'm assuming it doesn't have to be this way; I just don't quite know how to improve.

jQuery JSON Form is only sending Pre-Poluated Values

I have a form. I have pre-populated the values using JSON/Web Service.
Ex:
<tr id="">
<td class="tleft">
<label for="nickname" class="fieldLabel"><span class="ui-small-text">Nick Name:</span></label>
</td class="tright">
<td class="tright">
<input name="nickname" type="text" class="nickname" />
</td>
</tr>
Populated Using:
$(".nickname").val(person.nickname);
I am sending the form back to another URL using JSON. I verified that works by using a hidden field that isnt populated to see if its updating, but for some reason, all fields being populated, when changed on the screen, still send the same values they were populated with.
Full Code: http://pastebin.com/F3dt8ncC
Thank You.

Text within password box

I current have a login box with the text ID and PASSWORD displayed inside the textbox. When a user clicks on it, it disappears and allows the user to type in their password. However, I set textmode of the Password text box to "PASSWORD" and it seems to not be working for the password box anymore. Anyone have any clues?
HTML
<input name="Login1$UserName" type="text" value="NUID" id="Login1_UserName" class="txtbox" onfocus="if(this.value==this.defaultValue) {this.value='';$(this).css('color','black');}" onblur="if(this.value=='') {this.value=this.defaultValue;$(this).css('color','rgb(173,180,195)');}" style="width:240px;" />
<span id="Login1_UserNameRequired" title="User Name is required." style="color:#DA6426;visibility:hidden;">*</span>
</td>
</tr>
<tr>
<td>
<input name="Login1$Password" type="password" id="Login1_Password" style="width:240px;" />
<span id="Login1_PasswordRequired" title="Password is required." style="color:#DA6426;visibility:hidden;">*</span>
</td>
</tr>
<tr>
<td align="center" style="color:#DA6426;">
</td>
</tr>
<tr>
<td align="right">
<input type="submit" name="Login1$LoginButton" value="Log In" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("Login1$LoginButton", "", true, "Login1", "", false, false))" id="Login1_LoginButton" style="font-family:Arial;height:22px;" />
This can be done using the onfocus and onblur events in javascript and changing the type attribute of the input element. I have, however, run into issues on some browsers not changing the field back to a password input. Here's an article that does it with asp.net controls complete with validators.
http://planetofcoders.com/watermark-property-password-textbox-web-page/
Not very familiar with asp, but with javascript you cannot change the type of an input (for security reasons); if you want the effect of having visible text in the password input, you have to physically hide the password and display another input that swaps onfocus.
EDIT:
Here is a link to the password swapping function I created a while back that is part of my js library. For anyone else looking I realize that it does not use jQuery, but I created before I used jQuery and haven't had time or reason to update it.
http://jsfiddle.net/thundercracker/DXLe3/1/
EDIT:
I am pretty sure it is completely self contained. Just need to call it on window.onload with the IDs of the two inputs.
Also need the eventListener function at the bottom with it as well.

Categories

Resources