I'm working on a simple php contact form and struggling to get the "other" selection on the dropdown to show a text field option when it's selected. The form is included onto the page with <?php require_once('includes/contact_form.php'); ?> and the footer is also an include (the footer is where I have added the JS).
But it just wont work...
Here is the Form:
<label>How did you hear about us?</label>
<select name="how" class="selectfield" id="how">
<option value="">Please Select...</option>
<option value="Advertisement">Advertisement</option>
<option value="Care at Home Today">Care at Home Today</option>
<option value="Email-Newsletter">Email/Newsletter</option>
<option value="Facebook">Facebook</option>
<option value="Family-Friend">Family or Friend</option>
<option value="Magazine">Magazine Article</option>
<option value="Twitter">Twitter</option>
<option value="Website-Search Engine">Website/Search Engine</option>
<option value="Other">Other</option>
</select>
<input type='text' id="other" class="hidden" />
<input name="contactus" type="submit" class="submit" id="contactus" value="Submit" />
</form>
Here is the JS
$('#how').change(function(){
var selected_item = $(this).val()
if(selected_item == "other"){
$('#other').val("").removeClass('hidden');
}else{
$('#other').val(selected_item).addClass('hidden');
}
});
Not sure if it is a typo in the question but your dropdown value is "Other" and in your js you are testing for "other". So there is a mismatch. Might be your issue
Here is a working fiddle of your example just changing the "other" to "Other" in your if statement.
DEMO
As coder1984 has suggested though, simply using jquery's .show() and .hide() in your if
statement would also work.
if(selected_item == "Other"){
$('#other').val("").show()
}else{
$('#other').val(selected_item).hide()
}
Your problem is in your string comparison, it should be:
if(selected_item == "Other"){
With the Uppercase O, Tested
Try:
$('#how').change(function(){
var selected_item = $(this).val()
if(selected_item == "Other"){ // 'Other'
$('#other').val('').show(); //show textbox if Other is selected
}else{
$('#other').hide(); //Hide textbox if anything else is selected
}
});
Related
I have a webpage which consists of a select list with 6 options, along with a submit button. I need to code it in such a way that when one option is selected in the list and the submit button is clicked, it should open another linked page, whereas when another option is selected and submit button is clicked it should open some another page.
Basically I want each option to open some linked page when the submit button is clicked.
By googling a bit, I understood that I have to use php for this but I am not getting the appropriate code for the same.
I do not want the submit button to open only 1 specific page. Rather,I want it to open 6 different pages corresponding to different options selected.
Code Snippet :
<div>
<H1><FONT="TIMES ROMAN" FONT-COLOR="BLUE" > SELECT An subject:</H1>
<select>
<option value=""></option>
<option value="physics">physics</option>
<option value="chemistry">chemistry</option>
<option value="biology">biology</option>
<option value="maths">maths</option>
<option value="cs">cs</option>
<option value="electrical">electrical</option>
</select>
<br>
<input class="SubmitButton" type="submit" name="SUBMITBUTTON" value="Submit" style="font-size:20px; " />
</div>
Also i have learnt that it cannot be done using href tag because an option list cannot directly open pages, a submit button is required to perform an action.
Need help to resolve this.
I think ts wants to open multiple window according to selected values.
So here is example:
<div>
<H1>SELECT An subject:</H1>
<form id="link">
<select multiple="multiple">
<option value="">Choose links</option>
<option value="http://stackoverflow.com/">Stackoverflow</option>
<option value="http://google.com/">Google</option>
<option value="http://yahoo.com/">Yahoo</option>
<option value="http://bing.com/">Bing</option>
<option value="http://php.net/">PHP official</option>
<option value="http://w3c.org">W3C</option>
</select>
<br>
<input class="SubmitButton" type="submit" name="SUBMITBUTTON" value="Submit" style="font-size:20px; "/>
</form>
</div>
<script src="http://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
$('#link').on('submit', function (e) {
e.preventDefault();
var $form = $(this),
$select = $form.find('select'),
links = $select.val();
if (links.length > 0) {
for (i in links) {
link = links[i];
window.open(link);
}
}
});
</script>
First, you must set multiple attribute to select. Then via jquery you can open each link in new popup. Be careful browsers may block this popups.
UPDATE
If you want to open just one window, you can use #Anant's solution
Simplest solution based on jquery:-
<div>
<H1><FONT="TIMES ROMAN" FONT-COLOR="BLUE" > SELECT An subject:</H1>
<select id ="dropDownId"> <!-- give an id to select box-->
<option value="">Select Option</option>
<option value="physics">physics</option>
<option value="chemistry">chemistry</option>
<option value="biology">biology</option>
<option value="maths">maths</option>
<option value="cs">cs</option>
<option value="electrical">electrical</option>
</select>
<br>
<input class="SubmitButton" type="submit" name="SUBMITBUTTON" value="Submit" style="font-size:20px; " />
</div>
<script src = "//code.jquery.com/jquery-3.0.0.min.js"></script> <!-- add jquery library-->
<script type = "text/javascript">
$('.SubmitButton').click(function(){ // on submit button click
var urldata = $('#dropDownId :selected').val(); // get the selected option value
window.open("http://"+urldata+".html") // open a new window. here you need to change the url according to your wish.
});
</script>
Note:- This code will do below things:-
1.Select box page is never refreshed.
2.Based on selected value your URL'S are open in new window.
3.Also you can change URL format according to your requirement. I just gave a sample example.
Add this script in your html code
function showPage() {
var sel = document.getElementById('subjects');
var option = sel.options[sel.selectedIndex].value;
window.open(option + ".html");
}
and copy below html code and replace with yours
<select id="subjects">
<option value=""></option>
<option value="physics">physics</option>
<option value="chemistry">chemistry</option>
<option value="biology">biology</option>
<option value="maths">maths</option>
<option value="cs">cs</option>
<option value="electrical">electrical</option>
</select>
<input class="SubmitButton" type="button" value="Submit" onclick="showPage()" style="font-size:20px; " />
hope this helps :)
You can do this with PHP, but you will need to do 2 things:
Put the select and input into a form in your HTML, like this:
<form action="" method="post">
<select name="opt">
<option value="1">Link 1</option>
<option value="2">Link 2</option>
<!-- etc -->
</select>
<input type="submit" name="submit">Submit</input>
</form>
Have PHP catch the form's POSTed data and redirect to the appropriate page, like this: (put this at the top of your PHP page with the form)
<?php
if (isset($_POST['submit']))
{
if (isset($_POST['opt']))
{
if ($_POST['opt'] == '1') { header('Location: page1.php'); }
elseif ($_POST['opt'] == '2') { header('Location: page2.php'); }
// etc...
}
}
?>
Header redirects only work if there has been no HTML output before they're called, so make sure there's no HTML code before the PHP code block.
This question already has answers here:
What is the difference between client-side and server-side programming?
(3 answers)
Closed 7 years ago.
I have a dropdown list and when when user selects a value and a different forms will appear depends on what the selected value. My file is in html. I'm using bootstrap for my design.
here is my sample code:
<form name="exmType" method = "POST">
<select class="form-control" name="txtType" class="select" method = "post"
onChange="this.form.submit();" style="width:300px;">
<option value="">Option A</option>
<option value="1">Option B</option>
<option value="2">Option C </option>
<?php
if (isset($_POST['txtType'])) {
if ( $_POST['txtType'] == "" ){
*display form a*
} elseif ( $_POST['txtType'] == 1 ){
*display form b*
} elseif ( $_POST['txtType'] == 2 ){
*display form c*
}
}
?>
</select>
</form>
Here is a simple code example for what you need, you can fiddle with it for your needs.
The code is really simple so I don't see any reason to elaborate on what it does, if you have any questions post a comment.
$(document).ready(function() {
$('select').change(function(){
if($(this).val() == '0') {
$('form').css('display','none');
}
if ($(this).val() == '1') {
$('form').css('display','none');
$('#form_a').css('display','block');
}
if($(this).val() == '2') {
$('form').css('display','none');
$('#form_b').css('display','block');
}
if($(this).val() == '3') {
$('form').css('display','none');
$('#form_c').css('display','block');
}
});
});
form {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="0">-- Choose Form --</option>
<option value="1">Form A</option>
<option value="2">Form B</option>
<option value="3">Form C</option>
</select>
<form id="form_a" method="post" role="form">
Form a: <input type="text" value="form_a_text"/>
</form>
<form id="form_b" method="post" role="form">
Form b: <input type="text" value="form_b_text"/>
</form>
<form id="form_c" method="post" role="form">
Form c: <input type="text" value="form_c_text"/>
</form>
You should try using Jquery:
<script>
$('form select[name=txtType]').change(function(){
if ($('form select option:selected').val() == '1'){
$('#optionA').show();
}else{
$('#optionA').hide();
}
});
$('form select[name= txtType]').change(function(){
if ($('form select option:selected').val() == '2'){
$('#optionB').show();
}else{
$('#optionB ').hide();
}
});
</script>
You can find the Jquery: http://jsfiddle.net/ecZrE/
Some good answers:
Show Form Field if Drop Down Item is Selected Using jquery
Javascript: Trying to show different forms based on drop down value?
Drop down menu selection ditactes what form will display
Show different elements of a form depending on dropdown box selection
First of all your select tag has two class=. Choose the right one.
`<select class="form-control" name="txtType" class="select" method = "post"
onChange="this.form.submit();" style="width:300px;">
<option value="">Option A</option>
<option value="1">Option B</option>
<option value="2">Option C </option>`
To add the onClick or onChange event use below function. Before adding it would be better if you add an id to the select tag.
$('#select_tag_id').change(function(){
$('#form_id_to_display').show('slow');
$('#form_id_to_hide').hide('slow');
});
Add above code in head section or at the botton of the page.
Sorry for wrong alignments. posting from mobile phone. Editing option is limited.
I have created a datalist here how can I add a link to option so that whenever i select a option and click on submit i should redirect to another page based on selected option.I have googled a lot but I couldn't any information about this.Thanks in advance
<input list="category" name="category">
<datalist id="category">
<option value="fruits">
<option value="animals">
<option value="vechiles">
<option value="ornaments">
</datalist>
<input type="submit">
You can try below code :
<input list="category" name="category" id="textcat">
<datalist id="category">
<option id="www.google.com" value="fruits">
<option id="www.fb.com" value="animals">
<option id="www.ymail.com" value="vechiles">
<option id="www.msn.com" value="ornaments">
</datalist>
<input id="btn" type="button" value="submit">
<script>
$('#btn').click(function(){
var textval = $('#textcat').val();
$('#category option').each(function(){
if($(this).val() == textval){
alert($(this).attr('id'));
window.location = $(this).attr('id');
}
});
});
</script>
Make some formHandler.php in which you will some routing, and point your form (action="formHandler.php") that includes this select
$redirectLink=$_REQUEST['category'];
header('Location:'.$yourmainSitePath.'/'.$redirectLink)
Are you satisfied ? :D
I have dropdown list (menu) and a button created with this code:
<form name="period" action="all.php" method="POST">
<div align="center">
<select name=period_dropdown>
<option value="nill"></option>
<option value="48">48</option>
<option value="72">72</option>
<option value="96">96</option>
<option value="120">120</option>
</select>
<input type="submit" value= "OK" >
</div></form>
When option of dropdown is selected, must be on button instead of OK and when button is pressed to be assigned to variable $period1. So, when I select 72, button must have 72 instead of OK and when I click button, variable $period1 to get value 72 (integer). Please, no javascript. Just html and php.
Thanks
You have to use javascript for what you are trying to do. If you want the button to change on the fly without submitting the form, you have to do client-side scripting (javascript).
Either:
Change the value of button after the dropdown is selected and form is submitted
Use two lines of javascript to change the value of the button when the select box is changed
In all.php:
if (isset($_POST['period_dropdown'])) {
$period1 = $_POST['period_dropdown'];
//do something with $period1
}
?>
<form name="period" action="all.php" method="POST">
<div align="center">
<select id="period_dropdown" name="period_dropdown" onchange="updateButton()">
<option value="nill"></option>
<option value="48">48</option>
<option value="72">72</option>
<option value="96">96</option>
<option value="120">120</option>
</select>
<input id="period_button" type="submit" value= "OK" >
</div></form>
<script type="text/javascript">
function updateButton() {
document.getElementById("period_button").value = document.getElementById("period_dropdown").value;
}
</script>
Having some trouble here with this.
The setup:
A select object with a choice of "Other"
User selects "Other".
Script runs when this specific value is chosen, and dynamically changes the class of input object from "hide" to "show" (hidden and visible with css display).
<p>Select a Grade:</p>
<select name="grade" id="grade" onchange="changeCssClass('otherGrade')">
<option value="No Specified Grade">Please Select</option>
<option value="201">201</option>
...
<option value="Secondary">Secondary</option>
<option value="otherGrade">Other</option>
</select>
<p>If "Other":</p>
<?php
$otherGrade = $_POST['grade'];
if($otherGrade = "otherGrade")
{
echo("<script language='javascript' type='text/javascript'>
function changeCssClass(objInputID)
{
if(document.getElementById(objInputID).className=='hide')
{
document.getElementById(objInputID).className = 'show';
}
else
{
document.getElementById(objInputID).className = 'hide';
}
}
</script>");
}
else
{
echo ("");
}
?>
<input type="text" name="otherGrade" id="otherGrade" class="hide" />
Should I remove the onchange event from the select object? If so, I am at a loss as how to have the script executed.
Any solutions would be greatly appreciated.
The script should always be included in your page, since you want this to run while you make the changes in the dropdown list..
<script language='javascript' type='text/javascript'>
function changeCssClass(objInputID, currentVal, correctVal)
{
if(correctVal == currentVal)
{
document.getElementById(objInputID).className = 'show';
}
else
{
document.getElementById(objInputID).className = 'hide';
}
}
</script>
<p>Select a Grade:</p>
<select name="grade" id="grade" onchange="changeCssClass('otherGrade', this.value, 'otherGrade')">
<option value="No Specified Grade">Please Select</option>
<option value="201">201</option>
...
<option value="Secondary">Secondary</option>
<option value="otherGrade">Other</option>
</select>
<p>If "Other":</p>
<input type="text" name="otherGrade" id="otherGrade" class="hide" />
Live example at : http://www.jsfiddle.net/MVymF/
why are you putting this in the post event? you can just render this as standard javascript as part of the page.
On post , the page will be refreshing , ad on reloading you are not saving the selected value of the select box.
The select box is not keep selected after posting. You have to do that.
>Other
As the value of option change the display hide also gone.
Fix that
If no need to submit the page . use this
http://api.jquery.com/val/
check demo of select