I have a piece of javascript which is initialized on the click of a button, and takes information from a form input to perform geolocation etc based on the data.
The issue I am having is that I have to place the button outside of the form in the html, otherwise when it is clicked, no javascript is fired!
This of course means that my users cannot hit enter in the offending text box (as they lose their data!)
Is there a way I can stop this from happening and be able to include the button in the form?
The HTML is:
<form>
<input id="addyInput" placeholder="Don't forget postcode!" size="25">
</form>
<button id="start" onclick="initialize()">Find Me!</button>
I can also include some of the javascript if needs be! (although that works fine!) :)
Thanks!
use :
<button id="start" onclick="return initialize()">Find Me!</button>
and then make sure initialize() returns false.
Related
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'm working with html and javascript. My problems is, in one webpage a show a plot and a few button. When the user press any of this button I need show 3 or 4 options but in the same page without switching pages.
Below is my code
<form action="MyPage">
<button type="submit" value="More Options">
</form>
redirect to an other page.What I can do?
First of all, get rid of type="submit". That's what's causing the page to do stuff you don't want. The second thing is to add an onclick handler. It should return false to avoid behavior like "submit". The variable 'this' will pass the button to your function, which you might need in that code. Then fill in the body of addMoreStuff() with your code to, well, add more stuff!
<form action="MyPage">
<button onclick="addMoreStuff(this); return false; ">More Options</button>
</form>
<script type="text/javascript">
function addMoreStuff(button) {
/* your code here */
}
</script>
Drop the form (use the button alone), and look into jQuery. It's extremely easy to use, and it'll help you quickly build code your application.
HTML
<button type="submit" value="More Options" id="more">
JavaScript (jQuery)
// run "add_options" when someone clicks on the button
jQuery('button#more').on('click', add_options)
function add_options() {
//code here to add more options
}
I have created .aspx page on my SharePoint site and inserted within the page HTML button.
Example
<PublishingWebControls:editmodepanel PageDisplayMode="Display" runat="server" SuppressTag="True">
...
<button>Click Me!</button>
...
</PublishingWebControls:editmodepanel>
Every time I hit 'Click Me!' the post back occurs. This is not my desired behavior, but I have found a way how to not cause post backs. I added javascript code to onclick property <button onclick='return false;'>Click Me!</button>
My question is, why the post back occurs, even if the button does not contain type="submit" property?
I checked also master page, which contains <form runat="server"> and wraps all the content and there is also no action="page.aspx" property.
Check this link, http://www.w3schools.com/tags/tag_button.asp
There is a note on page, which says, that different browsers can use different default type for button, if you don't specify it by yourself. Seems like your browser uses "submit".
I know this is an old post. #Dmytro 's post leads in the right direction but is not the exact answer. To prevent the postback you need to make use of the type attribute of the button tag. i.e.
<button type="button">Click Me!</button>
I call the same function with those two types of button. With the first it works perfectly but with button it works well at the first but in less than one second it looks like refresh the page.
<input type="button" id="bProv" value="filtrar" onclick="filtroP()"/>
<button id="bProv" onclick="filtroP()">filtrar</button>
The type of a <button> element defaults to submit, so it will run the JS and then immediately submit the form.
Use <button type="button" ... if you don't want form submission.
That said, hard coding a button (which does nothing without JS) goes against the principles of unobtrusive JavaScript (which are part of best practise programming for the WWW).
I need a javascript code to prevents bots from submitting forms.
But i need a client side code in javascript that work like CAPTCHA but don't call the server
thank you
Most straight forward and simple way will be to add or edit form data on the fly when the button is actually clicked:
<input type="hidden" name="SubmittedByHuman" value="NO" />
<input type="submit" value="Submit me" onclick="this.form.elements['SubmittedByHuman'] = 'YES';" />
Having this, on the server side check the value of form element called "SubmittedByHuman" - if it will be "NO" it means something bypassed the submit button - or as people mentioned correctly in comments, user did click but has disabled JavaScript.
do something like
<h1>Type the result in the input box : 1+1</h1>
<input id="sum" type="text"/>
and before submitting you check if the value in the input is 2 and then submit it.
To improve this type of code you could randomly create these 2 values in the h1 and save them into a var and before submiting check if input and sum are the same.
I doubt this is possible, as bots are sophisticated enough to bypass most things.
Remember, the bot isn't going to open the webpage in a browser and press submit. It'll probably scan the page for a <form>, make a list of all the <input> fields, and perform a POST request containing all the data for each one.
It won't run any javascript, or press any buttons. You'll have to make the check server-side.