I want to know if there is a way to have the submit button in a form redirect to different links every time its clicked depending on what the person selected. For example: my form would have name, email, and how did you hear about us with a drop down of numerous options and a submit button. So if the person picked option 1 then once the submit button is clicked it would redirect to link 1. When another person comes and pick option 1 also it would then redirect to link 2. When another person comes and pick option 1 again it will redirect to link 1 and so on. This would need to be possible for all options in the drop down and email addresses would be recorded for me to see at a later time. Is this possible? Sorry i am new to this.
You can do that like this
HTML
<form action="./hi_friend.php" method="post" id="countForm">
<select name="selList" id="selList">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Last</option>
</select>
<input type="submit" value="submit">
</form>
JS
$('#countForm').submit(function(){
var $form = $("#countForm");
if($("#selList").val() == "1")
$form.action = "./first_result.php";
else if($("#selList").val() == "2")
$form.action = "./second_result.php";
else if($("#selList").val() == "3")
$form.action = "./last_result.php";
alert("submit to " + $form.action);
return true;
});
Working fiddle
Related
I need some help with this HTML code I'm trying to improve.
I don't have much HTML knowledge so the most basic solution would be nice.
Currently, the code works fine but I want once the page has loaded for the drop-down option to be that of the selected option that I click Submit with. Same with the slider, if I select 2, I want 2 to be displayed on the new page once loaded.
Is there a way to do this with variables or how?
<div id="input_header">
<div id="logo_div">
<img id="logo" src="static/steering-wheel.svg">
<p id="logo_name">TITLE</p>
</div>
<form id="driver_form" action="compare_driver" method="get">
<p class="label">Vendor:</p>
<select class="driver_input_box" name="driver_vendor">
<option value="Vendor A">AAA</option>
<option value="Vendor B">BBB</option>
<option value="Vendor C">CCC</option>
</select>
<p class="label"># to show: </p>
<div id="count_slider">
<input id="driver_count_id" name="driver_count" type="range" min="1" max="10" step="1" value="5" oninput="driver_count_out_id.value = driver_count_id.value"/>
<output id="driver_count_out_id" name="driver_count_output" >5</output>
</div>
<input id="compare_driver" type="submit" value="Compare">
</form>
</div>
First you need to include some JavaScript there. The easiest (but probably worse) way is to add an script tag to the HTML.
To get the selected option with Javascript, you can check these answers: Get selected value in dropdown list using JavaScript? . The code will be easier to write if you give an id to your <select>, like: <select id="mySelect" class="driver_inpu....
<script>
//check if there's an old selection by the user:
if (sessionStorage.getItem("selectedOption")) {
//to set the selected value:
document.getElementById("mySelect").value = sessionStorage.getItem("selectedOption");
}
//this will set the value to sessionStorage only when user clicks submit
document.getElementById("driver_form").addEventListener("submit", () => {
//to get the selected value:
var selectedOption = document.getElementById("mySelect").value;
sessionStorage.setItem("selectedOption", selectedOption);
});
/*
//use this only if you want to store a new value
//every time the user clicks on another option
document.getElementById("mySelect").addEventListener("change", () => {
//to get the selected value:
var selectedOption = document.getElementById("mySelect").value;
sessionStorage.setItem("selectedOption", selectedOption);
});
*/
</script>
You can put it in window.onload if you want to. This answer should put you in the right track. I'm very tired and I haven't tested it, but it should work.
Currently the HTML5 <datalist> element is supported in most major browsers (except Safari) and seems like an interesting way to add suggestions to an input.
However, there seem to be some discrepancies between the implementation of the value attribute and the inner text on the <option>. For example:
<input list="answers" name="answer">
<datalist id="answers">
<option value="42">The answer</option>
</datalist>
This is handled differently by different browsers:
Chrome and Opera:
FireFox and IE 11:
After selecting one, the input is filled with the value and not the inner text. I only want the user to see the text ("The answer") in the dropdown and in the input, but pass the value 42 on submit, like a select would.
How can I make all browsers have the dropdown list show the labels (inner text) of the <option>s, but send the value attribute when the form is submitted?
Note that datalist is not the same as a select. It allows users to enter a custom value that is not in the list, and it would be impossible to fetch an alternate value for such input without defining it first.
Possible ways to handle user input are to submit the entered value as is, submit a blank value, or prevent submitting. This answer handles only the first two options.
If you want to disallow user input entirely, maybe select would be a better choice.
To show only the text value of the option in the dropdown, we use the inner text for it and leave out the value attribute. The actual value that we want to send along is stored in a custom data-value attribute:
To submit this data-value we have to use an <input type="hidden">. In this case we leave out the name="answer" on the regular input and move it to the hidden copy.
<input list="suggestionList" id="answerInput">
<datalist id="suggestionList">
<option data-value="42">The answer</option>
</datalist>
<input type="hidden" name="answer" id="answerInput-hidden">
This way, when the text in the original input changes we can use javascript to check if the text also present in the datalist and fetch its data-value. That value is inserted into the hidden input and submitted.
document.querySelector('input[list]').addEventListener('input', function(e) {
var input = e.target,
list = input.getAttribute('list'),
options = document.querySelectorAll('#' + list + ' option'),
hiddenInput = document.getElementById(input.getAttribute('id') + '-hidden'),
inputValue = input.value;
hiddenInput.value = inputValue;
for(var i = 0; i < options.length; i++) {
var option = options[i];
if(option.innerText === inputValue) {
hiddenInput.value = option.getAttribute('data-value');
break;
}
}
});
The id answer and answer-hidden on the regular and hidden input are needed for the script to know which input belongs to which hidden version. This way it's possible to have multiple inputs on the same page with one or more datalists providing suggestions.
Any user input is submitted as is. To submit an empty value when the user input is not present in the datalist, change hiddenInput.value = inputValue to hiddenInput.value = ""
Working jsFiddle examples: plain javascript and jQuery
The solution I use is the following:
<input list="answers" id="answer">
<datalist id="answers">
<option data-value="42" value="The answer">
</datalist>
Then access the value to be sent to the server using JavaScript like this:
var shownVal = document.getElementById("answer").value;
var value2send = document.querySelector("#answers option[value='"+shownVal+"']").dataset.value;
Hope it helps.
I realize this may be a bit late, but I stumbled upon this and was wondering how to handle situations with multiple identical values, but different keys (as per bigbearzhu's comment).
So I modified Stephan Muller's answer slightly:
A datalist with non-unique values:
<input list="answers" name="answer" id="answerInput">
<datalist id="answers">
<option value="42">The answer</option>
<option value="43">The answer</option>
<option value="44">Another Answer</option>
</datalist>
<input type="hidden" name="answer" id="answerInput-hidden">
When the user selects an option, the browser replaces input.value with the value of the datalist option instead of the innerText.
The following code then checks for an option with that value, pushes that into the hidden field and replaces the input.value with the innerText.
document.querySelector('#answerInput').addEventListener('input', function(e) {
var input = e.target,
list = input.getAttribute('list'),
options = document.querySelectorAll('#' + list + ' option[value="'+input.value+'"]'),
hiddenInput = document.getElementById(input.getAttribute('id') + '-hidden');
if (options.length > 0) {
hiddenInput.value = input.value;
input.value = options[0].innerText;
}
});
As a consequence the user sees whatever the option's innerText says, but the unique id from option.value is available upon form submit.
Demo jsFiddle
When clicking on the button for search you can find it without a loop.
Just add to the option an attribute with the value you need (like id) and search for it specific.
$('#search_wrapper button').on('click', function(){
console.log($('option[value="'+
$('#autocomplete_input').val() +'"]').data('value'));
})
to get text() instead of val() try:
$("#datalistid option[value='" + $('#inputid').val() + "']").text();
Using PHP i've found a quite simple way to do this. Guys, Just Use something like this
<input list="customers" name="customer_id" required class="form-control" placeholder="Customer Name">
<datalist id="customers">
<?php
$querySnamex = "SELECT * FROM `customer` WHERE fname!='' AND lname!='' order by customer_id ASC";
$resultSnamex = mysqli_query($con,$querySnamex) or die(mysql_error());
while ($row_this = mysqli_fetch_array($resultSnamex)) {
echo '<option data-value="'.$row_this['customer_id'].'">'.$row_this['fname'].' '.$row_this['lname'].'</option>
<input type="hidden" name="customer_id_real" value="'.$row_this['customer_id'].'" id="answerInput-hidden">';
}
?>
</datalist>
The Code Above lets the form carry the id of the option also selected.
I have a form that I used to filter search results that consist of only dropdowns. I use GET rather then post so that the results can easily be shared with the URL.
<form action="" name='filter' method="GET">
<select name="Make" id="Make">
<option selected="selected" value ="nothing">All</option>
<option value="Toyota">Toyota</option>
<option value="Honda">Honda</option>
</select>
<input type="submit" value="Filter">
</form>
As it is right now if It will submit the value "nothing" for the get variable Make if the user doesn't change the selection. They're are multiple drop downs identical as this one for model year etc.
Is it possible for the Make variable to not show up in the URL if it isn't used?
As it is now if that code is submited it will say website.com/?Make=nothing. I tried removing the value and then it says website.com/?Make=All. I do not want make to show up in the URL if "All" is selected. Is this possible?
You don't have a submit button :)
you can add a JS that runs on submit and checks the value of "Make" and in case it's "nothing" just do a simple redirect instead of submitting the form. Something like:
var e = document.getElementById("Make");
var val = e.options[e.selectedIndex].value;
if (val === 'nothing'){
window.location = "http://www.google.com/"
}
My drop down menu works fine query-wise but with 2 issues:
1-When I select an option and hit the submit button, the query comes back fine but instead of the drop down menu displaying the processed option, it's actually always displaying the 1st option regardless of the processed option.
2-When I enter my page, no data is displayed until I pick up an option from the drop down menu and hit submit. I would like the page to process the 1st option by default when I enter it the first time.
<form action="http://localhost/xampp/mydomain.com/?page_id=2283" method='post'>
<select name="selected_date">
<option value="2012-05-01">01.05.2012</option>
<option value="2012-04-01">01.04.2012</option>
<option value="2012-03-01">01.03.2012</option>
</select>
<input type="submit" VALUE="Go"/>
</form>
$date=$_POST['selected_date'];
$query = " SELECT * from table1 WHERE
`drop_date` > '$date' AND
`drop_date` <= DATE_ADD('$date', INTERVAL 1 YEAR)";
Any help is welcome ,thanks
I assume from your question that the visitor is redirected back to the same page when they hit the "Go" button after selecting a date. To have their selection show up in the drop down, you would have to read their selection first before the element.
<select name="selected_date">
<?php
if (isset($_POST['selected_date'])){
$selected_date = $_POST['selected_date'];
echo "
<option selected value=\"".$selected_date."\">".$selected_date."</option>
";
}
?>
<option value="2012-05-01">01.05.2012</option>
<option value="2012-04-01">01.04.2012</option>
<option value="2012-03-01">01.03.2012</option>
</select>
Essentially all it does is it checks to see if the form was posted and grabs the selected date, adds an option to your select element with that date as a value an has it selected so it is selected in the dropdown when the page loads.
As far as your issue with the page not showing ANY selections on the first page load, I believe your problem is that none of the options in your select element have a "selected" attribute.
I hope this helps you out... keep us posted!
BelgianAlien.
Alright, fought hard on this one, I am going to answer my own question :
<?php
$date=$_POST['selected_date']; //retrieves submitted option
?>
<form action="file.php" method='post'> As of :
<select name="selected_date">
<option value="2012-05-01" <?php if ( $date == '2012-05-01' ) {echo " selected";}?> >01.05.2012</option>
<option value="2012-04-01" <?php if ( $date == '2012-04-01' ) {echo " selected";}?> >01.04.2012</option>
<option value="2012-03-01" <?php if ( $date == '2012-03-01' ) {echo " selected";}?> >01.03.2012</option>
</select>
<input type="submit" VALUE="Get Data"/>
</form>
<?php
if($_POST['selected_date'])
$date=$_POST['selected_date'];
else
$date="2012-05-01"; // assigns a default option to be processed until user submits another one (to avoid empty feedback on 1st page load)
?> //
Using BelgianAlien's answer I ended up adding the first code that retrieves the submitted option so it can be recognized in the following options' IF statement
I have also added the last code lines that enable a default option to be processed on first page load avoiding an empty feedback from the server.
i need to create html code, in which if user selects an item from drop down list and click button then it will go to respective link.
<select name="myList">
<option value="Google" />Google
<option value="yahoo" />yahoo
<option value="Ask" />Ask
</select>
if user selects Google from drop down list and clicks button, then page should be redirected to www.google.com and if it selects yahoo and clicks button should go to www.yahoo.com
I would like to mention that I need The button in this scenario.
I don't want to go respective site on drop down selection.Only after clicking the button.
Thank you in advance.
HTML:
<select name="myList" id="ddlMyList">
<option value="http://www.google.com">Google</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.ask.com">Ask</option>
</select>
<input type="button" value="Go To Site!" onclick="NavigateToSite()" />
JavaScript:
function NavigateToSite(){
var ddl = document.getElementById("ddlMyList");
var selectedVal = ddl.options[ddl.selectedIndex].value;
window.location = selectedVal;
}
You could also open the site in a new window by doing this:
function NavigateToSite(){
var ddl = document.getElementById("ddlMyList");
var selectedVal = ddl.options[ddl.selectedIndex].value;
window.open(selectedVal)
}
As a side note, your option tags are not properly formatted. You should never use the <... /> shortcut when a tag contains content.
First, change the option values to the URL you want to target:
<option value="http://www.google.com">Google</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.ask.com">Ask</option>
Next, add an ID to the select so you can target it:
<select name="myList" id="myList">
Finally, add an onclick method to the select control to handle the redirect:
<input type="button" onclick="document.location.href=document.getElementById('myList').value">
<select name="myList">
<option value="http://www.google.com">Google</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.ask.com">Ask</option>
</select>
<input type="button" onclick="window.location=document.myList.value" />
Using JavaScript, you can attach an onclick event to the button. In the event handler, you can use an if statement to check which value was selected in the select list, and use window.location to redirect the user to the appropriate URL.
I would suggest changing the value of the option elements to be the required URL, and you can then simply grab the value and go to that URL, instead of having to check which option was selected.
onclick()="window.location.href='page.html'"