I am trying to click a button in css with no success, the code does not give any error while running but it does not click either.
The button I want to click is here:
<form id="transactionHistoryReportForm" class="report-form">
<div style="clear:both;" class="days-back-buttons">
Edit Columns
<a class="io-button daysBackButton" data-days="1" href="#"><span>Last Day</span></a>
<a class="io-button daysBackButton" data-days="7" href="#"><span>Last 7 Days</span></a>
<a class="io-button daysBackButton active-days" data-days="30" href="#"><span>Last 30 Days</span></a>
<a class="io-button daysBackButton" data-days="180" href="#"><span>Last 180 Days</span></a>
</div>
<!--
<div class="currently-showing">
<span>Currently showing:</span>
<span data-id="currently-showing-value"></span>
</div>
-->
<input type="hidden" class="daysBack" name="daysBack" value="30">
<input type="hidden" class="account" name="account" value="username">
<input type="hidden" class="deviceId" name="deviceId" value="">
</form>
Last 30 days is selected by default. Last 180 days is the button to be clicked. I have tried to run the following code with no success:
Set oElementCollection = IE.document.getElementsByClassName("report-form")
For Each link In oElementCollection
If link.innerHTML = "Last 180 Days" Then
link.Click
Exit For
End If
Next link
However, for another link on the same website this is working perfectly.
The solution was this simple
Set backbutton = IE.document.getElementsByClassName("io-button daysBackButton").Item(Index:=3)
backbutton.Click
Getting elements by class name and pointing to the third item (First is 0, therefore 4-1)
Related
I am using Materialize css to design my post. Suppose I have a form in modal and I and post it to server.
In that form I am checking if all fields are having value.
<form>
<div class="input-field">
<input type="text" id="title" class="validate" required="" aria-required="true">
<label for="title">Title</label>
</div>
The title field is required. But when I click on a submit button in modal it is closing even if title field has empty value. Is there any way to keep the modal open for validation error in Materialize css v1.
Think about this is in separate steps. The form submission only takes place at the end of the chain, when our criteria have been met.
User Submits form
We check the form
We feedback to user
Depending on the results of 2, we may either go back to step 1, or on to step 3.
Modal Structure:
<div id="modal1" class="modal">
<div class="modal-content">
<div class="input-field">
<input type="text" id="title" class="validate" required="" aria-required="true">
<label for="title">Title</label>
<span class="helper-text" data-error="Please enter your name" data-success="Thankyou!"></span>
</div>
</div>
<div class="modal-footer">
<a id="submit-button" href="#!" class="btn">Submit</a>
close
</div>
</div>
We add optional helper-text span for user feedback, as per the documentation.
The Javascript:
document.addEventListener('DOMContentLoaded', function() {
// init modal
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems);
// get button
var button = document.querySelector('#submit-button');
// Run our own function when clicked
button.addEventListener("click", checkForm);
// Function checks for input
function checkForm() {
var input = document.querySelector('#title');
if(input.value) {
// submit form
// add valid class to show helper
input.classList.add('valid');
// close modal
instances[0].close();
// clear form
input.value = '';
// remove valid class
input.classList.remove('valid');
} else {
// prompt user for input
input.classList.add('invalid');
}
}
});
We grab the value of the text input, and based on that, add a valid or invalid class - this is the built in materialize stuff that hides or shows the relevant message that we set in data-error and data-success.
The only thing you need to add to this is the actual form submission - so something like form.submit().
Codepen.
As said, I am trying to dynamically show or hide a Div using *ngIf in Angular 9 based on the value selected from dynamically generated drop down with static options.
I am very new to Angular and I directly jumped to Angular 9. I have been working on a model webapp just to see if I can get the hang of the tech.
I have a page that renders div rows based on the number of JSON objects.
Each row is an accordion in itself and each expanded accordion will in turn have 2-3 rows. In the expanded accordion I have dynamically generated a dropdown on a column.
Based on the drop down selection I need to show/hide a div in the other column on same expanded accordion.
Please do not give me a long route by using a event and a method defined in Typescript, I mean please pour in solutions but I am looking to come through this problem in the HTML page itself.
As of now the webapp has only one JSON object in the name "incidents", this is how iterate them
<div class="card" *ngIf='incidents && incidents.length' >
<div *ngFor = 'let incident of incidents ; let rowIndex = index'>
In the expanded Accordion am trying to achieve this.
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="'fixType' + rowIndex">Type of Fix </label>
<select id="'fixType' + rowIndex" class="form-control">
<option selected>{{incident.TypeOfFix}}</option>
<option value="1">Data Fix</option>
<option value="2">Code Fix</option>
<option value="3">User Education</option>
<option value="4">Work Around</option>
<option value="5">User Creation</option>
<option value="6">Configuration Changes</option>
<option value="7">Document Issue</option>
<option value="8">SP/Script Changes</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="'EstClsDt' + rowIndex">Estimated Closure Date</label>
<div class="input-group">
<input #dp [id]="'EstClsDt' + rowIndex" class="form-control" placeholder="Estimated Closure Date"
[value]="incident.EstimatedClosureDT" [(ngModel)]="model" container="body" ngbDatepicker
#d1="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary calendar" (click)="d1.toggle()" type="button"></button>
</div>
</div>
</div>
</div>
<div class="col-md-4" *ngIf="incident.TypeOfFix == 'Code Fix' || 'fixType' + rowIndex === '2' ">
<div class="form-group">
<label for="'DepDt' + rowIndex">Deployment Date</label>
<div class="input-group">
<input #dp1 [id]="'DepDt' + rowIndex" class="form-control" placeholder="Estimated Closure Date"
[value]="incident.EstimatedClosureDT" [(ngModel)]="model" container="body" ngbDatepicker
#d2="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary calendar" (click)="d2.toggle()" type="button"></button>
</div>
</div>
</div>
</div>
</div>
<div class = "col-md-4" *ngIf = "incident.TypeOfFix == 'Code Fix'">
This line is working and div is hidden/shown based on the value returned from the JSON object but when trying to show/hide the div in the runtime with the help of below line.
I would need the correct version for the below line. There is no particular error thrown but the webapp does not react when I change the value of the drop down and div is neither shown nor hidden during runtime. I searched Online and people os different forums are suggesting to use ngModel or ngModule but if someone can help me with a clear syntax it would be great.
<div class="form-group" *ngIf = "'fixType' + rowIndex == '2' " >
Hope I have detailed enough, Please HELP.
Thanks.
I have validation for 2 fields which are country code and actual mobile number. I have attached screenshot. When correct country code is given and invalid mobile no is given at that time correct tick glyphicon for country code and cross glyphicon comes which overlaps on each other. I need to remove glyphicon for country code by using css or js. Any help will be appreciated.
If you're using jQuery:
let's say you have
<div class="container">
<div class="form">
form content...
</div>
</div>
you would call:
$('.container form .glyphicon').each(function(i){ // your target input id or class should be placed between 'form' and '.glyphicon' eg: $('.container form input[name=state_code] .glyphicon')
if (i!=0) $(this).remove();
});
this way you get rid of the additional Xes appearing when you don't need.
I have found the answer. I have done it by using jQuery.
My actual HTML was as below,
<div class="input-group">
<div class="input-group-addon">+</div>
<input type="tel" maxlength="3" class="form-control pull-left" id="CountryCode" name="CountryCode" placeholder="Code">
<input data-bv-field="Mobile" type="text" id="Mobile" name="Mobile" class="form-control">
</div>
Bootstrap creates glyphicons for correct and wrong below the html as below,
<i class="form-control-feedback bv-no-label bv-icon-input-group glyphicon glyphicon-ok" data-bv-icon-for="CountryCode" style=""></i>
<i class="form-control-feedback bv-no-label bv-icon-input-group glyphicon glyphicon-ok" data-bv-icon-for="Mobile" style=""></i>
So I have added following one line code to remove correct and wrong glyphicons for country code field,
$("#CountryCode").parent().next().removeClass('glyphicon-ok glyphicon-remove');
To hide (but retain the functionality) the ugly default input type file button for file dialog I used the following mechanism:
HTML:
<label for="file-input">
<i class="fa fa-edit"></i> <!-- acts as file input on click-->
</label>
<input type="file" id="file-input" />
CSS:
#file-input {
display: none; //hide the file input
}
This is working expectedly: I click on the font awesome edit icon and the file dialog pops up.
However, when I use a button it stops working. I get no file dialog on clicking the button:
<label for="file-input">
<button type="button">Upload file</button> <!-- not working-->
</label>
<input type="file" id="file-input" />
The Label represents a "caption" for an item in a user interface.
The reason why your button isn't working is because a button isn't considered a valid "caption" for a "control" element because it is a "control" element.
(see: https://developer.mozilla.org/nl/docs/Web/HTML/Element/label)
If you use an image or a piece of text inside the label it will work, because that will be considered a caption (this is why your first attempt worked). If you want to create a custom button you can use some text or an image tag otherwise you'll need some javascript.
Edit: maybe this page can be of help: http://webmuch.com/how-to-customize-a-file-upload-button-using-css3-html5-and-javascript/
The javascript they use shows the user what file (s)he has selected
Just change the jQuery code and HTML tag will be as it is.
<label for="file-input">
<button class="upload_file" type="button">Upload file</button> <!-- not working-->
</label>
<input type="file" id="file-input" />
Jquery Code:
jquery("[for=file-input] .upload_file").on("click", function(){
jQuery("#file-input").trigger("click");
})
I want to create a html page, where the data given in the submit button should automatically?
go the other buttons ..for example :
If i enter america in the submit button ;
below that i want a google button where the value "America" should go directly to the google button so when the user clicks google button the search result for america should be displayed.
Ex : https://www.google.co.in/?gws_rd=cr&ei=vTtxUpqDGM3arAf-rYHoAw#q=america ;
The submit button text should be placed after the "=" in the google link
Your question is unclear, but i guess this is what you want ...
<form action="http://www.google.com/search" method="get">
Google Search: <input type="text" name="q" />
<input type="submit" value="Search" />
</form>