How to store text from input disabled text in Selenium IDE or Kantu? - selenium-ide

I'm trying with Selenium IDE and Selenium IDE++ (Kantu) to store the text from an input element with text disabled.
I tried:
StoreValue|id=abc|var1
echo |${var1}|
But I get error [error] timeout reached when looking for element 'id=abc'
Then I've tried with javascript with this code:
document.getElementById("abc").value
And when I tried that JS code in Chrome console it works and prints the text I want, but if I insert this code in either Selenium IDE or in Kantu doesn't work. I do like this:
executeScript|var a = document.getElementById("abc").value; return a;| var1
echo | ${var1}
In this case I get error
Error in executeScript code: Cannot read property 'value' of null
When I inspect with Developer tools in chorme the text I want to get, the code is like this:
<input id="abc" class="form-control input" disabled="disabled">
Below I show an example of this:
function myFunction() {
document.getElementById("abc").disabled = true;
}
<!DOCTYPE html>
<html>
<body>
Name: <input id="abc" class="form-control input">
<p>Click the button to disable the text field.</p>
<button onclick="myFunction()">Disable Text field</button>
</body>
</html>
Thanks for any help.

Related

How to use select2 jQuery plugin for tokenizer?

I want to make an e-mail input box with an auto suggestion dropdown. I downloaded the Select2 Plugin from github & installed the .js and .css files following the plugin instruction.
I don't understand the markup for the input box and how the input box picks data to show as suggestions. Can any one help me please?
Just like any other jquery plugin, select2 plugin also adds its feature to the jquery object. So you obtain a reference of the DOM element using $() and then call select2() on it, it converts the simple dorpdown element into a autocomplete dropdown like:
<html>
<head>
<script>
$(document).ready(function() {
$("#my-dropdown").select2();
});
</script>
</head>
<body>
<select id="my-dropdown">
<option id="1">Dogs</option>
<option id="2">Cats</option>
<option id="3">Wolves</option>
<option id="4">Rhinos</option>
</select>
</body>
Since you need to use it for email input box. I suppose that the input box is for email ids. So what you can do is, keep the list of email ids in an array of objects. And have a select element with multiple attribute on the page.
Then on page load, just bind the array to the select using select2 plugin as given below:
<html>
<head>
<script>
var list = [{id: "abcd#gmail.com", text: "Foo Bar"},
{id: "jhon.doe#abcd.com", text: "John Doe"},
{}, ....];
$(document).ready(function() {
$("#email-input-box").select2({data: list});
});
</script>
</head>
<body>
<select id="email-input-box" multiple="multiple"></select>
</body>
</html>
Once you decide on what is to be shown to the user, what a user can type like email id or the name to select etc, then you can make changes to the text field of the array.

Creating a Wordpress Plugin - Form Submission Fails when passed value of 00x00

I am writing a pretty simple plugin. I notice that when I submit a form with a text field with a value that is 2 or more digits followed by an x then followed by two or more digits that the form doesn't submit it redirects me to the index page. I get an apache error log message : [error] [client ::1] script '/Applications/MAMP/htdocs/index.php' not found or unable to stat but that is all of the info I can find.
To narrow down the problem, I made a super basic form that runs in the admin section with only one field. When it is submitted it calls a javascript alert to show the $_POST value. This works all day long UNTIL I enter 00x00 or any digits really with an x between them, 123x123, 999999999x999999999 etc...
In it's intended use this field would have a dimension like 120x120 but for what ever reason the x is causing something weird to happen. Any ideas?
Here is the stripped down basic example, added to an admin menu page
<?php
if(isset($_POST['update'])){
echo '<script type="text/javascript">', 'alert("' . $_POST['image_url'] . '");', '</script>';
}
?>
<form method="post" action="<?php echo htmlspecialchars($_SERVER['REQUEST_URI']);?>">
<input name="image_url" id="image_url" type="text" maxlength="200" value="00x00"/>
<input name="update" type="submit" id="update" value="Submit" />
</form>

JSP javascript function onclick to different jsp page

I have a form and javascript function to open 2.jsp page but it keeps giving me
Message: Object doesn't support this property or method
Here is how I do it. I tried to put in only the important parts.
<form name = iForm action=1.jsp method=POST>
<input type="button" value="Button2" name=button2 onclick="OnButton1()"/>
</form>
<script language="JavaScript">
function OnButton1{
document.iFrom.action = "2.jsp";
document.iFrom.target = "_blank";
document.iFrom.submit();
return true;
}
< /script>
I know a way to open through 'window' but I was wondering if there is this way
You did not put parenthesis after your JavaScript function name and you misspelled the form name in your script.
Correct those mistakes and it should work as you might expect.
As well, the target attribute does work for forms.

How to change a form's action in Lift

