I am trying to figure out how to make one of the options in my select drop down a link that redirects to that page. So far from researching this I have only found a way to make all the options links that are redirected to (Load page on selection from dropdown form) but I only want one of the options to be a link. Also I need the link to work without hitting the submit button.
EDITED USING #VLADIMIR'S SUGGESTION:
<form method="get" id="searchform" name="searchform" action="<?php echo home_url(); ?>/">
<select name="posttype" id="selection">
<option name="Product" value="Product">Legal Documents</option>
<option name="videos" value="videos">Legal Advice - Videos</option>
<option value="http://www.testing.com">An Attorney</option>
</select>
<input name="s" id="s" class="s" type="text" onfocus="if(this.value=='<?php _e('');?>') this.value='';" onblur="if(this.value=='') this.value='<?php _e('');?>';" value="<?php _e('');?>" />
<button tabindex="2" type="submit" class="search_btn">
</button>
<?php wp_dropdown_categories( 'taxonomy=videoscategory&show_option_all=All Practice Areas' ); ?>
<?php wp_dropdown_categories( 'taxonomy=states&show_option_all=All U.S States' ); ?>
</form>
<script type="text/javascript">
$(document).ready(function() {
$("#selection").change(function() {
var curVal = $("#selection option:selected").val();
if (curVal.indexOf('http://') === 0) {
location = $("#selection option:selected").val();
}
});
});
</script>
Also is there a way to have one option with multiple values?
You can adapt solution from the Load page on selection from dropdown form
Replace JS code with
$(document).ready(function() {
$("#selection").change(function() {
var curVal = $("#selection option:selected").val();
if (curVal.indexOf('http://') === 0) {
location = $("#selection option:selected").val();
}
});
});
The idea is that you check the option value and if it begins with 'http://', then you set new location.
Related
I have form like this
<form name="test_form" action="" method="post">
<input type="text" value="demo">
Link
</form>
I want to submit that form by clicking the link and as well as go to that link(google.com) too .
How can I do this ?
I can submit the form by clicking the link but can't do it together .
You need to redirect on the server
for example in PHP:
<?PHP
$url = $_POST["url"]; // you need to clean this
// save whatever here
header("Location: ".$url);
?>
<script>
window.onload=function() {
document.getElementById("submitLink").onclick=function() {
var form = document.getElementById("myForm");
document.getElementById("url").value=this.href;
form.submit();
return false; // cancel link
}
}
</script>
<form id="myForm" action="saveandredirect.php" method="post">
<input type="text" name="somefieldname" value="demo">
<input type="hidden" id="url" name="url" value="">
</form>
Link
Suppose I have a list box with different items, each with unique values, and an 'Enter' button below it. I want to be able to get the value of the selected item at the time of click, and then when have the button property:
ONCLICK="window.location.href='http://somewebsite.com/somefile.php?id="thisvalue"'"
So for example, something like----
<SELECT NAME = ParticipantList STYLE = "WIDTH: 187" SIZE = 18>
<OPTION VALUE='hi'> hello </OPTION>
<SELECT>
<INPUT TYPE="submit" VALUE="Info" ONCLICK="window.location.href='http://helloworld.com/this.php?="hi"'"/>
Can anyone help me figure this out? Much appreciated.
HTML forms are designed to do exactly this when their method is GET:
<form action="http://helloworld.com/this.php" method="get">
<select name="ParticipantList">
<option value="hi">Hello</option>
</select>
<input type="submit">
</form>
This will send the user to http://helloworld.com/this.php?ParticipantList=hi. No JavaScript required.
The Javascript
<script type="text/javascript">
function doAction(){
var selected = document.getElementById('ParticipantList').value;
if (selected == 'hello'){
window.location.href = 'http://somewebsite.com/somefile.php?id=1';
} else if (selected == 'bye'){
window.location.href = 'http://somewebsite.com/somefile.php?id=2';
} else {
alert('unknown option selected');
}
}
</script>
The HTML
<select name="ParticipantList" id="ParticipantList">
<option value="hello">hello</option>
<option value="bye">bye</option>
</select>
<input type="button" name="action" id="action" value="Submit" onclick="doAction()" />
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.
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();
Is it possible to make an HTML form that responds to the number of things the user wants to send over?
That is, what I have now is:
<form ...>
<select ...>
<option>1</option>
<option>2</option>
...
</select>
***
</form>
When the user selects one of the options, *** should have
<input type="text" ...>
appear the number of times the user selected.
That is, if the user selected 5 from the options, then the user should see 5 input options. If he changes his mind selected 2 instead, then the page should update accordingly to show only 2 input options.
=====[EDIT]=====
I've changed the code to have the input just be text. The code I have does not work. It doesn't update the number of input fields.
<script type="text/javascript">
<!--
function updateOptions(nvars)
{
var n = nvars;
while(n>0) {
var newdiv1 = "<div>Var name: <input type=\"text\" name=\"var-name\"><br></div>";
var newdiv2 = "<div>Var type: <input type=\"text\" name=\"var-type\"><br></div>";
newdiv1.appendTo("#bloo");
newdiv2.appendTo("#bloo");
n--;
}
}
//-->
</script>
<h3>Create a table in the test db!<h3>
<form name="f1" method="POST" action="createTable.php">
Name of Table: <input type="text" name="table-name"><br>
No of vars: <input type="text" name="numvars" onChange="updateOptions(this.value)"><br>
<div id="bloo"></div>
</form>
It worked when I had a document.write instead of an appendTo, but I essentially want the page the remain the same save for the extra input fields after the user changes the value in the numvars field.
That's a good idea when you want the user to be able to upload an arbitrary number of files or something like that. You can do it with Javascript:
Have an empty DIV near the SELECT
Bind a function to the "onchange" event on the select element
In the function, read the value of the SELECT element and:
Empty the DIV
Create an equivalent number of <INPUT type="text"> inside the DIV
Do you need code? If you do, is Prototype OK?
OK, sorry for the delay, lots of work to do lately.
The following should be enough for you to get an idea. You'll have to study JS though, I don't even know what you're doing with the appendTo stuff in your question.
<html>
<head>
</head>
<body>
<form>
<select id="num" value="1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<div id="container">
<p>
<input type="text" name="var-name" />
<input type="text" name="var-type" />
</p>
</div>
</form>
<script type="text/javascript">
var selectElm = document.getElementById('num');
var containerElm = document.getElementById('container');
var update = function () {
containerElm.innerHTML = '';
for (var i = 0, l = selectElm.value; i < l; ++i) {
containerElm.innerHTML += '<p><input type="text" name="var-name" /><br /><input type="text" name="var-type" /></p>';
} // add a number of couples of <input> equal to selectElm.value
}
//the following stuff says that when <select> changes the function called "update" must fire. Most of the code is for compatibility across browsers.
var listen, evt;
if (document.attachEvent) {
listen = 'attachEvent';
evt = 'onchange' ;
} else {
listen = 'addEventListener';
evt = 'change';
}
try {
selectElm[listen](evt, update);
} catch (e) {
selectElm[listen](evt, update, false);
}
// You do the same in Prototype with a single line:
// selectElm.observe('change', update);
// jQuery also requires only a single line of code.
</script>
</body>
</html>
Yes use onChange event of your dropdown input field and show/hide your input fields.