AutoHotkey Homepage AutoHotkey Community
Let's help each other out
 
 FAQFAQ   SearchSearch   MemberlistMemberlist   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 

Using one line JavaScript code to manipulate Web pages
Goto page 1, 2, 3  Next
 
Post new topic   Reply to topic    AutoHotkey Community Forum Index -> Ask for Help
View previous topic :: View next topic  
Author Message
BoBo
Guest
PostPosted: Mon Nov 27, 2006 8:38 pm    Post subject: Using one line JavaScript code to manipulate Web pages Reply with quote
I need two bookmarklets (otherwise I'll get killed/sacked/ignored by my employer/employer/girls. You shouldn' accept that Sad )!!

1) how to toggle a radio button?
2) how to select an entry from a DropDownList?

[Moderator's note: splitted from Useful Bookmarklets/Favelets/One-line-JavaScript's topic in Utilities & Resources, as it is more useful here]
Back to top
PhiLho



Joined: 27 Dec 2005
Posts: 6721
Location: France (near Paris)
PostPosted: Tue Nov 28, 2006 11:46 am    Post subject: Reply with quote
Mmm, should be in Ask for Help...
OK, let's do step-by-step, using the Search page which conveniently have the two form fields.

First, take a look at the source: search "Search previous" string.
Nearby, you find the combo box (aka. drop down list, aka. select): <select class="post" name="search_time"><option value="0" selected="selected">All Posts</option><option value="1">1 Day</option> [...] <option value="364">1 Year</option></select>
You get the name: search_time.

So the bookmarklet is: javascript:document.forms[0].elements["search_time"].selectedIndex = 3; void(0);
or even:
javascript:document.SearchForm.search_time.selectedIndex = 3; void(0);

Name of the form come from: <form action="search.php?mode=results" method="POST" name="SearchForm">

Note that select is also used for doing list boxes, the only difference is the 'size' attribute.

Now the radio buttons: <input type="radio" name="search_fields" value="all" checked="checked" /> Search topic title and message text<br /><input type="radio" name="search_fields" value="msgonly" /> Search message text only<br /><input type="radio" name="search_fields" value="titleonly" /> Search message title only

javascript:document.SearchForm.search_fields[2].checked = true; void(0);

Note: the void(0) is here to prevent the browser from displaying the result of the bookmarklet. Some operations like focus() don't return values, so no need for it. But our assignments return the assigned value, so we have to end with a neutral operation to remain on the same page. Try it without it!
_________________
vPhiLho := RegExReplace("Philippe Lhoste", "^(\w{3})\w*\s+\b(\w{3})\w*$", "$1$2")
Back to top
View user's profile Send private message Visit poster's website
StruggledBoBo
Guest
PostPosted: Tue Nov 28, 2006 12:25 pm    Post subject: Reply with quote
@ PhiLho
thx for that detailed HowTo Very Happy. I've made it to select a specific DDL entry *lets party* Very HappyCool

I've still an issue with the radio button(s) .. Crying or Very sad

Code:
                <input type="radio" name="deviceTypeChoice" tabindex="14" value="0" checked="checked" onclick="showDeviceOptions(false, window.document.forms[0].existingDeviceType)">Existing Devices
                <input type="radio" name="deviceTypeChoice" tabindex="15" value="1" onclick="showDeviceOptions(true, window.document.forms[0].existingDeviceType)">New Devices


If you don't mind could you show us (me, myself & I and the rest of the posse) the bookmarklets to fill an edit field, check a checkbox (TBH, those four input types are the ones I've to fight with at that specific Intranet page Rolling Eyes )

