I have a dropdown form that I have created - I need to have the dropdown either be auto-generated to a text box once selected or have it placed in the text box once a button has been pressed. For example "Get Hex"
Here is my dropdown:
<fieldset>
<legend>Logos</legend>
<p>
<label>Choose Desired Logo</label>
<select id = "Logo">
<option value = "00">Holden</option>
<option value = "01">HSV</option>
<option value = "02">Chevrolet</option>
<option value = "02">Chevrolet</option>
<option value = "04">CSV</option>
<option value = "05">Pontiac</option>
</select>
<input type="button" value="Show Hex" onclick="displaySelectedItem(val);" />
</p>
<p>
<input type="text" id="Logo" />
</p>
</fieldset>
And here is the last JS script i've tried. I have tried a few but I am surely missing something as nothing I command works.
<script language="JavaScript" type="text/javascript">
<!--
function displaySelectedItem(val)
{
alert(val);
}
//-->
</script>
So I need for the text box to contain the hex code in the <option value = "##">
I'll be using this throughout 6 different forms, all needing the same thing.
Change
<input type="button" value="Show Hex" onclick="displaySelectedItem(val);" />
to
<input type="button" value="Show Hex" onclick="displaySelectedItem(document.getElementById('Logo').value);" />
jsFiddle example
Related
I am making form with a select drop down that lists people's names.
I would also like the form to give you the option to select 'Other' and then actually type in someones name (like a normal text input box) if that person is not available from the list.
I don't want the text input part to appear in a separate box underneath the drop down list, I would like it all within the same box.
Is it possible to do with this in vanilla javascript and no jquery plugin?
<form action="" method="post">
<br>
List of people:
<select>
<option>John Doe</option>
<option>Jane Doe</option>
<option>Richard Doe</option>
<option>Other (type name here)</option>
</select>
<br><br>
<input type="submit" value="Submit">
<br><br>
</form>
You could do something like the code below. It's fully adjustable to your likings.
let list = document.getElementById("list");
let other = document.getElementById("other");
function checkValue() {
if (list.value === "Other (type name here)") {
other.style.visibility = "visible";
list.style.display = "none"
} else {
other.style.visibility = "hidden";
}
}
<form action="" method="post">
<br />
List of people:
<select id="list" onchange="checkValue()">
<option>John Doe</option>
<option>Jane Doe</option>
<option>Richard Doe</option>
<option>Other (type name here)</option>
</select>
<input type="text" style="visibility: hidden" id="other" />
<br /><br />
<input type="submit" value="Submit">
<br /><br />
</form>
So I have this piece of code I've been tinkering with. The Jquery is modified from somewhere else. I'm wanting to be able to add products on this page (which currently works)... but the part im struggling with is I then submitted ALL of that data to MySql through a submit button.
I've tried playing around with a few arrays / loops but so far I have drawn a blank. Can anyone help?
<html>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
var currentItem = 1;
$('#addnew').click(function() {
currentItem++;
$('#items').val(currentItem);
var strToAdd = '<br>product: <select name="product'+currentItem+'" id="product'+currentItem+'" ><option value="aclt">Tobacco</option><option value="aed">Energy Drink</option></select> nicotine: <select name="nicotine'+currentItem+'" id="nicotine'+currentItem+'"> <option value="3">3mg</option><option value="6">6mg</option><option value="12">12mg</option></select> Qty:<input name="qty'+currentItem+'" id="qty'+currentItem+'" type="text" />';
$('#data').append(strToAdd);
});
});
//]]>
</script>
<form method="POST" action="invoicereg.php" id="data" name="sub">
product:
<select name="'product1'" id="product1" >
<option value="aclt">Tobacco</option>
<option value="aed">Energy Drink</option>
</select>
nicotine:
<select name="nicotine1" id="nicotine1">
<option value="3">3mg</option>
<option value="6">6mg</option>
<option value="12">12mg</option>
</select>
Qty:<input type="text" id="qty" name="qty"></input><br>
</form>
<button type="submit" form="data">SUBMIT</button>
<input type="button" id="addnew" name="addnew" value="Add new item" />
<input type="hidden" id="items" name="items" value="1" />
</html>
I've noticed few mistakes that you've made in your code.
The first mistake is:
<select name="'product1'" id="product1">
Remove single quotes from the value of name attribute and it should look like:
<select name="product1" id="product1">
This is not considered an issue. If you were using single quotes around the value of name attribute, it would be quite annoying to access its value in PHP.
So, you would need to use complex expression to fetch the value like the following syntaxes:
$_POST['\'product1\'']
$_POST["'product1'"]
The first one uses escape sequence of backward slash to escape single quotes.
The second one uses double quotes to access keys with single quotes wrapped around. This one is relatively easier than the first one involving a bit complex expression.
The second mistake is:
The last three HTML elements below the form tag are not wrapped inside the form. The two among the last three elements which are submit and hidden element belong to form element. After modifying the code, the whole code should be like the following:
<form method="POST" action="invoicereg.php" id="data" name="sub">
product:
<select name="product1" id="product1" >
<option value="aclt">Tobacco</option>
<option value="aed">Energy Drink</option>
</select>
nicotine:
<select name="nicotine1" id="nicotine1">
<option value="3">3mg</option>
<option value="6">6mg</option>
<option value="12">12mg</option>
</select>
Qty:<input type="text" id="qty" name="qty"></input><br>
<button type="submit" form="data">SUBMIT</button>
<input type="button" id="addnew" name="addnew" value="Add new item" />
<input type="hidden" id="items" name="items" value="1" />
</form>
Hope it helps!
Make your input type submit button
<button type="submit" form="data">SUBMIT</button>
to
<input type="submit" form="data" value="SUBMIT">
Task:
To create a dropdown list for option values:"Name1...Name2...Name3...Others". Hence, when a user were to click on the option 'Others', it will generate an additional form fields for the user to enter and they are: "Name, Rego No., Address".
What has been done:
I have created the following dropdown list as shown:
<p>
<!--Input select box with options: Name1...Name2...Name3...Others-->
<select name ="Name" id="NameDetails">
<option value ="0" selected = "selected"> Select Name..</option>
<option value ="Name 1"> Name1</option>
<option value ="Name 2"> Name2</option>
<option value ="Name 3"> Name3</option>
<option value = "Others"> Others</option>
</select>
</p>
Hence, the dropdown list is able to be shown. Furthermore, I have also created the html version for the 3 additional fields as shown below:
<p>
<input type="text" name="Name" id="Name" value="Name" title="Name" class="defaultValue required" tabindex="7" />
<div id="searchNameResultsContainer"></div>
<div id="errorSearchNameResultsContainer" class="rounded errorSearchResultsContainer yui-ac-container"></div>
</p>
<p>
<input type="text" name="Rego No." id="Rego No." value="Reg No." title="Reg No." class="leftCol defaultValue required validateInput formatNumber" tabindex="8" />
</p>
....(Identical for "Address" field)
Issue:
At this point, I am stuck at how to call the additional 3 fields when users select 'Others' from the dropdown list. I have tried to use the "if..else" condition but am stuck when I tried to input the above code within if statement.
Hence, could anyone please help? Thanks.
code edit:
<div>
<p>
<!--Input selectbox with options: Name1...Name2...Name3...Others-->
<select name ="Name" id="NameDetails" onchange = "return val(this.value);">
<option value ="0" selected = "selected"> Select Agency..</option>
<option value ="Name 1"> Name1</option>
<option value ="Name 2"> Name2</option>
<option value ="Name 3"> Name3</option>
<option value = "Others"> Others</option>
</select>
</p>
<!-- Set Conditional check, if user clicks Others, direct to input field: Name, Registration Number, Address-->
<div id = "extradiv" style ="display:none">
<p>
<input type="text" name="Name" id="Name" value="Name" title="Name" class="defaultValue required" tabindex="7" />
<div id="searchNameResultsContainer"></div>
<div id="errorNameCompanyResultsContainer" class="rounded errorSearchResultsContainer yui-ac-container"></div>
</p>
<p>
<input type="text" name="RegistrationNum" id="RegistrationNum" value="Registration Num" title="Registration Num" class="leftCol defaultValue required validateInput formatNumber" tabindex="8" />
</p>
<p>
<input type="text" name="Address" id="Address" value="Address" title="Address" class="defaultValue required signupinput_txt" tabindex="9" />
<div id="searchAddressResultsContainer" class="hide searchResultsContainer"></div>
<div id="errorSearchAddressResultsContainer" class="rounded errorSearchResultsContainer yui-ac-container"></div>
</p>
</div>
</div>
<script>
function val(x)
{
if (x =="Others" )
{
document.getElementById("extradiv").style.display ="block";
}else
{
document.getElementById("extradiv").style.display = "none";
}
}
</script>
Use Jquery, put those 3 extra field in a div with id #extradiv and set its style as display:none to keep is hidden on load.
<div id="extradiv" style="display:none">
<!-- 3 extra fields -->
</div>
<script type="text/javascript">
$('#NameDetails').on('change',function(){
$('#extradiv").hide();
var changeVal = $("#NameDetails").val();
if(changeVal == "Others){
$("#extradiv").show();
});
</script>
You have to use javascript or jquery.
Just wrap your additional form elements under div and give it id e.g other_ele and also made that div display:none by default using css.
Just try that code below i have used javascript for this
First on your select tag use onchange like:
<select name ="Name" id="NameDetails" onchange="return val(this.value);">
This onchange will call val function
And writ your script like that
<script>
function val(x)
{
if(x == "Others")
{
document.getElementById("other_ele").style.display = "block";
}
else
{
document.getElementById("other_ele").style.display = "none";
}
}
</script>
Note other_ele is id of your div in which you have wrapped your additional form elements.
Hope this will work for you
I am very new to HTML and JavaScript...
I need your help to construct a website URL based on TextBox inputs in HTML/JavaScript?
I am looking for a HTML/JavaScript code to allow user to
1) Select an Option from Dropdown list
2) Enter a number
using which a URL should be generated
For example:
Drop down list has #Years to select and user select year 2014
and in text box user gives input a number as 1234
Below is the peace of code I have, but not able to get the desired result :(
<select name="SelectYear">
<option value="13" ID="13">2013</option>
<option value="12" ID="12">2012</option>
</select>
<select name="SelectMonth">
<option value="J" ID="J">June</option>
<option value="D" ID="D">December</option>
</select>
<input type="text" name="EnterRollNum" ID="EnterRollNum">
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction() {
var iYear = $("select#SelectYear").val()
var iMonth = $("select#SelectMonth").val()
var iRollNum = $("select#EnterRollNum").val()
document.getElementById("demo").innerHTML = Link
}
</script>
Any help is much appreciated.
<form id="myForm" action="some.php" method="GET">
<select name="SelectYear">
<option value="13" ID="13">2013</option>
<option value="12" ID="12">2012</option>
</select>
<select name="SelectMonth">
<option value="J" ID="J">June</option>
<option value="D" ID="D">December</option>
</select>
<input type="text" name="EnterRollNum" ID="EnterRollNum" />
<input type="submit" value="submit" />
</form>
<p id="demo"></p>
<script>
$('#myForm').submit(function(e){
e.preventDefault();
var url = $(this).attr('action')+'?'+$('#myForm').serialize();
$('#demo').html(' Link ');
});
</script>
You can see the working fiddle - http://jsfiddle.net/grvngr/fak1s583/
Hope this helps!
I am trying to add some form content depending on the option selected by a user.
For example if the user selects form 1 option the form is populated with different content that if the user selects option 2
<select>
<option>Form 1</option>
<option>Form 2</option>
</select>
<form>
Here we get either form 1 content or form 2 content depending on the select option selected by user.
</form>
//Form 1 content
<input type="text" value="something" />
<input type hidden="something here" />
//Form 2 content
<input type="text" value="something else here" />
<input type hidden="something else here" />
How can I do this using jquery?
Try this: http://jsfiddle.net/QUbEE/1/
$('select').change(function () {
if ($('option:selected', this).val() == 1) {
//$('form').hide();
$('#form-1').html($('<input />').attr({
'id': 'textBox1',
'value': 'Something is here'
}));
} else {
$('#form-1').html($('<input />').attr({
'id': 'textBox2',
'value': 'Something ELSE is here'
}));
}
});
Create elems depends on the change event and then just replace the html of the form with the new input with new values.
As you mentioned in your comment that the content can be hard-coded then you may write both the forms and place that forms in different divs and toggle the visibility of the div depending upon the selection made from the drop-down list
For example, say your form 1 is in div1
<div id="div1" class="formDiv">
<input type="text" id="form1" value="something" />
<input type hidden="something here" />
</div>
And your form2 is in div2
<div id="div2" class="formDiv">
<input type="text" id="form2" value="something" />
<input type hidden="something here" />
</div>
In your CSS hide both the div (using class -- as example)
.formDiv {
display: none;
}
Say your drop-down looks like this
<select id="selectForm">
<option value="div1">Form 1</option>
<option value="div2">Form 2</option>
</select>
Now when the user select from the drop-down list at that point change the visibility of the divs
$('#selectForm').on('change',function(){
$('.formDiv').hide();
var formID = $('#selectForm').val();
$(formID).css('display', 'block');
});
This is just an example, you can give your own IDs and CLASSes as per the feasibility and efficiency.
Hope this helps
I would suggest you to keep it with two separated forms. And leave them visible! So then with javascript you can hide both forms and show the relevant one. This way if the browser does not support javascript the forms will still be usable:
<select id="toggle-forms">
<option value="1">Form 1</option>
<option value="2">Form 2</option>
</select>
<form id="form-1" class="form-to-toggle" acvtion="" method="">
<input type="text" value="something" />
<input type hidden="something here" />
<input type="submit" value="submit form 1"/>
</form>
<form id="form-2" class="form-to-toggle" acvtion="" method="">
<input type="text" value="something" />
<input type hidden="something here" />
<input type="submit" value="submit form 2"/>
</form>
<script>
$('#toggle-forms').on('change', function() {
$('.form-to-toggle').hide();
$('#form-'+this.value).show();
}).change();
</script>
See it in action: http://jsbin.com/iwocid/1
Something like this? When you chose option form 2 you will add testing to the input in form 2
<select>
<option value="1">Form 1</option>
<option value="2">Form 2</option>
</select>
//Form 1 content
<input type="text" id="form1" value="something" />
<input type hidden="something here" />
$('select').on('change',function(){
$('input#form'+this.value).val('testing');
});
Add an id to form. THen use document.getElementById('idname').innerHTML to fill value
I would suggest this(as discussed with u)
<select id='this'>
<option value="Form_1">Form 1</option>
<option value="Form_2">Form 2</option>
</select>
<form id='Form_1' style='display:none'>
form1 content
</form>
<form id='Form_2' style='display:none'>
form2 content
</form>
and js
$(document).ready(function() {
$('#this').change(function () {
var form = $('#this').val();
$('#'+form).show();
});
});