Using InternetExplorer.Application object to check a checkbox on a webpage - dom

I would like to use...
Dim IE As Object
Set IE = CreateObject("InternetExplorer.Application")
With appropriate code to check a checkbox on a webpage
The HTML Code on the rendered page is...
<form class="form-inline" style="float:right">
<div class="checkbox">
<label style="padding-top: 1px">
<input data-bind="checked: orderBook.showAll" style="top:2px"
type="checkbox" /> Show All
</label>
</div>
</form>
I can't use getElementsByID() as I don't think it has one.
Any suggestions?

While your checkbox does not have an ID, it does have a Class. Without seeing more of the HTML code I cannot be entirely sure, but the following code should allow you to set your checkbox to a variable:
Option Explicit
Sub test
Dim IE As Object
Set IE = CreateObject("InternetExplorer.Application")
' Navigate to desired web page
' Code to ensure page is fully loaded
Dim cBox As Object
Set cBox = IE.document.getElementsByClassName("checkbox")(0)
End Sub
Then you can use cBox how you need to (possibly like cBox.Click or another method). Notice that I appended (0) to the end of that statement? That means you are assigning the first instance of that class to the variable. If this checkbox is the only object with the class name of checkbox, then this won't be an issue, but you may have to change this number if it's not.

Related

Bootstrap Form Helpers country picker doesn't get serialized

I have a country picker in my form like this:
<select class="bfh-countries text-left" name="country" id="country" data-country="DE">
</select>
I can get the value with jQuery like this:
$("#country").val()
but when i try to serialize the form with $("#myform").serializeArray() The value for "country" is an empty string.
How can i fix this?
I ran into this problem and it took me forever to find because there aren't any examples of it. What you really want to do is use data-name="country", which names the hidden variable on the back end as country. For the country picker, you can use the div tag as follows:
<div class="country bfh-selectbox bfh-countries" data-flags="true" data-filter="true" data-name="country" data-country="POSTBACK_VARIABLE_GOES_HERE"></div>
If you do this, you'll find a hidden variable that's added to the page as follows:
<input type="hidden" name="country" value="US">
The value above assumes you selected United States but it is entered as a 2 character code, which could then be entered as data-country above if you need to do server-side validation and display the page again without forcing the user to select the value all over again.
This was seriously a nightmare to find.

Questions about grails form

Assuming that i have the following data in my params
params:[input:[1, 2, 3]]
And i have the following form in my Grails app
<div class="block1">
<label class="control-label">
<g:message code="input.label" default="Input"/>
</label>
<div class="controls">
<g:textField id="input1" name="input" value="${input}" readonly="${actionName != 'show' ? false : true}"/>
</div>
</div>
<div class="block2">
<label class="control-label">
<g:message code="input.label" default="Input"/>
</label>
<div class="controls">
<g:textField id="input2" name="input" value="${input}" readonly="${actionName != 'show' ? false : true}"/>
</div>
</div>
<div class="block3">
<label class="control-label">
<g:message code="input.label" default="Input"/>
</label>
<div class="controls">
<g:textField id="input3" name="input" value="${input}" readonly="${actionName != 'show' ? false : true}"/>
</div>
</div>
The form design above is correct, because in my form design, there will be several inputs of the same name (but each will be saved to the database under different primary keys) and it can be increases and decreases according to user selection.
Few questions using the above
How do i make it so that the value for input1 is params.input[0], input2 is params.input[1] and input3 is params.input[2] in the view? I can pass the model from controller without problem, but i couldn't distribute the value properly to each input on the form.
Is there any way to change the value ${input} dynamically? As in if i want to change the value to ${input[0]} or ${input[1]}
Can i automatically set the amount of block appended into the form using the g:each tag? Say like if from controller i want to set the rendering block amount to 3, so can i use the g:each tag to render the block 3 times in the form?
Thanks
The links are examples of how to use ajax/jquery to get values from a remote call and replace html element (divId) within a page - this divId could be the entire
<input type="text" name="input" value="newvalue"/>
upon triggering some form of call as above to get the new value.. in regards to
g:textField
yes it works like all other grails tags in the end they are transformed back to the correct HTML terminology...
The actual variable value is dynamic if you defined
<input name="existingvariable" value="${something}" ...
where something was a parameter from the given controller - and then you updated the call so
://YOURHOST:8080/yourapp/controller?existingvariable=newvalue
and refreshed or clicked this link which is what ajax would be doing for you doing a new call to either another controller to generate new values or same and passing new value to it and then grabbing data and pushing it back onto the divId ... (all in the background)
Groovy loading into divs
Grails - Select menu not rendering
I want my selects dropdowns to auto populate with Ajax in Grails website
The above are all related to using ajax to populate / update existing form elements
If you wish to update a live form with a new live value (non existant in DB) take a look at modaldynamix plugin. //github.com/vahidhedayati/modaldynamix

jQueryUI datepicker issue in append method

