<!DOCTYPE html>
<html>
<head>
<!-- $("input#post_id").on("change", function(){ // Whenever this field changes
var post_id = $("input#post_id").val(); // Get the value of the field
$("a#link").attr("href", "https://stackoverflow.com/questions/" + post_id); // Update the href in the link to match the id inserted in the input field
}); -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Enter the DP ID below </label>
<br>
<input id="post_id" type="text">
<a id="link" href='https://www.google.com/search?'+post_id.value>Click to redirect</a>
</body>
</html>
How to create a link incorporating user input from the input box
I'm trying to attempt a similar mechanism but as I'm too new to HTML, I'm unable to quickly club it with jquery.
Appreciate any help! Thanks!
My sample query - https://www.w3schools.com/code/tryit.asp?filename=GPZYOB9C4JFW
When I initially tried this approach the url generated had [ input object HTML ] something like this instead of the user input string.
You need to put the jQuery code inside a <script> tag after the one that ooads the jQuery library.
Also put the code inside $(document).ready() so it runs after the HTML is fully loaded.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("input#post_id").on("change", function() { // Whenever this field changes
var post_id = $("input#post_id").val(); // Get the value of the field
$("a#link").attr("href", "https://stackoverflow.com/questions/" + post_id); // Update the href in the link to match the id inserted in the input field
});
});
</script>
</head>
<body>
<label>Enter the DP ID below </label>
<br>
<input id="post_id" type="text">
<a id="link" href='https://www.google.com/search?'>Click to redirect</a>
</body>
</html>
You just need to have <script> tag and jQuery document ready tag $(function() { to make it work.
<script>
$(function() {
$("input#post_id").on("change", function(){ // Whenever this field changes
var post_id = $("input#post_id").val(); // Get the value of the field
$("a#link").attr("href", "https://stackoverflow.com/questions/" + post_id); // Update the href in the link to match the id inserted in the input field
});
});
</script>
Related
I have this code:
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
</head>
<body>
<form action="https://api.pagar.me/1/zipcodes/">
<input type="text" placeholder="cep" name="cep">
<input type="submit">
</form>
</body>
</html>
When I type a number, for example 05423110, I get on the adress bar is "https://api.pagar.me/1/zipcodes/?cep=05423110", but I would like to have "https://api.pagar.me/1/zipcodes/05423110".
What do I need to change on my code?
Thanks!
I would do it like this. The other answer will have the problem where it could potentially append something twice.
I also set it so the button disables for user friendliness (in case the server takes awhile to respond).
This solution does use jQuery, but chances are you will need to do other simple DOM manipulation and this will be very helpful.
Because you don't want the query string in there, but you must have it be GET, then its impossible not to have it append the query string to the URL (because that's what a GET request does).
Instead, I use javascript to simply redirect to the proper URL and ignore the form GET/POST entirely.
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
</head>
<body>
<form action="https://api.pagar.me/1/zipcodes/">
<input type="text" placeholder="cep" name="cep">
<input type="submit">
</form>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
(function() {
var form = $('form');
var baseUrl = form.attr('action');
$('form').submit(function(e) {
e.preventDefault();
form.find('[type="submit"]').prop('disabled', true);
window.location.href = baseUrl + form.find('[name="cep"]').val();
});
})();
</script>
Add method="post" to the form tag, then add an event listener to the form's submit event which append the input value to the action attribute value on the form:
const form = document.forms[0]
form.addEventListener('submit',()=>{form.action+=cep.value})
<form action="https://api.pagar.me/1/zipcodes/" method="post">
<input type="text" placeholder="cep" name="cep" id="cep">
<input type="submit">
</form>
Ofc StackOverflow snippets prevents POST.
How can I link files together? What I mean by that is, how do I create a button, and when clicked, takes you to another site? (Or in my case, the next page of reading) Sorry for stupid question, I'm new to coding, and I only know password based buttons. :(
password: <input type=password ID="Next"> <button onclick="correctpassword ();">submit</button>
</div>
<script type="text/javascript">
function correctpassword () {
var code = document.getElementById ("Next").value;
// alert ("Haha! I know your password! It's \"" + code + "\"");
if (code == "Next") {
location = "NHD2.html";
} else if (code == "next")
alert ("So Close!!");
else location = "LoginWrongSite2.html";
}
Is what I have.
I think you want to simulate a little form.
If that is what you try to do then try this (be sure to have both pages on the same directory):
Page1.html
<!DOCTYPE html>
<html>
<head>
<title>Page1</title>
</head>
<body>
<form onsubmit="submitform(event)" action="Page2.html">
Name: <input type="text" placeholder="Your name here" id="username"/>
Password <input type="password" id="userpassword"/>
<button type="submit">Submit</button>
</form>
<script type="text/javascript">
function submitform(event) {
var username = document.getElementById('username');
var userpassword = document.getElementById('userpassword');
if(username.value !== 'test' || userpassword.value !== '1234') {
event.preventDefault();
}
}
</script>
</body>
</html>
Page2.html
<!DOCTYPE html>
<html>
<head>
<title>Page1</title>
</head>
<body>
We are good !
</body>
</html>
This will basically define a form in the page1.
When you type test as username and 1234 as password in that page it will be submitted and you will navigate to what action attribute says.
If you enter a value different than test for ussername or 1234 for password navigation will be cancelled.
Of course this is just a simple example, in a real app you will not do something like this, it is just to let you know how to navigate from page1 to page2 (there are other ways as well like links for instance).
Hope this helps !
How can I access the value the user submits in the input field at the top and place it in the code after "LIKE" in the SQL query? My code works with the given value, 9999, but I want that value to instead be whatever the user enters into the input field.
<!DOCTYPE html>
<html>
<body>
Enter Tracking Code: <input type="text">
<input type="button" value="Submit">
<table id="switch-hitters" class="table table-condensed table-striped"></table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sheetrock/1.0.1/dist/sheetrock.min.js"></script>
<script>
var mySpreadsheet = 'https://docs.google.com/spreadsheets/d/1_1elTo5zH1ew6KPYwoWtixX9hzFc8oxdRy5A0LWFkwg/edit#gid=0';
$('#switch-hitters').sheetrock({
url: mySpreadsheet,
query: "select A,B,C,D,E where A like 9999"
});
</script>
</body>
</html>
Updated code:
<!DOCTYPE html>
<html>
<body>
Enter Tracking Code: <input type="text" id="textbox_id">
<input type="button" value="Submit">
<table id="switch-hitters" class="table table-condensed table-striped"</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sheetrock/1.0.1/dist/sheetrock.min.js"></script>
<script>
var mySpreadsheet = 'https://docs.google.com/spreadsheets/d/1_1elTo5zH1ew6KPYwoWtixX9hzFc8oxdRy5A0LWFkwg/edit#gid=0';
var elem = document.getElementById('textbox_id').value;
$('#switch-hitters').sheetrock({
url: mySpreadsheet,
query: "select A,B,C,D,E where A like "+elem
});
To get the value from the input textbox you can either use the following:
Get value from text box based on its id which you need to set in your code:
<input type="text" id="textbox_id" >
document.getElementById('textbox_id').value
OR
Get value of the first textbox in the HTML document if you don't want to set an id :
document.getElementsByTagName("input")[0].value;
Then in your script :
var elem = document.getElementById('textbox_id').value;
$('#switch-hitters').sheetrock({
url: mySpreadsheet,
query: "select A,B,C,D,E where A like "+elem
});
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 3000 images in a folder. All named 1000.jpg 1001.jpg and so on.
From 1000 to 3000.
I would like to make a html file and to have a text box and when i input the number (ie, 1000) it will show me the file 1000.jpg.
Also when i would click the file it will hide this.
I need this to properly manage the warehouse and to have the pattern images on my mobile.
Thanks
maybe this can help you--
<input type="number" id="my-input">
See the Image
<Script>
$("#b").click(function() {
var s=$("#my-input").val()
$("#b").attr("href", s+".jpeg");
}
});
</script>
So, what it does is that it takes the value of "#my-input" and appends the value of href attribute to the filename.
You can have some thing like this.
document.getElementById("imageid").src= folderPath + document.getElementById("inputID").value + ".jpg";
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<input type="text" id="imageName">
<input type="button" id="view" value="View"/>
<div id="imageDiv">
</div>
<script>
$("#view").on("click", function()
{
var image=$("#imageName").val();
$("#imageDiv").html("<img src='"+image+".jpg'></img>");
});
</script>
</body>
</html>
Assuming that this HTML and the images are in the same folder. If the images are in a different folder, change this line:
$("#imageDiv").html("<img src='"+image+".jpg'></img>");
For ex: if the images are in a folder called images:
$("#imageDiv").html("<img src='images/"+image+".jpg'></img>");