I am building a Lift application, where one of the pages is based on the "File Upload" example from the Lift demo at: http://demo.liftweb.net/file_upload.
If you look at the source code for that page... you see that there is a Lift "snippet" tag, surrounding two "choose" tags:
<lift:snippet type="misc:upload" form="post" multipart="true">
<choose:post>
<p>
File name: <ul:file_name></ul:file_name><br >
MIME Type: <ul:mime_type></ul:mime_type><br >
File length: <ul:length></ul:length><br >
MD5 Hash: <ul:md5></ul:md5><br >
</p>
</choose:post>
<choose:get>
Select a file to upload: <ul:file_upload></ul:file_upload><br >
<input type="submit" value="Upload File">
</choose:get>
</lift:snippet>
The idea is that when a user hits the page for the first time (i.e. a GET request), then Lift will show the form for uploading a file. When the user submits the form (i.e. a POST request to the same page), then Lift instead displays the outcome of the file being processed.
With my application, the new wrinkle is that my "results" POST view needs to also contain a form. I want to provide a text input for the user to enter an email address, and a submit button that when pressed will email information about the processed file:
...
<choose:post>
<p>
File name: <ul:file_name></ul:file_name><br >
MIME Type: <ul:mime_type></ul:mime_type><br >
File length: <ul:length></ul:length><br >
MD5 Hash: <ul:md5></ul:md5><br >
</p>
<!-- BEGIN NEW STUFF -->
Output: <br/>
<textarea rows="30" cols="100"><ul:output></ul:output></textarea>
<br/><br/>
Email the above output to this email address:<br/>
<ul:email/><br/>
<input type="submit" value="Email"/>
<!-- END NEW STUFF -->
</choose:post>
...
However, both the GET and POST versions of this page are wrapped by the same Lift-generated form, which has its "action" set to the same snippet in both cases. How can I change this such that in the POST version, the form's action changes to a different snippet?
In a typical web framework, I would approach something like this with an "onclick" event and two basic lines of JavaScript. However, I haven't even begun to wrap my mind around Lift's... err, interesting notions about writing JavaScript in Scala. Maybe I need to go down that route, or maybe there's a better approach altogether.
First, I will suggest you use Lift's new designer friendly CSS binding instead of the custom XHTML tag.
And one thing you should remember when you're using Lift's snippet, is that it is recursive, you could put an lift snippet inside another snippet's HTML block.
For example, if you wish there is another form after POST, then just put it into the block.
<choose:post>
<p>
File name: <ul:file_name></ul:file_name><br >
MIME Type: <ul:mime_type></ul:mime_type><br >
File length: <ul:length></ul:length><br >
MD5 Hash: <ul:md5></ul:md5><br >
</p>
<!--
The following is same as <lift:snippet type="EMailForm" form="post" multipart="true">
-->
<form action="" method="post" data-lift="EMailForm">
<input type="text" name="email"/>
<input type="submit" />
</form>
</choose:post>
Then deal with the email form action at snippet class EMailForm.
Finally, you may pass the filename / minetype and other information by using hidden form element or SessionVar.
I agree with Brian, use Lift's new designer friendly CSS binding.
Use two separate forms, one for the file upload and one for the submitting the email. Use S.seeOther to redirect the user to the second form when the first has finished processing.
I also prefer the new 'data-lift' HTML attribute.
File upload HTML:
<div data-lift="uploadSnippet?form=post">
<input type="file" id="filename" />
<input type="submit" id="submit" />
</div
File upload snippet:
class uploadSnippet {
def processUpload = {
// do your processing
....
if (success)
S.seeOther("/getemail")
// if processing fails, just allow this method to exit to re-render your
// file upload form
}
def render = {
"#filename" #> SHtml.fileUpload(...) &
"#submit" #> SHtml.submit("Upload", processUpload _ )
}
}
GetEmail HTML:
<div data-lift="getEmailSnippet?form=post">
<input type="text" id="email" />
<input type="submit" id="submit" />
</div
Get Email Snippet:
class getEmailSnippet {
def processSubmit = {
....
}
def render = {
"#email" #> SHtml.text(...) &
"#submit" #> SHtml.submit("Upload", processSubmit _ )
}
There's a bit more on form processing in my blog post on using RequestVar's here:
http://tech.damianhelme.com/understanding-lifts-requestvars
Let me know if you want more detail.
Hope that's useful
Cheers
Damian
If somebody comes up with a more elegant (or "Lift-y") approach within the next few days, then I'll accept their answer. However, I came up with a workaround approach on my own.
I kept the current layout, where the view has a GET block and a POST block both submitting to the same snippet function. The snippet function still has an if-else block, handling each request differently depending on whether it's a GET or POST.
However, now I also have a secondary if-else block inside of the POST's block. This inner if-else looks at the name of the submit button that was clicked. If the submit button was the one for uploading a file, then the snippet handles the uploading and processing of the file. Otherwise, if it was the send email submit button shown after the first POST, then the snippet processes the sending of the email.
Not particularly glamorous, but it works just fine.

how to pass html form data to variable (nodejs / javascript)

so i'm using nodejs and nodejsdb-mysql. i want to make form for adding and searching posts.
I make html page with form, transform it to node using jsdom but how do i set up variables?
for example my html form is like:
name = text input
surname = text input
submit
and how do i pass inserted name/surname to var??
You will need to turn your submit into a button with an event such as onclick - this might be what you are looking for:
<input type="button" value="Submit" id="submit" name="submit" onclick="submit()">
<script type="text/javascript">
function submit(){
var name = document.getElementById('**name**').value;
var surname = document.getElementById('**surname**').value;
alert("Thanks for submitting, " +name);
}
</script>
With nodejsdb-mysql sooner or later you will face real problems like date localization problems and so on, use https://github.com/felixge/node-mysql instead