I'm trying to fill a field with text inputs from a CSV, Send Keys works fine with all fields except for the below one
<div class="col-xs-12 col-md-6">
<div class="custom-select" data-qa="work-tags" data-testid="work-tags" aria-disabled="false">
<div class="custom-select__label">Tags</div>
<div class=" css-2b097c-container">
<div class=" css-yk16xz-control">
<div class=" css-1hwfws3">
<div class=" css-1wa3eu0-placeholder">Select</div>
<div class="css-1g6gooi">
<div class="" style="display: inline-block;"><input autocapitalize="none" autocomplete="off" autocorrect="off" id="react-select-10-input" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" value="" style="box-sizing: content-box; width: 2px; background: 0px center; border: 0px; font-size: inherit; opacity: 1; outline: 0px; padding: 0px; color: inherit;">
<div
style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: 14px; font-family: "Open Sans", sans-serif; font-weight: 400; font-style: normal; letter-spacing: normal; text-transform: none;"></div>
</div>
</div>
</div>
<div class=" css-1wy0on6"><span class=" css-1okebmr-indicatorSeparator"></span>
<div aria-hidden="true" class=" css-tlfecz-indicatorContainer"><svg height="20" width="20" viewBox="0 0 20 20" aria-hidden="true" focusable="false" class="css-19bqh2r"><path d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"></path></svg></div>
</div>
</div>
</div>
</div>
</div>
From UI I can simply input text and save.
I have tried the following but didn't work.
driver.find_element_by_xpath("//div[#data-qa='work-tags']//div[#class=' css-2b097c-container']//div[#class=' css-yk16xz-control']").click()
time.sleep(1)
driver.find_element_by_xpath("//div[#data-qa='work-tags']//div[#class=' css-2b097c-container']//div[#class=' css-yk16xz-control']").send_keys(SSID_rows[SSIDs][1],Keys.TAB)
Thank you
You're trying to put text into div. Try to use input node:
driver.find_element_by_id("react-select-10-input").send_keys(SSID_rows[SSIDs][1],Keys.TAB)
Related
i am trying to get the links for each restaurant on the search results page for any city on food.grab.com using selenium. This is the div i need to target to get the links but when i run this
rl_elements = driver.find_elements_by_css_selector("ant-layout")
I get an error about the CSS element not being found. I was thinking I could grab that div then probably loop through or use the get("href") tag. This is the div section with the links of the restaurants
<div class="ant-layout">
<div>
<div class="ant-row-flex RestaurantListRow___1SbZY">
<div class="ant-col-24 RestaurantListCol___1FZ8V ant-col-md-12 ant-col-lg-6">
<a href="/ph/en/restaurant/mcdonald-s-sta-cruz-church-delivery/AWiD5JwQfYWaYaQC4nY4" style="color: inherit; text-decoration: none;">
<div class="ant-row-flex ant-row-flex-start ant-row-flex-top asList___1ZNTr">
<div class="ant-col-24 colPhoto___3vb-o ant-col-md-24 ant-col-lg-24">
<div class="promoTag___IYhfm">
<div class="placeholder___1xbBh restoPhoto___3nncy"><img alt="Order McDonald's - Sta Cruz Church" class="realImage___2TyNE show___3oA6B" src="https://d1sag4ddilekf6.azureedge.net/compressed/merchants/AWiD5JwQfYWaYaQC4nY4/hero/20a3b455671746a1b02a2cac627b5a67_1600322490671317355.jpg"></div>
<div class="promoTagHead___1bjRG">Promo</div>
<div class="promoTagTail___2Jy3D"></div>
</div>
</div>
<div class="ant-col-24 colInfo___3iLqj ant-col-md-24 ant-col-lg-24">
<h6 class="name___2epcT">McDonald's - Sta Cruz Church</h6>
<div class="basicInfoContainer___1DcNs">
<div class="basicInfoRow___UZM8d cuisine___T2tCh">Fast Food, Burgers, American, #Combodeals, #ComboDealsBurgers</div>
<div class="basicInfoRow___UZM8d numbers___2xZGn">
<div class="numbersChild___2qKMV">
<div class="medium___3F_Er ratingStar infoItemIcon___23Zvv" role="button" tabindex="0" style="display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url("/static/images/icons/icon-star.svg");"></div>
4.4
</div>
<div class="numbersChild___2qKMV">
<div class="medium___3F_Er deliveryClock infoItemIcon___23Zvv" role="button" tabindex="0" style="display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url("/static/images/icons/icon-clock.svg");"></div>
29 mins • 0.8 km
</div>
</div>
</div>
<div class="basicInfoRow___UZM8d discount___3h-0m">
<div class="medium___3F_Er discountIcon infoItemIcon___23Zvv" role="button" tabindex="0" style="display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url("/static/images/icons/icon-promo-tag.svg");"></div>
<span class="discountText___GQCkj">P150 OFF: Use code PADALOVE, min 600</span>
</div>
</div>
</div>
</a>
</div>
<div class="ant-col-24 RestaurantListCol___1FZ8V ant-col-md-12 ant-col-lg-6">
<a href="/ph/en/restaurant/jollibee-raon-delivery/2-CZC1EZEYACBTCX" style="color: inherit; text-decoration: none;">
<div class="ant-row-flex ant-row-flex-start ant-row-flex-top asList___1ZNTr">
<div class="ant-col-24 colPhoto___3vb-o ant-col-md-24 ant-col-lg-24">
<div class="">
<div class="placeholder___1xbBh restoPhoto___3nncy"><img alt="Order Jollibee - Raon" class="realImage___2TyNE show___3oA6B" src="https://d1sag4ddilekf6.azureedge.net/compressed/merchants/2-CZC1EZEYACBTCX/hero/3189897a1a264165af3c554991970723_1634664559764732889.jpg"></div>
</div>
</div>
<div class="ant-col-24 colInfo___3iLqj ant-col-md-24 ant-col-lg-24">
<h6 class="name___2epcT">Jollibee - Raon</h6>
<div class="basicInfoContainer___1DcNs">
<div class="basicInfoRow___UZM8d cuisine___T2tCh">Filipino, Chicken, Fast Food</div>
<div class="basicInfoRow___UZM8d numbers___2xZGn">
<div class="numbersChild___2qKMV">
<div class="medium___3F_Er ratingStar infoItemIcon___23Zvv" role="button" tabindex="0" style="display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url("/static/images/icons/icon-star.svg");"></div>
4.3
</div>
<div class="numbersChild___2qKMV">
<div class="medium___3F_Er deliveryClock infoItemIcon___23Zvv" role="button" tabindex="0" style="display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url("/static/images/icons/icon-clock.svg");"></div>
33 mins • 0.1 km
</div>
</div>
</div>
</div>
</div>
</a>
</div>
<div class="ant-col-24 RestaurantListCol___1FZ8V ant-col-md-12 ant-col-lg-6">
<a href="/ph/en/restaurant/mang-inasal-tayuman-delivery/2-CZCVUA42FBUTTX" style="color: inherit; text-decoration: none;">
<div class="ant-row-flex ant-row-flex-start ant-row-flex-top asList___1ZNTr">
<div class="ant-col-24 colPhoto___3vb-o ant-col-md-24 ant-col-lg-24">
<div class="promoTag___IYhfm">
<div class="placeholder___1xbBh restoPhoto___3nncy"><img alt="Order Mang Inasal - Tayuman" class="realImage___2TyNE show___3oA6B" src="https://d1sag4ddilekf6.azureedge.net/compressed/merchants/2-CZCVUA42FBUTTX/hero/40d7b143ab2846a490c52bec6b823cfe_1634227146999336525.png"></div>
<div class="promoTagHead___1bjRG">Promo</div>
<div class="promoTagTail___2Jy3D"></div>
</div>
</div>
<div class="ant-col-24 colInfo___3iLqj ant-col-md-24 ant-col-lg-24">
<h6 class="name___2epcT">Mang Inasal - Tayuman</h6>
<div class="basicInfoContainer___1DcNs">
<div class="basicInfoRow___UZM8d cuisine___T2tCh">Filipino, Chicken, Fast Food</div>
<div class="basicInfoRow___UZM8d numbers___2xZGn">
<div class="numbersChild___2qKMV">
<div class="medium___3F_Er ratingStar infoItemIcon___23Zvv" role="button" tabindex="0" style="display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url("/static/images/icons/icon-star.svg");"></div>
4.5
</div>
<div class="numbersChild___2qKMV">
<div class="medium___3F_Er deliveryClock infoItemIcon___23Zvv" role="button" tabindex="0" style="display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url("/static/images/icons/icon-clock.svg");"></div>
31 mins • 2.3 km
</div>
</div>
</div>
<div class="basicInfoRow___UZM8d discount___3h-0m">
<div class="medium___3F_Er discountIcon infoItemIcon___23Zvv" role="button" tabindex="0" style="display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url("/static/images/icons/icon-promo-tag.svg");"></div>
<span class="discountText___GQCkj">Promo Discount - Paa Large Buddy Size + Pork BBQ Buddy Size</span>
</div>
</div>
</div>
</a>
</div>
<div class="ant-col-24 RestaurantListCol___1FZ8V ant-col-md-12 ant-col-lg-6">
<a href="/ph/en/restaurant/angel-s-pizza-legarda-available-for-long-distance-delivery-delivery/PHGFSTI000000zw" style="color: inherit; text-decoration: none;">
<div class="ant-row-flex ant-row-flex-start ant-row-flex-top asList___1ZNTr">
<div class="ant-col-24 colPhoto___3vb-o ant-col-md-24 ant-col-lg-24">
<div class="">
<div class="placeholder___1xbBh restoPhoto___3nncy"><img alt="Order Angel's Pizza - Legarda [Available for LONG-DISTANCE DELIVERY]" class="realImage___2TyNE show___3oA6B" src="https://d1sag4ddilekf6.azureedge.net/compressed/merchants/PHGFSTI000000zw/hero/2166e88cc82b4a8fb3193f1b555002fe_1624797732725799594.jpg"></div>
</div>
</div>
<div class="ant-col-24 colInfo___3iLqj ant-col-md-24 ant-col-lg-24">
<h6 class="name___2epcT">Angel's Pizza - Legarda [Available for LONG-DISTANCE DELIVERY]</h6>
<div class="basicInfoContainer___1DcNs">
<div class="basicInfoRow___UZM8d cuisine___T2tCh">Quick Bites, Pizza, Italian, #ComboDealsPizza</div>
<div class="basicInfoRow___UZM8d numbers___2xZGn">
<div class="numbersChild___2qKMV">
<div class="medium___3F_Er ratingStar infoItemIcon___23Zvv" role="button" tabindex="0" style="display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url("/static/images/icons/icon-star.svg");"></div>
4.6
</div>
<div class="numbersChild___2qKMV">
<div class="medium___3F_Er deliveryClock infoItemIcon___23Zvv" role="button" tabindex="0" style="display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url("/static/images/icons/icon-clock.svg");"></div>
43 mins • 1.4 km
</div>
</div>
</div>
</div>
</div>
</a>
</div>
<div class="ant-col-24 RestaurantListCol___1FZ8V ant-col-md-12 ant-col-lg-6">
<a href="/ph/en/restaurant/wendy-s-dapitan-available-for-long-distance-delivery-delivery/PHGFSTI0000017w" style="color: inherit; text-decoration: none;">
<div class="ant-row-flex ant-row-flex-start ant-row-flex-top asList___1ZNTr">
<div class="ant-col-24 colPhoto___3vb-o ant-col-md-24 ant-col-lg-24">
<div class="promoTag___IYhfm">
<div class="placeholder___1xbBh restoPhoto___3nncy"><img alt="Order Wendy's - Dapitan [Available for LONG-DISTANCE DELIVERY]" class="realImage___2TyNE show___3oA6B" src="https://d1sag4ddilekf6.azureedge.net/compressed/merchants/PHGFSTI0000017w/hero/9cf2d2e2170d4c288706e4ec08740199_1604489462614383246.jpeg"></div>
<div class="promoTagHead___1bjRG">Promo</div>
<div class="promoTagTail___2Jy3D"></div>
</div>
</div>
<div class="ant-col-24 colInfo___3iLqj ant-col-md-24 ant-col-lg-24">
<h6 class="name___2epcT">Wendy's - Dapitan [Available for LONG-DISTANCE DELIVERY]</h6>
<div class="basicInfoContainer___1DcNs">
<div class="basicInfoRow___UZM8d cuisine___T2tCh">Fast Food, Burgers, American, #ComboDealsBurgers</div>
<div class="basicInfoRow___UZM8d numbers___2xZGn">
<div class="numbersChild___2qKMV">
<div class="medium___3F_Er ratingStar infoItemIcon___23Zvv" role="button" tabindex="0" style="display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url("/static/images/icons/icon-star.svg");"></div>
4.4
</div>
<div class="numbersChild___2qKMV">
<div class="medium___3F_Er deliveryClock infoItemIcon___23Zvv" role="button" tabindex="0" style="display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url("/static/images/icons/icon-clock.svg");"></div>
30 mins • 1.5 km
</div>
</div>
</div>
<div class="basicInfoRow___UZM8d discount___3h-0m">
<div class="medium___3F_Er discountIcon infoItemIcon___23Zvv" role="button" tabindex="0" style="display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url("/static/images/icons/icon-promo-tag.svg");"></div>
<span class="discountText___GQCkj">P150 OFF: Use code PADALOVE, min 600</span>
</div>
</div>
</div>
</a>
</div>
<div class="ant-col-24 RestaurantListCol___1FZ8V ant-col-md-12 ant-col-lg-6">
<a href="/ph/en/restaurant/kfc-sta-cruz-delivery/2-CYUZC8BTGJ51GJ" style="color: inherit; text-decoration: none;">
<div class="ant-row-flex ant-row-flex-start ant-row-flex-top asList___1ZNTr">
<div class="ant-col-24 colPhoto___3vb-o ant-col-md-24 ant-col-lg-24">
<div class="promoTag___IYhfm">
<div class="placeholder___1xbBh restoPhoto___3nncy"><img alt="Order KFC - Sta Cruz" class="realImage___2TyNE show___3oA6B" src="https://d1sag4ddilekf6.azureedge.net/compressed/merchants/2-CYUZC8BTGJ51GJ/hero/680a96e5303d4434af6c9ea5751b211e_1593015057999865942.jpeg"></div>
<div class="promoTagHead___1bjRG">Promo</div>
<div class="promoTagTail___2Jy3D"></div>
</div>
</div>
<div class="ant-col-24 colInfo___3iLqj ant-col-md-24 ant-col-lg-24">
<h6 class="name___2epcT">KFC - Sta Cruz</h6>
<div class="basicInfoContainer___1DcNs">
<div class="basicInfoRow___UZM8d cuisine___T2tCh">American, Chicken, Fast Food</div>
<div class="basicInfoRow___UZM8d numbers___2xZGn">
<div class="numbersChild___2qKMV">
<div class="medium___3F_Er ratingStar infoItemIcon___23Zvv" role="button" tabindex="0" style="display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url("/static/images/icons/icon-star.svg");"></div>
4.1
</div>
<div class="numbersChild___2qKMV">
<div class="medium___3F_Er deliveryClock infoItemIcon___23Zvv" role="button" tabindex="0" style="display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url("/static/images/icons/icon-clock.svg");"></div>
27 mins • 0.8 km
</div>
</div>
</div>
<div class="basicInfoRow___UZM8d discount___3h-0m">
<div class="medium___3F_Er discountIcon infoItemIcon___23Zvv" role="button" tabindex="0" style="display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url("/static/images/icons/icon-promo-tag.svg");"></div>
<span class="discountText___GQCkj">P150 OFF: Use code PADALOVE, min 600</span>
</div>
</div>
</div>
</a>
</div>
<div class="ant-col-24 RestaurantListCol___1FZ8V ant-col-md-12 ant-col-lg-6">
<a href="/ph/en/restaurant/chowking-sta-cruz-manila-delivery/2-CYMHN7DWAGL2WE" style="color: inherit; text-decoration: none;">
<div class="ant-row-flex ant-row-flex-start ant-row-flex-top asList___1ZNTr">
<div class="ant-col-24 colPhoto___3vb-o ant-col-md-24 ant-col-lg-24">
<div class="">
<div class="placeholder___1xbBh restoPhoto___3nncy"><img alt="Order Chowking - Sta Cruz Manila" class="realImage___2TyNE show___3oA6B" src="https://d1sag4ddilekf6.azureedge.net/compressed/merchants/2-CYMHN7DWAGL2WE/hero/370cba7acb8645d99e045d93121555cd_1632276886062046084.jpg"></div>
</div>
</div>
<div class="ant-col-24 colInfo___3iLqj ant-col-md-24 ant-col-lg-24">
<h6 class="name___2epcT">Chowking - Sta Cruz Manila</h6>
<div class="basicInfoContainer___1DcNs">
<div class="basicInfoRow___UZM8d cuisine___T2tCh">Chinese, Chicken, Fast Food</div>
<div class="basicInfoRow___UZM8d numbers___2xZGn">
<div class="numbersChild___2qKMV">
<div class="medium___3F_Er ratingStar infoItemIcon___23Zvv" role="button" tabindex="0" style="display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url("/static/images/icons/icon-star.svg");"></div>
4.5
</div>
<div class="numbersChild___2qKMV">
<div class="medium___3F_Er deliveryClock infoItemIcon___23Zvv" role="button" tabindex="0" style="display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url("/static/images/icons/icon-clock.svg");"></div>
31 mins • 0.6 km
</div>
</div>
</div>
</div>
</div>
</a>
</div>
<div class="ant-col-24 RestaurantListCol___1FZ8V ant-col-md-12 ant-col-lg-6">
<a href="/ph/en/restaurant/greenwich-binondo-delivery/2-CYKTRUEHNAUGEX" style="color: inherit; text-decoration: none;">
<div class="ant-row-flex ant-row-flex-start ant-row-flex-top asList___1ZNTr">
<div class="ant-col-24 colPhoto___3vb-o ant-col-md-24 ant-col-lg-24">
<div class="promoTag___IYhfm">
<div class="placeholder___1xbBh restoPhoto___3nncy"><img alt="Order Greenwich - Binondo" class="realImage___2TyNE show___3oA6B" src="https://d1sag4ddilekf6.azureedge.net/compressed/merchants/2-CYKTRUEHNAUGEX/hero/upload-photo-Hero_Photo_66bf96e0fcff47da8b6aacb925f913a3_1554863645049377072.jpeg"></div>
<div class="promoTagHead___1bjRG">Promo</div>
<div class="promoTagTail___2Jy3D"></div>
</div>
</div>
<div class="ant-col-24 colInfo___3iLqj ant-col-md-24 ant-col-lg-24">
<h6 class="name___2epcT">Greenwich - Binondo</h6>
<div class="basicInfoContainer___1DcNs">
<div class="basicInfoRow___UZM8d cuisine___T2tCh">American, Pizza, Fast Food</div>
<div class="basicInfoRow___UZM8d numbers___2xZGn">
<div class="numbersChild___2qKMV">
<div class="medium___3F_Er ratingStar infoItemIcon___23Zvv" role="button" tabindex="0" style="display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url("/static/images/icons/icon-star.svg");"></div>
4.5
</div>
<div class="numbersChild___2qKMV">
<div class="medium___3F_Er deliveryClock infoItemIcon___23Zvv" role="button" tabindex="0" style="display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url("/static/images/icons/icon-clock.svg");"></div>
34 mins • 1.6 km
</div>
</div>
</div>
<div class="basicInfoRow___UZM8d discount___3h-0m">
<div class="medium___3F_Er discountIcon infoItemIcon___23Zvv" role="button" tabindex="0" style="display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url("/static/images/icons/icon-promo-tag.svg");"></div>
<span class="discountText___GQCkj">Lasagna Supreme Flash Sale: two (2) Greenwich Lasagna Supreme Small Pans for only P399!</span>
</div>
</div>
</div>
</a>
</div>
</div>
<button type="button" class="ant-btn ant-btn-block"><span>Load More</span></button>
</div>
</div>
I am currently using this, but it gets all the links on the search result page, i want the ones in the div above.
url_elements = driver.find_elements_by_xpath("//a[contains(#href, '/ph/en/restaurant')]")
url_elements_list = []
for url_element in url_elements:
url_elements_list.append(url_element.get_attribute("href"))
sliced_list=url_elements_list[:2]
print(sliced_list)
To get the restaurants elements inside the specific div element you should do as following:
Apply find_elements_by_xpath method on rl_element web element instead of applying it on web driver instance driver.
The XPath locator should start with a dot . meaning "search from this node, not form the beginning of the whole page.
rl_element = driver.find_element_by_class_name("ant-layout")
url_elements = rl_element.find_elements_by_xpath(".//a[contains(#href, '/ph/en/restaurant')]")
url_elements_list = []
for url_element in url_elements:
url_elements_list.append(url_element.get_attribute("href"))
sliced_list=url_elements_list[:2]
print(sliced_list)
Use those line of code Edited:
url_elements_list = []
for url_element in driver.find_elements_by_class_name('ant-layout')::
url_elements_list.append(url_element.get_attribute("href"))
print(url_elements_list)
HTML code
<td style="white-space: nowrap; text-align: center;">
<div style="text-align:center; table-layout: fixed; font-size: 0;">
<div style="text-align:center; vertical-align: text-top; width:16px; height:16px; display:inline-block; font-size: 12px;">10</div>
<div style="text-align:center; vertical-align: text-top; width:16px; height:16px; display:inline-block; font-size: 12px;">9/div>
<div style="text-align:center; vertical-align: text-top; width:16px; height:16px; display:inline-block; font-size: 12px;">7</div>
<div style="text-align:center; vertical-align: text-top; width:16px; height:16px; display:inline-block; font-size: 12px;">2</div>
</div>
</td>
My code
td_list = perform.tbody.find_all("td")
section1 = td_list[9].text.strip() # .strip skip my first element space like \n\n 10
Out my result:
10 \n\n 9 \n\n7 \n\n2
There are four text in above html code. I want get it each of elements from text.
I want to get only 10 & only 2 for my code
How do I supposed to do?
If you want first and last text from the <td> you can use list index [0] and [-1] respectively. For example:
from bs4 import BeautifulSoup
html_doc = """
<td style="white-space: nowrap; text-align: center;">
<div style="text-align:center; table-layout: fixed; font-size: 0;">
<div style="text-align:center; vertical-align: text-top; width:16px; height:16px; display:inline-block; font-size: 12px;">10</div>
<div style="text-align:center; vertical-align: text-top; width:16px; height:16px; display:inline-block; font-size: 12px;">9</div>
<div style="text-align:center; vertical-align: text-top; width:16px; height:16px; display:inline-block; font-size: 12px;">7</div>
<div style="text-align:center; vertical-align: text-top; width:16px; height:16px; display:inline-block; font-size: 12px;">2</div>
</div>
</td>
"""
soup = BeautifulSoup(html_doc, "html.parser")
td = soup.select_one("td")
text = td.get_text(strip=True, separator="\n").split("\n")
print(text[0])
print(text[-1])
Prints:
10
2
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 1 year ago.
This post was edited and submitted for review 1 year ago and failed to reopen the post:
Original close reason(s) were not resolved
Improve this question
I am having a process where my python code needs to generate a PDF.
I have an HTML file as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./proforma_supply_bill.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Karla:wght#400;600;700&family=Rajdhani:wght#700&display=swap"
rel="stylesheet">
<title>Proforma bill of supply</title>
<style>
body {
font-family: "Karla", sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
overflow-x: hidden;
}
th,
td {
padding: 0 !important;
text-align: left;
position: relative;
}
.mb-3 {
margin-bottom: 3px;
}
.mb-5 {
margin-bottom: 5px;
}
.pr-10{
padding-right: 10px !important;
}
.text-right {
text-align: right;
}
.border-b_color {
border-bottom: 1px solid #93d150;
}
.border-t {
border-top: 1px solid #dedede;
}
.border-b {
border-bottom: 1px solid #dedede;
}
.card {
background-color: #fff;
padding: 0 20px;
}
.card__header,
.card__total_amount,
.card__amount_section {
display: flex;
align-items: center;
justify-content: space-between;
padding: 17px 0;
}
.card__header_img {
width: 175px;
}
.card__header_title {
font-family: "Rajdhani", sans-serif;
font-size: 24px;
font-weight: bold;
color: #2b9eaa;
text-transform: uppercase;
}
.card__info_flex {
display: flex;
padding: 10px 0;
}
.card__info {
flex: 50%;
}
.card__info_row:not(:last-child) {
margin-bottom: 5px;
}
.card__info_title,
.card__table_data_row__content {
color: #141414;
font-size: 15px;
}
.card__info_text {
color: #141414;
font-size: 15px;
font-weight: bold;
}
.card__table {
width: 100%;
border-collapse: collapse;
}
.card__table_header_row {
background-color: #2b9eaa;
}
.card__table_data_row {
border-top: 1px solid #dedede;
}
.card__table_header_row__content {
color: #fff;
font-size: 15px;
font-weight: bold;
padding: 6px 0;
}
.card__table_data_row__content {
padding: 5px 0;
}
.card__table_data_row__subcontent {
font-size: 13px;
color: #141414;
width: max-content;
margin-left: 10px;
}
.dashed_b-t {
border-top: 1px dashed #dedede;
}
.card__total_amount {
background-color: #F2F2F2;
padding: 4px 10px 5px;
border-top: 1px solid #dedede;
border-bottom: 1px solid #dedede;
}
.card__amount_section {
padding: 6px 10px 5px;
align-items: flex-start;
}
.card__total_amount__title,
.card__total_amount__title_lg {
font-size: 18px;
color: #141414;
font-weight: bold;
}
.card__declaration {
padding: 6px 10px 5px;
background-color: #D4ECEE;
font-size: 15px;
font-weight: bold;
color: #2b2b2b;
}
.card__signature {
margin-top: 30px;
padding: 0 10px;
}
</style>
</head>
<body>
<div class="card">
<div class="card__header border-b_color">
<img src="https://res.cloudinary.com/exportify/image/upload/v1573547246/ExportifyLogo/exportify_logo_166x31_OG_yhqmrg.svg"
alt="Exportify Logo" class="card__header_img">
<div class="card__header_title">PROFORMA Bill of Supply</div>
</div>
<div class="card__info_flex border-b_color">
<div class="card__info">
<div class="card__info_row">
<span class="card__info_title">Proforma Invoice No.: </span>
<span class="card__info_text">{{PROFORMA_INV_NO}}</span>
</div>
<div class="card__info_row">
<span class="card__info_title">Reference No. & Date.: </span>
<span class="card__info_text">{{REF_NO}}</span>
</div>
<div class="card__info_row">
<span class="card__info_title">Buyer's Order No.: </span>
<span class="card__info_text">{{BUYER_ORDER_NO}}</span>
</div>
<div class="card__info_row">
<span class="card__info_title">Vessel/Flight No.: </span>
<span class="card__info_text">{{VESSEL_NAME}}</span>
</div>
<div class="card__info_row">
<span class="card__info_title">City/Port of Loading: </span>
<span class="card__info_text">{{POL}}</span>
</div>
<div class="card__info_row">
<span class="card__info_title">Terms of Delivery: </span>
<span class="card__info_text">{{DELIVERY_TERMS}}</span>
</div>
</div>
<div class="card__info">
<div class="card__info_row">
<span class="card__info_title">Dated: </span>
<span class="card__info_text">{{INV_DATE}}</span>
</div>
<div class="card__info_row">
<span class="card__info_title">SAIL Date: </span>
<span class="card__info_text">{{SAIL_DATE}}</span>
</div>
<div class="card__info_row">
<span class="card__info_title">Place of Receipt by Shipper: </span>
<span class="card__info_text">{{PLACE_OF_RECEIPT}}</span>
</div>
<div class="card__info_row">
<span class="card__info_title">City/Port of Discharge: </span>
<span class="card__info_text">{{POD}}</span>
</div>
</div>
</div>
<div class="card__info_flex" style="padding-bottom: 0;">
<div class="card__info"></div>
<div class="card__info mb-3">
<span class="card__info_title">Buyer (Bill to)</span>
</div>
</div>
<div class="card__info_flex" style="padding-top: 0;">
<div class="card__info">
<div class="card__info_text mb-3">XPORTIFY TECHNOLOGIES PRIVATE LIMITED</div>
<div class="card__info_title mb-5" style="line-height: 20px; width: 85%;">
3rd Floor, 313-314, A/3, BGTA Ganga Premises, Wadala Truck Terminal, Near Wadala RTO, Wadala East,
Mumbai
</div>
<div class="card__info_row">
<span class="card__info_title">GSTIN/UIN: </span>
<span class="card__info_text">27AAACX2283M1ZX</span>
</div>
<div class="card__info_row">
<span class="card__info_title">PAN No: </span>
<span class="card__info_text">AAACX2283M</span>
</div>
<div class="card__info_title mb-5">State Name: Maharashtra, Code: 27</div>
<div class="card__info_row">
<span class="card__info_title">CIN: </span>
<span class="card__info_text">U74999MH2017PTC295494</span>
</div>
</div>
<div class="card__info">
<div class="card__info_text mb-3">{{BUYER_COMPANY_NAME}}</div>
<div class="card__info_title mb-5" style="line-height: 20px;">
{{BUYER_ADDRESS}}
</div>
<div class="card__info_row">
<span class="card__info_title">GSTIN/UIN: </span>
<span class="card__info_text">{{BUYER_GST}}</span>
</div>
<div class="card__info_title mb-5">State Name: {{BUYER_STATE}}</div>
<div class="card__info_row">
<span class="card__info_title">Place of Supply: </span>
<span class="card__info_text">{{BUYER_PLACE_OF_SUPPLY}}</span>
</div>
</div>
</div>
<table class="card__table mb-5">
<thead>
<tr class="card__table_header_row">
<th>
<div class="card__table_header_row__content" style="padding-left: 10px;">Sr. No.</div>
</th>
<th>
<div class="card__table_header_row__content">Description of Services</div>
</th>
<th>
<div class="card__table_header_row__content">HSN/SAC</div>
</th>
<th>
<div class="card__table_header_row__content">Quantity</div>
</th>
<th>
<div class="card__table_header_row__content">Rate</div>
</th>
<th>
<div class="card__table_header_row__content">Per</div>
</th>
<th>
<div class="card__table_header_row__content text-right" style="padding-right: 10px;">
Amount
</div>
</th>
</tr>
</thead>
<tbody>
<tr class="card__table_data_row">
<td>
<div class="card__table_data_row__content" style="padding-left: 10px;">1</div>
</td>
<td>
<div class="card__table_data_row__content">Freight Charges</div>
<div class="card__table_data_row__subcontent">$ 1938/20x1x#74.97</div>
</td>
<td>
<div class="card__table_data_row__content">996521</div>
</td>
<td>
<div class="card__table_data_row__content">1</div>
</td>
<td>
<div class="card__table_data_row__content">7,900.00</div>
</td>
<td>
<div class="card__table_data_row__content">Container</div>
</td>
<td>
<div class="card__table_data_row__content text-right pr-10" style="right: 0;">USD
7,900.00
</div>
</td>
</tr>
</tbody>
</table>
<div class="card__total_amount mb-5">
<div class="card__total_amount__title">Total</div>
<div class="card__total_amount__title_lg">USD 7,900.00</div>
</div>
<div class="card__amount_section border-b mb-3">
<div class="card__amount_section_flex">
<div class="card__info_title mb-3">Amount Chargeable (in words)</div>
<div class="card__info_text">USD Seven Thousand Nine Hundred Only</div>
</div>
<div class="card__amount_section_flex">
<div class="card__info_title">E & O.E</div>
</div>
</div>
<div class="card__amount_section border-t">
<div class="card__amount_section_flex">
<div class="card__info_title">HSN/SAC</div>
</div>
<div class="card__amount_section_flex">
<div class="card__info_title">Taxable Value</div>
</div>
</div>
<div class="card__amount_section border-t mb-3">
<div class="card__amount_section_flex">
<div class="card__info_title">996521</div>
</div>
<div class="card__amount_section_flex">
<div class="card__info_title">INR 1,45,291.86</div>
</div>
</div>
<div class="card__total_amount mb-5">
<div class="card__total_amount__title" style="font-size: 15px;">Total</div>
<div class="card__total_amount__title_lg" style="font-size: 15px;">INR 1,45,291.86</div>
</div>
<div class="card__info_row" style="padding: 10px;">
<span class="card__info_title">Tax Amount (in words): </span>
<span class="card__info_text">NIL</span>
</div>
<div class="card__declaration">
Declaration
</div>
<div class="card__info_title" style="padding: 10px;">
We declare that this invoice shows the actual price of the goods described and that all particulars are true
and correct.
</div>
<div class="card__info_text" style="padding: 0 10px;">
for XPORTIFY TECHNOLOGIES PRIVATE LIMITED
</div>
<div class="card__signature">
<div class="card__info_title">Authorised Signatory</div>
</div>
</div>
</body>
</html>
I want to convert this HTML file into a PDF using Python.
I have one option of using wkhtmltopdf package but I have to run it using the command line everytime.
Which is the most optimal way of doing this without hampering the flow of my code?
Install pdfkit package
pip install pdfkit
Install wkhtmltopdf https://wkhtmltopdf.org/downloads.html
PDF to HTML in the current folder
import pdfkit
import glob
3.1 Set wkhtmltopdf executable file path
config = pdfkit.configuration(wkhtmltopdf='C:/Program Files/wkhtmltopdf/bin/wkhtmltopdf.exe')
3.2 Convert all html files in the current folder
for file in glob.glob('./*.html'):
pdfkit.from_file(file, file[:-4]+'.pdf', configuration=config)
I need to grab the text (shown as a date) in the following piece of html code. The code a1v2v3 changes depending on the page, so I cannot use that as a reference or use a css selector.
Relevant HTML:
<div class="mvp-collapse-content-box">
<div data-v-a1v2v3="" class="mvp-row"><div data-v-a1v2v3="" class="mvp-tag mvp-tag-default mvp-tag-checked" style="margin-left: -16px; visibility: hidden;">
<!----> <span class="mvp-tag-text">LIVE</span>
<!----></div><span data-v-a1v2v3="" style="display: inline-block;">
2019.06.12 17:09
<br data-v-a1v2v3="">
Full HTML:
<div class="mvp-collapse-content-box">
<div data-v-a1v2v3="">
<div data-v-a1v2v3="" class="mvp-collapse mvp-collapse-simple">
<div data-v-a1v2v3="" class="mvp-collapse-item mvp-collapse-item-active" style="padding-left: 6px;">
<div class="mvp-collapse-header">
<!----> <div data-v-a1v2v3="" class="mvp-row-flex mvp-row-flex-middle">
<div data-v-a1v2v3="" class="mvp-col mvp-col-span-18 mvp-col-span-xs-16 mvp-col-span-sm-18 mvp-col-span-md-18 mvp-col-span-lg-18"><div data-v-a1v2v3="" class="mvp-tag mvp-tag-blue mvp-tag-checked" style="margin-left: -16px;">
<!----> <span class="mvp-tag-text mvp-tag-color-white">LIVE</span>
<!----></div><div data-v-a1v2v3="" class="versionAndMemo">
<span data-v-a1v2v3="" style="display: inline-block; line-height: 26px; vertical-align: middle; margin: 0px 1px; font-weight: bold; font-size: 14px;">1.2.3.44</span>
<!----></div></div>
<div data-v-a1v2v3="" class="mvp-col mvp-col-span-6 mvp-col-span-xs-8 mvp-col-span-sm-6 mvp-col-span-md-6 mvp-col-span-lg-6"><div data-v-a1v2v3="" style="display: inline-block; float: right; margin-right: 6px;"><i data-v-a1v2v3="" class="lal la-download" style="font-size: 1.8em; margin-top: 8px; display: table-cell; vertical-align: middle;"></i></div>
<div data-v-a1v2v3="" style="float: right; margin-right: 22px;"><i data-v-a1v2v3="" class="lal la-link" style="font-size: 1.8em; margin-top: 8px; display: table-cell; vertical-align: middle;"></i></div></div></div></div> <div class="mvp-collapse-content" style="" data-old-padding-top="" data-old-padding-bottom="" data-old-overflow="">
<div class="mvp-collapse-content-box">
<div data-v-a1v2v3="" class="mvp-row"><div data-v-a1v2v3="" class="mvp-tag mvp-tag-default mvp-tag-checked" style="margin-left: -16px; visibility: hidden;">
<!----> <span class="mvp-tag-text">LIVE</span>
<!----></div><span data-v-a1v2v3="" style="display: inline-block;">
2019.06.12 17:09
<br data-v-a1v2v3="">
Here is what I have so far:
page = requests.get(app, headers=headers, cookies=cookies).text
soup = BeautifulSoup(page, 'html.parser')
for spantime in soup.findAll("div", {"class": "mvp-collapse-content-box"}):
print(spantime)
But nothing is being printed. I have also tried adding the following:
page = requests.get(app, headers=headers, cookies=cookies).text
soup = BeautifulSoup(page, 'html.parser')
for spantime in soup.findAll("div", {"class": "mvp-collapse-content-box"}):
print(spantime.text)
for span in spantime.find_all('span', recursive=True):
print(span.text)
But the neither of them prints anything. I have a feeling that it might have something to do with the mvp-collapse-content-box class that I've used - some of the div tags with that class do not necessarily have span tags, as shown in the Full HTML.
Use find_next() to find the span tag and use text property.
from bs4 import BeautifulSoup
html='''<div class="mvp-collapse-content-box">
<div data-v-a1v2v3="" class="mvp-row"><div data-v-a1v2v3="" class="mvp-tag mvp-tag-default mvp-tag-checked" style="margin-left: -16px; visibility: hidden;">
<!----> <span class="mvp-tag-text">LIVE</span>
<!----></div><span data-v-a1v2v3="" style="display: inline-block;">
2019.06.12 17:09
<br data-v-a1v2v3="">'''
soup=BeautifulSoup(html,'html.parser')
div=soup.find('div',class_="mvp-collapse-content-box")
print(div.find_next('span').find_next('span').text.strip())
Output:
2019.06.12 17:09
You can always select a child tag like this:
div = soup.find("div", { "class" : "mvp-collapse-content-box" })
spans = div.findChildren("span" , recursive=False)
for span in spans:
print span
Ok so I have two html files. base.html and search_results.html
base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
font-family: sans-serif;
background-image: url('/static/Flat-Color-Gradient-Triangles.png');
width: 430px;
height: 763px;
align-items: center;
}
h1 {
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
font-size: 45px;
font-color: #333333;
font-weight: bold;
margin: 0;
padding: 3px;
text-align: center;
}
h2 {
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
font-size: 15px;
font-weight: bold;
margin: 0;
padding: 3px;
border: 1.5px
}
h3 {
font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
font-size: 14px;
font-weight: 100;
margin: 0;
border-top: 1px;
border-bottom: 1px;
padding: 3px;
}
.explicit{
color: rgb(200, 0, 0);
}
.rank{
font-weight: bold;
}
table {
border-collapse: collapse;
padding: 4px;
}
table, th, td {
padding: 5px;
border-bottom: 1px solid black;
color: white;
text-align: center;
}
th {
background-color: #121f1f;
border-left: #121f1f;
border-right:#121f1f;
}
td {
background-color: #253f3f;
border-left: #253f3f;
border-right: #253f3f;
}
input[type='text'] {
width: 100%;
padding: 6px 10px;
margin: 6px 0;
box-sizing: border-box;
border: 2px solid #ccc;
font-size: 14px;
border-radius: 10px;
}
input[type='text']:focus {
border: 3px solid red;
}
input[type = 'submit'] {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
width: 100%;
}
input[value="Up"] {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
}
input[value="Down"] {
background-color: rgb(200,0,0);
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
}
input[value="Add"] {
border: 3px solid #4CAF50;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
}
div.content {
width: 430px;
align-items: center;
}
</style>
</head>
<body>
<div class="content">
<h1>Public Playlist</h1>
<form action = '/search_results' method="POST">
<input placeholder="Artist:" type = 'text' name='artist'> </input>
<input placeholder="Album:" type = 'text' name='album'> </input>
<input placeholder="Track:" type = 'text' name='track'> </input>
<input type="submit" value="Submit!" id="search"/>
</form>
<table >
<tr>
<th><h2>Rank</h2></th>
<th><h2>Title</h2>
<h2>Author|Album</h2></th>
<th><h2>Score</h2></th>
<th><h2>Vote</h2></th>
</tr>
<tr>
<td><h3 type="bold">1</h3></td>
<td><h3>{{name}}</h3>
<h3>{{artist}}:{{album}}</h3></td>
<td><h3>{{ score }}</h3></td>
<form action="/vote" method="POST">
<td>
<input type="button" name="vote" value="Up" id="up">
<input type="button" name= "vote" value="Down" id="down">
</td>
</form>
</tr>
<tr>
<td><h3 type="bold">2</h3></td>
<td><h3>{{name1}}</h3>
<h3>{{artist1}}:{{album1}}</h3></td>
<td><h3>{{ score1 }}</h3></td>
<form action="/" method="POST">
<td>
<input type="button" name="vote1" value="Up" id="up">
<input type="button" name= "vote1" value="Down" id="down">
</td>
</form>
</tr>
<tr>
<td><h3 type="bold">3</h3></td>
<td><h3>{{name2}}</h3>
<h3>{{artist2}}:{{album2}}</h3></td>
<td><h3>{{ score2 }}</h3></td>
<form action="/vote" method="POST">
<td>
<input type="button" name="vote2" value="Up" id="up">
<input type="button" name= "vote2" value="Down" id="down">
</td>
</form>
</tr>
<tr>
<td><h3 type="bold">4</h3></td>
<td><h3>{{name3}}</h3>
<h3>{{artist3}}:{{album3}}</h3></td>
<td><h3>{{ score3 }}</h3></td>
<form action="/vote" method="POST">
<td>
<input type="button" name="vote3" value="Up" id="up">
<input type="button" name= "vote3" value="Down" id="down">
</td>
</form>
</tr>
<tr>
<td><h3 type="bold">5</h3></td>
<td><h3>{{name4}}</h3>
<h3>{{artist4}}:{{album4}}</h3></td>
<td><h3>{{ score4 }}</h3></td>
<form action="/vote" method="POST">
<td>
<input type="button" name="vote4" value="Up" id="up">
<input type="button" name= "vote4" value="Down" id="down">
</td>
</form>
</tr>
<tr>
<td><h3 type="bold">6</h3></td>
<td><h3>{{name5}}</h3>
<h3>{{artist5}}:{{album5}}</h3></td>
<td><h3>{{ score5 }}</h3></td>
<form action="/vote" method="POST">
<td>
<input type="button" name="vote5" value="Up" id="up">
<input type="button" name= "vote5" value="Down" id="down">
</td>
</form>
</tr>
<tr>
<td><h3 type="bold">7</h3></td>
<td><h3>{{name6}}</h3>
<h3>{{artist6}}:{{album6}}</h3></td>
<td><h3>{{ score6 }}</h3></td>
<form action="/vote" method="POST">
<td>
<input type="button" name="vote6" value="Up" id="up">
<input type="button" name= "vote6" value="Down" id="down">
</td>
</form>
</tr>
<tr>
<td><h3 type="bold">8</h3></td>
<td><h3>{{name7}}</h3>
<h3>{{artist7}}:{{album7}}</h3></td>
<td><h3>{{ score7 }}</h3></td>
<form action="/vote" method="POST">
<td>
<input type="button" name="vote7" value="Up" id="up">
<input type="button" name= "vote7" value="Down" id="down">
</td>
</form>
</tr>
<tr>
<td><h3 type="bold">9</h3></td>
<td><h3>{{name8}}</h3>
<h3>{{artist8}}:{{album8}}</h3></td>
<td><h3>{{ score8 }}</h3></td>
<form action="/vote" method="POST">
<td>
<input type="button" name="vote8" value="Up" id="up">
<input type="button" name= "vote8" value="Down" id="down">
</td>
</form>
</tr>
<tr>
<td><h3 type="bold">10</h3></td>
<td><h3>{{name9}}</h3>
<h3>{{artist9}}:{{album9}}</h3></td>
<td><h3>{{ score9 }}</h3></td>
<form action="/vote" method="POST">
<td>
<input type="button" name="vote9" value="Up" id="up">
<input type="button" name= "vote9" value="Down" id="down">
</td>
</form>
</tr>
</table>
<script>
setTimeout(function () {location.reload() },60000);
</script>
</div>
</body>
</html>
search_results.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
font-family: sans-serif;
background-image: url('/static/Flat-Color-Gradient-Triangles.png');
width: 640px;
height: 1136px;
}
h1 {
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
font-size: 45px;
font-color: #333333;
font-weight: bold;
margin: 0;
padding: 3px;
text-align: center;
}
h2 {
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
font-size: 15px;
font-weight: bold;
margin: 0;
padding: 3px;
border: 1.5px
}
h3 {
font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
font-size: 14px;
font-weight: 100;
margin: 0;
border-top: 1px;
border-bottom: 1px;
padding: 3px;
}
.explicit {
color: rgb(200, 0, 0);
}
.rank {
font-weight: bold;
}
table {
border-collapse: collapse;
padding: 4px;
}
table,
th,
td {
padding: 5px;
border-bottom: 1px solid black;
color: white;
text-align: center;
}
th {
background-color: #121f1f;
border-left: #121f1f;
border-right: #121f1f;
}
td {
background-color: #253f3f;
border-left: #253f3f;
border-right: #253f3f;
}
input[type='text'] {
width: 100%;
padding: 6px 10px;
margin: 6px 0;
box-sizing: border-box;
border: 2px solid #ccc;
font-size: 14px;
border-radius: 10px;
}
input[type='text']:focus {
border: 3px solid red;
}
input[type='submit'] {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
width: 100%;
}
input[value="Up"] {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
}
input[value="Down"] {
background-color: rgb(200, 0, 0);
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
}
input[name="Add"] {
border: 3px solid #4CAF50;
color: white;
background-color: #253f3f;
padding: 16px 32px;
text-decoration: none;
font-weight: bold;
margin: 4px 2px;
}
</style>
</head>
<body>
<h1>Public Playlist</h1>
<table>
<tr>
<th>
<h2>Rank</h2>
</th>
<th>
<h2>Title</h2>
<h2>Author|Album</h2>
</th>
<th>
<h2>Score</h2>
</th>
<th>
<h2>Add</h2>
</th>
</tr>
<tr>
<form action="/add" method="GET">
<td>
<h3 type="bold">1</h3>
</td>
<td>
<h3>{{name}}</h3>
<h3>{{artist}}:{{album}}</h3>
</td>
<td>
<h3>{{ score }}</h3>
</td>
<td>
<input type="button" name="Add" value="Add" id="Add">
</td>
</form>
</tr>
<tr>
<form action="/add" method="GET">
<td>
<h3 type="bold">2</h3>
</td>
<td>
<h3>{{name1}}</h3>
<h3>{{artist1}}:{{album1}}</h3>
</td>
<td>
<h3>{{ score1 }}</h3>
</td>
<td>
<input type="button" name="Add" value="Add1" id="Add1">
</td>
</form>
</tr>
<tr>
<form action="/add" method="GET">
<td>
<h3 type="bold">3</h3>
</td>
<td>
<h3>{{name2}}</h3>
<h3>{{artist2}}:{{album2}}</h3>
</td>
<td>
<h3>{{ score2 }}</h3>
</td>
<td>
<input type="button" name="Add" value="Add2" id="Add2">
</td>
</form>
</tr>
<tr>
<form action="/add" method="GET">
<td>
<h3 type="bold">4</h3>
</td>
<td>
<h3>{{name3}}</h3>
<h3>{{artist3}}:{{album3}}</h3>
</td>
<td>
<h3>{{ score3 }}</h3>
</td>
<td>
<input type="button" name="Add" value="Add3" id="Add3">
</td>
</form>
</tr>
<tr>
<form action="/add" method="GET">
<td>
<h3 type="bold">5</h3>
</td>
<td>
<h3>{{name4}}</h3>
<h3>{{artist4}}:{{album4}}</h3>
</td>
<td>
<h3>{{ score4 }}</h3>
</td>
<td>
<input type="button" name="Add" value="Add4" id="Add4">
</td>
</form>
</tr>
<tr>
<form action="/add" method="GET">
<td>
<h3 type="bold">6</h3>
</td>
<td>
<h3>{{name5}}</h3>
<h3>{{artist5}}:{{album5}}</h3>
</td>
<td>
<h3>{{ score5 }}</h3>
</td>
<td>
<input type="button" name="Add" value="Add5" id="Add5">
</td>
</form>
</tr>
<tr>
<form action="/add" method="GET">
<td>
<h3 type="bold">7</h3>
</td>
<td>
<h3>{{name6}}</h3>
<h3>{{artist6}}:{{album6}}</h3>
</td>
<td>
<h3>{{ score6 }}</h3>
</td>
<td>
<input type="button" name="Add" value="Add6" id="Add6">
</td>
</form>
</tr>
<tr>
<form action="/add" method="GET">
<td>
<h3 type="bold">8</h3>
</td>
<td>
<h3>{{name7}}</h3>
<h3>{{artist7}}:{{album7}}</h3>
</td>
<td>
<h3>{{ score7 }}</h3>
</td>
<td>
<input type="button" name="Add" value="Add7" id="Add7">
</td>
</form>
</tr>
<tr>
<form action="/add" method="GET">
<td>
<h3 type="bold">9</h3>
</td>
<td>
<h3>{{name8}}</h3>
<h3>{{artist8}}:{{album8}}</h3>
</td>
<td>
<h3>{{ score8 }}</h3>
</td>
<td>
<input type="button" name="Add" value="Add8" id="Add8">
</td>
</form>
</tr>
<tr>
<form action="/add" method="GET">
<td>
<h3 type="bold">10</h3>
</td>
<td>
<h3>{{name9}}</h3>
<h3>{{artist9}}:{{album9}}</h3>
</td>
<td>
<h3>{{ score9 }}</h3>
</td>
<td>
<input type="button" name="Add" value="Add9" id="Add9">
</td>
</form>
</tr>
</table>
</body>
</html>
I then have a python file projectfalcon.py The relevant methods are:
#app.route('/add', methods=['GET'])
def addingSongs():
if request.method == 'GET':
btnID = request.form['btn']
if btnID == 'Add0':
songResults[0].upVote()
addedSongs.append(songResults[0])
songResults.remove(0)
if btnID == 'Add1':
songResults[1].upVote()
addedSongs.append(songResults[1])
songResults.remove(1)
return render_template('base.html')
So the base.html is the first page that loads. You type in an artist name to search for songs and it takes you to the search_results.html where the results are displayed. I am trying to let the user be able to click the add button and the song will then be added to a list in the projectfalcon.py file. After clicking it will also take you back to the base.html file and reload the songs that in the playlist I am not sure what I am doing wrong. I have googled multiple times but may have not found the right wording. Any help is appreciated.
The most obvious issue I can spot is the way you're accessing the btn variable. Since your form sends a GET request, it needs to be accessed like this:
btnID = request.args.get('btn', '')
Apart from that, I don't understand how you're storing addedSongs list. Flask context is limited to requests, and you shouldn't use python global namespace. You should either create a context variable (also a global in flask) or the easiest way would be to just store user data in a database.
You should take a look at this flask tutorial which is a complete guide to making a web app from scratch. Perhaps it may be of some use to get the basics cleared up and allow you to 'find the right wordings' to your problems! :)
Cheers.