I am trying to get a fairly simple bit of code to work. The essence of it is just to take user input, append it on to a source URL, and then use a script to display the appropriate tumblr feed.
I have spent some time on this, and I can't get my head around how javascript works enough to do something like this.
This is what I have so far:
<html>
<body>
<form>
Tumblr Username:<br>
<input type="text" name="username">
<br>
<br>
<input type="submit" value="Submit">
</form>
<script type="text/javascript" src= username + ".tumblr.com/js"></script>
</body>
</html>
Thanks in advance.
The way that JavaScript works, is you need an event to attach the running of your code. In your case, the form's submit event. Additionally, you cannot compute values within the HTML as you're attempting; you'll need code to manipulate the HTML (the DOM). Here's a sample of how you can do it:
<html>
<body>
<form onSubmit="handleSubmit(event)">
Tumblr Username:<br>
<input type="text" name="username">
<br>
<br>
<input type="submit" value="Submit">
</form>
<script id="theScript" type="text/javascript"></script>
<script>
function handleSubmit(e) {
e.preventDefault(); // Keep the form from actually submitting
var username = document.querySelector('[name="username"]').value;
document.getElementById('theScript').src = username + '.tumblr.com/js';
}
</script>
</body>
</html>
Because the JS file that is on username.tumblr.com uses document.write, I think it'd be better to just load the actual url of the user in an iframe, as this wouldn't require you to refresh the page, while creating a mini page inside your page.
This won't work on the snippet tool here or on JSFiddle, but I've tested it on a web server:
<html>
<body>
<script>
function getUN() {
var username = document.getElementsByName("username")[0].value;
document.getElementById("tumblrframe").src = "http://" + username + ".tumblr.com";
}
</script>
Tumblr Username:
<br>
<input type="text" name="username">
<br>
<br>
<button onclick="getUN()">Submit</button>
<br/>
<br/>
<iframe id="tumblrframe" width="80%" height="600px"></iframe>
</body>
</html>
Related
I really need help... :-) I have two html pages and forms on both of them. I need solution to show field value from first form (on first page) in field on second form, after click on SEND button. But, I need both pages to stay open, on first I need to insert values and on second page that values should be shown. Also, I need a solution without PHP because this app will be running on local devices, without server. I don't have any solution and please, I need some tips how I can do that.
I found here some solutions with localStorage and it looks interested but I need to stay on First page and send field value to Second page, in live. There is code which I found here, this is example what I need, just I need both pages to be open and after I insert some value in field on first page and click on button, that value should be shown in field on second page. Thank you in advance!
<html>
<head>
<title>First Page</title>
<script type="text/javascript">
function saveVal() {
var inputFirst = document.getElementById("name").value;
localStorage.setItem("name", inputFirst);
inputFirst = localStorage.getItem("name");
}
</script>
</head>
<body>
<form action="secondPage.html" method="get">
<label>
First Name:
<input name="name" size="20" maxlength="25" type="text" id="name" />
</label>
<input type="submit" value="submit" onclick="saveVal()"/>
</form>
</body>
</html>
<html>
<head>
<title>Second Page</title>
</head>
<body>
<form action="#">
<label>
First Name:
<input name="name" size="20" maxlength="25" type="text" id="name"
readonly="readonly" />
</label>
<script type="text/javascript">
var storedVal = document.getElementById("name");
storedVal.value = localStorage.getItem("name");
</script>
</form>
</body>
</html>
You can use setInterval to constantly check and set the value:
//this will run storeCheck function every 250 miliseconds and update values from localStorage.
setInterval(storeCheck, 250);
function storeCheck() {
var storedVal = document.getElementById("name");
storedVal.value = localStorage.getItem("name");
}
This is my first question! I am trying to enter a search term into a search box, and when I click Submit, I want the search term inserted into this URL:
http://www.hadrians-search.tk/search?search_param=mario?&items_per_page=2&page_number=2
mario would be the search term. This is the search page I am testing with:
http://cs.oswego.edu/~jmcquaid/CSC-380/search3.html
When I enter a search term such as ball into the search box and click Submit, this is the URL I get:
http://hadrians-search.tk/search?search%3Fsearch_param%3D=ball
As you can see, this is clearly not the URL I am intending to get.
Bear in mind that search3.html is just a file I am testing with on the front-end:
<!DOCTYPE html>
<html>
<body>
<form id="myForm" action="http://hadrians-search.tk/search?search_param=">
Search: <input type="text" name="search?search_param="><br><br>
<input type="button" onclick="myFunction()" value="Submit form">
</form>
<script>
function myFunction() {
document.getElementById("myForm").submit().action="http://hadrians-search.tk/search?search_param=";
}
</script>
</body>
</html>
So basically I am trying to send the search term entered in the search box to the Flask server, but it isn't getting sent properly. Should I be trying an HTTP GET Request? I originally tried this, but I couldn't figure out how to integrate an HTTP GET Request with a search box and button. Because of this, I instead tried to use action, as you can see in the file. Any advice that you can provide will be greatly appreciated, and I thank you for your time.
You can pass the parameters via GET. If you have three parameters, you could add the three elements in the form. You can do something like this.
<!DOCTYPE html>
<html>
<body>
<form id="myForm" method="get"
action="http://hadrians-search.tk/search">
search_param: <input type="text" name="search_param"><br><br>
items_per_page: <input type="text" name="items_per_page"><br><br>
page_number: <input type="text" name="page_number"><br><br>
<input value="Submit form" type="submit">
</form>
</body>
</html>
Hi I'm kind of a beginner in coding I've been doing it for a couple of months doing basic things. I'd like to know how to make a basic account sign in type of thing, where you type in your username and password that you want press submit then it saves those to the html file and remember it when I exit and that the next time you type in your username and password it will recognize the username and password. Any thoughts? The code I have so far...
<!DOCTYPE HTML>
<html>
<head>
<title>Sign Up!!!</title>
</head>
<body>
<form>
<input type="text" name="UserName" value="Username">
<br>
<input type="text" name="Password" value=Password">
<br>
<input type="submit" name="SU" value="Sign Up" onclick="su()"
</form>
<script>
function su(){
var su = document.getElementsByName("Username")[0].value;
var su2 = document.getElementsByName("Password")[0].value;
}
</script>
</body>
</html>
I have the var su to get what's in the text boxes, but I'm not sure on how to save those two things. What do I do?
There are some ways to do that, but there are very simple way in HTML5, just put <input type="text"> for the user name and <input type="password"> and the web browser will automatically cache it.
There are many youtube tutorials for your answers. However, you will mainly need php. Here is a link to a tutorial about register and login.
This my code for trialindex.php. The code contains an html form which is submitted properly. I am trying to create a javascript function to be called when the form is going to be submitted. Right now there is only an alert in this function. But it the function isn't called when the form is submitted.
<?php session_start();?>
<html>
<head>
<script type="text/javascript">
function try(){
alert("Hello");
}
</script>
<title>Untitled Document</title>
</head>
<body>
<div id="change">
<form id="trialForm" method="post" action="connection.php" onSubmit="try()">
<center>
<h3><b>Login</b></h3>
<br/>
<label>Username :</label>
<input type="text" id="username" name="username"/>
<br/>
<br/>
<label>Password :</label>
<input type="password" id="password" name="password"/>
<br/>
<br/>
<input type="submit" value="Login"/>
</center>
</form>
</div>
</body>
</html>
The javascript function try() doesn't seem to work. I have also tried several other calls for try like : try(); , javascript:try() , javascript:try();
But in any of the syntax no alert is popped. Also in my browser pop-up are not blocked.
Could you please suggest what could the possible problem be?
You can't use try as a function name.
It is a reserved word:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Reserved_Words
Just use a different name for your function.
function my_submit_function(){
alert("Hello");
}
It is good practice to check your console for errors.
The error message I see is:
Uncaught SyntaxError: Unexpected token try
Which makes clear that try is not a method, but a token (or keyword).
If you rename try it works.
I'm making a one-page website with a layout made of horizontally sliding sections. There is a somewhat complex form at the end of each section. The form is always the same between sections, and if a bit of it is filled in one, changes should appear in all.
My question is: what is the best approach for this?
I want the website to be as lightweight as possible as it is meant to be used in very underdeveloped countries. (I haven't had to require jquery so far but it is still an option).
My best idea so far is replicating the form on page load but it will require loads of script to live update each form when the user modifies one.
Isn't there a possibility to just mirror a div? That all the instances of the form would actually be the same div unic appearing in multiple places?
Duplicate the data of input as it changed?
<!DOCTYPE HTML>
<html>
<head>
<title>Bla!</title>
<style type='text/css'>
</style>
<script type='text/javascript'>
function duplicate(object) {
var data = object.value;
inputs = document.getElementsByName(object.name);
for (var i in inputs) {
var input = inputs[i];
input.value = data;
}
}
</script>
</head>
<body class='body' >
<div id='div1'>
<h2>Form1</h2>
<form>
<input onchange='duplicate(this);' name='input1'>
<input onchange='duplicate(this);' name='input2'>
<input onchange='duplicate(this);' name='input3'>
</form>
</div>
<div id='div2'>
<h2>Form2</h2>
<form>
<input onchange='duplicate(this);' name='input1'>
<input onchange='duplicate(this);' name='input2'>
<input onchange='duplicate(this);' name='input3'>
</form>
</div>
<div id='div3'>
<h2>Form3</h2>
<form>
<input onchange='duplicate(this);' name='input1'>
<input onchange='duplicate(this);' name='input2'>
<input onchange='duplicate(this);' name='input3'>
</form>
</div>
</body>
</html>