I need to write in html a field where a user will enter a url and a search button to search for the url that the user has entered
tenks
Try this code:
<script>
function loadSite(){
var site = document.getElementById("bar").value;
window.location = site;
}
</script>
<body>
<input type="text" id="bar">
<button onclick=loadSite()>GO</button>
</body>
Related
<!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>
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 !
I have a form in a html file inside my google apps script project, I need to redirect to another html file when a submit button is Clicked.
HTML CODE:
<html>
<script>
function doSomething(){
alert('this one works too!');
//here Change of page
}
</script>
<body>
<h1 style="text-align:center;font-family:Tahoma;">HORAS LABORADAS<br/>
<form style="margin-left:90px;font-family:Trebuchet MS;">
<b>Nombre</b><br/>
<input type="button" onclick="doSomething()">
</form>
</body>
</html>
I call this by
function doGet() {
return HtmlService.createTemplateFromFile('prueba').evaluate();
}
HTML FILE1
<html>
<body>
<h1 style="text-align:center;font-family:Tahoma;">HORAS LABORADAS<br/>
<form style="margin-left:90px;font-family:Trebuchet MS;">
<b>Nombre</b><br/>
<?var url = getUrl();?><a href='<?=url?>?page=2'><input type='button' name='test' value='GO TO PAGE 2'></a>
</form>
</body>
</html>
HTML FILE2
<html>
<h1>This is Page 2.</h1><br/>
<?var url = getUrl();?><a href='<?=url?>?page=1'> <input type='button' name='test' value='RETURN TO PAGE 1'></a>
</html>
CODE.GS
function getUrl(){
var url = ScriptApp.getService().getUrl();
return url;
}
function doGet(requestInfo) {
var url = ScriptApp.getService().getUrl();
if (requestInfo.parameter && requestInfo.parameter['page'] == '2') {
return HtmlService.createTemplateFromFile('FILE2').evaluate();
}
return HtmlService.createTemplateFromFile('FILE1').evaluate();
}
If you simply want to redirect to another page, use the following:
<script>
function doSomething(){
alert('this one works too!');
window.location.href = "http://myurl.com";
}
</script>
Source: click this link
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)"/>