This question already has answers here:
jQuery trigger file input
(21 answers)
Closed 8 years ago.
I have a HTML form like this one:
<style>.hidden { display: none; }</style>
<form method="post" action="upload">
<div id="dropzone" class="pre-upload">
<div class="comp">
<h1>Drop your images here</h1>
<p>or simply click to select them.</p>
<input type="file" name="images" id="upload_button" class="hidden" />
</div>
<div class="fing">
<p>Tap to select your images</p>
</div>
</div><!-- Pre upload div -->
</form>
I want to make #dropzone open up the standard file selecting window if it's clicked. It should open up #upload_button's file selector specifically.
I've tried the following, but it didn't work:
$('#dropzone').click(function(){
$('#upload_button').click();
});
As you see, I'm trying to achieve this result via jQuery.
I thought this would trigger the window, but it's simply doing nothing.
# The ones who are voting to close this down:
As you see, my issue was totally not answered in the other question you are linking to. This was a different issue with nesting my input wrongly. So, before going and blindly voting for a close, better check the provided code and try to see if the issue is somewhat different from the common. This is a site for help after all.
It looks like a circular reference problem. Your file upload button is inside the div you want to click to trigger the button. Triggering the click on the button from the div, also triggers the click on the div, so it infinitely recurses.
If you watch the console, you'll see you get a "Maximum call stack size exceeded" error.
Moving the button outside of the div you want to click causes it to function as intended.
Here's a jsfiddle to demonstrate the problem.
Related
This question already has answers here:
Is it safe to use anchor to submit form?
(3 answers)
Closed 2 years ago.
I'm making a web page with 20 different questions on the index page. The user clicks "Submit" after every question.
<form action="./index.php" method="post" id="element">
The information is then posted and sent to the database. Of course this makes the index page reload and display at the very top of the page. This makes for a lot of scrolling.
Is there a way to make it so the page reloads and scrolls back down to the place where it left off?
The answer was found here: https://stackoverflow.com/a/7983093/4101210
To use an anchor to submit a form would require the use of JavaScript to hook up the events. It's not safe in that if a user has JavaScript disabled, you won't be able to submit the form. For example:
<form id="form1" action="" method="post">
Submit!
</form>
If you'd like you can use a <button>:
<button type="submit">Submit!</button>
Or stick with what we all know:
<input type="submit" value="Submit!" />
You can style all three of them, but the latter two don't require JavaScript. You probably just need to change some CSS somewhere if you're having border issues.
The code that answered my question was by joshua bissot. He showed how to put the token in the action and name the anchor to make this work.
https://stackoverflow.com/a/25918771/12140988
<!-- add the anchor token at the end of your action statement -->
<form method='post' action='this_page.php?put_peram=token#anchor_name'>
<input type='submit' value='click here'>
<!-- put the anchor right above where you want the page to index -->
<a name="anchor_name></a>
This question already has answers here:
Get clipboard contents with Greasemonkey
(2 answers)
Closed 4 years ago.
Note 1: I do not own the website that I'm trying to modify so the manual page edit is not possible.
Note 2: I need a PURE JavaScript (NOT jquery) solution.
I'll modify a web page by using a tampermonkey extension for Firefox v56.
Description: There is a webpage that has an <input> box. With a javascript code I've managed to create and insert a button near that <input> box. So after the button is inserted, page source code looks like this:
<form id="some_form" method="post" name="some_form">
<section id="content">
<div class="row"></div>
<div class="row"></div>
<div class="row">
<div>
<div>
<input id="info" name="info" placeholder="Enter info" value="" type="text">
</div>
</div>
<button id="btn_p">Paste</button>
</div>
</section>
</form>
What I want: Once I click the <button> I want clipboard content to be pasted into <input> box. (I don't want to use CTRL+V)
What is the problem: At mozilla.org I've found a page that explains how to Interact with the clipboard by using document.execCommand("paste"). I've tried to use a javascript code that I've found as part of their example and modified it to work for my needs. JS code looks like this:
function paste() {
var pasteText = document.querySelector("#info");
pasteText.focus();
document.execCommand("paste");
}
document.querySelector("#btn_p").addEventListener("click", paste);
That should work, BUT if I understood correctly, it can only work if the clipboard content is inserted between <textarea> tags and not into <input> field.
Question: Is there any (pure) javascript code that can be used to paste the clipboard content into an <input> field (with the click on the button), instead of pasting it with CTRL+V keyboard key combination?
Thanks in advance to anyone who will (hopefully) try to help me with this.
Given that your statement "only pasting between <textarea> is possible" is true:
Adabt your script to insert a <textarea style="display: none" id="temp"></textarea>
Paste your clipboard in there with your working code
Now you can grab the data with js .value (or whatever for textareas)
Cipy the value into the input
Sounds easy?
I've made a web application That starts from a specific amount and every time a donation is made it counts down and shows how much is needed. And at one time I might have about 10-20 of these counting down and I am always creating new ones. Now when I am doing that it would be nice that when I click the button it automatically focuses on the text field for ease of use. however I can't quite get that to work.
The window to set the countdown is shown using angularjs dialogs/modals. This means that when I click the a button it writes code onto the page that shows the dialog/modal and when I submit it it is removed from the page completely.
The first time around when I click the button it focuses on the text box and I can type the number and press enter and it's submitted, now I want to create a new one. I click the button, up comes the modal but now I have to grab the mouse, move it to the input and click it. Waste of time and not user friendly.
What I'm asking is for a way to have it focus on the text field when using modals every time I click the button.
here's the window:
<form name="formCountdown" novalidate class="css-form">
<div modal="showCountdownModal" close="showCountdownModal = false" options="opts" ng-cloak>
<div class="modal-header">
<h4>Enter Countdown Amount</h4>
</div>
<div class="modal-body">
<input id="focusbox" type="number" min="1" autofocus required ng-model="countDownAmount" name="countDownAmount" ui-keypress="{13:'setCountdown()'}" select-on-focus />
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary cancel" ng-disabled="formCountdown.$invalid" ng-click="setCountdown()">Set</button>
</div>
</div>
</form>
I've tried using autofocus, and that works fine the first time you press the button after loading the page. but the second and up it does not.
I've also tried using this jquery code with no luck:
<script>
$("#focusbtn").click(function() {
$("#focusbox").focus();
});
</script>
And now I am completely lost and would really love it if someone could help me out here.
Edit: forgot to put in the timeout, to make sure the browser is ready!
add the following line to your setCountDown() function:
$timeout(function (){
document.querySelector('#focusbox').focus();
},0)
You need to inject the $timeout in your controller
That will probably do the trick!
However, this will work, but dom manipulation should be done in a directive!
I copied your posted code together with the script and it works just fine. I'm not sure if I understood the problem but the autofocus works well in my end. Autofocus is present after the page has loaded or refreshed and even after the button has been clicked. Of course the autofocus will be removed if a click outside the input text has been triggered.
Morever, I think Autofocus is an attribute by HTML5. You might want to include in your HTML or maybe it is just a browser compatibility issue.
You can test or check if autofocus is supported by your browser at http://html5test.com/.
Hope this help somehow.
EDIT:
Try this on your script.
$(document).ready(function() {
$(".modalName").on('shown', function() {
$(this).find("[autofocus]:first").focus();
});
});
i have small-image class when i click on it megnefic popup open. in my megnific popup there is big image of clicked image and one button with other-form-opener class when i click on button other-form-div class with form comes up with my custom popup in this part when i click on form element they dont work as default.
<div class="megnific_opener"><img class="small-image" ></div>
<div class="megnific_popup_div">
<img class="big-image">
more-info
</div>
<div class="other-form-div">
<form>
<input type="text">
<input type="text">
<input type="text">
</form>
</div>
i give stucture of my html and i already cheked that there is not a z-index problem.
so please help me thank you.
here is my demo in jsfiddle : http://jsfiddle.net/QHh7W/
Please use Magnific popup callbacks and move your custom html inside Magnific popup when opened and move it inside body when closed. You can check below working demo.
jsFiddle demo
Although i cannot get this working as per your that is opening both popups one above another in same window.
but in case you need it like this : open second after clicking from one.
http://jsfiddle.net/yDvvQ/5/
I have added different instance of megnific for both divs.
It is working for both popups, content and form both.
You can later amend it to add more popups or return to first from second.
Please review once and comment.
Regards
I have a page on which a list of properties is displayed (i.e houses). This list is made up using CSS. So I've built a second CSS class, which makes the properties/houses align properly in 2 columns. Until now I did this by pressing a button, posting back, and outputting different html (basicly the same, but with other Css class references).
Now I found this question on SO and I implemented a basic scenario. A div with the class "yellow" is written to the html page, and a button changes this class to "red". This happens, but the div immediately changes back to class "yellow".
I'm a very very beginner in JS but not a beginning programmer. This would be a great addition to my site, but I can't find a proper answer. I apologize if this question is redundant.
<script type="text/javascript">
function changeView() {
document.getElementById("box").className = " red";
}
Grtz, thanks in advance, Christophe,
By default a button element is of type 'submit' - which will cause your browser to post back to the server.
Try changing the type to button instead.
<input type="button" ....
More info on the difference here... Difference between <input type='button' /> and <input type='submit' />
If your button causes a postback (possibly a server control with an asp: tag), the javascript changes you made will be lost as by default an asp button submits a page to the server as a result of which your page reloads.
If all you need to change the class of a div make it a simple html button like
<input type="button" onclick="changeView()" value="Change" />