Code is the variable with the URL in it.
That's how it is supposed to work: User enters code (ex: 123342) in Textbox and the Text inside the text box is saved inside variable Code. Then, its goes to the website page 123342.
<form for="Code" action='https://website.com/ + Code'>
//makes a label
<label for="Answer" >URL:</label>
<input type="Answer" id="Code" Answer="Answer"><br><br>
<input type="submit" value="Join" class="Join">
</form>
You can set it at onload:
window.onload = function(){
var id = 789
document.getElementById("form").action = "https://test.com/"+id
};
<form for="Code" id="form">
<label for="Answer" >URL:</label>
<input type="Answer" id="Code" Answer="Answer">
<input type="submit" value="Join" class="Join">
</form>
Related
I have a form that contains an user input (i.e. their name) and on the text area I'd like for it to have something like this:
Hello, [their name]!
I was thinking of something like this:
<form>
<label for="yname">Your name:</label><br>
<input type="text" id="yname" name="yname"><br>
<input type="submit" value="Submit">
</form>
<textarea variable="yname">
Hello, $variable
</textarea>
<form>
<label for="yname">Your name:</label><br>
<input type="text" id="yname" name="yname" onkeyup="update()"><br>
</form>
<textarea variable="yname">
Hello,
</textarea>
<script>
function update() {
document.querySelector("textarea").value = `Hello, ${yname.value}`
}
</script>
You may have to use javascript.
So first
Select the element to want to read. document.getElementById("yname")
then use .value to get the value.
Select the element where you want to put these values to show to user .. document.getElementById("show") and print the values.. .innerText.
Now put the logic inside a function showName() and call this function on onclick event of submit button.
function showName(e){
var name= document.getElementById("yname").value;
document.getElementById("show").innerText = "Hello, " +name;
}
<body>
<form>
<label for="yname">Your name:</label><br>
<input type="text" id="yname" name="yname"><br>
<input type = "button" onclick="showName()" value="submit">
</form>
<br>
<br>
<textarea variable="yname" id="show">
</textarea>
</body>
If you want your textarea to be hidden, add a property display:none;
document.getElementById('showName').addEventListener('click', function(){
var textarea = document.getElementById("show");
textarea.value = "Hello, " + document.getElementById("yname").value;
textarea.style.display = "block";
})
<form>
<label for="yname">Your name:</label><br>
<input type="text" id="yname" name="yname"><br>
<input type = "button" id="showName" value="submit">
</form>
<br>
<br>
<textarea variable="yname" id="show" style="display:none;">
</textarea>
</form>
Making a little search engine. The idea is to take input from the user and then based on that, make a redirection to the search page.
The following code:
<form action ="/search.html">
<label for="form-search"></label>
<input type="text" id="form-search" placeholder="TYPE HERE!"><hr>
<input type="submit" name="query" value="Search!">
</form>
Always redirects to the following page regardless of what the input user has given:
/search.html?query=++Search%21++
While (for the input "Suppose This Was Entered") it should go to:
/search.html?query=Suppose++This++Was++Entered
Any help will be appreciated.
The var name used in the query string of the url is the name attribute of the form fields so you need add a name atribute to your text field instead to the submit input.
<form action ="/search.html">
<label for="query"></label>
<input type="text" id="query" name="query" placeholder="TYPE HERE!"><hr>
<input type="submit" value="Search!">
</form>
The id and the name in the text field not necessary has to be the same
You can create a function that gets called when the form submits via the form's onsubmit attribute. From within the funciton you can manipulate your URL generation like below:
Note: return false; is to prevent submitting the form since the return value of the function is passed to the form's onsubmit.
function submitFunction() {
let searchText = document.getElementById("form-search").value.trim();
let form = document.getElementById('myForm');
if(searchText.length > 0) {
document.getElementById("s").value = searchText;
form.action = "/search.html";
form.submit();
} else {
return false;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Title of Your page</title>
</head>
<body>
<form id="myForm" method="get" onsubmit="return submitFunction();">
<label for="form-search"></label>
<input type="text" id="form-search" placeholder="TYPE HERE!" value="" >
<input type="hidden" id="s" name="query" value="" />
<hr>
<input type="submit" value="Search!">
</form>
</body>
</html>
How to make a form that submit to a text field below
<form action="">
Text: <input type="text" name="firstname">
<input type="submit" value="Submit"><br><br>
Post text: <input type="text" name="firstname">
</form>
You will need to use JavaScript for that:
<script>
function submitted() {
formValue = document.getElementsByName("firstname")[0].value;
document.getElementsByName("firstname")[1].setAttribute("value", formValue); // Copy the value
return false;
}
</script>
<form onsubmit="return submitted()"> <!-- Call submitted when the form is submitted -->
Text: <input type="text" name="firstname">
<input type="submit" value="Submit"><br><br> Post text: <input type="text" name="firstname">
</form>
However, there is no need for a form for that. The onsubmit attribute is mostly used for when you want to alert the user that the form was submitted; the actual submission is done on the server through PHP or something else, and not through JavaScript (since the user has access to the JavaScript code and could change the input checking process as he wishes). Here you could simply have something like this:
<script>
function submitted() {
formValue = document.getElementById("firstname").value;
document.getElementById("postFirstname").setAttribute("value", formValue); // Copy the value
}
</script>
Text: <input type="text" id="firstname">
<button onclick="submitted()">Submit</button>
<br><br> Post text: <input type="text" id="postFirstname">
How can I add a string to the text written by the user of my form?
For example, if he wants to search for "test", my form should submit "site:mysite.de test".
(The name where I'm trying to send the string to is q.)
I tried with
<form action="https://searx.me" method="get" accept-charset="UTF-8">
<input type="text" name="q" placeholder="Search with Searxes" required>
<input type="hidden" name="q" value="site:mysite.de">
</form>
How expected only the first value is submitted https://searx.me/?q=test
I would prefer a solution with pure html without javascript.
Here is an ugly way to do that, looks like binding ;)
var hidden = document.getElementsByClassName('hidden')[0];
var hidden_attr = hidden.getAttribute('value');
var show = document.getElementsByClassName('show')[0];
function magic(){
hidden.setAttribute('value', hidden_attr + show.value);
console.log(hidden.getAttribute('value'));
}
<form action="https://searx.me" method="get" accept-charset="UTF-8">
<input class="show" onkeyup="magic()" type="text" name="q" placeholder="Search with Searxes" required>
<input class="hidden" type="hidden" name="q" value="site:mysite.de ">
</form>
I have a form that can be called from any page. It opens on top of the current page with z-index. I cannot use php in this case. The form is send to a cgi to process the values. It is necessary to put something in "redirect" if I leave it blank it don't works. In redirect is there a way to put the value to the current page whatever it is?
<Form id="formulari" method="POST" action="http://cgi.domain.com/FormMail.pl">
<p>
<input type="hidden" name="recipient" value="info#domain">
<input type="hidden" name="subject" value="IB4 correu">
<input type="hidden" name="redirect" value="TheSamePageWeAre">
</p>
<form>
<input type="text" name="name" value="name"/>
<input type="submit" value="Send"/>
</form>
Put this javascript at the end of the page.
<script type='text/javascript'>
document.getElementsByName('redirect')[0].value = window.location.pathname;
</script>
Set an id on the hidden field, for example id="redirect", and use this Javascript:
<script>
window.onload = function (){
document.getElementById('redirect').value = location
}
</script>