Interactive Popup/White Space - javascript

I am fairly new to the world of coding and am currently designing something using WAMP to assist the misses with her maths. In short I have a page with some basic maths questions on and I have JavaScript running on it to check whether the answers are correct or not.
What I would like to know is, can I use JavaScript or something similar to add in a link that if clicked will open a popup or something similar that the user can write a few bits down to help working out the sums?
I have seen a <button onclick="window.open('whitespace.html');">Thinking Space</button> but this doesnt allow the user to write anything down, obviously as its just a link to another page.

A very basic sample, just pointing you in a possible direction:
<button onclick="window.getElementById('myDiv').style.display = 'block'">Thinking Space</button>
<div id="myDiv" style="display: none">
<textarea name="content" cols="40" rows="5">Test message</textarea>
<button onclick="window.getElementById('myDiv').style.display = 'none'">Close</button>
</div>

i think you can use window.promt
https://developer.mozilla.org/de/docs/Web/API/Window/prompt

Maybe not the best answer but works for me. I created a link to a blank page that the user can then open. They can work the questions out, minimise it, forget about it and if they were to try to open a fresh one, close it or try to refresh it, they will get a message asking if they are sure they want to continue. Works exactly as Id hoped.
<textarea placeholder="Please be aware no data will be saved here.
If closed or refreshed all data will be lost"</textarea>
<script>
window.addEventListener("beforeunload", function(event) {
event.returnValue = "Reloading will cause any notes to be lost.";
});
</script>

Related

How does the google reCAPTCHA data-callback event work

This may be a stupid question so I'm sorry I'm new to web development. I am trying to write a page so it disables the search button until the reCAPTCHA is clicked (I know this can be circumvented by a spammer so this is not my concern). The way I have it currently set up is like this:
<div id="search_area">
<script type="text/javascript">
function enableButton() {
document.getElementById('search_submit').disabled = false;
}
</script>
<input id="ch_search" size="50" type="text"/><button class="search_button" id="ch_search_submit" disabled="true">Search</button>
<script src='https://www.google.com/recaptcha/api.js'></script>
<div class="g-recaptcha" data-sitekey="XXXXXXXXXX" data-callback = "enableButton()" ></div>
</div>
Currently just for initial testing I don't have a php validation checking form. When I check the text box and it turns green it is not enabling the search button as I would have thought it would. Can anyone point me in the right direction as to why this isn't working? Thank you for any help sorry about being a newbie.
I realized my problem was I was calling enableButton() and for it to work it needed to be enableButton without the parentheses.

automated submit query in html?

For this piece of code I found on a site, I altered it and when it runs in my browser and then I wish to submit again for an automation process of data manipulation, I can not seem to figure out how to actually ensure the element is "submitted" or posted.
<input id="element_1" name="element_1" class="element text large" type="text" maxlength="400" style="padding-left:5px" value="my_altered_value">
What would I have to add to this code so that it submits this element and goes to the next link which the site does itself after pasting "my_altered_value" and then proceeds to the next web-page?
A possible (but maybe long way) is to use Javascript's onmouseleave on every input.
e.g.
if(input1!="" && input2!=""){window.open("...");}
Hope it helps!

How to set focus on text box whenever it appears on the screen

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();
});
});

javascript in iframe won't work

I have a website with lots of code, so obviously something is wrong, but I can't post all the code here. Here's the exact code I'm trying to use though.
Parent document...
<iframe name=combosIframe id=combosIframe src=getCombos.php style='position:absolute;left:300px;top:0px;width:275px;height:520px;overflow-y:scroll;overflow-x:hidden;border:1px solid black'></iframe>
<form name=colorForm id=colorForm action=colorCombos.php method=post target=combosIframe>
<input type=submit id=submitColors value=SubmitColors>
</form>
Inside the iframe, colorCombos.php page...
<script language=JavaScript>
alert('load');
function doSomething(){
alert('hi');
}
</script>
<form>
<input type=button value=ClickMe onClick=doSomething()>
</form>
Scenario: I click the parent form button to load the new page into the iframe.
Problem: the JavaScript in the colorCombos.php page does not alert, either on page load, or when clicking the button. If I view the page on its own it works fine.
Specs: php5, using Chrome browser.
Of note: there are no errors when I view the javascript console. Also there is nothing else on the colorCombos.php page. Both files are in the same directory. Thanks for any help, I'm really stumped.
Not using quotes within HTML Attributes can have undesired effects. Try adding quotes around all the values of each HTML Attribute.
Example:
<input type="button" value="ClickMe" onClick="doSomething()"/>
I started with a blank setup (which was working) copied the code from my site (which has lots of other code), bit by bit into the new document to see when the script stopped working. I ended up copying EVERYTHING (literally ctrl+a) into the new document, and it worked fine. I then renamed the new document to be the name of the old document, and it STOPPED working. The old document (i.e. the parent document) is named rangeTool.php, not that I think that is relevant necessarily.
So I have a solution, but not an answer. What in the world could cause one document to not work? Something wrong on the server? I deleted the old file off the server and loaded the new copy, but that didn't work as long as the name was rangeTool.php. For example, I renamed it testcode.php and it worked fine.
I'm still interested in why/how this happened, but at least the pressure is off now that it's working for me.

submitting form using jquery

got a problem and cant find the solution.
I am writing a chat. When a new user opens my site (a new session) a div popes out and the user is asked to fill in his name.
The form works fine when I use an input submit. I want it to work without the submit button, I want it to work when i press a div.
here is my code
html:
<form name="form" id="form" action="index.html" method="post">
<span id="nspan">First name:</span> <input type="text" id="firstname" name="name">
<div name="enter" id="enter">Submit</div>
</form>
the jquery:
$(document).ready(function(){
$("#enter").click(function () {
$("#form").submit();
});
});
nevermind is correct - no problem with that code.
Here's the JSFiddle to prove it: http://jsfiddle.net/8Xk7z/
Maybe you problem is that the id "form" is to general a name, and you already used it for another form.
Another thing, why not use a button or a link? You can style it like you want. Be careful when you use thing for what they are not suppose to be used for, it my give unexpected side effects.
In your case, you may only be able to login to you chat using a mouse, that would exclude blind people. You would also not be able to use the tabulater to get to the login "button". And last, if you are blind and uses a screen reader your would actually not know that there is at login "button", as the reader would not recognize the div as something you can click.
I would recomend using the button-tag like this
<button id="enter">Submit</button>
Or the a-tag like this
<a href id="enter">Submit</a>
If you don't like the predefined styling of them you may always override the styling.
try to define jquery at top of the page
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
Then put your script at next.
still issue.
Please check your other function on same page works fine or not.

Categories

Resources