Good day all,
I have an html file as follows, which displays a Google Map (initialised at window.onload function) and has a form to enter the name of a place to search. When the submit button is clicked then user input is supposed to be sent to a php file which get the coordinates to display on the map. However, in testing, all the php file is returning right now is the same userinput.
The problem I am having, is that this sequence of event happens:
I enter some text, and click submit.
The p element innerHTML is changed and the alert appears (as in onreadystatechange function)
However, when i close the alert, the p element loses its data.
I added the alert, because when i just used
document.getElementById("msg").innerHTML=xmlhttp.responseText;
the p element took on its new data briefly before disappearing.
On thing i noticed was that while the alert was on the screen, the address bar displayed "filename.html". but when i closed it, and the p data disappeared, the address bar shows
filename.html?searchterm=user+input+stuff
Even when I click submit with the text input empty, I get "No Text Entered" appearing briefly, before the page "refreshes" then this text disappears, and the addressbar shows
filename.html?searchterm=
I appreciate any help I can get.
<html>
<head>
<title>Map</title>
<link rel="stylesheet" type="text/css" href="stylue.css" />
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?
key=AIzaSyBksQ7NlV6eXk6w5w8222lolqdPHsN_8ls&sensor=false">
</script>
<script type="text/javascript">
var panorama;
var map;
function initialize() {
//create Google Map
}
//other Google Maps functions
function searchdb(userInput){
var xmlhttp;
if (userInput==""){
document.getElementById("msg").innerHTML="No Text Entered";
}else{
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("msg").innerHTML=xmlhttp.responseText;
alert(xmlhttp.responseText);
}
}
xmlhttp.open("GET","searchpageajax.php?searchterm="+userInput,true);
xmlhttp.send();
}
}
window.onload= function () {
initialize();
}
</script>
</head>
<body >
<h1>Map</h1>
<p>Enter a room code or building name to search.</p>
<form name="inputform" >
<input type="text" name="searchterm" />
<input type="submit" value="Search" onclick="searchdb(searchterm.value)"/>
<input type="reset" value="Clear" />
<br/>
<p id ="msg"></p>
<br/>
</form>
<div id="container">
<div id="map_canvas"></div>
<div id="streetview_canvas"></div>
</div>
</body>
</html>
The page is refreshed because your onsubmit function does not return false.
See this post (there are probably others).
Related
We have a set up with multiple forms on a single page. We are rendering each recaptcha successfully, however I'm struggling to invoke the recaptcha challenge programatically targeted to an ID.
Looking at the docs (https://developers.google.com/recaptcha/docs/invisible#programmatic_execute) my understanding is that I can pass an ID with the execute command so the response is filled into g-response within the correct form, otherwise the response defaults to the first g-response it finds on the page (which is no good for anything other than the first form on the page).
I've tried it with a slightly modified version of Googles own example, however we get the error message 'Invalid site key or not loaded in api.js: recaptcha123' even though the key is correct.
Does anyone have any idea how we might get this working?
<html>
<head>
<script>
function onSubmit(token) {
alert('thanks ' + document.getElementById('field').value);
}
function validate(event) {
event.preventDefault();
if (!document.getElementById('field').value) {
alert("You must add text to the required field");
} else {
grecaptcha.execute('recaptcha123');
}
}
function onload() {
var element = document.getElementById('submit');
element.onclick = validate;
}
</script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<form>
Name: (required) <input id="field" name="field">
<div id="recaptcha123" class="g-recaptcha"
data-sitekey="XXXXXXXXXXXXXXXX"
data-callback="onSubmit"
data-size="invisible"></div>
<button id="submit">submit</button>
</form>
<script>onload();</script>
</body>
</html>
The following code works:
<html>
<head>
<title>reCAPTCHA demo: Explicit render after an onload callback</title>
<script>
var onSubmit = function(token) {
console.log('success!');
};
var onloadCallback = function() {
widgetId1 = grecaptcha.render('recaptcha', {
'sitekey' : 'XXXXXXXXXXXXXXXXXX',
'callback' : onSubmit
});
};
</script>
</head>
<body>
<script src="/wp-content/themes/kc_water_care_services/js/pristine.min.js"></script>
<form action="?" method="POST" id="contactForm">
<div class="form-group">
<label for="name">Name (required)</label>
<input type="text" required data-pristine-required-message="Please enter your name"
id="name" name="name" />
</div><!--/.form-group-->
<div id="recaptcha" data-size="invisible"></div>
<input id="submit" type="submit" value="Submit">
</form>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer>
</script>
</body>
</html>
<script>
var form = document.getElementById("contactForm");
// create the pristine instance
var pristine = new Pristine(form);
form.addEventListener('submit', function (event) {
event.preventDefault();
// check if the form is valid
var valid = pristine.validate(); // returns true or false
if(valid == true){
grecaptcha.execute(widgetId1);
}
});
</script>
Turns out the id doesn't refer to the css ID, it refers to an ID created when you use the render function.
Problem:I am assigning a div to the content property of a kendo tooltip... problem is, when I attached the tooltip... the div is sitting there, and the tooltip does not REALLY wire up until I hover over the element I attached it to... you can see in my code below how this is not working... paste into a kendo dojo, and seee.... just click the button (DO NOT HOVER over the text box yet).. then you will see the div show up, and when you hover over the text box, it will do what it's supposed to do... I made a workaround , which is commented out... but it flashes for a second... is there a way to just make the tooltip wire up and hide the content div?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.223/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.223/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.223/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.223/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.223/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.223/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script>
</head>
<body>
<div id="view" data-bind="enabled: isNameEnabled">
<button id="button1" data-bind="click: updateTooltip">Change Tooltip</button>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<input id="text1" type="text" data-bind="value: name" />
<div id="toolTipDiv"></div>
</div>
<script>
var viewModel = kendo.observable({
isNameEnabled: false,
name: "John Doe",
updateTooltip: function () {
var kendoToolTip = window.toolTipEl.data("kendoTooltip");
// comment this out to see
//div1.hide();
//kendoToolTip.show();
//kendoToolTip.hide();
//div1.show();
//end comment
div1.text(text1.value);
}
});
var div1 = $("#toolTipDiv");
window.toolTipEl = $("#text1");
kendo.bind($("#view"), viewModel);
window.toolTipEl.kendoTooltip({
content: div1, position: "top",autohide:true
});
</script></body>
</html>
The div shows up because it is visible and you just made its contents non-blank. Once the tooltip is shown once, kendo takes over control and wraps it in another div that it hides and shows as necessary.
Note that "aria-hidden: true" does not actually hide the div...it is simply a directive to screen-readers...you still have to actually use real CSS to hide the div.
You need to ensure that the div is hidden initially(before kendo wraps it) and remove the display: none; once you "hand it off" to kendo.
Or...hide the div and set the content to a function that just returns the content of the div instead of binding to the div itself, i.e.
<div id="toolTipDiv" aria-hidden="true" style="display: none"></div>
...
updateTooltip: function () {
div1.text(text1.value);
}
...
window.toolTipEl.kendoTooltip({
content: function(e) {
return div1.text();
},
Example: http://dojo.telerik.com/#Stephen/iqaLA
Update
Turns out that the content only gets called the first time the tip is shown for the element, not every time the tooltip is shown, so dynamic changes to the contents (or even the input's title attribute) don't change the tooltip.
So, ignore my answer and try this: http://www.telerik.com/forums/dynamic-content-de3951ae5752
<!DOCTYPE html>
<head>
<meta charset=" UTF-8">
<title> Document</title>
</head>
<body id="chat">
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.5.0/socket.io.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
<form v-on="submit: send">
<input v-model="message">
<button>Send</button>
</form>
<script>
var socket = io();
new Vue({
el: '#chat',
date: {
message: ''
},
methods: {
send: function(e)
{
e.preventDefault();
alert("a");
}
}
})
</script>
</body>
I want to call the send method defined in new Vue when the form is submitted ,
But when i submit the form, page is reloading.
I have created a Vue object and linked it to the chat element.
I guess e.preventDefault() is not working.
Interesting, I just helped somebody with a similar issue, the syntax for Vue.2.0 is v-on:submit="send" not v-on="submit: send". Vue already has a way stop the form submitting which is: v-on:submit.prevent so you don't need the e.preventDefault, you would get:
<form v-on:submit="send" v-on:submit.prevent>
or a shorter version:
<form v-on:submit.prevent="send">
There are a few more issues here, so I will go through them for you:
Firstly, you are never submitting the form. To submit a form you need a submit input, not a button:
<input type="submit" value="Send" />
However, from what I can see it's likely you don't even need a form, and can simply use a button with v-on:click:
<div>
<input v-model="message">
<button v-on:click="send">Send</button>
</div>
And then get what was submitted from the view model:
send: function()
{
alert(this.message);
}
You should also use the console (under developer tools in your browser) and log any output rather than alert (console.log(this.message)), because it will also sniff out any general errors with your code - for example I can see that you also have a typo (the same one I always make) it's data not date:
data: {
message: ''
},
Okay, what about this
<form #submit.prevent="send">
<input v-model="message">
<button>Send</button>
</form>
And then you can remove preventing default browser action from your send() method
I am trying to send an xAPI statement after someone submits a their full name and email address through a form. In addition to sending the statement I would like to display a video.html page whereby they can watch a video. I know that there is an example of this on GitHub but I'm trying to do a much simpler example on my own. Can someone have a look at my attempt below and tell me why it is not working. Thanks very much.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/xapiwrapper.min.js"></script>
<script type="text/javascript">
var button = document.getElementById("theButton"),
fullName = button.form.fullNameID.value;
emailAddress = button.form.emailAddressID.value;
button.onclick = function() {
var stmt = new ADL.XAPIStatement(
new ADL.XAPIStatement.Agent(ADL.XAPIWrapper.hash('mailto:emailAddress'), 'fullName'),
new ADL.XAPIStatement.Verb('http://adlnet.gov/expapi/verbs/registered', 'registered'),
new ADL.XAPIStatement.Activity('act:http://ISO9000Video.html', 'Preparing for the ISO 9000 Audit',
'Preparation steps for the upcoming ISO 9000 audit.')
);
stmt.generateId();
stmt.addOtherContextActivity( new ADL.XAPIStatement.Activity('compId:internet_proficiency') );
stmt.generateRegistration();
ADL.XAPIWrapper.changeConfig({
'endpoint': 'https://lrs.adlnet.gov/xapi/',
'user': 'xapi-tools',
'password': 'xapi-tools',
});
ADL.XAPIWrapper.sendStatement(stmt);
var o = document.getElementById('output');
o.innerText = JSON.stringify(stmt, null, ' ');
}
</script>
</head>
<body>
<form id="frm1" action="">
Full Name: <input type="text" id="fullNameID" name="fullName"><br>
Email: <input type="text" id="emailAddressID" name="emailAddress"><br><br>
<input type="button" id="theButton" value="Submit">
</form>
<p>
<code><pre id='output'></pre></code>
</p>
</body>
</html>
Your script at the top of the page is being executed when the page loads, but the form element with the button hasn't been set as the property of the button yet because that part of the DOM hasn't been parsed. If you check the console in your browser you'll see an error such as:
Uncaught TypeError: Cannot read property 'form' of null
Move the <script> block that is currently in the <head> to the bottom of the <body> and it should work.
I want to fire a button's click event when pressing ENTER inside a input and I find it quite difficult with AngularJS.
My view (simplified, updated):
<!doctype html>
<html lang="en" ng:app="test">
<head>
<meta charset="utf-8" />
<title>Test</title>
<link rel="stylesheet" href="css/app.css" />
</head>
<body ng-controller="TestController">
<button ng-click="onButton1Click()" class="btn1">Click Me</button>
<button ng-click="onButton2Click()" class="btn2">Don't click me</button>
<script src="lib/jquery/jquery.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="js/testcontroller.js"></script>
</body>
</html>
My controller for this view:
'use strict';
angular.module('test', [])
.controller('TestController', ['$scope',
function($scope) {
$scope.onButton1Click = function() {
alert("Hello");
}
$scope.onButton2Click = function() {
$('.btn2').click();
}
}])
I simplified all the code to this. When I click on btn2 I get this error
$apply already in progress
No, I can't call $scope.onButton1Click() directly, I must simulate the btn1 click.
You mentioned
fire a button's click event when pressing ENTER inside a input
So if it is safe to assume that you can have a form I would prefer using ng-submit as shown below.
<form ng-submit="clickEventFunction()">
<input type="text"/>
<button type="submit">Click</button>
</form>
Note button type should be submit.
This took me a while to figure out (lots of fiddles).
<form id="nowsorting" ng-submit="getData(sc_user)">Now sorting the Soundcloud likes of <input type="text" ng-model="sc_user"><input type="submit" value="Sort"></form>
Make a form and use ng-submit to fire the event (likely a function).
Then create two inputs (one is "text" and the other "submit").
Then pushing enter should fire the ng-submit event/function.
I think, you just have to call your $scope.onButtonClick()
Please check this Plunker
$scope.onKeyPress = function($event) {
if ($event.keyCode == 13) {
$scope.onButtonClick();
}
};