okay so i have this page im making, the navigation panel is simple, when i click a link according the the link name it appends the html into the content area, here is the append script for this section
So my goal is where the input box is the ID datepicker im trying to use the jQueryUI datepicker function from jQuery, i tested a regular input box in the actual BODY and not through the append method and it works fine, my issue is im guessing the single vs the double qoutation marks, the ' vs "
how can i solve this issue?
else if (this.id == "tour"){
$("#content").empty();
$("#content").append("<p>\
<h2> Add Tour Dates </h2>\
<form action='tourdates.php' method='post'>\
<input type='text' name='title' placeholder='Title' id='title'>\
<input type='text' name='venueName' placeholder='Vanue Name' id='venueName'>\
<input type='text' name='venueStreetAdress' placeholder='Location Street Adress' id='venueStreetAdress'>\
<input type='text' name='venueCity' placeholder='City' id='venueCity'>\
<input type='text' name='venueState' placeholder='State' id='venueState'>\
<input type='text' name='venueZip' placeholder='Postal Code' id='venueZip'>\
<input type='text' name='datepicker' id='datepicker'>\
<input type='text' name='time' placeholder='Time' id='time'> </p>\
");
If you have a strong feeling that there's something to do with your quotation mark, try to narrow down the problem: Have you tried to put this in a separated variable and make the reference there?
var htmlStuff = "<p>\
<h2> Add Tour Dates </h2>\...";
$("#content").append(htmlStuff);
But I don't think your problem is related to double/single quotes, but with the asynchronous operation of setting up a link to append HTML and try to assign an UI widget before the components exist in the DOM.
Although I find this very bad for code readability, one option would be to append another call to a function that defines the DatePicker (like a "callBack") right after your append. It should work, e.g.:
$('something').append(" <html stuff> ").defineDatePicker();
function defineDatePicker(){
$('one of the elements within that html stuff').datepicker();
}

get checkbox group values

This has driven me really bananas. It's so simple and easy and yet I can't figure out what's wrong with it.
I want to get my checkbox value populated in my controller (for testing purposes).
Here is my form.
<a href='#' name='submitForm'>submit the form</a>
//I have jquery attached to this tag and will submit the form when user clicks it
echo form_open('test/show');
echo form_checkbox('checkbox[]','value1');
echo form_checkbox('checkbox[]','value2');
echo form_checkbox('checkbox[]','value3');
echo form_checkbox('checkbox[]','value4');
echo "<input type='text' name='text1' value='ddd'>";
echo form_close();
//My controller test
public function show(){
$data1=$this->input->post('text1');
//I can get text1 value from input box
$data2=$this->input->post('checkbox');
//it keeps giving me undefined index 'checkbox'
$data3=$_POST['checkbox'];
//same error message
//WTH is going on here!!!!!
}
Please help. This thing drives me nuts! Thanks.
UPDATE:
Thanks for the help. To be more precisely, my submit button is a <a> tag and outside of form tag. It appear that I have to include <a> tag inside my form tag to make them works. Is that true?
A checkbox will not submit any data if it is unchecked as they're not considered successful (as per the w3c specification here)
If you actually tick the box and submit, it'll work - in fact it does, I've just tested it.
You need to wrap calls to $_POST in the isset() function.
if( isset( $_POST['checkbox'] ) ) {}
Calling $this->input->post('checkbox') shouldn't give you an undefined index error as the method deals with this eventuality. the Input::post() method returns false or the value of the checkbox.
Edit --
In response to your amendment to your question, you must use an element of type input with the type attribute set to submit in order to submit your form data without the use of Javascript etc. This button must be INSIDE the <form></form> which you are intending to submit.
<input type="submit" value="Submit">
The type="submit" causes the browser to send the data as submit event occurs. If you wish to use another element insider or outside of the form to do this you need to use Javascript. This however can be disabled on a per browser/user basis and isn't reliable as a result.
// Standard Javascript
<form name="myform"...
<a onclick="javascript:document.myform.submit();" href="javascript:void(0)">Submit</a>
// jQuery
$('#my-a-tag-submit-button').live( 'click', function() {
$('#my-form').submit();
}

Submit button with no name

<input type="submit" value= "OK" />
What I normally do is curl --data "button_name=OK" URL, but the button here has no name. How can I submit via cURL in this case?
CSS Selectors:
Without seeing more HTML you could try a CSS selector of input[value='OK'],
This says, element with input tag having attribute value with value of 'OK'.
CSS query:
VBA:
The CSS selector is applied via the .querySelector method of document.
.document.querySelector("input[value='OK']").Click
In the case that a button doesn't specify a name you will not need to send the button's value in the request, value just exists to provide the button's label in this instance.
I am not very familiar with curl, but give curl --data "" URL a try.
For something like this, without name
<div class="desc"></div>
<div align="center" class="buttons"><input type="submit"
value="Login" /></div>
In VBA, you can use say
dim i as integer
for i = 0 to 19
if webbrowser1.document.getElementsByTagName("input").item(i).getAttribute("type") = "submit" then
if webbrowser1.document.getElementsByTagName("input").item(i).getAttribute("value") = "Login" then
webbrowser1.document.getElementsByTagName("input").item(i).click
Exit For
end if
end if
next
Just Use 19 as an upper bound of the number of input element in the web page and increment it if needed. Once you found which one is it, you can use it straight away