I have a form that sends the input
diff=easy&know=high&lang=francais (example)
When I set form action to <form action="https://adressedetest.tumblr.com/tagged/">
The forms successfully sends you to the address https://adressedetest.tumblr.com/tagged/?diff=easy&know=high&lang=francais
How do I format the output of the code so that the output
diff=easy&know=high&lang=francais becomes the output
easy_high_francais ? I know oninput="diff.value_know.value_lang.value" formats it that way but it doesn't make the form send you on https://adressedetest.tumblr.com/tagged/?easy_high_francais, it's still the previous adress.
How do I make the code send you to https://adressedetest.tumblr.com/tagged/easy_high_francais instead of https://adressedetest.tumblr.com/tagged&easy_high_francais (nor https://adressedetest.tumblr.com/tagged/&easy_high_francais) ? I can't use the '&' like that because tumblr always then sends me 404.
Here is a version of the code I wrote, without its distracting visual formatting :
<!DOCTYPE html>
<html>
<body>
<div>
<form action="https://adressedetest.tumblr.com/tagged/" oninput="diff.value_know.value_lang.value">
<label for="diff">Difficulty</label>
<select id="diff" name="diff">
<option value="none">None</option>
<option value="easy">Easy</option>
<option value="medium">Medium</option>
<option value="hard">Hard</option>
</select>
<label for="know">Knowledge</label>
<select id="know" name="know">
<option value="none">None</option>
<option value="low">Low</option>
<option value="medium">Medium</option>
<option value="high">High</option>
</select>
<label for="lang">Language</label>
<select id="lang" name="lang">
<option value="francais">Français</option>
<option value="english">English</option>
<option value="russian">Русский</option>
</select>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
You can do that using a bit of javascript.
What I do is extract the parameters values, join them with your desired _ character, and then re-construct a URL.
Hope it helps, otherwise get back to me in the comments.
// Somehow obtain a ref to the form. In this case it's the
// first and only one.
// (If you don't know what I'm talking about, you probably want
// to give the form an id and use `document.getElementById`)
const form = document.getElementsByTagName("form")[0];
form.addEventListener("submit", submitted);
function submitted(e) {
// Prevent the default request
e.preventDefault();
const data = new FormData(form);
const custom_path = Array.from(data)
// You might want to sort the values here first
.map(([_, value]) => value)
.join("_");
const url = new URL(`https://adressedetest.tumblr.com/tagged/${custom_path}`);
// Send your custom request here
console.log(String(url));
}
<!DOCTYPE html>
<html>
<body>
<div>
<form action="">
<label for="diff">Difficulty</label>
<select id="diff" name="diff">
<option value="none">None</option>
<option value="easy">Easy</option>
<option value="medium">Medium</option>
<option value="hard">Hard</option>
</select>
<label for="know">Knowledge</label>
<select id="know" name="know">
<option value="none">None</option>
<option value="low">Low</option>
<option value="medium">Medium</option>
<option value="high">High</option>
</select>
<label for="lang">Language</label>
<select id="lang" name="lang">
<option value="francais">Français</option>
<option value="english">English</option>
<option value="russian">Русский</option>
</select>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
First of all, why would you want to get rid of the "?" character ?
Maybe you should read about this : https://www.semrush.com/blog/url-parameters/
" ? " character identify url portion that contains the parameter, which are separated by " & " character. So this is just normal behaviour.
Related
I have a html form which has a dropdown consisting of a few values. If the user does not select an option and moves to the next field, I need to give an error message. I have used the required attribute but it does not fire in Chrome and Firefox.
This is my code :
<select name="gender" id="gender" style="max-width:100%" required>
<option value="">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
The required attribute does not work on Chrome and Firefox. A JavaScript solution would also be good. At the time of submitting the data I am checking for empty fields but I would like to display an error message if the user does not select a value from the dropdown and moves to the next field.
Use below code, not need any script, use form tag
<!DOCTYPE html>
<html>
<body>
<form>
<select required>
<option value="">None</option>
<option value="demo">demo</option>
<option value="demo1">demo1</option>
<option value="demo2">demo2</option>
<option value="demo3">demo3</option>
</select>
<input type="submit">
</form>
</body>
</html>
Try using the onfocusout option on your select paired with some Javascript.
HTML
<select name="gender" id="gender" onfocusout="check()" style="max-width:100%" required>
<option value="">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
JS
function check(){
var x = document.getElementById("gender").selectedOptions[0].label;
if(x == "Select Gender"){
alert("Please select an option.");
}
}
CodePen.io: https://codepen.io/anon/pen/XQxQgw
There's undoubtedly a more efficient way of doing this and you would need to tweak the JS to check if all fields have been completed etc. but that's my two cents in a pinch!
So, I'm building a web app using flask/jinja and I have a webpage that displays a list of data that includes date, and I currently have two drop down menus, one that controls the date range of data viewed and the other that sorts the data based on various parameters.
<form method='get' action=''>
<button class='btn btn-default'>View data from:</button>
<select name = "time_length">
<option value="0">All</option>
<option value="7">Week</option>
<option value="30">Month</option>
</select>
</form>
</div>
<div>
<form method='get' action=''>
<button class='btn btn-default'>sort:</button>
<select name = "sortby">
<option value="user">Name</option>
<option value="group">Project</option>
<option value="date">Date</option>
</select>
</form>
Individually, this works fine because the it just passes along ?time_length=7 or whatever to the url, but I can't figure out how to pass along both parameters. One ends up replacing the other in the link.
You need to have them sent from the same <form>.
<form method='get' action=''>
<button class='btn btn-default'>submit</button>
<select name = "time_length">
<option value="0">All</option>
<option value="7">Week</option>
<option value="30">Month</option>
</select>
<select name = "sortby">
<option value="user">Name</option>
<option value="group">Project</option>
<option value="date">Date</option>
</select>
</form>
I have a form with two datalist and I would like to generate a link based on the user's selection.
<form>
<input list="Cars">
<datalist id="Cars">
<option value="Honda" selected>Honda</option>
<option value="Mazda">Mazda</option>
<option value="Ford">Ford</option>
<option value="Nissan">Nissan</option>
<option value="Subaru">Subaru</option>
</datalist>
<input list="Years">
<datalist id="Years">
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
</datalist>
<input type="reset">
</form>
For an example, if user chooses Honda and 2017, then the link appears and the address is Honda/2017.net. If the user chooses Subaru and 2015 then the address is Subaru/2015.net and etc.
I can input the different href manually in the code but I am not sure how you make one link change based on selection?
You need Javascript for the so called dynamic html or DHTML. Could be done like this:
<!DOCTYPE html>
<script type="text/javascript">
function generateLink()
{
var brand = document.getElementById('carBrand').value;
var year = document.getElementById('carYear').value;
document.leform.action =brand + '/' + year + '.html';
return true;
}
</script>
<form name="leform" onsubmit="return generateLink();">
<input list="Cars" id='carBrand'>
<datalist id="Cars">
<option value="Honda" selected>Honda</option>
<option value="Mazda">Mazda</option>
<option value="Ford">Ford</option>
<option value="Nissan">Nissan</option>
<option value="Subaru">Subaru</option>
</datalist>
<input list="Years" id='carYear'>
<datalist id="Years">
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
</datalist>
<input type="reset">
<input type="submit">
</form>
What happens?
If the submit Button is clicked, the generateLink() function is called. onsubmit="return generateLink();"
In the generateLink() function the value of the selected option for the car/brand and the year are read from html using the getElementById function.
Then the extracted values for the brand and the year are used to generate the corresponding link via concatenation of car, a slash, the year and finally the string '.html'.
The link the form will redirect to is set in the forms action attribute. document.leform.action
To process data submitted by the form you will need some kind of CGI mechanism: https://en.wikipedia.org/wiki/Common_Gateway_Interface
You could use PHP to pass data further to a database for example.
Hope this helps ^^-d
PS: You could also want to implement the page that follows the form (action=) in PHP as dynamic content. Using a HTTP GET Request this could look like /show.php?car=Subaru&Year=2016 which would save you from creating an html file per option (car X year = 15 files!). URLs of HTTP GET Requests can be bookmarked like Honda/2017.net. More info on this here: http://php.net/manual/en/reserved.variables.request.php
use below snippet as a boilerplate.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form>
<input list="Cars" onchange="generateUrl()">
<datalist id="Cars">
<option value="Honda" selected>Honda</option>
<option value="Mazda">Mazda</option>
<option value="Ford">Ford</option>
<option value="Nissan">Nissan</option>
<option value="Subaru">Subaru</option>
</datalist>
<input list="Years" onchange="generateUrl()">
<datalist id="Years">
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
</datalist>
<input type="reset">
</form>
<p id="generated">
</p>
<script type="text/javascript">
function generateUrl(){
var x = document.querySelector("[list='Cars']").value;
var y = document.querySelector("[list='Years']").value;
document.getElementById('generated').innerHTML = (x+y);
}
</script>
</body>
</html>
You can grab the values of the <datalist> using the onchange event; store them in a variable somewhere, then write it out to your link.
var car = '';
var year = '';
$("input[name=car-list]").on('change', function(){
car = $(this).val();
});
$("input[name=yr-list]").on('change', function(){
year = $(this).val();
});
$("input[name=submit]").on('click', function(){
$("#mylink").attr('href', car + '/' + year);
$("#mylink").html(car + '/' + year);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input list="Cars" name="car-list">
<datalist id="Cars">
<option value="Honda" selected>Honda</option>
<option value="Mazda">Mazda</option>
<option value="Ford">Ford</option>
<option value="Nissan">Nissan</option>
<option value="Subaru">Subaru</option>
</datalist>
<input list="Years" name="yr-list">
<datalist id="Years">
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
</datalist>
<input type="button" name="submit" value="Submit">
<input type="reset">
</form>
<a id="mylink" href="">My Link</a>
I need to pass a value in option select to action where I have agent_id=
Can anyone help?
<form method="POST" action="index.php?action=contact_agent&agent_id=">
<select>
<option value="1">Agent Homer</option>
<option value="2">Agent Lenny</option>
<option value="3">Agent Carl</option>
</select>
You don't have to use jQuery or Javascript.
Use the name tag of the select and let the form do it's job.
<select name="agent_id" id="agent_id">
Like #Shoaib answered, you dont need any jQuery or Javascript. You can to this simply with pure html!
<form method="POST" action="index.php?action=contact_agent">
<select name="agent_id" required>
<option value="1">Agent Homer</option>
<option value="2">Agent Lenny</option>
<option value="3">Agent Carl</option>
</select>
<input type="submit" value="Submit">
</form>
Remove &agent_id= from form action since you don't need it there.
Add name="agent_id" to the select
Optionally add word required do indicate that this selection is required.
Since you are using PHP, then by posting the form to index.php you can catch agent_id with $_POST
/** Since you reference action on `form action` then value of $_GET['action'] will be contact_agent */
$action = $_GET['action'];
/** Value of $_POST['agent_id'] will be selected option value */
$agent_id = $_POST['agent_id'];
As conclusion for such a simple task you should not use any javascript or jQuery. To #FelipeAlvarez that answers your comment
you can simply use your own code but add name for the select tag
<form method="POST" action="index.php?action=contact_agent&agent_id=">
<select name="agent_id">
<option value="1">Agent Homer</option>
<option value="2">Agent Lenny</option>
<option value="3">Agent Carl</option>
</select>
then you can access it like this
String agent=request.getparameter("agent_id");
with jQuery :
html :
<form method="POST" name="myform" action="index.php?action=contact_agent&agent_id=" onsubmit="SetData()">
<select name="agent" id="agent">
<option value="1">Agent Homer</option>
<option value="2">Agent Lenny</option>
<option value="3">Agent Carl</option>
</select>
</form>
jQuery :
$('form').submit(function(){
$(this).attr('action',$(this).attr('action')+$('#agent').val());
$(this).submit();
});
javascript :
function SetData(){
var select = document.getElementById('agent');
var agent_id = select.options[select.selectedIndex].value;
document.myform.action = "index.php?action=contact_agent&agent_id="+agent_id ; # or .getAttribute('action')
myform.submit();
}
instead of trying to catch both POST and GET responses - you can have everything you want in the POST.
Your code:
<form method="POST" action="index.php?action=contact_agent&agent_id=">
<select>
<option value="1">Agent Homer</option>
<option value="2">Agent Lenny</option>
<option value="3">Agent Carl</option>
</select>
</form>
can easily become:
<form method="POST" action="index.php">
<input type="hidden" name="action" value="contact_agent">
<select name="agent_id">
<option value="1">Agent Homer</option>
<option value="2">Agent Lenny</option>
<option value="3">Agent Carl</option>
</select>
<button type="submit">Submit POST Data</button>
</form>
then in index.php - these values will be populated
$_POST['action'] // "contact_agent"
$_POST['agent_id'] // 1, 2 or 3 based on selection in form...
<form action="getDepartmentID" method="post">
<div id=main>
<select id="depList"name="depList"style="width:190px;"class="selListBox">
<option value="0">[Please Select]</option>
<option value="43">Information Technology</option>
<option value="44">Costing and Budgeting</option>
<option value="45">Supply Chain</option>
<option value="61">Marketing</option>
<option value="62">Financial</option>
<option value="63">HR</option>
</select>
</div>
</form>
on submit , query string contain parameter with value i.e. ?depList=43
When I populate this list using jquery .load(); function i.e.
$('#main').load('ajax/Options.jsp');
Options.jsp
<select id="depList"name="depList"style="width:190px;"class="selListBox">
<option value="0">[Please Select]</option>
<option value="43">Information Technology</option>
<option value="44">Costing and Budgeting</option>
<option value="45">Supply Chain</option>
<option value="61">Marketing</option>
<option value="62">Financial</option>
<option value="63">HR</option>
</select>
it successfully populate but when I press submit after selecting an options, it does not send any parameter, even I use the following
$("#depList").change(function() {
$('#depList option:selected').attr('checked', 'checked');
});
How to resolve this situation?
If you want the form information in the query string upon submit you need to be using GET not POST
<form action="getDepartmentID" method="get">