We Keep Coding

AppleScript cannot click input tag to add file

I am trying to use applescript to add a file to a website's input field.
This is my code so far:
set ClickInput to "var myInput = document.getElementByClassName('jsx-1828163283 upload-btn-input')[0]; myInput.dispatchEvent(new MouseEvent('mousedown')); myInput.dispatchEvent(new MouseEvent('mouseup'));"
set ClickInput2 to "var myInput = document.getElementsByName('upload-btn')[0]; myInput.dispatchEvent(new MouseEvent('mousedown')); myInput.dispatchEvent(new MouseEvent('mouseup'));"
activate application "Safari"
tell application "Safari"
open location "https://www.example.com/upload"
set theTab to tab 1 of window 1
-- wait until page loads
repeat while document 1's source = ""
delay 0.5
end repeat
-- do JavaScript ClickInput in theTab
do JavaScript ClickInput2 in theTab
delay(5)
close theTab
end tell
Here is the HTML around the input element I want to select:
<div class="jsx-3758851661 upload">
<div class="jsx-1828163283 upload-btn">
<div class="jsx-3758851661 card stage-1">
<div class="jsx-3758851661 text-main">Select video to upload</div>
<div class="jsx-3758851661 text-sub text-sub-margin">Or drag and drop a file</div>
<br class="jsx-3758851661">
<ul class="jsx-3758851661 text-sub">
<li class="jsx-3758851661">MP4 or WebM</li>
<li class="jsx-3758851661">720x1280 resolution or higher</li>
<li class="jsx-3758851661">Up to 60 seconds</li>
</ul>
</div>
<input type="file" name="upload-btn" accept="video/mp4,video/x-m4v,video/*" class="jsx-1828163283 upload-btn-input">
</div>
</div>
The way the site works is you click the outermost div <div class="jsx-3758851661 upload"> and the safari file finder pops up and you select what file you want.
I have tried clicking the divs outside of the input tag and I have tried clicking the input tag by itself.
I tried to do this by selecting the classnames of the divs and the input tag
I also tried to do this by selecting the input tag by its name and clicking on that
None of these worked.
Im not sure if it clicked but none of these made the file finder pop up
Do you guys have any ideas? Let me know if you would like some clarification. thanks!

figured out set ClickInput to "document.getElementsByName('upload-btn')[0].click();" works !

getElementsByName isn’t a function that I’m aware exists as standard, so you probably want to use getElementsByClassName or querySelector.
The input element has two class names, of which I’m going to choose ”upload-btn-input” in my example below:
tell application id "com.apple.safari"
open location "https://www.example.com/upload"
tell document 1
repeat while the source = ""
delay 0.5
end repeat
do javascript "document.querySelector('.upload-btn-input').click();"
end tell
end tell
If you can provide the actual URL of the page in question, this would allow me to refine this answer to ensure it’s appropriate for what you’re trying to do.

How to get button text with ng-model in angular.js?

I just started to work with Angular, it seems good to implement.
I always use ng-model to get text from textfield.
Can I get the button text with help of ng-model or something else?
I know it's not good question to ask here. but I didn't get any relevant solution for anywhere.
for example this is button
<button class="common btnDarkGrey">Do it</button>
and I want to get Do it with Angular
Thank You.

You should use ng-bind to bind the data in your controller to the button.
<button ng-bind="buttonNameVariable"></button>
Then in your controller you will have a variable named scope.buttonNameVariable="Do it"
You can use the variable in the controller, and retrieve it with the variable. You use ng-model only for input fields in html, not for buttons for example.

how about:
$scope.buttonText = 'Do It' //in the JS
<button>{{buttonText}}</button> <!-- in the HTML -->
or:
<button ng-init="buttonText = 'Do It'">{{buttonText}}</button>
Then you have the text of the button in the buttonText variable.

If you don't mind putting jQuery codes in angular, this could be done:
$('button.common').click(function(){
console.log($('button.common').html())
});

Putting value into Textbox upon clicking Div

