Develop Reference

Trying to programatically click a button on a web page with cefsharp

I'm using cefsharp and vb.net to put some code together to move to the next page of this site:
https://www.recommendedagencies.com/search#{}
The idea is to read the list of company names on each page and store to a csv file. This part I can do.
The problem I have is that I can't find the name of the 'Next' button - presumably if I had that I could execute some javascript on the browser to press the button.
I've inspected the page in Firefox, but can't see any name I can use - I'm not really familiar enough with html/page design to know why not or how it works.
Could anyone tell me a good method to get button names from a web page? - I've done some searching and even asked a similar question myself before, but I can't find anything which helps, given my patchy knowledge.
Thanks

Inspect the DOM for the 'Next' button.
Look for id's or classes that you can use to identify it.
use document.querySelector() to find the element by the css selector
call the element.click() function to programatically press next
const nextButton = document.querySelector('.sp-pages-nav_next')
nextButton.addEventListener('click', (event) => {
console.log('something clicked next')
})
nextButton.click()
<div class="sp-pages-nav sp-pages-nav_next" data-reactid=".1.3.4.1">Next</div>
In the above snippet on load you can see the code nextButton.click() invokes the console log. You can click the word Next manually to the same effect.
in cefsharp perhaps something like:
browser.ExecuteJavaScriptAsync("(function(){ document.querySelector('.sp-pages-nav_next').click(); })();");
A very similar example can be found here :
https://github.com/cefsharp/CefSharp/wiki/General-Usage#1-how-do-you-call-a-javascript-method-from-net
// When executing multiple statements, group them together in an IIFE
// https://developer.mozilla.org/en-US/docs/Glossary/IIFE
// For Google.com pre-populate the search text box and click the search button
browser.ExecuteJavaScriptAsync("(function(){ document.getElementsByName('q')[0].value = 'CefSharp Was Here!'; document.getElementsByName('btnK')[0].click(); })();");

How to select element by data area

I have this HTML form:
I'm writing a bot that he can go to the specific website and navigate to a certain page the image above where my bot confused. I need to select the first div data-area:"reslut1" and click on it to navigate to the next page
i'm using javascript with puppetteer chromuim
if anyone can help?
thank you

You are using the wrong selector, you are trying to find the element by class:
.result1
While you should be trying to select by data-area:
[data-area="result1"]
To perform a click on that element, you can use:
await page.click('div[data-area="result1"]');

Javascript only firing once

long-time lurker here asking my first public questions because I am truly stuck.
I'm working on a hosted shopping cart platform so I only have access to add code in certain designated divs. I have a javascript code that I'm calling externally (because inline is bad unless you have to, right?)
So my issue is, There is a <select> dropdown that I do NOT have direct access to change HTML and the silly shopping cart platform didn't give it an id, only the name attribute is set.
I need to clear the <div id="result_div"> when the <select name="ShippingSpeedChoice"> drop-down is clicked so I have:
$("[name=ShippingSpeedChoice]").change(function(e) {
$("#result_div").empty();
});
It fires once, but that's it. My question is, how do I make it fire EVERY TIME the <select name="ShippingSpeedChoice"> is clicked?
Here's all the relevant javascript (in case it's preventing #result_div from clearing somewhere):
$("[name=ShippingSpeedChoice]").change(function(e) {
$("#result_div").empty();
});
$("#btn_calc").click(function(e) { /// onclick on Calculate Delivery Date button
Thanks in advance, any help is appreciated!

If you want something to happen every time the element is clicked, use .click() rather than .change(). The latter only fires if they select a different value from the menu than it had before.
$("[name=ShippingSpeedChoice]").click(function(e) { $("#result_div").empty(); });

First of all, I'd probably try and setup the shopping cart select to have an id.
$("[name=ShippingSpeedChoice]").id = 'shopping_cart_select';
then try binding the "change" function to the element via it's id.
$('#shopping_cart_select').bind('change', function(){
//rest of code goes here
}

I still wasn't able to use the name attribute to call the function, so I found a way around it by using the id of the td the ShippingSpeedChoice dropdown was in:
$("#DisplayShippingSpeedChoicesTD").change(function(e) {
$("#result_div").empty();
And it fires every time now. Thank you so much for all your feedback & assistance - I still wish I could figure out how to use the name attribute rather than the id, but that will be a puzzle for another day!

Change displayed price based on a button click

Really hope someone can help with this.
I am building a site and need to be able to have people display a price based on their preferred option.
To see what I mean, please look at this link where it is done perfectly: https://swiftype.com/pricing
...when people select monthly or yearly, the displayed price in the chart beneath changes dynamically and instantly (without page reload).
This is what I need (except with three option to choose, not one). I suspect it is jquery with dynamic divs, but I cannot make it happen.
If anyone can help, I would be so so grateful.
Best wishes, and thanks for your time. AB.

// make the billing period selected tabs work
$(function() {
var $pricingTable = $('#pricing-table');
$('#billing-picker .tab').click(function() {
var $selectedTab = $(this);
var selectedPeriod = $selectedTab.data('period-length');
$('.tab').removeClass('selected');
$selectedTab.addClass('selected');
$pricingTable.removeClass().addClass(selectedPeriod);
})
});
This is the SCRIPT which does the selection of button ..

The link that you provide, is using a monthly or yearly class to hide and show the divs that already contains the prices, without any Ajax call. Try to inspect the elements with firebug or other console and you will see by yourself how is working.

You can either have an empty div which, on button click loads ajax content dynamically. If it's always going to be the same content, than I would suggest just have three divs and simply hiding the ones that are not being shown.
Have a look into the Jquery 'hide' method.
Hope that helps

jQuery, .html, add a div element

I'm trying to add a div with some details of a discount coupon so the user can confirm it before I add it to the shopping cart.
The code to the button etc... is this, and it works if I place on the website:
<div class="simpleCart_shelfItem"><h1 class="item_name">Discount of 30%!</h1>Confirm Coupon!<span class="item_price" >0.00€</span></div>
Then, I tried to dynamically add the code (when a php post confirms that the coupon code is OK) using jQuery, but by some strange reason it doesn't work.
I managed to write this:
$('div.cupao_confirm').html('<div class="simpleCart_shelfItem"><h1 class="item_name">Discount of 30%!</h1>Confirm Coupon!<span class="item_price" >0.00€</span></div>');
Without jQuery the code add the "0.00€" product to the shopping cart, so I can later send the equivalent money back to the buyer. With jQuery when I click on the link nothing happens at all. So it's not a jQuery related problem... I might be doing the .html() wrong... :( help!
Thanks!

try to use the append() method :
$('div.cupao_confirm').append("<div class="simpleCart_shelfItem"><h1 class="item_name">Discount of 30%!</h1>Confirm Coupon!<span class="item_price" >0.00€</span></div>");
Give it a try and let me know if it worked, Thanks.

I think maybe you need to re-initialize simple cart ager changing the shell contents. Try:
simpleCart.init();