I would like to scrape a html table using rvest which has three dropdown boxes. When i select the option from the three, it will give a html table with no submit button. The website looks like this
These are three options (cascade line 1/cascade line 2 ), (date) and (shift A /shift B /shift C). This gives me error when i try to select cascade table 1 alone.
station_id <- url %>% html_nodes("#select.cascade_selection,table") %>% html_attr("1") %>%
html_table()
Error in UseMethod("html_table") : no applicable method for
'html_table' applied to an object of class "character"
How i do give all the three options and get the table using rvest ? Below added the inspect element of each options
<select class="form-control select2-hidden-accessible" style="width: 100%;" tabindex="-1" aria-hidden="true" id="cascade_selection" onchange="shiftSelection(0,2)">
<option value="1" selected="selected">Cascade Line 1</option>
<option value="2">Cascade Line 2</option>
</select>
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"/>
</div>
<input type="text" class="form-control pull-left" id="dateRangeSelected" style="background:white;" data-disable-touch-keyboard=""/>
</div>
<!--/.input group-->
<select class="form-control select2-hidden-accessible" style="width: 100%;" tabindex="-1" aria-hidden="true" id="shift_selection" onchange="shiftSelection(0,2)">
<option value="A" selected="selected">Shift A</option>
<option value="B">Shift B</option>
<option value="C">Shift C</option>
</select>
Related
I'd like to understand how to scrape a drop-down menu. I should be using xpath, but I don't know how to give the right line for the value I am interested in. Here are the lines of HTML we are talking about
<div class="col-md-3">
<label>Sales channels</label>
<div class="input-group">
<select id="source" name="source" data-placeholder="All sales channels" class="form-control select2 baloon-filter" multiple="multiple" data-filter-label="Channel:" data-search-button-id="smartSearchButton">
<option value="4">WOOCOMMERCE</option>
<option value="6">EBAY UK</option>
<option value="8">EPRICE</option>
<option value="5">AMAZON UK</option>
<option value="3">FIND PRICE</option>
<option value="7">FACEBOOK SHOP</option>
</select>
</div>
</div>
I am using RSelenium. I think you more or less such a line
sales.channels <- remote_driver$findElement( using = 'xpath' , '//select[#id="source"]/option[#value="EBAY UK" ]'
sales.channels3$clickElement()
Thanks in advance to anyone who can help me
I am working on Angular4 i want to show the selected dropdown value in the left side on the same page. i want the output like when selecting a packing type value and press add button the selected value can be moved to the right side portion.
actually, I am new in angular. can anyone help please its a big help form me
my Html Code is
<form #newForm="ngForm" (ngSubmit)="OnSubmit(newForm.value);newForm.reset()">
<div class="form-group">
<label>Packing Type</label>
<select class="form-control" >
<option value="0" disabled>Please Select Packing type</option>
<option *ngFor="let item of products" value={{item.ItemID}}>{{item.PackingtypeName}}</option>
</select>
</div>
for add button
<input type="button" value="Add Item" class="btn btn-success" (click)="addItems(newForm.value);newForm.reset()" />
</div>
this is my TS Component file
addItems(value: any) {
this.items = new IComboDetails(value.itemcode, value.itemdescription, value.PackingtypeName, value.quantity);
this.stockitems.push(this.items);
}
Here is working example
<select [(ngModel)]="myDropDown" (ngModelChange)="onChangeofmyOptions($event)">
<option value="one">One my value</option>
<option value="two">Two my value</option>
<option value="three">Three my value</option>
</select>
<input [hidden]="myDropDown !=='two'"type="text">
.ts
onChangeofOmyptions(newGov) {
console.log(newGov);
}
in your case
<select class="form-control" (ngModelChange)="onChangeofmyOptions($event)" >
<option value="0" disabled>Please Select Packing type</option>
<option *ngFor="let item of products" value={{item.ItemID}}>{{item.PackingtypeName}}</option>
</select>
onChangeofOptions(newGov) {
console.log(newGov);
this.myDropDown=newGov;
}
get value to right side
<input type="text" value={{myDropDown}}>
for binding
this.myDropDown=newGov;
I have a dropdown in my form which was generated by the html form builder:
<select class="form-control">
<option value="" selected="1" disabled="1">Select option</option>
<option value="course 1">course 1</option>
<option value="course 2">course 2</option>
<option value="course 3">course 3</option>
</select>
Is there a simple way to ensure that the user selects a value in the dropdown before submitting the form? If he has not selected anything, then display an error message.
Also, I have an input field:
<div class="form-group field-x_street_name_1">
<label for="x_street_name_1" class="col-sm-2 col-form-label col-form-label-lg">Street 1 <span style="color:red;">*</span></label>
<div class="col-sm-10">
<input type="text" name="x_street_name_1" t-att-value="x_street_name_1" id="x_street_name_1" class="form-control form-control-lg" placeholder="e.g. John Lane" required="required" t-att-readonly="'readonly' if only_passwords else None" t-att-autofocus="'autofocus' if login and not only_passwords else None"/>
</div>
</div>
I want to ensure the user enters only between 10 to 30 uppercase, lowercase alphabets. I would ensure that using html pattern simply. But it does not seem to work.
I have an template, where a service populates the values used in a select box. Like so:
<div class="form-group">
<label for="backings_select">Backing</label>
<select class="form-control"
required
name="backings_select"
(ngModelChange)="storeValueRedux($event, count)">
<option *ngFor="let backing of backings" [ngValue]="backing.id">{{backing.name}}</option>
</select>
</div>
The above works fine. So I figured, if the array backings only has one item, I might as well have angular auto select the one value that is available (for UI improvement)
So for a basic, hacky proof of concept I tried:
<div *ngIf="backings?.length == 1" class="form-group">
<label for="backings_select">Backing Single</label>
<select class="form-control"
required
name="backings_select"
(ngModelChange)="storeValueRedux($event, count)">
<option *ngFor="let backing of backings" [ngValue]="backing.id" selected="selected">{{backing.name}}</option>
</select>
</div>
<div *ngIf="backings?.length > 1" class="form-group">
<label for="backings_select">Backing Multiple</label>
<select class="form-control"
required
name="backings_select"
(ngModelChange)="storeValueRedux($event, count)">
<option *ngFor="let backing of backings" [ngValue]="backing.id">{{backing.name}}</option>
</select>
</div>
Now if backings.length == 1, the following html is rendered:
<option selected="selected" value="1: 1" ng-reflect-ng-value="1">nameValue</option>
And if backings.length > 1 the following html is rendered:
<option value="0: 1" ng-reflect-ng-value="1">nameValue1</option>
<option value="1: 2" ng-reflect-ng-value="2">nameValue2</option>
Now in theory, the above code should work, however when length==1 the html select box is not auto selecting the value with selected="selected". Have I missed anything, or is there any reason why the select is not auto selecting?
use [selected] instead of selected
<option *ngFor="let backing of backings" [ngValue]="backing.id" [selected]="backings.length === 1">{{backing.name}}</option>
without using ngIf and duplicating your code you can achieve the desired result like this:
<div class="form-group">
<label for="backings_select">Backing</label>
<select class="form-control"
required
name="backings_select"
(ngModelChange)="storeValueRedux($event, count)">
<option *ngFor="let backing of backings" [ngValue]="backing.id" [selected]="backings.length === 1">{{backing.name}}</option>
{{backing.name}}</option>
</select>
</div>
I'd like to be able to add a drop down select box to my contact form. Here's my existing html code for the field I wish to use:
<label class="topic">
<input type="text" name="topic" placeholder="Subject" value=""
data-constraints="#Required" />
<span class="empty-message">*This field is required.</span>
<span class="error-message">*This is not a valid subject.</span>
</label>
Any ideas?
You should use the <select> tag.
<select>
<option value="o1">Option 1</option>
<option value="o1">Option 1</option>
<option value="o1">Option 1</option>
</select>
More info:
http://www.w3schools.com/tags/tag_select.asp