I am currently trying to make a wallpaper changer for my page.
At the minute, I would like to put the URL of a wallpaper into a text box when it's respective DIV option in a CSS menu is clicked.
Here is my JQuery
$("div.bg8").click( function() {
var BackgroundURL = 'Styles/hongkongskyline.jpg';
var TheTextBox = document.getElementById('<%=BackgroundsTxt.ClientID%>');
TheTextBox.value= BackgroundURL;
alert('This has worked'); });
.. and my HTML...
<ul><li class="#cssmenu"><a>
<div id="bg8" runat="server">
<table style="height: 16px; width:33%;">
<tr>
<td>
<img src='Styles/hongkongskyline.jpg' width="34px" height="32px" /></td> <td>Hong Kong Skyline </td>
</tr>
</table>
</div>
</a></li></ul>
Unfortunately, nothing seems to be happening when I click the DIV..
Does anybody see any problems which I can't?
Many thanks.

Several problems here.
First, you aren't referring to your div's ID in your jQuery - you're referring to a class called bg8. Try this:
$("#bg8")...
Next, you're mixing in some native-dom stuff into your jQuery. Instead of
document.getElementById('<%=BackgroundsTxt.ClientID%>');
try
$("#<%=BackgroundsTxt.ClientID%>");
and make sure the ID is resolved by looking at the source to your page.
And lastly, to set the value of the textbox:
theTextBox.val(BackgroundURL);
Your whole function could be
$("#bg8").click( function() {
$("#<%=BackgroundsTxt.ClientID%>").val('Styles/hongkongskyline.jpg');
alert('This has worked');
});
My strategy is to test event handlers with simple alerts before moving on to the real logic.

your jQuery states $('div.bg8') , this calls for a div with the class bg8,
you have not set the class, but rather the id of your div as bg8
change this: $('div.bg8') to $('#bg8')
;)

javascript change div html when click span

Ok I have a small question.
I have the following
<div><span class="spanright" onclick"">Update</span><label class="myinfo"><b>Business information:</b></label></div>
What I want to do is when the user clicks on the span it changes the html after the label an adds an input box and submit button.
I think I need to do a this.document but not sure

Hi hope this might give you a small understanding of what to do when it comes to registering events. StackOverflow is about you learning how to do something, so we dont write the scripts for you, we are just trying to point you in the right direction of it.
http://jsfiddle.net/WKWFZ/2/
I would recommend you to import jQuery library, as done in the example, if possible. It makes the the world of javascript alot easier!
Documentation to look up:
http://api.jquery.com/insertAfter/
http://api.jquery.com/bind/
Look up some jQuery tutorials! there is alot of them out there.

I added a form which will hold the input
JavaScript:
function showInput()
{
document.getElementById('container').innerHTML += '<input type="text"/><input type="submit"/>';
}
HTML:
<div id="container">
<span class="spanright" onclick"showInput()">Update</span>
<label class="myinfo"><b>Business information:</b></label>
</div>

Summoner's answer is right, but I prefer using jquery (it's loaded on almost every page I work with):
HTML:
<div id="container">
<span class="spanright">Update</span>
<label class="container"><b>Business information:</b></label>
</div>​
Javascript:
​$(".spanright").click(function(){
$("#container").append('<br /><input type="text"/><input type="submit"/>');
$(".spanright").unbind('click');
})​​;​
This way, the click event will work once, as it is what you probably intended.

Try this in jquery flavor --
$(document).ready(function(){
$(".spanright").click(function(){
$(".myinfo").css("color","red");
});
});
Check fiddle --
http://jsfiddle.net/swapnesh/yHRND/

jQuery update form element

I have a form that I create a checkbox on a click of a button. I am using https://github.com/pixelmatrix/uniform which provides an update function to style dynamically create elements which does not work. I got a work around but my problem is that it also reset the already created elements so they double, triple etc.
They are wrapped in a div with a class of checker. Is there a way to check if the div is around it first before applying my $('.table').find('input:checkbox').uniform(). I have tried different examples but they dont seem to work with my code and my jQuery is still limit.
Thanks
<div class="checker" id="uniform-160">
<span>
<input type="checkbox" name="chbox" id="160" style="opacity: 0;">
</span>
</div>
jQuery:
$(".fg-button").live("click", function(){
$('.table').find('input:checkbox').uniform()
});

Try this:
$('.table input:checkbox').not('div.checker input').uniform()