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>
Related
I like to know if it possible to submit just filled inputs of a form and show their name and value in url in browser.
Example:
<form method="get">
<input name="firstname" value="a" />
<input name="lastname" value="" />
</form>
I like to show in url as:
?firstname=a
not as:
?firstname=a&lastname=
Thanks.
You'll have to use javascript to achieve this result. For example you can make empty inputs disabled so browser doesn't send their values
Form
<form method="get" id="the-form">
<input name="firstname" value="a" />
<input name="lastname" value="" />
<button type="submit">Submit</button>
</form>
Javascript
<script>
let form = document.querySelector('#the-form');
form.addEventListener('submit', () => {
let inputs = form.querySelectorAll('input');
for (let input of inputs) {
if (!input.value) {
input.disabled = true;
}
}
})
</script>
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>
I have search input. When I write a number to find something (this is an HTTP request) I have some results but my number from input disappeared. How can I leave it?
div class="control is-expanded">
<input
name="request_id"
class="input"
placeholder="Request ID"
/>
</div>
<div class="control">
<input type="submit" name="submit" class="button is-link" />
</div>
The HTTP request in on the beckent, which I didnt write. I do only frontend. Can I change this or not?
HTML:
<form method="post" action="" onSubmit="return saveComment();">
<input type="text" name="request_id" class="input" placeholder="Request ID from Furia" />
<input type="submit" name="submit" class="button is-link" />
</form>
JavaScript:
document.getElementById("request_id").value = localStorage.getItem("comment");
function saveComment() {
var comment = document.getElementById("request_id").value;
if (comment == "") {
alert("Please enter a comment in first!");
return false;
}
localStorage.setItem("comment", comment);
alert("Your comment has been saved!");
location.reload();
return false;
}
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">
With a html type=file, how can I validate to determine if a file was uploaded, (for client side validation using javascript or jquery)
<form action="program" enctype="multipart/form-data" method="post">
<input type="text" name="textline" size="30">
<input type="file" name="datafile">
<input type="submit" value="Send">
</form>
<script>
if (something )
message = "You did not upload a file...";
</script>
Same way as any other input, look at the value. For example
<form id="programform" action="program" enctype=...
<script type="text/javascript">
document.getElementById('programform').onsubmit= function() {
if (this.elements.textline.value==='')
alert('Please enter a description.');
if (this.elements.datafile.value==='')
alert('Please choose a file to upload.');
else
return true;
return false;
}
</script>
Thanks for the push in the right direction... Here is what I was looking for.
<form name="registration_2" id="registration_b" action="registration_b.php" method="post" nctype="multipart/form-data" accept-charset="UTF-8" onsubmit="return check_checkboxes();">
<input type="text" name="textline" id="textline" size="30">
<input type="file" name="datafile" id="school_logo_id">
<input name="no_school_logo_id" id="no_school_logo_id" type="checkbox" onclick="no_school_logo(this);"/>Our school does not have a logo
<input type="submit" value="Send">
</form>
<script type="text/javascript">
function check_checkboxes()
{
var logo = document.getElementById('school_logo_id');
var nologo = document.getElementById('no_school_logo_id');
if (logo.value==='' && nologo.checked===false)
alert('Must enter logo file or check no file available.');
}
</script>