http://torasbo.se/lumos/blog20.html contains a simple search form.
<form class="searchform" method="get">
<input type="text" id="s2" name="s" value="type and hit enter" onfocus="this.value=''" onblur="this.value='type and hit enter'"/>
</form>
If I enter - Benjamin - nothing is found and the file bar shows blog20.html?s=Benjamin.
If I alter the file bar to blog20.html?s=#Benjamin then the search is sucessful.
What do I have to change to accomplish this? I have spent 3 days searching and found nothing.
Looks like you have JQuery on your site. Add this in the header of you page after JQuery is called.
<script>
$(document).ready(function(){
$('.searchform').submit(function(e){
e.preventDefault();
var object = $(this).find('input');
window.location.hash = object.val();
object.blur();
});
});
</script>
It blocks the default action of the search form, and instead pushes the hash header to your page. Using a more complete search system would work better and make searches more flexible, but this is what you were evidently trying to do.
Paste this code in your file:
<script type="text/javascript">
$(document).ready(function(){
var submitClicked = false;
$(".searchform").submit(function(e){
if(submitClicked === false){
e.preventDefault();
var searchString = "#"+$("#s2").val();
submitClicked = true;
window.location = window.location.href+"?s="+searchString;
}
});
});
</script>
Related
Im new to HTML and i have this loader code i got from : https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader5
I adjust it to have a button and when i click on this button it sends an internal GET request to my code /clients.
I want the same code to work but without the button.
I want the loader to finish load and then redirect to the /clients page because now it is depended on the button click.
my code:
</head>
<body onload="myFunction()" style="margin:0;">
</body>
<div id="loader"></div>
<div style="display:none;" id="myDiv" class="animate-bottom">
<h2>Pres OK.</h2>
<form method="get" action="/clients">
<button>OK</button>
</form>
</body>
</div>
simply removing the button line is not doing anything, just showing blank page and in my code i see
its not redirecting to /clients
how can i do this ?
EDIT:
SOLVED by changing myFunction like #Bert Maurau
suggested
<script>
var myVar;
function myFunction() {
myVar = setTimeout(function(){ window.location.href = '/clients' }, 1000);
}
So you basicly want to redirect the user if your "loading" is done?
I see you're calling the myFunction() on page load.
You could add a basic
setTimeout(function(){ window.location.href = '/clients' }, 1000);
at the end of the function to redirect the user to /clients after one second.
(or when your loading function has done processing the data.
myFunction() {
// do stuff here
// ...
// wait for a second
const timeout = setTimeout(() => {
// redirect to clients
window.location.href = '/clients';
}, 1000);
}
You could submit your form from myFunction().
<script>
function myFunction() {
document.getElementById("form_id").submit();
}
</script>
This function would be called when the page is finished loading and would submit the form without anybody pushing the button. You could even remove the button entirely.
Solution:
</head>
<body onload="myFunction()" style="margin:0;">
Remove the extra closing tag for BODY
<div id="loader"></div>
<div style="display:none;" id="myDiv" class="animate-bottom">
<h2>Pres OK.</h2>
<form method="get" action="/clients">
<button>OK</button>
</form>
</body>
</div>
You can use the below Jquery Script
<script>
$(document).ready(function(){
if($('#loader').hasClass('d-none') || $('#loader').css('display') == 'none'){
// or any other check to ensure that the loader is finished.
$('form').submit();
}
})
</script>
Please feel free to ask if you need more clarification.
I have a large application that I want to convert from NATIVE to IFRAME sandbox now that NATIVE is deprecated. The general flow of the application is as follows: The user fills out a form on the beginning page and presses a Begin button. The beginning page is then hidden, and based upon values from the first page, the user is then shown a new page. My problem when using IFRAME is that the new page is never shown. It works as expected in NATIVE mode. I have created a simplified script that exhibits the problem. Please help me understand what I am forgetting or doing wrong.
Code.gs
function doGet() {
Logger.log('enter doget');
var html = HtmlService.createTemplateFromFile('BeginHeader').evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
return html;
}
function include(filename) {
Logger.log('enter include');
Logger.log(filename);
var html = HtmlService.createHtmlOutputFromFile(filename).getContent();
Logger.log(html);
return html;
}
Javascript.html
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js">
</script>
<script
src="https://apis.google.com/js/api.js?onload=onApiLoad">
</script>
<script>
function showForm(hdr) {
console.log('enter showform');
console.log(hdr);
console.log('hiding first page');
document.getElementById('beginDiv').style.display = 'none';
var el = document.getElementById('recordDiv');
el.innerHTML = hdr;
console.log('showing new page');
el.style.display = 'block';
}
function oops(error) {
console.log('entered oops');
alert(error.message);
}
</script>
<script>
$(document).ready(function() {
console.log('begin ready');
$("#beginForm").submit(function() {
console.log('enter begin submit');
//console.log('hiding first page');
//document.getElementById('beginDiv').style.display = 'none';
console.log('including page 2');
google.script.run
.withSuccessHandler(showForm)
.withFailureHandler(oops)
.include('Page2');
});
});
</script>
BeginHeader.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div id="beginDiv" style="display:block">
<p>Click on Begin. </p>
<form id="beginForm">
<input type="submit" value="Begin">
</form>
</div>
<!-- results of content being filled in -->
<div id="recordDiv"></div>
<?!= include('Javascript'); ?>
</body>
</html>
Page2.html
<!DOCTYPE html>
<html>
<body>
<p> This is page 2. </p>
</body>
</html>
There is no point in ever using a button of the "submit" type, unless you want to force the form to make an HTTP Request, and reload the application. That's what a "submit" type button does. It causes the page to be reloaded. The "submit" type button is meant to work together with a form in a certain way. It causes a GET or POST request to happen. That's what the problem is. So, you'll need to reconfigure things a little bit.
Just use a plain button.
<input type="button" value="Begin" onmouseup="gotoPg2()">
I created a gotoPg2() function to test it:
<script>
window.gotoPg2 = function() {
console.log('enter begin submit');
//console.log('hiding first page');
//document.getElementById('beginDiv').style.display = 'none';
console.log('including page 2');
google.script.run
.withSuccessHandler(showForm)
.withFailureHandler(oops)
.include('Page2');
};
</script>
If you use that, they you don't need the $(document).ready(function() { etc. code anymore. And, if you don't need that code, then you don't need to load jQuery.
Unless you are using jQuery for other things, then you don't need:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js">
</script>
The NATIVE mode was probably blocking the intended usage of the "submit" request. That's why the code in NATIVE was working. IFRAME allows things to work as they are built and intended to work, which means that the page was probably trying to be reloaded, and an error was occurring. I was getting a 404 page error in the browser console.
I have disabled button in a.html and some xyz button in b.html.
When the xyz button in b.html is clicked then the disabled button in a.html should get enabled.
I have been trying this for two days but am not getting anywhere. Can you help me?
If it's just plain html pages, you can use jQuery/ JavaScript to do this. Here is a simple example:
a.html:
<body>
<input id="aButton" type="button" value="A Button">
<script type="text/javascript">
$(document).ready(function() {
var enableAButton=getUrlParameter("enable");
if(enableAButton == "true"){
$('#aButton').prop('disabled', false);
}else{
$('#aButton').prop('disabled', true);//disabled by default
}
});
function getUrlParameter(sParam)
{
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++)
{
var sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] == sParam)
{
return sParameterName[1];
}
}
}
</script>
</body>
b.html:
<body>
<input id="bButton" type="button" value="B Button">
<script type="text/javascript">
$("#bButton").click(function(){
window.location.href="a.html?enable=true"
});
</script>
</body>
If both are different files without any relation you cant disable it directly. instead you can maintain a flag variable in the database of the student to track the info . enable and dis-able based on its value.
Using speech recognition available in Google Chrome version 11 and jquery
<input type="text" id="txtAns" x-webkit-speech="x-webkit-speech" onwebkitspeechchange="onChange()" />
I put the onChange() function in a js jquery file that I referenced in the head of my web page
After a successful speech recognition, the onChange function should be called but it is not. If I create a javascript function on the page called onChange() it is called. Any reasons why the jquery version is not being called?
I think you put the script on the head section of the dom. Try putting the script on the bottom, also you could try adding document ready if you want to include it on the head.
<input id="queryField" type="text" x-webkit-speech>
Javascript
<script>
var field = document.querySelector('#queryField');
field.onwebkitspeechchange = function(e) {
console.log("You have spoken");
};
</script>
jQuery
<script>
$('#queryField').bind('webkitspeechchange', function() {
console.log("You have spoken");
});
</script>
Okay, I am working on my final for a webpage design class. We can ONLY use HTML, CSS, and JAVASCRIPT. No AJAX or anything else.
I need a little help.
I have a text box. I want the user to be able to paste an (image) url into it, and it will automatically update an image on the page to the image url they pasted.
Is this possible?
Can I use OnChange in the textbox to update my image url? What do I put in each?
Here is my textbox
<input id="usrimg" onChange="??(What do I put here)??" type="text"/>
and here is the image source I want to change OnChange in the text input
imageObj.src = "??What goes here??";
I know it is a late answer but,
have you tried something like this?
I know it is not the best solution, but it is something...
<script language="JavaScript" type="text/javascript">
function show_prompt() {
var image_url = prompt("Please enter an image url","http://hasselt-graphix.be/images/HGX.png");
document.write("<!-- The rest of your html page --><img src=\"" + image_url + "\" width=\"400px\"><!-- The rest of your html page-->");
}
</script>
<form>
<input type="button" value="Change picture" onclick="show_prompt();" />
</form>
Hope it helps
<script language="JavaScript" type="text/javascript">
function changeUrl(el) {
var el = document.getElementById('inputid').value;
var im = document.getElementsByTagName(img);
im.src = el;
}
</script>
<input type="text" id="inputid" value="" onBlur="changeUrl(this.value)"/>