HTML code:
<select name="category" onchange="change(this.selectedIndex)">
<option selected disabled hidden>Choose your category</option>
<option value="1">TVs</option>
<option value="2">Laptops</option>
<option value="3">Smartphones</option>
<option value="4">Peripherals</option>
<option value="5">Components</option>
<option value="6">Cameras</option>
</select>
PHP code:
$category = $_POST['category'];
$db->INSERT("INSERT INTO items Values(NULL,'$name','$category','$brand','$nick','$review','$rating')");
I want to save to base by POST my category. For example TVs. And the program saves "value" for example "1". When the value didn't exist it worked, but now I need it to JS function. How to do - name="category" reads option, not value?
So basically what a value is for is to indicate what an input should hold as a content,
so consider doing this
<select name="category" onchange="change(this.selectedIndex)">
<option selected disabled hidden>Choose your category</option>
<option value="TVs">TVs</option>
<option value="Laptops">Laptops</option>
<option value="Smartphones">Smartphones</option>
<option value="Peripherals">Peripherals</option>
<option value="Components">Components</option>
<option value="Cameras">Cameras</option>
</select>
hope it helped!!
Related
I have these html tags:
<select name="ct" id="ct">
<option value="-1">Tutte</option>
<option value="1">Da verificare</option>
<option value="2">Verificate</option>
<option value="3">Approvate</option>
<option value="4">Respinte</option>
<option value="5">Pubblicate</option>
<option value="6">Scadute</option>
<option value="7">Proposte</option>
<option value="8">Rifiutate</option>
<option value="9">Ritirate</option>
<option selected="selected" value="7,8,1">Proposte / Rifiutate / Da verificare</option>
</select>
I want to change the attribute value of the selected option (which contains "7,8,1") to value="-1", so it will look like:
<option selected="selected" value="-1">Proposte / Rifiutate / Da verificare</option>
I tried with:
$dom_richieste->getElementsByTagName('options')->getAttribute('value').value="-1";
But that's not working...
You can use $("#ct option[value='7,8,1']").val("-1");
$("#ct option[value='7,8,1']").val("-1");
console.log($("#ct").val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="ct" id="ct">
<option value="-1">Tutte</option>
<option value="1">Da verificare</option>
<option value="2">Verificate</option>
<option value="3">Approvate</option>
<option value="4">Respinte</option>
<option value="5">Pubblicate</option>
<option value="6">Scadute</option>
<option value="7">Proposte</option>
<option value="8">Rifiutate</option>
<option value="9">Ritirate</option>
<option selected="selected" value="7,8,1">Proposte / Rifiutate / Da verificare</option>
</select>
I suggest you to check how you created this drop down, and if possible replace there instead after creating drop down.
If I understand correctly you are need something like:
foreach ($dom->getElementsByTagName('option') as $item) {
if ($item->getAttribute('selected') == "selected")
$item->setAttribute("value", "-1");
}
This way you pass on your option items and set the value of the selected ones
You have used getElementsByTagName('options') in your code and no tag available with name options. Instead you should use correct tag name option.
I want to change multiple select buttons's values with another select button.
Practically when someone select an option in the main select button, the other select buttons must change with that value.
EDIT: I added the code, the first is the main select button and after I select somethig there, it should change in the others.
<select class="select_format">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
<select name="format[]" class="format_imgs">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
<select name="format[]" class="format_imgs">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
<select name="format[]" class="format_imgs">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
Thanks.
Since you didn't supply code here's a guess:
$(".myTriggerButton").on("click", function() {
$(".buttonToChangeValue").each(function() {
this.value = "new value";
});
});
$('.select_format').change(function(){
$('.format_imgs').val( $(this).val() );
});
https://jsfiddle.net/7hno0ob8/1/
I have a select like this
<select name="category" >
<option value="0" selected>Select a Manufacturer</option>
<option value="10">Acer Technologies</option>
<option value="2">Alcatel</option>
<option value="14">Apple Iphone</option>
<option value="4">Azumi</option>
<option value="12">HTC Corporation</option>
<option value="8">Huawei</option>
<option value="5">LG Electronics</option>
<option value="11">Motorola</option>
<option value="9">Nokia Microsoft</option>
<option value="1">Samsung</option>
<option value="6">Sony Ericsson</option>
<option value="3">Zhong Xing ZTE</option>
</select>
And another select HIDDEN like this
<select name="manufacturer" >
<option value="none" selected>Select a Manufacturer</option>
<option value="Acer Technologies">Acer Technologies</option>
<option value="Alcatel">Alcatel</option>
<option value="Apple Iphone">Apple Iphone</option>
<option value="Azumi">Azumi</option>
<option value="HTC Corporation">HTC Corporation</option>
<option value="Huawei">Huawei</option>
<option value="LG Electronics">LG Electronics</option>
<option value="Motorola">Motorola</option>
<option value="Nokia Microsoft">Nokia Microsoft</option>
<option value="Samsung">Samsung</option>
<option value="Sony Ericsson">Sony Ericsson</option>
<option value="Zhong Xing ZTE">Zhong Xing ZTE</option>
</select>
Both selects are almost the same value, the first one is to save the manufacturer as category and the second one is to save the manufacturers name
The first one is visible while the second one is hidden ( display:none )
What I need is:
If the user select in select one for example
<option value="2">Alcatel</option>
In some way the hidden display:none select must be autoselected to
<option value="Alcatel">Alcatel</option>
Any way to do this?
I already have Jquery running other functions on the site
Thanks
Use change function:
$( "select[name='category']" ).change(function(e) {
$( "select[name='manufacturer']" ).val( $(this).find( "option:selected" ).text() );
});
But if option text in category select do not match option value in manufacturer select - code will not work.
I have some code that has one contact select box hard coded and then if you click on a add button it adds more contacts. Each contact can be selected from a dropdown and give a location in at location text box.
I want on submit to be able to know if they have selected someone and if not I want to clear out the Location box as there cannot be a location if there is no contact.
<!--- The myContactCount variable is set in another part of javascript this is the current count plus one of the number of current select boxes. --->
<script type="text/javascript" language="javascript">
var e='';
var contactSelectedValue='';
for(var i=1;1<myContactCount;i++){
e = document.getElementById('myContactID_'+i);
contactSelectedValue = e.options[e.selectedIndex].value;
/* I am trying to alert the value so I can then use a if statement to check for null or even change the 'Select a Contact' value to 0 and test for that. */
alert(contactSelectedValue);
}
</script>
<!--- the ID will be 1-100 depending on how many contacts they have added --->
<select name="myContactID_#ID#">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2">Barbara</option>
<option value="3">Cavlin</option>
</select>
So after they are created dynamically they code would look like this.
<select name="myContactID_1">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2">Barbara</option>
<option value="3" selected="selected">Cavlin</option>
</select>
<select name="myContactID_2">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2" selected="selected">Barbara</option>
<option value="3">Cavlin</option>
</select>
<select name="myContactID_3">
<option value="">Select a Contact</option>
<option value="1" selected="selected">Abe</option>
<option value="2">Barbara</option>
<option value="3">Cavlin</option>
</select>
Your script has couple of issues:-
1<myContactCount instead of i<=myContactCount and you are using name in the select and
trying to fetch it by id.
Demo
Html
<select id="myContactID_1">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2">Barbara</option>
<option value="3" selected="selected">Cavlin</option>
</select>
<select id="myContactID_2">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2" selected="selected">Barbara</option>
<option value="3">Cavlin</option>
</select>
<select id="myContactID_3">
<option value="">Select a Contact</option>
<option value="1" selected="selected">Abe</option>
<option value="2">Barbara</option>
<option value="3">Cavlin</option>
</select>
JS
var e='';
var contactSelectedValue='';
for(var i=1;i<=3;i++){
e = document.getElementById('myContactID_'+i);
contactSelectedValue = e.options[e.selectedIndex].value;
/* I am trying to alert the value so I can then use a if statement to check for null or even change the 'Select a Contact' value to 0 and test for that. */
alert(contactSelectedValue);
}
I am trying to use a slightly modified version of this code to show/hide the field Return Time on this page based on Type of Trip:
One Way: Return Time is hidden
Round Trip: Return Time is shown
Here is the Select Box html. Code is autogenerated by cforms on wordpress.
<select name="TripType" id="TripType" class="cformselect" >
<option value="One Way">One Way</option>
<option value="Round Trip">Round Trip</option>
</select>
And here is the form element I'm trying to hide:
<li id="li--8" class=""><label id="label--8" for="DepartLeg2-Time"><span>Return Time</span></label><select name="DepartLeg2-Time" id="DepartLeg2-Time" class="cformselect" >
<option value="12:00am">12:00am</option>
<option value="12:30am">12:30am</option>
<option value="1:00am">1:00am</option>
<option value="1:30am">1:30am</option>
<option value="2:00am">2:00am</option>
<option value="2:30am">2:30am</option>
<option value="3:00am">3:00am</option>
<option value="3:30am">3:30am</option>
<option value="4:00am">4:00am</option>
<option value="4:30am">4:30am</option>
<option value="5:00am">5:00am</option>
<option value="5:30am">5:30am</option>
<option value="6:00am">6:00am</option>
<option value="6:30am">6:30am</option>
<option value="7:00am">7:00am</option>
<option value="7:30am">7:30am</option>
<option value="8:00am">8:00am</option>
<option value="8:30am">8:30am</option>
<option value="9:00am">9:00am</option>
<option value="9:30am">9:30am</option>
<option value="10:00am">10:00am</option>
<option value="10:30am">10:30am</option>
<option value="11:00am">11:00am</option>
<option value="11:30am">11:30am</option>
<option value="12:00pm">12:00pm</option>
<option value="12:30pm">12:30pm</option>
<option value="1:00pm">1:00pm</option>
<option value="1:30pm">1:30pm</option>
<option value="2:00pm">2:00pm</option>
<option value="2:30pm">2:30pm</option>
<option value="3:00pm">3:00pm</option>
<option value="3:30pm">3:30pm</option>
<option value="4:00pm">4:00pm</option>
<option value="4:30pm">4:30pm</option>
<option value="5:00pm">5:00pm</option>
<option value="5:30pm">5:30pm</option>
<option value="6:00pm">6:00pm</option>
<option value="6:30pm">6:30pm</option>
<option value="7:00pm">7:00pm</option>
<option value="7:30pm">7:30pm</option>
<option value="8:00pm">8:00pm</option>
<option value="8:30pm">8:30pm</option>
<option value="9:00pm">9:00pm</option>
<option value="9:30pm">9:30pm</option>
<option value="10:00pm">10:00pm</option>
<option value="10:30pm">10:30pm</option>
<option value="11:00pm">11:00pm</option>
<option value="11:30pm">11:30pm</option>
</select></li>
Here is the javascript I'm using:
$("#TripType").change(function() {
$("#li--8")[$(this).val() == "Round Trip" ? 'show' : 'hide']("fast");
}).change();
I have the code working here on JSFiddle: http://jsfiddle.net/MS4Ck/. However, it is not working on the site. My console is not giving me any errors except for a reference error coming from some logging code I put in there to make sure the javascript is being called (it is). Any ideas? Thank you so much!
Just a guess, but make sure this function is wrapped in a docReady function eg:
$(document).ready(function() {
$("#TripType").change(function() {
$("#li--8")[$(this).val() == "Round Trip" ? 'show' : 'hide']("fast");
}).change();
});