I want to use a select with an option that sends a blank value (empty string) when the form is submitted, but I still want the option to show text in the select. Using this doesn't work, as it shows no text for the third option:
<select name='scope' id='scope'>
<option value="wz:964" selected>Scope A</option>
<option value="sz:34218">Scope B</option>
<option value="">Scope C</option>
</select>
Though this works in plain HTML, I am using Select2 3.5.4, and it doesn't work after processing, since is replaces the third option with <option value=""></option>
I run the following sample code in local
Sample Code:
<head>
<link href="https://rawgit.com/select2/select2/master/dist/css/select2.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<script>
jQuery(document).ready(function() { jQuery("#example").select2(); });
</script>
</head>
<body>
<form action="#" method="post">
<select id="example" multiple="multiple" name="example[]" style="width: 300px">
<option value="wz:964">Scope A</option>
<option value="sz:34218">Scope B</option>
<option value=" ">Scope C</option>
</select>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</body>
<br>
<br>
<br>
<br>
<?php
print_r($_REQUEST);
Output:
Note:
Use the " " instead of "".
Hope it will helpful.
Related
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.
The "required" validation is working for form
<!DOCTYPE html>
<html>
<body>
<form action=''>
<select required>
<option value="">None</option>
<option value="volvo">Volvo</option>
<option value="saab" >Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
</body>
</html>
but is not working for the same form if I move the option with empty value down the list.
<!DOCTYPE html>
<html>
<body>
<form action=''>
<select required>
<option value="volvo">Volvo</option>
<option value="saab" >Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="">None</option>
</select>
<input type="submit">
</form>
</body>
</html>
Why?
How exactly does the select element validation work?
Referred to the following: https://www.w3schools.com/tags/att_select_required.asp
The following is from w3 docs:
The required attribute is a boolean attribute. When specified, the
user will be required to select a value before submitting the form.
...
if the value of the first option element in the select element's
list of options (if any) is the empty string
...
Which means that the required attribute works only if the value of the first element is empty
It's not an issue with Select2 but with the way browser work with select tag. By default, the first option is selected by the browser.
So, in the first case "None" option is selected and hence your validation catch the error because the first option value is null.
In the second, case the first option is not null. Hence there is no validation error in this case.
To correct it, add an empty option with an empty value and set the attribute as selected disabled
Demo: https://jsfiddle.net/rLmztr2d/2909/
HTML:
<form>
<select required id="example">
<option disabled selected></option>
<option value="volvo">Volvo</option>
<option value="saab" >Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="">None</option>
</select>
<input type="submit">
</form>
JS:
$('#example').select2();
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've checked a few pages online on how to disable a submit button of a dropdown box unless an option has been selected. But can't find one that works for me.
Any help on how to do that would be great!
Edit: I don't want <option value="not_valid">-- select an option --</option> to be considered as an option
<form action="action_page.php">
<select name="attacks" id="attacks">
<option value="not_valid">-- select an option --</option>
<option value="attack1">1</option>
<option value="attack2">2</option>
<option value="attack3">3</option>
<option value="attack4">4</option>
<option value="attack5">5</option>
</select>
<br>
<input type="button" id="battle" onclick="game()" value="Battle">
</form>
use onChange event
<html>
<head>
</head>
<body>
<form action="action_page.php">
<select name="attacks" id="attacks" onchange="selectChanged()">
<option value="not_valid">-- select an option --</option>
<option value="attack1">1</option>
<option value="attack2">2</option>
<option value="attack3">3</option>
<option value="attack4">4</option>
<option value="attack5">5</option>
</select>
<br>
<input type="button" id="battle" onclick="game()" value="Battle">
</form>
<script>
function selectChanged(){
attacks = document.getElementById("attacks");
if(attacks.value =="not_valid"){//or whatever th unwanted value is
document.getElementById("battle").disabled = true;
} else{
document.getElementById("battle").disabled = false;
}
}
</script>
</body>
</html>
I have this small form with two submit buttons, on clicking each button I want form data to be sent to different PHP file. But, both submit buttons are sending the form data to the default PHP file specified in the action attribute of the form tag. Is there a way to send the form data to different files with different buttons. I made an unsuccessful attempt to do so by redefining the action attribute in the second submit button
<div class="dropdown dropdown-dark">
<select name="promoteyearselect1" id="promoteyearselect1" class="dropdown-select" onfocus="showhidephdmenu()" form="promotionform" required>
<option value="">Select an option</option>
<div id="yearselect1">
<option value="1">1st</option>
<option value="2">2nd</option>
<option value="3">3rd</option>
<option value="4">4th</option>
<option value="5">5th</option>
</div>
</option>
</select>
</div>
<select name="promotesemselect1" id="promotesemselect1" class="dropdown-select" form="promotionform" required>
<option value="">Select an option</option>
<option value="1">1st</option>
<option value="2">2nd</option>
<option value="3">3rd</option>
<option value="4">4th</option>
<option value="5">5th</option>
<option value="6">6th</option>
<option value="7">7th</option>
<option value="8">8th</option>
<option value="9">9th</option>
<option value="10">10th</option>
</select>
<form id="promotionform" action="promotestudents.php" method="POST">
<div style=" position:relative; margin-top:10px; padding-left:44%;">
<input type="submit" value="Promoted" class="button black" />
<input type="submit" value="Passed Out" class="button black" form="promotionform" action="alumni.php"/>
</div>
</form>
Two separate forms wont work, the page will submit in between. You need Ajax to send the data behind the scene without refreshing the page
finally did it with the help of this code.
source: http://blog.theonlytutorials.com/multiple-submit-button-in-a-single-form-with-php/
<?php
if(isset($_POST['submit1']))
{
echo "You hit the button 1";
}
if(isset($_POST['submit2']))
{
echo "You hit the button 2";
}
?>
<html>
<head><title>Multiple Submit button Solved with PHP!</title></head>
<body>
<form action="" method="post">
<h2> Hit the Submit Button</h2>
<input type="submit" name="submit1" value="btn1" />
<input type="submit" name="submit2" value="btn2" />
</form>
</body>
just use jQuery:
$(document).ready(function(){
$('#button1').click(function(){
$('#yourForm').attr("action","phpFile1.php");
$('#yourForm').submit();
});
$('#button2').click(function(){
$('#yourForm').attr("action","phpFile2.php");
$('#yourForm').submit();
});
});