So I have an input and dataList:
<div id="namearea">
<h2>City Name:</h2>
<div>
<input id="citiesinput" list="cities">
<datalist id="cities"></datalist>
<button id="search">
Search
</button>
<span class="loading" id="loadingnames">
<img src="/gif" alt="icon" />
Loading...
</span>
</div>
</div>
I have already used JS to fill the dataList with options.
What I want to do is display the loading gif from when i start typing in the input until I have chosen an option or pressed the search button
current JS:
var cityArray;
window.onload = function() {
processCities();
document.getElementById("search").onclick = findWeather;
document.getElementById("citiesinput").addEventListener("onkeypress", showLoad);
};
function showLoad () {
var input = document.getElementById("citiesinput").value;
if(input !== "" || cityArray.indexOf(input) == -1) {
document.getElementById("loadingnames").style.display = "block";
}
}
I have put a fiddle together for you here. I use the keyup event because the keypress event is called before the first key is registered in the input value.
input.addEventListener('keyup', function(){
loading.style.display = input.value.length ? 'block' : 'none';
});
You must also remember to remove the loader if the condition is not met.
Use opacity instead of display. Reason being when you set the display to inline-block, you will find your parent div "glitching" its height to adjust its content to the image div
Use keyup event after you press a key, it will trigger the function
var cityArray;
cityArray = ["city1", "city2"]
function findWeather() {
}
window.onload = function() {
//processCities();
//document.getElementById("search").onclick = findWeather;
document.getElementById("citiesinput").addEventListener("keyup", showLoad);
document.getElementById("search").addEventListener("click", showLoad);
};
function showLoad() {
var input = document.getElementById("citiesinput").value.trim();
if (input == "") {
document.getElementById("loadingnames").style.opacity = "0";
return
}
if (cityArray.indexOf(input) == -1) {
document.getElementById("loadingnames").style.opacity = "1";
} else {
document.getElementById("loadingnames").style.opacity = "0";
}
}
<div id="namearea">
<h2>City Name:</h2>
<div>
<input id="citiesinput" list="cities">
<datalist id="cities"></datalist>
<button id="search">
Search
</button>
<span class="loading" id="loadingnames" style="opacity:0;">
<img src="http://bestwallpaperhd.com/wp-content/uploads/2012/12/animated-wallpaper-gif.gif" alt="icon " id="city_img " style="width:50px;height:50px;"/>Loading...
</span>
</div>
</div>
Related
when I onclick the radio,
how can display or hidden the div?
because I writing this code, it cannot work.
<div class="col-12 gap-24"><div class="row"><span class="col-2"><input class="" type="radio" name="payway" value="5" οnclick="myFunction();">Store</span></div></div>
</div>
<script>
function myFunction() {
var check_pick = document.getElementById("check_pick");
var check_pick1 = document.getElementById("check_pick1");
if (check_pick.style.display === "none") {
check_pick.style.display = "block";
} else {
check_pick.style.display = "none";
}
if (check_pick1.style.display === "none") {
check_pick1.style.display = "block";
} else {
check_pick1.style.display = "none";
}
}
</script>
<label class="h4" name="check_pick" id="check_pick">Pick up method</label>
<div class="row_4 border" name="check_pick1" id="check_pick1">
set up your listener after window has loaded
window.onload = function() {
/* you can assign a listener like this:
var radio = document.getElementById('radio');
radio.onclick = myFunction;
or like this: */
document.getElementById("radio").addEventListener("click", myFunction);
var check_pick = document.getElementById("check_pick");
check_pick.style.display='none'
var check_pick1 = document.getElementById("check_pick1");
check_pick1.style.display='none'
}
function myFunction() {
var check_pick = document.getElementById("check_pick");
var radio = document.getElementById("radio");
var check_pick1 = document.getElementById("check_pick1");
if (check_pick.style.display === "none") {
check_pick.style.display = "block";
} else {
check_pick.style.display = "none";
radio.checked = false
}
if (check_pick1.style.display === "none") {
check_pick1.style.display = "block";
} else {
check_pick1.style.display = "none";
}
}
#check_pick,#check_pick1{
display:none;}
<div class="col-12 gap-24">
<div class="row">
<input id='radio' type="radio" name="payway" value="5" />Store
</div>
</div>
<label class="h4" name="check_pick" id="check_pick">Pick up method</label>
<div class="row_4 border" name="check_pick1" id="check_pick1">xxx</div>
The really nasty problem with the posted code is the presence of the greek letter ο, namely a greek omicron character in lower case, in the attribute value οnclick="myFunction(). This stops the onclick attribute being recognized without generating an error:
console.log(
'οnclick="myFunction();"' === 'onclick="myFunction();"'
);
console.log("0x0" + 'οnclick="myFunction();"'.charCodeAt(0).toString(16));
You may wish to investigate where the omicron came from. Hopefully it was caused by selecting the wrong keyboard language when originally typed in.
I'm working on a short quiz game, and I cant seem to figure out how/what event listener would be suitable for detecting a specific string on the textbox. Here's what I have so far (which only works if the "else if" part is taken out- without detecting the specific string)
HTML:
<div id="ques1" class="ques">
<img src="img/img1.png" alt="">
<div id="btncontainer" class="btncontainer">
<input id="txtbox" placeholder="Type here"/>
<button id="go1" class="gobttn"><i>NEXT<i></button>
</div>
</div>
<div id="ques2" class="ques">
<img src="img/img2.png" alt="">
</div>
JS:
var s2 = document.getElementById('ques1')
var s3 = document.getElementById('ques2')
var b1 = document.getElementById('landbtn')
var b2 = document.getElementById('go1')
var tbox = document.getElementById('txtbox')
function Quest1To2() {
s2.style.display = 'none';
s3.style.display = 'block';
}
b2.addEventListener('click', Quest1To2)
function TxtErr() {
tbox.style.outline = '0.2em solid red';
}
b2.addEventListener('click', TxtErr)
var a1 = "NEO";
var answer = txtbox.value
if (answer == a1) {
Quest1To2();
}
else if () {
TxtErr();
}
You can use input event to dispatch an event when input occurs at tbox.
tbox.oninput = function(e) {
if (e.target.value == a1) {
Quest1To2();
}
else {
TxtErr();
}
}
On https://bm-translations.de/#kontakt I've got a form with a submit button, that is replaced with a loading gif, when clicked.
The problem is: if one of the required fields isnt set, the form does not submit but the loading gif appears and doesnt disappear. How to say only appear if all required fields are set?
This is the HTML:
<div id="formsubmitbutton">
<input type="submit" name="submitter" value="Submit Button" onclick="ButtonClicked()">
</div>
<div id="buttonreplacement" style="margin-left:30px; display:none;">
<img src="./bilder/preload.gif" alt="loading...">
</div>
This is the JS:
function ButtonClicked()
{
document.getElementById("formsubmitbutton").style.display = "none"; // to undisplay
document.getElementById("buttonreplacement").style.display = ""; // to display
return true;
}
var FirstLoading = true;
function RestoreSubmitButton()
{
if( FirstLoading )
{
FirstLoading = false;
return;
}
document.getElementById("formsubmitbutton").style.display = ""; // to display
document.getElementById("buttonreplacement").style.display = "none"; // to undisplay
}
// To disable restoring submit button, disable or delete next line.
document.onfocus = RestoreSubmitButton;
Here you go with a solution https://jsfiddle.net/z7wfj880/2/
ButtonClicked = function(){
var validate = true;
$('input:required').each(function(){
if($(this).val().trim() === ''){
validate = false;
}
});
if(validate) {
document.getElementById("formsubmitbutton").style.display = "none"; // to undisplay
document.getElementById("buttonreplacement").style.display = ""; // to display
return true;
}
}
var FirstLoading = true;
function RestoreSubmitButton()
{
if( FirstLoading )
{
FirstLoading = false;
return;
}
document.getElementById("formsubmitbutton").style.display = ""; // to display
document.getElementById("buttonreplacement").style.display = "none"; // to undisplay
}
// To disable restoring submit button, disable or delete next line.
document.onfocus = RestoreSubmitButton;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="First Name" required/>
<input type="text" placeholder="Middle Name"/>
<input type="text" placeholder="Last Name" required/>
<div id="formsubmitbutton">
<input type="submit" name="submitter" value="Submit Button" onclick="ButtonClicked()">
</div>
<div id="buttonreplacement" style="margin-left:30px; display:none;">
<img src="./bilder/preload.gif" alt="loading...">
</div>
First of all do a trim of required input field, so that if any user provide spaces it will remove the extra spaces in front & end.
Loop through all the required input & check for empty input.
You can create a modular function to display and hide the loader.
Now when you click the submit button, you can check for your form validation and toggle the loader easily. I have hardcoded the false, but you can check for the appropriate validation.
function displayLoading(form, loader) {
document.getElementById("formsubmitbutton").style.display = form; // to undisplay
document.getElementById("buttonreplacement").style.display = loader; // to display
}
function ButtonClicked()
{
if(false) { // form in valid
displayLoading('none', '');
} else {
displayLoading('', 'none');
}
}
var FirstLoading = true;
function RestoreSubmitButton()
{
if( FirstLoading )
{
FirstLoading = false;
return;
}
document.getElementById("formsubmitbutton").style.display = ""; // to display
document.getElementById("buttonreplacement").style.display = "none"; // to undisplay
}
// To disable restoring submit button, disable or delete next line.
document.onfocus = RestoreSubmitButton;
<div id="formsubmitbutton">
<input type="submit" name="submitter" value="Submit Button" onclick="ButtonClicked()">
</div>
<div id="buttonreplacement" style="margin-left:30px; display:none;">
<img src="http://gph.is/1cYmtb9" alt="loading...">
</div>
Check for validation of required fields.
If all fields are set then only call buttonreplacement.
For Eg: If you have fields field1 and field2.
f1 = document.getElementById("id_field1").value;
f2 = document.getElementById("id_field2").value;
if (f1!=null || f1!=undefined || f1!="" || f2!=null || f2!=undefined || f2!=""){
document.getElementById("buttonreplacement").style.display = "none";
}
else{
document.getElementById("buttonreplacement").style.display = "block";
}
You can always improve your code using Jquery.
I want to check if an input (name="companyname") has a value and if so, it should check a radio button (id="Zakelijk"). If it does not have any value, it should check the other radio button (id="Particulier").
See my current code:
<script type="text/javascript">
function ShowHideDiv() {
var chkYes = document.getElementById("Zakelijk");
var dvPassport1 = document.getElementById("checkzakelijk");
var dvPassport2 = document.getElementById("checkzakelijk1");
var dvPassport3 = document.getElementById("checkzakelijk2");
var display = chkYes.checked ? "block" : "none";
dvPassport1.style.display = display;
dvPassport2.style.display = display;
dvPassport3.style.display = display;
}
</script>
<div class="col-md-12 check-business">
<div class="form-group form-group-xl">
<label for="Particulier"><input type="radio" id="Particulier"checked="checked" name="checkzakelijk" onclick="ShowHideDiv()" />Particulier</label>
<label for="Zakelijk"><input type="radio" id="Zakelijk" name="checkzakelijk" onclick="ShowHideDiv()" />Bedrijf</label>
</div>
</div>
<div class="col-md-12" id="checkzakelijk" style="display:none;">
<div class="form-group">
<label for="inputCompanyName" class="control-label">{$LANG.clientareacompanyname}</label>
<input type="text" name="companyname" id="inputCompanyName" value="{$clientcompanyname}"{if in_array('companyname', $uneditablefields)} disabled="disabled"{/if} class="form-control" />
</div>
</div>
There are other ways, but this should get you going:
$(function() {
if (($("#inputCompanyName").val() || "") != "")
{
$("#Zakelijk").prop("checked", true)
} else {
$("#Particulier").prop("checked", true)
}
});
This is based on your html where the input name='companyname' also has id 'inputCompanyName' and will clear the other radio because they have the same name=
Edit Working jsfiddle: https://jsfiddle.net/76x42os0/4
change input value in the code box (top left) and click run.
Update: Updated the fiddle to the indicated jquery version 3.1.0 and found the newer version of jquery needs id= to match #, while before it matched on name=
If you want to check it when the input is changed you can do
$("input[name='companyname']").change(function(){
var hasValue = $(this).val() === "";
$("#Zakelijk").prop("checked", hasValue);
$("#Particulier").prop("checked", !hasValue);
})
you can optimize the code, but this is more readable.
In case you need the solution in Javascript
if(document.getElementById("inputCompanyName").value !== ""){
document.getElementById("Zakelijk").checked = true;
document.getElementById("Particulier").checked = false;
}
else{
document.getElementById("Particulier").checked = true;
document.getElementById("Zakelijk").checked = false;
}
Here's a working example of what you're after (albeit without your HTML ids/layout in mind, but you can simply change the IDs within).
$("#text-box").on('change', function(){
if($(this).val() != ""){
$('#rd1').prop("checked", true)
}else{
$('#rd2').prop("checked", true)
}
});
https://jsfiddle.net/bm18hmLa/3/
It hooks into the changed event, so it would occur every time the text-box value has been changed.
After thought:
Changing
$("#text-box").on('change', function(){
to
$("#text-box").on('input', function(){
makes it a little "nicer" in terms of responsiveness.
https://jsfiddle.net/bm18hmLa/5/
and here's a version with your ID names too.
https://jsfiddle.net/bm18hmLa/6/
I'm very new to javascript. I read this link and tried to customize it but it is not working: Disable an input field if second input field is filled
I want to allow people to toggle between two options-city and zipcode. I want to enable whatever field they chose last and disable the other. For example, if they are on the zipcode tab and press the submit button, whatever input it is in the zipcode gets submitted and not the city & vice versa.
The html is:
<ul class="tabs">
<li><a class="border-radius top med" href="#city">City</a></li>
<li><a class="border-radius top med" href="#zipcode">Zipcode</a></li>
</ul>
<div id="city"><label class="IDX-advancedText">City</label>
<select id="aht-home-city" name="city[]" class="IDX-select " autocomplete="off">
<option value="2115">Austin</option>
<option value="2718">Bartlett</option>
</div>
<div id="zipcode"><label class="IDX-advancedText">Zipcode</label>
<input class="IDX-advancedBox IDX-advWildText" id="IDX-aw_zipcode" type="text"
maxlength="255" name="aw_zipcode" value="" /></div>
The script is:
var dis1 = document.getElementById("city");
dis1.onchange = function () {
if (this.value != "" || this.value.length > 0) {
document.getElementById("zipcode").disabled = true;
}
}
var dis2 = document.getElementById("zipcode");
dis1.onchange = function () {
if (this.value != "" || this.value.length > 0) {
document.getElementById("city").disabled = true;
}
}
Any help is very much appreciated! The website is http://austinhometeam.staging.wpengine.com/joyce-newsletter/
Like I told you in the comment, you need to change the ID in the "getElementById".
I also add the re-enabled the field when the other one is empty.
I add an empty value in the select, when the null is selected, the zip code's field return enable.
HTML
<ul class="tabs">
<li><a class="border-radius top med" href="#city">City</a></li>
<li><a class="border-radius top med" href="#zipcode">Zipcode</a></li>
</ul>
<div id="city"><label class="IDX-advancedText">City</label>
<select id="aht-home-city" name="city[]" class="IDX-select " autocomplete="off">
<option value=""></option>
<option value="2115">Austin</option>
<option value="2718">Bartlett</option>
</select>
</div>
<div id="zipcode"><label class="IDX-advancedText">Zipcode</label>
<input class="IDX-advancedBox IDX-advWildText" id="IDX-aw_zipcode" type="text"
maxlength="255" name="aw_zipcode" value="" /></div>
Javascript :
var dis1 = document.getElementById("aht-home-city");
var dis2 = document.getElementById("IDX-aw_zipcode");
dis1.onchange = function () {
if (dis1.value !== "" || dis1.value.length > 0) {
dis2.disabled = true;
} else {
dis2.disabled = false;
}
};
dis2.onchange = function () {
if (dis2.value !== "" || dis2.value.length > 0) {
dis1.disabled = true;
} else {
dis1.disabled = false;
}
};
There is a working example :
JSBin Example
Looking for something like this behaviour?
var last = "";
var dis1 = document.getElementById("aht-home-city");
dis1.onchange = function () {
last = "city";
document.getElementById("IDX-aw_zipcode").disabled = true;
}
var dis2 = document.getElementById("IDX-aw_zipcode");
dis2.onchange = function () {
last = "zipcode";
if (this.value != "" || this.value.length > 0) {
document.getElementById("aht-home-city").disabled = true;
}
}
Check this jsFiddle
Note: there was also a missing </select> tag in the HTML.