I want to have a select option that opens a corresponding text box.
Let's say these are my selections:
<select id="contact">
<option value="email">Email</option>
<option value="phone">Phone</option>
</select>
When you select the Email selection I want it to show a textbox below it (which wasn't there before) that says please enter your Email.
OR
When you select the Phone selection I want it to show a textbox below it (which wasn't there before) that says please enter your Phone Number.
I don't want both the "Enter Email" and "Enter Phone Number" textboxes showing at the same time. I want them to select which one to open and input their contact info.
I currently have this but don't know what else to have in it... please help!
$('#contact').change(function() {
if ($(this).val() === 'email') {
//show email
//hide phone
} else {
//hide email
//show phone
}
});
Thanks,
Chad.
I had similar requirement and the solution is:
<HTML>
<BODY>
<form name="myform">
<table>
<tr>
<td>
<select name="one" onchange="if (this.value=='other') {this.form['other'].style.visibility='visible'}else {this.form['other'].style.visibility='hidden'};">
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="other">Other</option>
</select>
<input type="textbox" name="other" style="visibility:hidden;"/>
</td>
</tr>
</table>
Figured it out, used the following javascript for this:
<script type="text/javascript">
function CheckContact(val){
var element=document.getElementById('email');
if(val=='email')
element.style.display='block';
else
element.style.display='none';
var element=document.getElementById('sms');
if(val=='sms')
element.style.display='block';
else
element.style.display='none';
}
</script>
Then had this in the form:
<select name="contactinfo" id="contactinfo" onchange="CheckContact(this.value);">
<option>Select Contact Option</option>
<option value="email">Email</option>
<option value="sms">Text (SMS)</option>
</select><br />
<div id="email" style="display: none;">Enter Email: <input type="text" name="email" /><br /></div>
<div id="sms" style="display: none;">Enter Cell Number: <input type="text" name="sms" /><br /></div>
Related
I have an option to select a wireless carrier from a list - the problem is that Iphone "zooms in" when creating the selectable dropdown list similar to this:
http://winmobiletech.com/012009Browsers/IMG_0017.PNG
My code is as follows:
<div id="popup-action-sms" style="display:none" >
<div id="sms" >
<input type="number" id="sms-tel" placeholder="Enter phone number" />
<select id="sms-carriers">
<option value="" >Select Wireless Carrier</option>
<option value="Alltel">Alltel</option>
<option value="AT&T">AT&T</option>
<option value="Sprint">Sprint</option>
<option value="T-Mobile">T-Mobile</option>
<option value="Verizon Wireless">Verizon Wireless</option>
</select>
</div>
</div>
My question How can I dynamically "zoom out" back to full screen once a user has selected their carrier?
$( "#sms-carriers" ).change(function() {
$(this).blur();
});
You can also try $(this).focusout();
Worth giving a shot :)
I want show in input text from select option where in value have 2 data
function changeHiddenInput (objDropDown)
{
document.getElementById("hiddenInput").value = objDropDown.value;
}
<form name="ff">
<select id="dropdown" name="dropdown" onchange="changeHiddenInput(this)">
<option value="j.hotmail.com|3">Jens</option>
<option value="a.hotmail.com|4">Adam</option>
<option value="d.homtail.com|5">Dan</option>
</select>
<input type="text" type="hidden" name="hiddenInput" id="hiddenInput" />
</form>
I want get value 3,4,5 and show in input text form when each option select.
split your value using " | "
function changeHiddenInput (objDropDown)
{
document.getElementById("hiddenInput").value = objDropDown.value.split('|')[1];
}
<form name="ff">
<select id="dropdown" name="dropdown" onchange="changeHiddenInput(this)">
<option value="j.hotmail.com|3">Jens</option>
<option value="a.hotmail.com|4">Adam</option>
<option value="d.homtail.com|5">Dan</option>
</select>
<input type="text" type="hidden" name="hiddenInput" id="hiddenInput" />
</form>
I´m using the code below to get an input textfield next to each option in a multiple select, but what I get is a total mess. The first option is in the multiple select but the rest shows out of the select list.
Does somebody knows how can I make that? I´m sorry I can not post images.
I hope somebody can help.
Thanks.
<select name="cars" multiple>
<option value="audi">Audi</option>
<input type="text" name="Audi" value""/>
<option value="bmv">BMV</option>
<input type="text" name="BMV" value""/>
<option value="honda">Honda</option>
<input type="text" name="honda" value""/>
<option value="peugueot">Peugueot</option>
<input type="text" name="peugueot" value""/>
<option value="volkswagen">Volkswagen</option>
<input type="text" name="volkswagen" value""/>
<option value="opel">Opel</option>
<input type="text" name="opel" value""/>
</select>
Do your drop down list but put a generic textbox afterwards. On the submit action, get the value of the count and apply it to the selected value.
<select name="cars" multiple>
<option value="audi">Audi</option>
<option value="bmv">BMV</option>
<option value="honda">Honda</option>
<option value="peugueot">Peugueot</option>
<option value="volkswagen">Volkswagen</option>
<option value="opel">Opel</option>
</select>
<input type="text" name="Count" value""/>
That only allows 1 count per save. If you want to be able to submit counts for ALL models, use a label and an input for each kind: like so
<table>
<tr>
<td>
Audi
</td>
<td>
<input type="text" name="audi" value""/>
</td>
</tr>
<option value="bmv">BMV</option>
<tr>
<td>
BWV
</td>
<td>
<input type="text" name="bmw" value""/>
</td>
</tr>
</table>
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();
});
});
For some reason the following form isn't submitting the file like it should and I'm unsure why, on the server side if I check $_FILES it is always empty however if I check say $_POST['article'] that submit just fine, so only the file isn't being received then does anyone see something wrong with this?
<form action="newindex.php?do=submit" enctype="multipart/form-data" method="post">
Subject:<br>
<input type="text" id="subject" name="subject"><br>
<textarea id="article" id="article" name="article"></textarea><br>
<div class="sliderimage"><h2 class="blockhead">Slider Image:</h2>
<table><tr><td><b>Image:</b><br>Dimensions should be 640x360.</td><td>
<input type="file" id="image" name="image"></td></tr>
<tr><td><b>Transition:</b></td><td>
<select id="transition" name="transition">
<option value="">Random</option>
<option value="sliceDown">slideDown</option>
<option value="sliceDownLeft">sliceDownLeft</option>
<option value="sliceUp">sliceUp</option>
<option value="sliceUpLeft">sliceUpLeft</option>
<option value="fold">fold</option>
<option value="fade">fade</option>
<option value="slideInRight">slideInRight</option>
<option value="slideInLeft">slideInLeft</option>
<option value="boxRandom">boxRandom</option>
<option value="boxRain">boxRain</option>
<option value="boxRainReverse">boxRainReverse</option>
<option value="boxRainGrow">boxRainGrow</option>
<option value="boxRainGrowReverse">boxRainGrowReverse</option>
</select></td></tr>
<tr><td><b>Caption:</b></td><td>
<input type="text" id="caption" name="caption"></table><br></div>
<input type="hidden" name="securitytoken" value="<?php echo $vbulletin->userinfo['securitytoken'] ?>" />
<div class="center"><input type="button" value="Preview" class="preview"><input type="submit" name="submit"></div>
</form>
You need to have an input specifying the max file size:
http://www.php.net/manual/en/features.file-upload.post-method.php
put the size attribute in the and this will work.
<input id="image" name="image" type="file" size = '50'"/>