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">
Related
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 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 need to disable only the error message of HTML Validation; the actual validation should still be there. User won't submitted the form without filling text field. Even if the user does not fill in a required text field, I don't want to display any message like "Please fill out this field".
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="" required>
<br>
<input type="submit" value="Submit">
</form>
You can use novalidate attribute to skip validation from HTML and then add validation code on javascript - on submit event.
HTML:
<form novaidate>
First name:<br>
<input type="text" name="firstname" value="" required>
<br>
<input type="submit" value="Submit">
</form>
JS:
$('form').submit(function(){
//check validations and submit through AJAX
return false;
});
I've some form like this:
<form action="#" method="post">
<input type="text" name="website" />
</form>
How I can find if user enter website with http:// or without? I want to show it in:
<a href="value from input">
Any suggestions how to validate this form and send it to database as right link like: http://website...?
You may use javascript to validate input.
function validate()
{
var input = document.getElementsByName("website")[0].value;
if(input.startsWith("http://")) {
alert("valid input");
return true;
}
alert("invalid input");
return false;
}
<form action="#" method="post" onsubmit="return validate()">
<input type="text" name="website" />
<input type="submit" />
</form>
I need to add a path to a file to the form url before submitting. I created therefore a text field and want to add the text to the url without php.
can somebody help?
the existing code:
<form action="http://127.0.0.1:8080/WebService1/HTTPMethod_1?new_value=value" method="post">
<input type="text" value="" size="30" name="filename">
<input type="submit" name="submit" value="Submit" class="continue-button">
</form>
look into using hidden input fields. these allow you to send form data, but not necessarily show a form field.
for instance:
<script type="text/javascript">
function setFormAction() {
document.myForm.action = document.getElementById("url").value;
}
</script>
<form name="myForm" method="POST" action="default.php">
<input type="value" name="url" id="url" />
<input type="submit" name="submit" onclick="setFormAction();" />
</form>