Thx a lot mate Cool
Back to top
BoBo
Guest
PostPosted: Tue Nov 28, 2006 12:27 pm    Post subject: Reply with quote
Ooops. You already explained the Radios Embarassed (obviously I'm punished by an Alzheimer brain dropout incident Rolling Eyes)

Sorry ...
Back to top
BoBo
Guest
PostPosted: Tue Nov 28, 2006 12:37 pm    Post subject: Reply with quote
Can you confirm that IE isn't able to handle Bookmarklet with > 506 chars?
How can I make it to call a local/external *.js from a Bookmarklet ?

Btw. my previous attempt was to push (POST) the forms content to the server using cURL, but I failed till now. Main approach was to get the servers response redirected to an outputfile which could be parsed for error statements.

If done via Bookmarklets I won't get an detectable response (as it's created dynamically and can't be captured via ^C ... Mad
Nevertheless I'd be able to send the content, which is the half way done ... Confused
Back to top
BoBo
Guest
PostPosted: Tue Nov 28, 2006 1:01 pm    Post subject: Reply with quote
I'm not able to toggle the Radios Sad (a Checkbox can be switched on/off Smile ) ...
Back to top
PhiLho



Joined: 27 Dec 2005
Posts: 6721
Location: France (near Paris)
PostPosted: Tue Nov 28, 2006 1:09 pm    Post subject: Reply with quote
BoBo wrote:
Can you confirm that IE isn't able to handle Bookmarklet with > 506 chars?
I have read something about this problem, indeed... Sad
Even worse, the limit seems to vary between versions of IE, mostly to degrade. Evil or Very Mad
Now, there is a good news: when on the same page, you can define a function in a bookmarklet, then use it in another!
Example:
javascript:function Foo(n) { document.forms[0].elements[n].focus(); }
javascript:Foo(5);
or even:
javascript:el = document.forms[0].elements; void(0);
javascript:el[3].value = "boo"; void(0);

Note that edit fields work the same as the others. The second snippet shows how to set a value in such field.
For checkboxes, that's also an input field, and you have to set its checked property to true or false.

[EDIT] I see the last post now... Radio buttons cannot be toggled! You have to set the checked property of one of them to true! Only one radio button can be checked at once, that's their base behavior...
_________________
vPhiLho := RegExReplace("Philippe Lhoste", "^(\w{3})\w*\s+\b(\w{3})\w*$", "$1$2")
Back to top
View user's profile Send private message Visit poster's website
BoBo
Guest
PostPosted: Tue Nov 28, 2006 1:30 pm    Post subject: Reply with quote
Code:
javascript:document.subscriberAddForm.deviceTypeChoice.checked=true;void(0)
Isn't working.

Code:
<input type="radio" name="deviceTypeChoice" tabindex="14" value="0" checked="checked" onclick="showDeviceOptions(false, window.document.forms[0].existingDeviceType)">Existing Devices
                <input type="radio" name="deviceTypeChoice" tabindex="15" value="1" onclick="showDeviceOptions(true, window.document.forms[0].existingDeviceType)">New Devices
As you can see, only the first rb is labled with the checked= param.

Confused
Back to top
not-logged-in-daonlyfreez
Guest
PostPosted: Tue Nov 28, 2006 2:04 pm    Post subject: Reply with quote
Quote:
Code:
javascript:document.subscriberAddForm.deviceTypeChoice.checked=true;void(0)

Isn't working.


Try this:

Code:
javascript:void(document.subscriberAddForm.deviceTypeChoice.checked="true");


Quote:
As you can see, only the first rb is labled with the checked= param


That is the HTML tag for setting the default radio-button. All radio-buttons have a DOM checked = true/false value, which can be toggled with JavaScript.

Code:
tabindex="14"


You could use this for tabbing, but it should be possible to toggle it with JS.
Back to top
StuckingBoBo
Guest
PostPosted: Tue Nov 28, 2006 2:21 pm    Post subject: Reply with quote
Code:
javascript:void(document.subscriberAddForm.deviceTypeChoice.checked="true");
Hasn't worked. Sad

An additional/optional challenge: how to 'inject' a known value to a 'hidden' field within the currently loaded form?
Code:
<input type="hidden" name="locationId" value="2721">
Simply do this?
Code:
javascript:document.subscriberAddForm.locationId.value = "4711"; void(0);
Might be obvious, but I can't prove it - as its hidden Confused
Back to top
not-logged-in-daonlyfreez
Guest
PostPosted: Tue Nov 28, 2006 3:28 pm    Post subject: Reply with quote
Ok, this might help to understand the different possibilities of how to reference elements in JavaScript. Save as html file.

Try the links to set values, and the submit button to get the values. Use the reset button to clear. View source for details.

Code:
<html>
<head>
<title>HTML Template</title>

<script type="text/javascript">

function getValues() {
  data2Show = "formName: " + document.forms[0].name +
              "\rformID: " + document.formName.id +
              "\rformAction: " + document.formID.action +
              "\rformMethod: " + document.formName.method +
              "\rtextID: " + document.formName.textID.id +
              "\rtextValue: " + document.formName.textID.value +
              "\rhiddenName: " + document.formName.elements[1].name +
              "\rhiddenValue: " + document.forms[0].hiddenName.value +
              "\rcheckboxName: " + document.formName.elements[2].name +
              "\rcheckboxValue: " + document.formName.checkboxName.value +
              "\rcheckboxChecked: " + document.formName.checkboxName.checked +
              "\rradioName: " + document.formName.elements[3].name +
              "\rradio1Value: " + document.formName.radioName[0].value +
              "\rradio2Value: " + document.formName.radioName[1].value +
              "\rradio1Checked: " + document.formName.radioName[0].checked +
              "\rradio2Checked: " + document.formName.radioName[1].checked +
              ""
  alert(data2Show) ;
}

function setValues(x) {
  switch (x){
    case 1:
      document.formName.textID.value = "new text";
      break
    case 2:
      document.formName.hiddenName.value = "0987654321";
      break
    case 3:
      document.forms[0].elements[2].checked = "true";
      break
    case 4:
      document.formName.radioName[1].checked = "true";
      break
    case 5:
      document.formName.textID.focus();
      break
    case 6:
      document.formName.submit();
      break
  }
}

</script>

</head>
<body>
Try the links to set values, and the submit button to get the values. Use the reset button to clear. View source for details.
<br><br>
<FORM name="formName" id="formID" action="javascript:getValues();" method="post">
<INPUT type="text" id="textID"> A textbox<br>
<input type="hidden" name="hiddenName" value="1234567890"> <br>
<input type="checkbox" name="checkboxName" value="0"> A checkbox<br>
<input type="radio" name="radioName" value="0" checked="checked">A radiobutton <br>
<input type="radio" name="radioName" value="1">Another radiobutton <br> <br>
<INPUT type="submit" value="Show values"> &nbsp; <INPUT type="reset">
</form>
 <br> <br>
<a href="javascript:setValues(1);">Change the text field</a> <br>
<a href="javascript:setValues(2);">Change hiddenName value</a> <br>
<a href="javascript:setValues(3);">Check checkbox</a> <br>
<a href="javascript:setValues(4);">Check radiobutton #2</a> <br>
<a href="javascript:setValues(5);">Focus the text field</a> <br>
<a href="javascript:setValues(6);">Submit the form</a> <br>

</body>
</html>
Back to top
PhiLho



Joined: 27 Dec 2005
Posts: 6721
Location: France (near Paris)
PostPosted: Tue Nov 28, 2006 3:34 pm    Post subject: Reply with quote
BoBo wrote:
Code:
javascript:document.subscriberAddForm.deviceTypeChoice.checked=true;void(0)
Isn't working.
You missed a bit of info from my message... Wink Radio button element is an array. It should be:
javascript:document.subscriberAddForm.deviceTypeChoice[1].checked=true; void(0);
to check the second radio button.

On the hidden field, it is easy to check. Put these lines in a simple HTML page:
Code:
<form action="Tests/Test.html" method="GET" name="subscriberAddForm">
<input type="hidden" name="locationId" value="2721" />
<input type="submit" value="Go" />
</form>
When I click Go, I get the following URL in the address bar: http: //localhost/Tests/Test.html?locationId=2721
Well, I have Apache installed, you might need some Web server to try this...
I paste your line of JS, press Enter, then click on Go. I get: http: //localhost/Tests/Test.html?locationId=4711
So it worked...
_________________
vPhiLho := RegExReplace("Philippe Lhoste", "^(\w{3})\w*\s+\b(\w{3})\w*$", "$1$2")
Back to top
View user's profile Send private message Visit poster's website
n-l-i-d
Guest
PostPosted: Tue Nov 28, 2006 3:58 pm    Post subject: Reply with quote
Adding a screenshot of the previously posted webpage

Back to top
BoBo
Guest
PostPosted: Tue Nov 28, 2006 4:02 pm    Post subject: Reply with quote
Quote:
You missed a bit of info from my message...
TBH, I'm to stupid to realize it Embarassed It worked! *whoopeee - another party*

Boys, I really appreciate your support. You saved my life (for the next ten minutes Laughing)

Very Happy Merci beaucoup + Dank je wel! Cool
Back to top
BoBo
Guest
PostPosted: Tue Nov 28, 2006 4:04 pm    Post subject: Reply with quote
Laughing --> n-l-i-d

TBH, I've expected that 'transformation' ages ago Razz
Back to top
Display posts from previous:   
Post new topic   Reply to topic    AutoHotkey Community Forum Index -> Ask for Help All times are GMT
Goto page 1, 2, 3  Next
Page 1 of 3

 
Jump to:  
You can post new topics in this forum
You can reply to topics in this forum


Powered by phpBB © 2001, 2005 phpBB Group