Is there any way to stop this scrolling when user inputs data on ipad,i tried different things but does not work.
Is there any way to stop this scrolling.
here is my code
<html lang = "en">
<head>
<title>formDemo.html</title>
<meta charset = "UTF-8" />
<script>
$(document).ready(function() {
$(document).bind('touchmove', false);
});
</script>
</head>
<body>
<h1>Form Demo</h1>
<form>
<label for="name">Text Input:</label>
<input type="text" name="name" id="inputtext" onFocus="window.scrollTo(0, 0); value="" style="margin:400px 0 0 0;" />
</form>
</body>
</html>
Your question is almost answered here. You only have to combine your logic with:
$(document).bind('touchmove', false); // or true, depends you want to disable / enable
Related
I am creating a webpage that redirects users to a specific webpage.
Some part of the URL of the specific webpage is constant and the rest is a variable.
If the webpage is www.gotop.com/page1. www.gotop.com/ is constant every time but the page1 part changes. And I want to take the page1 part as an input in my webpage and then a button to go to www.gotop.com/page1
I tried a lot but failed. My final code is
<!DOCTYPE html>
<html>
<label for="name">Name (4 to 8 characters):</label>
<input type="text" id="name" name="name" required
minlength="4" maxlength="8" size="10">
<body>
<h1>The button Element</h1>
<button type="button" onclick="window.location.href='http://152.158.53.1:2222/q/"name"/';">Click Me!</button>
<p>PLEASE WAIT...Redirecting to REALME 1 URL</p>
</body>
</html>
But it doesn't work.
Here I took the value of the variable part of URL from the input and concatenated it at the end of the constant part of the URL.
window.location.href redirects you to the desired URL.
This should help,
document.getElementById('button').addEventListener('click', function(e) {
const page = document.getElementById('val').value
window.location.href = `/constant/url/${page}`
})
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text" id="val">
<button id="button">Click me!</button>
</body>
</html>
I think this would be a better solution
function loadPage(){
location.href = document.querySelector("#page_name").value;
}
<input type="text" id="page_name"/>
<button onclick="loadPage()">Go</button>
When the button is clicked, the loadPage function would be called. There, The value of the input is obtained and the page is redirected to that url.
I'm trying to make a joke generator. The user can choose between Programming, Miscellaneous and Dark jokes (or two / all of them but cannot choose none). Right now, for my Javascript and HTML, I have this:
$("#first-input").val("Programming");
$("#middle-input").val("Miscellaneous");
$("#bottom-input").val("Dark");
let checkboxes = $(".content-top input[type=checkbox]");
let submitButton = $("button[type=submit]");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Joke</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<form action="/joke" method="POST">
<div class="section">
<label><span>*</span> Select a category / categories:</label>
<div class="content content-top">
<input type="checkbox" name="category" id="first-input">
<h5>Programming</h5>
<br>
<input type="checkbox" name="category" id="middle-input">
<h5>Miscellaneous</h5>
<br>
<input type="checkbox" name="category" id="bottom-input">
<h5>Dark Jokes</h5>
</div>
</div>
<button type="submit">Generate Joke</button>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
The HTML I have right now are three checkboxes with the same name attribute, but with different values set (values were set in Javascript above). How do I use jQuery to make it so that once the submit button is clicked, there is an array, and the items in the array are the ones the user checked?
So for example:
If the user selects the "Programming", "Miscellaneous" and "Dark" check boxes, the array would have the 3 items (the three items would be "Programming", "Miscellaneous" and "Dark"). Then if the user proceeds to uncheck the "Dark" checkbox (so now only the "Programming" and "Miscellaneous" checkboxes are checked), the array would also remove the "Dark" item and would now only have 2 items.
I've been trying a lot of things and searching on Google, and tried using "input:checked", is(), etc. but I couldn't figure out how to get it to work.
Question:
How do I get an array, and the items in the array are the values of the checkboxes the user checked (e.g. "Programming", "Dark", etc.) with no repeats, and if the user, for example, initially selected all three checkboxes, and then proceeds to uncheck the "Dark" checkbox, the array should also remove "Dark" as one of it's items.
I've been stuck on this for hours and would really appreciate any help, thanks!
First, change your checkboxes to declare their values in the HTML:
<input type="checkbox" name="category" id="first-input" value="programming">
<h5>Programming</h5>
<br>
<input type="checkbox" name="category" id="middle-input" value="miscellaneous">
<h5>Miscellaneous</h5>
<br>
<input type="checkbox" name="category" id="bottom-input" value="dark">
<h5>Dark Jokes</h5>
Add the following onclick attribute to your submit button:
<button type="submit" onclick="submit(event)">Generate Joke</button>
Then add the following script tag after your inclusion of jQuery:
<script type="text/javascript">
window.submit = event => {
event.preventDefault();
let checkedValues = Array.from($('input:checked')).map(input => input.value);
// ... looks like, e.g., ["programming", "miscellaneous"]
// ... do stuff with checkedValues here...
console.log(checkedValues);
};
</script>
I added the event.preventDefault() thing so that the form doesn't actually send anything to the server. It seems like you'll need that if you want to do things in JS first.
The whole thing should look like this:
<form id="form" action="/joke" method="POST">
<div class="section">
<label><span>*</span> Select a category / categories:</label>
<div class="content content-top">
<input type="checkbox" name="category" id="first-input" value="programming">
<h5>Programming</h5>
<br>
<input type="checkbox" name="category" id="middle-input" value="miscellaneous">
<h5>Miscellaneous</h5>
<br>
<input type="checkbox" name="category" id="bottom-input" value="dark">
<h5>Dark Jokes</h5>
</div>
</div>
<button type="submit" onclick="submit(event)">Generate Joke</button>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
window.submit = event => {
event.preventDefault();
let checkedValues = Array.from($('input:checked')).map(input => input.value);
// ... looks like, e.g., ["programming", "miscellaneous"]
// ... do stuff with checkedValues here...
console.log(checkedValues);
};
</script>
I don't think you need those few lines of JS at the top of your question.
Add the value attribute to your inputs then get all checkboxes iterate through them then push the values to the array, the elements in the array will be removed each time you click submit which means you will always get the new values checked by the user pushed to the result array
results = []
let submitButton = $("button[type=submit]");
submitButton.click(function(e) {
var $checkboxes = $('input[name=category]:checked');
e.preventDefault()
results.splice(0,results.length)
$checkboxes.each(function(){
results.push($(this).val())
});
console.log(results)
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Joke</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<form action="/joke" method="POST">
<div class="section">
<label><span>*</span> Select a category / categories:</label>
<div class="content content-top" id="checkb">
<input type="checkbox" name="category" id="first-input" value="Programming">
<h5>Programming</h5>
<br>
<input type="checkbox" name="category" id="middle-input" value="Miscellaneous">
<h5>Miscellaneous</h5>
<br>
<input type="checkbox" name="category" id="bottom-input" value="Dark Jokes">
<h5>Dark Jokes</h5>
</div>
</div>
<button type="submit">Generate Joke</button>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
I don't do jQuery for years, but if you want to sent an array you have to ending element's names with [] and set a value for each.
here it is in javascript
const DomParser = new DOMParser()
, myForm = document.getElementById('my-form')
;
function newCategory(val)
{
let elm = `<input type="hidden" name="category[]" value="${val}">`
return DomParser.parseFromString( elm, 'text/html').body.firstChild
}
myForm.oninput=()=>
{
while (el=myForm.querySelector('input[name="category[]"]')) el.remove();
myForm.querySelectorAll('input[data-category]:checked').forEach(el=>
{
myForm.appendChild( newCategory( el.dataset.category ) )
})
}
label, button {
display: block;
float: left;
clear: both;
}
button { margin-top: 1em;}
<form id="my-form" action="/joke" method="POST">
<label>
<input type="checkbox" data-category="Programming">
Programming
</label>
<label>
<input type="checkbox" data-category="Miscellaneous">
Miscellaneous
</label>
<label>
<input type="checkbox" data-category="Dark Jokes">
Dark Jokes
</label>
<button type="submit">Generate Joke</button>
</form>
i want to enter names after the display with loading gif comes prompt me to enter my age.
i want after entering my age i get redirected to url. any url like stackoverflow.com
i have updated my question to above. but still same problem
<!DOCTYPE html>
<html lang="en">
<head>
<title>title</title>
<meta charset="utf-8">
</head>
<body>
<form method="post">
<p>
<input type="text" name="myname" />
</p
<label>
<input type="submit" name="submit" value="Enter your names" />
</label>
</form>
<div style="display:none;">
<p>enter your age to enter this site</p>
<p>mr.myname</p>
<div id="spinner">
<img src="js/ajax-loader.gif" alt="Loading" /> waiting for your age to enter site
</div>
<input type="text" name="age" />
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$('form').submit(function() {
$('#spinner').show(); //activate spinner on submit
$.ajax({
type: 'POST',
url: 'https://localhost',
dataType: 'json',
success: function(json) {
// $('#spinner').hide(); //not necessary because of redirect
window.location.href = "http://www.wdr.de";
},
error: function(){
$('#spinner').hide();
}
return false;
});
</script>
</body>
</html>
you can do something like this:
I have updated your code. Sure, you have to set style for your spinner.
Here is also a fiddle: https://jsfiddle.net/mattopen/pkb4xs7w/41/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<title>title</title>
</head>
<body>
<form method="post">
<p>
<input type="text" name="myname" />
</p>
<label>
<input type="submit" name="submit" value="Enter your names" />
</label>
</form>
<div style="display:none;">
<p>enter your age to enter this site</p>
<p>mr.myname</p>
<div id="spinner">
<img src="js/ajax-loader.gif" alt="Loading" /> waiting for your age to enter site
</div>
<input type="text" name="age" />
</div>
<script>
$('form').submit(function() {
$('#spinner').show(); //activate spinner
$.ajax({
type: 'POST',
url: '/your_url/submit_username',
dataType: 'json',
success: function (json) {
alert('redirect');
// $('#spinner').hide(); //not necessary because of redirect
window.location.href = "https://jsfiddle.net/";
},
error: function () {
alert('something went wrong');
$('#spinner').hide();
window.location.href = "https://jsfiddle.net/";
}
});
})
</script>
</body>
</html>
edit:
it was not clear to me if op will use ajax call and submit data to server or only want`s to check a date input and then redirect to url.
If op will make use of ajax, then '/your_url/submit_username' has to be a valid url within your application.
This approach is without the use of an ajax call.
$('input[name="submit"]').click(function(event) {
event.preventDefault();
$('#spinner').show(); //activate spinner
// here goes your code for check input
// function check(){....; return 'ok'};
// now redirect if check was ok like if(check === 'ok')
window.location.href = "https://jsfiddle.net/";
})
Using Hta i want data from web page to hta text Box. Below is the code which i am trying to create but i have no clue how to call data from web page to hta text box.
<html>
<head>
<title>My HTML Application</title>
<script language="vbscript">
urls=("https://www.99acres.com/shri-laxmi-celebration-residency-sector-2b-vasundhara-ghaziabad-npxid-r63907?src=NPSRP&sid=UiB8IFFTIHwgUyB8IzEjICB8IG5vaWRhIzUjIHwgQ1AxMiB8IFkgIzE4I3wgIHwgMTIgfCMzIyAgfCA3ICM1I3wgIHwgMjMgfCM0MyMgIHw=")
Sub RunLoop()
window.navigate urls
End Sub
</script>
</head>
<body>
<input type="button" value="Click" onclick="RunLoop">
Possession:
<input type="text" name="Possession" Value="">
Configurations:
<input type="text" name="Configurations" Value="">
New Booking Base Price:
<input type="text" name="New Booking Base Price" Value="">
</body>
</html>
The data which i require from webpage.
The output which i require in hta.
Using window.ActiveXObject("Microsoft.XMLHTTP"), we get the whole webpage and assign it to an invisible/hidden div (for simplicity). Note that this may result to unwanted styling because of the webpage's own global styling. A better way to do it is to open the webpage on a separate IE.
HTAs default engine is IE7 so we needed to insert meta http-equiv="x-ua-compatible" content="ie=9" in order to support the getElementsByClassName functionality because the data that we want to get from 99acres.com was referenced by class.
Copy the code below to notepad and save it as xxx.hta:
<html>
<head>
<meta http-equiv="x-ua-compatible" content="ie=9">
<title>My HTML Application</title>
<script language="javascript">
var url= "https://www.99acres.com/shri-laxmi-celebration-residency-sector-2b-vasundhara-ghaziabad-npxid-r63907?src=NPSRP&sid=UiB8IFFTIHwgUyB8IzEjICB8IG5vaWRhIzUjIHwgQ1AxMiB8IFkgIzE4I3wgIHwgMTIgfCMzIyAgfCA3ICM1I3wgIHwgMjMgfCM0MyMgIHw=";
var xmlHttp = new window.ActiveXObject("Microsoft.XMLHTTP");
function httpGet(theUrl){
xmlHttp.open( "GET", theUrl, false );
xmlHttp.send( null );
return xmlHttp.responseText;
}
function RunLoop() {
var data = httpGet(url);
document.getElementById("tempdiv").innerHTML = data;
document.getElementsByName("Possession")[0].value = document.getElementsByClassName("factVal1")[0].innerHTML;
document.getElementsByName("Configurations")[0].value = document.getElementsByClassName("factVal1")[1].innerHTML;
document.getElementsByName("New Booking Base Price")[0].value = document.getElementsByClassName("factValsecond")[0].innerHTML;
}
</script>
</head>
<body>
<input type="button" value="Click" onclick="javascript:RunLoop();">
Possession:
<input type="text" name="Possession" Value="">
Configurations:
<input type="text" name="Configurations" Value="">
New Booking Base Price:
<input type="text" name="New Booking Base Price" Value="">
<div id="tempdiv" style="display:none;visibility:hidden;height:0px">
</div>
</body>
</html>
I have created a simple html page to test the localstorage and for the life of me i cant get it to work, even though my firebug shows that the localstorage stored value as the one that i am storing here is my code for the first html page called Testhtml.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>TEsthtml.html</title>
</head>
<script >
function save()
{
var passvalue = document.getElementById('entry_1').value;
localStorage.setItem('passingvalue', passvalue);
}
</script>
<body>
<form action="simple.html" method="POST">
<label for="entry_0">Type ur name</label>
<input type="text" name="entry.0.single" value="" id="entry_0">
<br>
<label for="entry_1">ur pets name
</label>
<label for="entry_1">type something</label>
<input type="text" name="entry.1.single" value="" id="entry_1">
<br>
<input type="submit" name="submit" id="submit" onClick="save()" value="Submit">
</form>
</body>
</html>
Second form called the simple.html code is as follows
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Simple HTML</title>
<script >
function load()
{
var storedvalue = localstorage.getItem('passingvalue');
if(storedvalue)
{
document.getElementById('tb1').value=storedValue;
}
}
</script>
</head>
<body onload="load()" >
<input id="tb1" name="tb1" type="text"/>
<input type="submit" name="submit" id="submit" onClick="load()" value="Submit">
</body>
</html>
I try to run this code the simple.html which is the second form in the only textbox that is there it is not displaying anything..tried so many different things!!
It's just typographical errors in Simple.html on lines 8 and 9; 'localstorage' should be 'localStorage' and 'storedvalue' should be 'storedValue'.
You should look into your browsers error reporting and developer tools, they would have helped you solve this problem on your own. I personally prefer to develop on Google Chrome because of the fast, simple, and easy-to-use debug tools (if you use chrome, just press Ctrl+Shift+J).
simple.html's code is the same as testhtml.html . Did you post wrong code?
a simple tutorial for localStorage:
http://www.w3schools.com/html5/html5_webstorage.asp