is it possible to show "choose file" window, when i click on some image ? i want to hide that input and browse button, which shows when i type
thanks
Long answer: Yes, you absolutely can. Get ready for some Javascript/CSS haxx that I cooked up. First the Javascript:
function getFilePathFromDialog() {
document.getElementById('fileBrowser').click();
document.getElementById('filePath').value = document.getElementById('fileBrowser').value;
}
Now the HTML:
<img src="path/to/image.jpg" onlick="getFilePathFromDialog();">
<input type="text" id="filePath" name="filePath" /><br />
<input type="file" id="fileBrowser" name="fileBrowser" style="visibility:hidden; display:none;" />
Basically all this does is hide the actual file dialog input field from view. When you click on your image it will fire the file dialog's click event. When the user chooses a file and clicks "Open", it will put the file path selected in the textbox called "filePath".
No, because of security restrictions in the browser. You have to go with Flash or Java to achieve that.
Related
I'm new to WebPagetest (https://www.webpagetest.org/) and am having some trouble with login forms. I am using scripting, and can navigate to the page with the form, but it appears as though I am not correctly entering any form values, nor is the form submitting.
Here is a version of my script:
logData 1
navigate https://www.example.com/secure/login
setValue name=username activation_test
setValue name=password password
submitForm id=signInForm
//clickAndWait id=signInBtn
//exec document.getElementsByTagName('html')[0].style.display = 'none';
sleep 5
block google.com/csi
navigate https://www.example.com/?jbhp=true
Of course, my first thought is to make sure that my HTML elements match, but they appear to be fine...
Username:
input tabindex="1" aria-required="true" class="success required" id="username" maxlength="64" name="username" placeholder="Email Address or Username" type="text" value=""
Password:
input tabindex="2" aria-required="true" class="success required" id="password" name="password" placeholder="Password" type="password" value=""
Form:
form action="#" id="signInForm" method="post" class="form formLarge" novalidate="novalidate"
Submit (verified within the form; only used when clickAndWait is uncommented):
button tabindex="3" id="signInBtn" class="ancBtn lrg" data-track-click="sign in : sign in" type="submit"
The result page of the test shows that it navigates to the final location as though not logged in. Also, I see this as part of the results: Step_2
(Error: Navigation Error). Sadly, if there is better documenting as to what specifically caused the navigation error, I have yet to find it.
Finally, if I switch from using "submitForm" to "clickAndWait" (which is commented out in the above example) the only difference in the result is that Step_2 shows a screenshot of the page rather than just an orange block.
IFrames. Stupid IFrames. If you find your way to my question, above, I would bet that your page has IFrames. In my case, my IFrame is coming from the same domain as the browser page -- if this is not the case for your IFrame, I'm not sure if this will work.
To access elements in the IFrame, I had to forget "setValue", "clickAndWait", and so on. I had to go straight to Javascript. Scripted, it looks something like these examples:
exec document.querySelector("iframe[id=stupidIFrameId]").contentDocument.querySelector("input[id=password]").value = 'password'
execAndWait document.querySelector("iframe[id=stupidIFrameId]").contentDocument.querySelector("button[id=signInButton]").click()
how to click the radio button for
<input name="years_option" value="all_years" type="radio">
the following code does not work. please help.
WebBrowser1.Document.GetElementById("years_option").SetAttribute("all_years", "radio")
at last got the answer from another source.
WebBrowser1.Document.GetElementById("years_option").SetAttribute("checked", True)
What happened: I have a page where user has to click on a button and selection is displayed in modal. When they clicked on what ever they wanted div element on the page is updated, via AJAX, which shows what they have selected and has an option "view item".
I have defined that "view item" should open up another modal view which will have all the information on the item, and now, referring to the above paragraph, rather then opening modal view user is being transferred to that page?
Question:
Is their a walk around for modal to be activated on the elements that were loaded after document load stage?
Example code: On initial load user is presented with following code, at this example item was set prior to load:
<div id="dynamic-area">
Item 1
view selection
</div>
<input type="radio" name="selection" id="selection" value="" data-toggle="modal" data-remote="/selection/search/1" />Change selection
When user have picked a different item after clicking on "change selection" #dynamic-area was fully updated with a data that was fetched via AJAX on the selected item.
So lets say, if user have picked item 3, we would have code below:
<div id="dynamic-area">
Item 3
view selection
</div>
<input type="radio" name="selection" id="selection" value="" data-toggle="modal" data-remote="/selection/search/1" />Change selection
Now if user to click on the "view selection", user is being to the page 'selection/view/3' when user should see modal.
After extending this function action worked as it should
MS Visual Web Developer 2010-VB.Net
When button is double clicked ,i want to show some controls.How to add codes in double click event.
Thanks
Based on the fact that you're using Visual Studio Web Developer, I'll assume you're doing something with a browser. If you're not, comment on the answer and I'll delete it.
ASP.Net doesn't distinguish between single and double clicks. You'll have to use Javascript for this. To do what you're trying to accomplish, you'll have to make a client-side button whose ondblclick event calls the .click() function of the server-side button's rendered <input> element. Here's what I mean:
<asp:Button Id="Button" OnClick="Some_Method()" />
<!-- This renders to something like this: -->
<input type="submit" onclick="..." name="Button" id="Button" />
Knowing this (you can check this in your rendered document), you can do this:
<input type="button" ondblclick="document.getElementById('Button').click()" ... />
Of course, you probably only want one button visible. To do this, simply set Visible to false in the ASP.Net server control.
Again, this question could be for non-ASP.Net stuff, in which case this answer is worthless. If so, comment telling me so, and I'll delete the answer.
You can do this purely in client side.
Add client-side button that has "ondblclick" event to your ASPX/HTML page:
<button ondblclick="showControls()">Show Controls</button>
Add a DIV with display style set to none. Place your controls inside of that DIV:
<div id="myControls" style="display:none">
My<br>
Control<br>
are<br>
placed<br>
here<br>
</div>
Add client-side code that unhides that DIV:
<script>
function showControls(){
document.getElementById("myControls").style.display=""
}
</script>
Live demo: http://jsfiddle.net/5haxS/
Presently because of "onchange" the editor contents are submitted only if the contents of editor change. How do I make sure that the dojo editor contents are submitted everytime a form a submitted irrespective of whether a change has occurred or not?
Code snippet:
<td>
<input type="hidden" name="editorContent" id='editorContent' value="replaced by dijit.Editor content onsubmit" />
<div dojoType="dijit.Editor" id="content" onChange="dojo.byId('editorContent').value = this.getValue();" plugins="['foreColor','|','bold','italic','underline','|','createLink', 'unlink']" extraPlugins="['dijit._editor.plugins.AlwaysShowToolbar']">
</div>
</td>
You could write a simple onSubmit handler to do this, though the way you have the code structured, initializing the hidden field to the loaded value should accomplish the same thing.