I'm trying to make a select box to switch from one searchform to the other, but I'm very unexperienced with HTML forms.
The two options should be "Blog" and "Shop". (FYI the blog one for Wordpress and the shop one for Opencart.)
For Wordpress the search url would be: /?s=TEST
For Opencart: /shop/?route=product/search&filter_name=TEST
These are the two forms so far:
<form method="get" id="blogsform" class="form-search" action="/">
<input type="search" name="s" id="s" placeholder="Blog durchsuchen ...">
<input type="submit" class="submit" id="searchsubmit" value="Durchsuchen">
</form>
<form method="get" id="shopsform" class="form-search" action="/shop/">
<input type="hidden" name="route" value="product/search">
<input type="search" name="filter_name" placeholder="Shop durchsuchen ...">
<input type="submit" class="submit" id="searchsubmit" value="Durchsuchen">
</form>
Thanks in advance for your help,
Markus
With jQuery, these are simple changes applied in the onchange event of a select box:
<select id="chooseform">
<option value="">Select Form...</option>
<option value="Blog">Blog</option>
<option value="Shops">Shops</option>
</select>
If you want to have two forms, and show/hide each form based on the selection, you might do something like this:
$('#chooseform').change(function() {
var choice = $(this).val();
if (choice == "Blog")
{
$('#blogsform').show();
$('#shopsform').hide();
}
else if (choice == "Shops")
{
$('#blogsform').hide();
$('#shopsform').show();
}
else
{
$('#blogsform').hide();
$('#shopsform').hide();
}
});
Demo: http://jsfiddle.net/Pf9QQ/
If you want to have a single form, but change the action/method and display properties of the form dynamically based on the selection, you could do it something like this:
$('#chooseform').change(function() {
var choice = $(this).val();
if (choice == "Blog")
{
$('#theform').attr('action', '/');
$('#s').attr('name', 's');
$('#s').attr('placeholder', 'Blog durchsuchen ...');
$('#theform').show();
}
else if (choice == "Shops")
{
$('#theform').attr('action', '/shop/');
$('#s').attr('name', 'filter_name');
$('#s').attr('placeholder', 'Shop durchsuchen ...');
$('#theform').show();
}
else
{
$('#theform').hide();
}
});
Demo: http://jsfiddle.net/JgLSE/
Which method you choose depends on which way is easier to maintain. If you have really large forms with only a few minor differences, you could use the second method. If the forms are very different, I would just maintain two separate entire forms and show/hide them appropriately based on the user's selection, because that will be less confusing or complicated.
Related
First of all I already saw this: Don't include empty parameters when submitting form
But in form you can have not only input but also select for example and what if someone have Javascript disabled? Isn't there a better way to hide empty parameters?
Let's say I have a form like this:
<form asp-controller="Vehicles" asp-action="Index" method="get" >
<p>
<select asp-for="Length" asp-items="Model.Lengths">
<option value="">All</option>
</select>
Brand: <input type="text" asp-for="Search">
<input type="submit" value="Filter" />
</p>
</form>
Now if I picked length from select box and clicked filter, I have this url in the browser window:
https://localhost:44358/Vehicles?Length=15&Search=
but I want this:
https://localhost:44358/Vehicles?Length=15
or if I only searched brand without picking length I want to have this:
https://localhost:44358/Vehicles?Search=Mercedes
Is there some helper tag like adding to form hide-empty="true" or something like that? Any ready to use element or just simple solution for this simple problem?
If you insisit on achieving this requirement, you could try to disable the input which is empty. For disabled field, it will not generate the query string.
Try something like :
<form asp-controller="Vehicles" asp-action="Index" method="get">
<p>
Brand: <input type="text" id="Search" name="Search">
<input type="submit" value="Filter" onclick="return DisableNullFields();"/>
</p>
</form>
#section Scripts{
<script type="text/javascript">
function DisableNullFields() {
$('input').each(function(i) {
var $input = $(this);
if ($input.val() == '')
$input.attr('disabled', 'disabled');
});
}
</script>
}
i'm not a very good programmer at all but i need a little help with a webpage i'm making.
Here's what I have for a form:
<form name="input" action="name.htm" method="get">
Name: <input type="text" name="name">
<input type="submit" value="Submit">
</form>
What I want it to do is if I put in the name Fred and press submit Button, it will go to a certain page. Any other name will link to another page or popup with an error saying, "tough luck!" or something like that.
Sorry, I couldn't find anything this specific on the web anywhere. I'm sure it's simple, I'm just confused with how this works. Thank you!
using front-end only, i'd be using javascript or jquery. meaning you don't need a form element inside it.
<script>
$("#submitButton").click(function(){
window.location.replace("enter url here")
})
</script>
you can do it with JS/jQuery:
HTML
<form name="input" action="name.htm" method="get">
Name: <input type="text" name="name" id="name">
<input type="submit" id="submit-button" value="Submit">
</form>
JS
$("#submit-button").click(function(){
if ($("#name").val() == "Fred")
location.href = "goodurl";
else
location.href = "badurl";
});
There are 2 options to solve this problem.
To use JavaScript for input value's validation and depending on it to redirect user
To use server side language to check the passed value
The first option will be easier for you I guess.
You can do something like:
Name: <input type="text" name="name">
<input type="button" value="Submit" onClick="redirect();">
<script type="text/javascript">
function redirect() {
var value = document.getElementsByName('name')[0].value;
if (value == 'Fred') {
window.location.href='http://url1';
} else {
window.location.href='http://url2';
}
}
</script>
Links: 'url1' and 'url2' must be replaced with your URLs
Just add the following code in your HTML file and try it out:
<script type="text/javascript">
function handleSubmit() {
var name = document.input.name.value;
if(name == 'Fred') {
location.href = "http://www.google.com";
} else if (name == 'Jack') {
location.href = "http://www.yahoo.com";
} else {
alert("Tough Luck");
}
}
</script>
<form name="input" action="name.htm" method="get">
Name: <input type="text" name="name">
<input type="button" value="Submit" onclick="handleSubmit();">
</form>
I'm making a form and want something to happen when just a certain part of the form has been completed. I've got some checkboxes, a dropdown menu, and three read-only text fields. I need something to pop up when the checkboxes and dropdown fields have been populated, but have no idea how to do this. I tried putting a form within a form, but after that failed and I later read up on the matter, I found that to be impractical. Anyhow, here's my code for the form:
<form action="http://siedb1.sys.virginia.edu/~jhr3ct/Code/Reserve%20Confirmation.php">
Facility: <input type="checkbox" name="facility" value="AFC">AFC
<input type="checkbox" name="facility" value="Memorial Gym">Memorial Gym
<input type="checkbox" name="facility" value="Slaughter">Slaughter
<input type="checkbox" name="facility" value="North Grounds">North Grounds<br>
Type of Room/Court:
<select>
<option value="default">Choose room...</option>
<option value="squash">Squash</option>
<option value="handball">Handball</option>
<option value="racquetball">Racquetball</option>
<option value="multipurpose">Multipurpose</option>
</select><br>
Room: <input type="text" name="start" readonly="readonly"><br>
Start Time: <input type="text" name="start" readonly="readonly"><br>
End Time: <input type="text" name="end" readonly="readonly"><br><br>
<input id="submit" type="submit" value="Submit">
</form>
Thanks for the help!
You might be interested in learning basic javascript form events. There is many tutorials on internet. I suggest you this one: http://www.javascriptkit.com/jsref/select.shtml
If you need to show a popup after all check boxes are checked and the dropdown is changed add this kind of a function to the onclick events of all the check boxes and onchange event of the dropdown box.
function func() {
var inputTags = document.getElementsByTagName('input');
var dropdowns = document.getElementsByTagName('SELECT');
for (var i = 0; i < inputTags.length; i++) {
if (inputTags[i].type == 'checkbox') {
var aCheckBox = inputTags[i];
if(!aCheckBox.checked) {
return;
}
}
}
if(dropdowns[0].value == 'default') {
return;
}
alert("All checkboxes and dropdowns are filled.");
}
<form action="../Confirmation.php">
<input onclick="func()" type="checkbox" name="facility" value="AFC">AFC
<input onclick="func()" type="checkbox" name="facility" value="Slaughter">Slaughter
<select onchange="func()" id="ss">
</form>
Just to point you in the right direction: You will have to use javascript to check your form inputs values, and to show a pop-up window.
You could use jQuery to do that easily, and make a listener for the form submit() action, where you could check if your checkboxes and dropdown are selected.
The jQuery doc is here: http://api.jquery.com/submit/
For example I have a form like this:
<form method='post' action='someaction.php' name='myform'>
<input type='text' name='text1'>
<input type='text' name='text2'>
<input type='checkbox' name="check1">Check Me
<textarea rows="2" cols="20" name='textarea1'></textarea>
<select name='select1'>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type='reset' value='Reset' name='reset'>
<input type='submit' value='Submit' name='submit'>
</form>
When I press Reset it empties all fields. But if I populate some fields using URL params and then press Reset, it only empties fields which I enter after form reload.
How can I empty all fields whether some fields are already populated at the time of form load.
As others pointed out, I think you should reconsider the need to blank the form.
But, if you really need that functionality, this is one way to do it:
Plain Javascript:
function resetForm(form) {
// clearing inputs
var inputs = form.getElementsByTagName('input');
for (var i = 0; i<inputs.length; i++) {
switch (inputs[i].type) {
// case 'hidden':
case 'text':
inputs[i].value = '';
break;
case 'radio':
case 'checkbox':
inputs[i].checked = false;
}
}
// clearing selects
var selects = form.getElementsByTagName('select');
for (var i = 0; i<selects.length; i++)
selects[i].selectedIndex = 0;
// clearing textarea
var text= form.getElementsByTagName('textarea');
for (var i = 0; i<text.length; i++)
text[i].innerHTML= '';
return false;
}
Note that I commented out the case in which I clear the hidden inputs. Most of the time, this is not necessary.
For this to work, you need to call the function from the onclick handler of a button (or some other way), e.g. like this:
<input type='reset' value='Reset' name='reset' onclick="return resetForm(this.form);">
You can test it all here on jsFiddle.
If you use jQuery in your project, you can do this with much less code (and no need to change the HTML):
jQuery(function($) { // onDomReady
// reset handler that clears the form
$('form[name="myform"] input:reset').click(function () {
$('form[name="myform"]')
.find(':radio, :checkbox').removeAttr('checked').end()
.find('textarea, :text, select').val('')
return false;
});
});
Also, note that I do not clear the values of hidden inputs, check-boxes and radio buttons.
Play with this here.
In jquery simply you can use,
$("#yourFormId").trigger('reset');
You will have to clear them all through javascript (or clear it out server side).
The reset button will only reset form elements to their initial value - if this was a specific value, that's what it will be reset to.
If you're using jQuery, the code is much simpler:
$('#my-form').not(':button, :submit, :reset, :hidden').val('').removeAttr('checked').removeAttr('selected');
You can also remove the :hidden from the .not selector if you want to clear hidden fields as well.
The easiest way to clear a form is by using the HTML tag
<input type="reset" value="Reset">
Example:
<form>
<table>
<tr>
<td>Name</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>Reset</td>
<td><input type="reset" value="Reset"></td>
</tr>
</table>
</form>
A simple way to do it with JS:
<form id="myForm">
<!-- inputs -->
</form>
const { myForm } = document.forms;
myForm.reset();
I've summarized some of the suggestions using jQuery to give a more complete solution to the question:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Demo Forms</title>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
</head>
<body>
<form method='post' action='someaction.php' name='myform'>
<input type='text' name='text1'>
<input type='text' name='text2' value='preset value'>
<input type='checkbox' name="check1">Check Me
<textarea rows="2" cols="20" name='textarea1'></textarea>
<select name='select1'>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type='button' value='Reset' name='reset' onclick="return clearForm(this.form);">
<input type='submit' value='Submit' name='submit'>
<script>
function clearForm(form) {
var $f = $(form);
var $f = $f.find(':input').not(':button, :submit, :reset, :hidden');
$f.val('').attr('value','').removeAttr('checked').removeAttr('selected');
}
</script>
</form>
</body>
</html>
Note that I've added the inclusion of the jquery lib in the head section and added an onclick handler to the Reset button. Lastly, I've added the javascript code based on the feedback from some other answers here.
I have also added a preset value to one text field. The val('') function would not clear such a field, that's why I've also added attr('value','') to the last script line to clear such default values as well.
You can do something similar to this in JS and call it from onclick within your button:
function submit() {
$('#fieldIdOne').val('');
$('#fieldIdTwo').val('');
}
And then in your HTML file:
<button id="submit" onclick="submit(); return false">SIGN UP</button>
If you happen to use this solution with Firebase, it actually won't send anything to the database unless you add return false right after the call.
Another way to do that with HTMLFormControlsCollection:
for (let el of form.elements) el.value = null
I just came across this question and have used an <a> to facilitate clearing a form by reloading the page. It is easy to style an <a> element to appear as a button.
e.g.
Clear
By using ? for the href attribute, the <a> will reload the page from the server without submitting it.
I prefer solutions which do not depend on JavaScript so hopefully this is of some use to someone.
Using JavaScript give the form an ID of 'myform':
document.getElementById('myform').reset();
I'm trying to add a search box to my page that will direct users to the search result page on a different site. I have the action and all of the other required data in hidden fields, to ensure it's posting correctly.
The problem is that they tack on extra data to the search term, making it an advanced search type of field. So instead of being searchTerm=X, it's expecting searchTerm=Locale(en):FQE=(KE,None,11)MY_SEARCH_TERM:And:LQE=(AC,None,8)fulltext$
How can I add that extra data around my search term, without having to hit an intermediate page to do the concatenation?
Here's what I have so far:
<form action="http://vendors.address/searchresult.do" method="post">
<input type="hidden" name="type" value="search">
<input type="hidden" name="sort" value="DateDescend">
<input type="text" name="queryId">
</form>
And I need something that can result in this type of thing:
<form action="http://vendors.address/searchresult.do" method="post">
<input type="hidden" name="type" value="search">
<input type="hidden" name="sort" value="DateDescend">
<input type="hidden" name="queryId" value="Locale%28en%2C%2C%29%3AFQE%3D%28KE%2CNone%2C11%29MY_SEARCH_TERM_HERE%3AAnd%3ALQE%3D%28AC%2CNone%2C8%29fulltext%24">
</form>
Any help would be appreciated.
You could use Javascript to do this with a hidden search field. In jQuery, it would be something like:
$("input[name='queryId']").keyup(function() {
$("#hiddenField").val("Locale%28en%2C%2C%29%3AFQE%3D%28KE%2CNone%2C11%29" + $(this).val() + "%3AAnd%3ALQE%3D%28AC%2CNone%2C8%29fulltext%24");
});
But it would break with no JS.
Edit: Yea, beat to it, didn't refresh for the answers.
You can use JavaScript to do the concatenation before the form is submitted. There are a couple ways to do this but here is the recommended approach:
Since I don't see a submit button I'm assuming you counting your users to hit the enter key to submit the form so you will need to listen to the onSubmit event and concatenate the extra info before the post is sent to server.
Give the form element an id:
<form action="..." method="post" id="searchForm">
and give the text input field an id:
<input type="text" name="queryId" id="queryId">
Add this script block after the form
<script>
document.getElementById("searchForm").onSubmit = function(){
var queryField = document.getElementById("queryId");
queryField.value = "prepend_data" + queryField.value + "append_data";
return true;
}
</script>
Or of you can use JQuery (please do) you can drop this anywhere:
<script>
$(function(){
$("#searchForm")
.submit(
function(){
$("#queryId).val("prepend_data" + $(this).val() + "append_data");
}
);
});
</script>
Hope that helps
Two things I can think of:
1. Just put the locale and stuff in hidden inputs:
<input type="hidden" name="locale" value="en" />
2. Use javascript to submit the form (this is a horrible idea -- you don't want to make your site break if Javascript is turned off).