I had Automated Data entry in a web page using VBA but there is a field which is hidden its only pop up if you select date more than 1 month old. While i am entering the date using VBA to it its not showing hidden field but when i am manually entering the same date its showing the hidden field where i need to mentioned the some reason.
My VBA Code
IE.document.getelementbyid("ctl00_ContentPlaceHolder1_txtInvoicedt").Value = Sheet5.Range("B13").Value
Web Page Code
<td>Invoice Date</td>
<td><input name="ctl00$ContentPlaceHolder1$txtInvoicedt" type="text"
id="ctl00_ContentPlaceHolder1_txtInvoicedt" autocomplete="off"
onblur="lostClr(this);if(this.value!=''){return
checkDt(this,'invdt');}" onchange="check_idate()" onkeypress="return
false;" style="width:100px;">
<span id="ctl00_ContentPlaceHolder1_lbldelay_reason" style="visibility:
hidden;">Delay Reason :</span>
<input name="ctl00$ContentPlaceHolder1$txtdelay_reason" type="text"
id="ctl00_ContentPlaceHolder1_txtdelay_reason" style="visibility: hidden;">
<span id="ctl00_ContentPlaceHolder1_lblreason" style="color: red; visibility:
hidden;">*Min 15 chars</span>
<input name="ctl00$ContentPlaceHolder1$btndelay_attach" type="button"
id="ctl00_ContentPlaceHolder1_btndelay_attach" class="button_1" style="border-style: none;
width: 350px; visibility: hidden;" value="Attach/Upload CGM's Approval"
onclick="return openDelay_approval()">
<input type="hidden" name="ctl00$ContentPlaceHolder1$hdndelay_attach"
id="ctl00_ContentPlaceHolder1_hdndelay_attach">
<input type="hidden" name="ctl00$ContentPlaceHolder1$hdndelay_attach_id"
id="ctl00_ContentPlaceHolder1_hdndelay_attach_id">
Before Selection of Date:
After Selection of Date:
Is the showing hidden field function in the onblur event of the first input? If so, you can use fireEvent to fire the onblur event. You could refer to my sample below.
Sample VBA code:
Sub LOADIE()
Set ieA = CreateObject("InternetExplorer.Application")
ieA.Visible = True
ieA.navigate "https://www.example.html"
Do Until ieA.readyState = 4
DoEvents
Loop
Set doc = ieA.Document
doc.getElementById("ctl00_ContentPlaceHolder1_txtInvoicedt").Value = 11
doc.getElementById("ctl00_ContentPlaceHolder1_txtInvoicedt").fireEvent ("onblur")
End Sub
Sample HTML page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>Invoice Date</div>
<input name="ctl00$ContentPlaceHolder1$txtInvoicedt" type="text"
id="ctl00_ContentPlaceHolder1_txtInvoicedt" autocomplete="off"
onblur="check_date()" onkeypress="return false;" style="width:100px;">
<span id="ctl00_ContentPlaceHolder1_lbldelay_reason" style="visibility: hidden;">Delay Reason:</span>
<input name="ctl00$ContentPlaceHolder1$txtdelay_reason" type="text"
id="ctl00_ContentPlaceHolder1_txtdelay_reason" style="visibility: hidden;">
<script>
function check_date() {
var a = document.getElementById("ctl00_ContentPlaceHolder1_txtInvoicedt").value;
if (a >= 10) {
document.getElementById("ctl00_ContentPlaceHolder1_lbldelay_reason").style.visibility = "visible";
document.getElementById("ctl00_ContentPlaceHolder1_txtdelay_reason").style.visibility = "visible";
}
else {
document.getElementById("ctl00_ContentPlaceHolder1_lbldelay_reason").style.visibility = "hidden";
document.getElementById("ctl00_ContentPlaceHolder1_txtdelay_reason").style.visibility = "hidden";
}
}
</script>
</body>
</html>
Related
I'm trying to filter some results I will get from an api using Semantic UI's dropdown search component.
The issue is that I don't know how to get the text I'm typing in the input field
The dropdown search I have:
<div class="ui fluid search selection dropdown" id="user-dropdown">
<input id="user-dropdown-input" name="country" type="hidden">
<i class="dropdown icon"></i>
<div class="default text">Search...</div>
<div class="menu" id="user-dropdown-menu">
<div class="item" data-value="af">
<span class="description">123</span>
<span class="text">User123</span>
</div>
<div class="item" data-value="af">
<span class="description">123</span>
<span class="text">User123</span>
</div>
<div class="item" data-value="af">
<span class="description">123</span>
<span class="text">User123</span>
</div>
</div>
</div>
How dropdown is initialized:
$(document).ready(function () {
$('.ui.dropdown').dropdown({
clearable: true,
fullTextSearch: true
});
});
What I tried:
$('#user-dropdown').on('keyup', function () {
let input = $('#user-dropdown');
console.log('Val: ' + input.dropdown().val());
// also tried: $('#user-dropdown-input').val()
// $('#user-dropdown-input').html()
// $('#user-dropdown-input').text()
});
Basically what I want is if I type "abc" to print the value "abc" into the console, but I don't know how to get that value.
what worked for me was searching the input used for search that looks like:
<input class="search" autocomplete="off" tabindex="0">
and I added a type to this input
document.getElementsByClassName('search').type = 'text';
and then got the value by class on keyup
$('.search').keyup(function() {
console.log($(this).val());
});
I need to make my button click to reveal the textarea so the user can choose between uploading either an image or a text message. I can see the hidden/visible element kicking in when I run the page but it doesn't remain in the new state. It immediately reverts back to whatever it was originally set as.
I'm guessing that I'm not escaping the script properly. Any thoughts?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Site Media</title>
</head>
<header id="headtitle">
</header>
<body>
<div id="PostContainer"><br>
<textarea id="textmessage" rows="7" cols="40" maxlength="280" placeholder="Enter message here..." width="100%" style="visibility: hidden"></textarea><br>
<form class="UploadButtonContainer">
<button id="textbutton" type="submit" name="submit" onclick="revealinput()" style="display: none;"></button>
<label for="textbutton" style="cursor: pointer;" ><img src="Images/AYE PING.png" width="30%" alt="Choose Text Post" >
</label>
</form>
<script>
function revealinput() {
var x = document.getElementById("textmessage");
if (x.style.visibility === "hidden") {
x.style.visibility = "visible";
} else {
x.style.visibility = "hidden";
}
}
</script>
</div>
</body>
</html>
The script didn't like the button being inside a tag. I changed it to a tag and it works now.
I'm trying to get filtered data from a webform more quickly. Basically I want to use URL input to specify a date and to precheck a checkbox. I'm getting stuck with how to specify the check box as I'm not sure what the value should be.
<form action="/xxx/yyy" class="form-inline d-flex justify-content-end" method="get"> <div class="input-group input-group-lg mb-2">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-calendar"></i></span>
</div>
<input type="text" name="from" value="" class="form-control datetimepicker-input" id="datetimepicker7" data-toggle="datetimepicker" data-target="#datetimepicker7" autocomplete="false">
<div class="input-group-append">
<button type="submit" class="btn btn-dark"><i class="fas fa-arrow-right"></i></button>
</div>
</div>
</form>
####snip and skip to the part of the form I wish to pre-check####
<fieldset id="departureGatewayFilters">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="AMS" id="departureGatewayCheck_AMS">
<label class="form-check-label" for="departureGatewayCheck_AMS">
AMS
</label>
</div>
So far I'm using URL string: /xxx/yyy?from=2020-03-05 - what would I need next to pre-check the checkbox as well?
Thanks in advance!
Clare
Getting your checkbox checked and also getting value of the checkbox just through URL string is little bit troublesome. But you can try this :
You can assign unique name to the checkbox.
<input class="form-check-input" type="checkbox" name="checkbox_1" id="departureGatewayCheck_AMS">
And then what you can do is pass the value of checkbox through URL string. For example :
/xxx/yyy?from=2020-03-05&checkbox_1=test.
Now, using javascript you can parse URL strings and get your search params, compare it and get your checkbox checked.
<script lang="javascript">
var url_string = window.location.href ; //gets current URL
var url = new URL(url_string); // instantiate string as URL object
var c = url.searchParams.get("checkbox_1"); //get the params
if(c == "test") {
document.getElementById("departureGatewayCheck_AMS").checked = true; //checks your checkbox
}
</script>
Hope it helps ! Have a good day!
I think all you need to do is add a (checked="true") argument to your input tag your code should look like this then:
<div class="form-check">
<input class="form-check-input" checked="true" type="checkbox" value="AMS" id="departureGatewayCheck_AMS">
<label class="form-check-label" for="departureGatewayCheck_AMS">
AMS
</label>
</div>
Hope this helps
If you want to make the checkbox departureGatewayCheck_AMS checked by default, it is sufficient to edit its code like this:
<input class="form-check-input" type="checkbox" value="AMS" name="departureGatewayCheck_AMS" id="departureGatewayCheck_AMS" checked> AMS
If the checkbox is selected, since its "value" attribute is "AMS",your url (if you submit the form via GET) would be something like:
/xxx/yyy?from=2020-03-05&departureGatewayCheck_AMS=AMS
Complete solution for your requirement:-
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" integrity="sha256-yMjaV542P+q1RnH6XByCPDfUFhmOafWbeLPmqKh11zo=" crossorigin="anonymous" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
<div class="container">
<form class="form-inline d-flex justify-content-end" method="get"> <div class="input-group input-group-lg mb-2">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-calendar"></i></span>
</div>
<input type="text" name="from" value="" class="form-control datetimepicker-input" id="datetimepicker7" autocomplete="false">
<div class="input-group-append">
<button type="submit" class="btn btn-dark"><i class="fas fa-arrow-right"></i>
</button>
</div>
</div>
<fieldset id="departureGatewayFilters">
<div class="form-check">
<input class="form-check-input" name="checkname" type="checkbox" value="AMS" id="departureGatewayCheck_AMS">
<label class="form-check-label" for="departureGatewayCheck_AMS">
AMS
</label>
</div>
</fieldset>
</form>
</div>
</body>
<script type="text/javascript">
$(function () {
var url_string = "https://www.example.com/page?from=2020-12-12&checkname=1";//window.location.href ; //gets current URL
var url = new URL(url_string); // instantiate string as URL object
var date=url.searchParams.get("from");
var check = url.searchParams.get("checkname"); //get the params
alert(date);
alert(check);
if(check) {
$( "#departureGatewayCheck_AMS" ).prop( "checked", true );
}
$('.datetimepicker-input').datetimepicker({
format: 'YYYY-MM-DD',
defaultDate: date,
});
});
</script>
I have a problem with the input text on onsen alert dialog
when I click OK button dialog not hide
how to get password value from dialog input tag
<ons-button modifier="tappable" onclick="
ons.createAlertDialog('alert.html').then(function(alertDialog) {
alertDialog.show();
});
"
>Test2</ons-button>
<script type="text/ons-template" id="alert.html">
<ons-alert-dialog animation="default" cancelable>
<div class="alert-dialog-title">Warning!</div>
<div class="alert-dialog-content">
<input id="password" ng-model="password" class="text-input " type="number"
pattern="[0-9]*" inputmode="numeric" placeholder="password" value="" autofocus>
</div>
<div class="alert-dialog-footer">
<button class="alert-dialog-button" onclick="alertDialog.hide()">OK</button>
</div>
</ons-alert-dialog>
</script>
You will need to add your data to a global variable or push it to the factory as it appears you are using Angular.
Also, you need to register your dialogue to a controller / variable as well so you can close it. The demo on the tutorial site is for vanilla right now, but the concept is the same.
Here is how this works: http://tutorial.onsen.io/?framework=vanilla&category=Reference&module=dialog
JS:
var showDialog = function(id) {
document
.getElementById(id)
.show();
};
var hideDialog = function(id) {
document
.getElementById(id)
.hide();
};
var fromTemplate = function() {
var dialog = document.getElementById('dialog-3');
if (dialog) {
dialog.show();
}
else {
ons.createDialog('dialog.html')
.then(function(dialog) {
dialog.show();
});
}
};
Markup:
<ons-page>
<ons-toolbar>
<div class="center">Dialogs</div>
</ons-toolbar>
<ons-list>
<ons-list-header>Showing dialogs</ons-list-header>
<ons-list-item tappable onclick="showDialog('dialog-1')">Simple dialog</ons-list-item>
<ons-list-item tappable onclick="showDialog('dialog-2')">Alert dialog</ons-list-item>
<ons-list-item tappable onclick="fromTemplate()">From template</ons-list-item>
<ons-list-header>Notifications</ons-list-header>
<ons-list-item tappable onclick="ons.notification.alert('Hello, world')">Alert</ons-list-item>
<ons-list-item tappable onclick="ons.notification.confirm({message: 'Are you ready?'})">Confirmation</ons-list-item>
<ons-list-item tappable onclick="ons.notification.prompt({message: 'What is your name?'})">Prompt</ons-list-item>
</ons-list>
</ons-page>
<ons-dialog id="dialog-1">
<div style="text-align: center; padding: 10px;">
<p>
This is a dialog.
<p>
<p>
<ons-button onclick="hideDialog('dialog-1')">Close</ons-button>
</p>
</div>
</ons-dialog>
<ons-alert-dialog id="dialog-2">
<div class="alert-dialog-title">Warning!</div>
<div class="alert-dialog-content">
An error has occurred!
</div>
<div class="alert-dialog-footer">
<button class="alert-dialog-button" onclick="hideDialog('dialog-2')">Cancel</button>
<button class="alert-dialog-button" onclick="hideDialog('dialog-2')">OK</button>
</div>
</ons-alert-dialog>
<ons-template id="dialog.html">
<ons-dialog id="dialog-3">
<div style="text-align: center; padding: 10px;">
<p>
This dialog was created from a template.
<p>
<p>
<ons-button onclick="hideDialog('dialog-3')">Close</ons-button>
</p>
</div>
</ons-dialog>
</ons-template>
I'm trying example from this site. It works fine. But if i separate views,models,routers into separate file it gives me a problem. There is 3 views. WineList view, WineListItemView and winedetails view. WineList view takes collection of wine models as model and winelistItem and winedetails view takes wine as a model.
Router's code is like this
var app = app || {};
app.AppRouter = Backbone.Router.extend({
routes:{
"":"list",
"wines/:id":"wineDetails"
},
initialize:function () {
$('#header').html(new app.HeaderView().render().el);
},
list:function () {
this.wineList = new app.WineCollection();
this.wineListView = new app.WineListView({model:this.wineList});
this.wineList.fetch();
$('#sidebar').html(this.wineListView.render().el);
},
wineDetails:function (id) {
if(this.wineList == undefined)
{
this.wineList = new app.WineCollection();
this.wineListView = new app.WineListView({model:this.wineList});
this.wineList.fetch();
$('#sidebar').html(this.wineListView.render().el);
}
this.wine = this.wineList.get(id);
if (app.router.wineView) app.router.wineView.close();
this.wineView = new app.WineView({model:this.wine});
$('#content').html(this.wineView.render().el);
}
});
On page load it fetches models from server and displays list of wines in sidebar div of page. When i click on particular wine item its details will be displayed in content div of page. That all works fine. But when i reload that page which now contains details of particular,wine model of Winedetails view gives undefined .
I'm intializing the router on main page like this
app.js
var app = app || {};
$(function() {
})
app.router = new app.AppRouter();
Backbone.history.start();
index.html
<!DOCTYPE HTML>
<html>
<head>
<title>Backbone Cellar</title>
<link rel="stylesheet" href="../css/styles.css" />
</head>
<body>
<div id="header"><span class="title">Backbone Cellar</span></div>
<div id="sidebar"></div>
<div id="content">
<h2>Welcome to Backbone Cellar</h2>
<p>
This is a sample application part of of three-part tutorial showing how to build a CRUD application with Backbone.js.
</p>
</div>
<div>
Next page
</div>
<!-- Templates -->
<script type="text/template" id="tpl-header">
<span class="title">Backbone Cellar</span>
<button class="new">New Wine</button>
</script>
<script type="text/template" id="tpl-wine-list-item">
<a href='#wines/<%= id %>'><%= name %></a>
</script>
<script type="text/template" id="tpl-wine-details">
<div class="form-left-col">
<label>Id:</label>
<input type="text" id="wineId" name="id" value="<%= id %>" disabled />
<label>Name:</label>
<input type="text" id="name" name="name" value="<%= name %>" required/>
<label>Grapes:</label>
<input type="text" id="grapes" name="grapes" value="<%= grapes %>"/>
<label>Country:</label>
<input type="text" id="country" name="country" value="<%= country %>"/>
<label>Region:</label>
<input type="text" id="region" name="region" value="<%= region %>"/>
<label>Year:</label>
<input type="text" id="year" name="year" value="<%= year %>"/>
<button class="save">Save</button>
<button class="delete">Delete</button>
</div>
<div class="form-right-col">
<img height="300" src="../pics/<%= picture %>"/>
<label>Notes:</label>
<textarea id="description" name="description"><%= description %></textarea>
</div>
</script>
<!-- JavaScript -->
<script src="js/lib/jquery.min.js"></script>
<script src="js/lib/underscore.js"></script>
<script src="js/lib/backbone.js"></script>
<script src="js/models/WineModel.js"></script>
<script src="js/collections/WineListCollection.js"></script>
<script src="js/Views/WineListView.js"></script>
<script src="js/Views/WineListItemView.js"></script>
<script src="js/Views/WineDetailsView.js"></script>
<script src="js/Views/HeaderView.js"></script>
<script src="js/routers/routers.js"></script>
<script src="js/app.js"></script>
</body>
</html>
I'm new to this backbone technology. please tell me what am i missing
this.wineList.fetch();
fires an asynchronous request to your server, which means that the content will arrive (or not) at some point after executing this line, but your application execution continues whether the response arrived or not. On page reload (assume you have wines/:id in the URL) first you have to fetch the complete list of wines before accessing any particular wine from the collection.
You have to wait until is download the collection, and access the wine with id, after this request is finished.
So after initiating the request continue your application logic in the success callback:
this.wineList.fetch({
success: function(model) {
...
this.wine = model.get(id);
...
}
});