Hi I have tried below code to reset number of "adults" dropdown field on onclick of reset button but the dropdown field is not getting reset please suggest
Code for adult dropdown :
<select class="select_style sel_ad_{$smarty.section.sect.iteration}" id="adult[]"
name="adult[]"
onchange="javascript:display_twin('{$smarty.section.sect.iteration}',this.value)">
<option value="0"> - </option>
{section name=adult loop=10 start=1 step=1}
<option value="{$smarty.section.adult.index}" {if $adults_details.$sect_key eq
$smarty.section.adult.index}selected{/if}>{$smarty.section.adult.index} </option
{/section}
</select>
Javascript code for reseting fields onclick of reset button :
function reset_frm(){
$("#adults_pkg").val('');
//$("select[name='adults_pkg[0]']").val('');
}
You are passing wrong id.
To use existing code:
$('#adult\\[\\]').val('');
OR
Add a new class to the element:
<select class="pkgCls select_style sel_ad_{$smarty.section.sect.iteration}" id="adult[]"
name="adult[]"
onchange="javascript:display_twin('{$smarty.section.sect.iteration}',this.value)">
And apply this:
$(".pkgCls").val('');
Default mean selected first option of select value, as you have have 0 value on first index so you will need to assign 0 for default index
And selector seems wrong, support the select box inside loop so use right selector like
$(".sel_ad_{$smarty.section.sect.iteration}").val('0');
Try with -
$("yourSelectMenu").prop('selectedIndex',0);
Related
I want to set re-select option in , I know there is a function to do that for single element using javascript but I use it as an array so I need to set the value inside the loop su as this example:
<select name="days" value = "3">
<option value="1">Sat</option>
<option value="2">Sun</option>
<option value="3">Mon</option>
<option value="4">Tue</option>
<option value="5">Wed</option>
<option value="6">Thu</option>
<option value="7">Fri</option>
</select>
I think this example will work fine with react, but can I use such a code in normal html and javascript inside the loop.
if you have a database store the day value, instead of use if else function, filter the day on select tag to make the option selected as value in database
basically inside foreach there is a select option tags I need to set selected using the value in database like so:
$('#dynamic_field').append('<select><option value="1">Sat</option><option value="2">Sun</option> ..... </select>
Thanks
In the end of the loop:
$('select[name^=day]',item.id).each(function(a,b){ $(b).val(item.day); });
with that will check for each value and set the value in the database as selected in select form
*Note: item.id and item.day came from database
I have a set of input boxes and you can add more and more sets of these forms if you click the add more button. In my form I can submit data and I have got it to show up when you reload the page. However, I am stuck at making sure all of the fields have values before I run my AJAX. I use Jquery for this project
I cannot use a validation plugin because I am running magento and every time I try running the plugins in "No Conflict Mode" the plugins do not seem to work. Because I am running Magento this means I need to run Jquery in no conflict mode.
I have seen other solutions for this however they are all to do with input boxes and I have 1 input boxes and 2 select boxes. How can I make sure that all the input boxes are filled before and that all the select boxes that are not disabled have something selected before the ajax call?
Here is part of my HTML:
<form>
<input id="12">
<select id="1">
<option disabled="disabled" selected="selected">select please</option>
<option value="01">Option 1</option>
<option value="02">Option 2</option>
</select>
<select id="2">
<option disabled="disabled" selected="selected">Select Please</option>
<option value="01">Option 1</option>
<option value="02">Option 2</option>
</select>
Using a click event, if you use .val() on your <select/>, it will return null if there is no value attribute on your <option/>.
Note: This will not work if you put a value attribute on your options.
Edit: Doing a !== compare will be faster.
$("#submit-button").click(function(){
//if this is true, then it is valid
alert($("#1").val() !== null);
});
You can do it by getting the inputs value into a property.
This script would alert the number of how many inputs aren't complete or missing with base in your structure.
(no jQuery)
var myForm=document.getElementsByTagName("form")[0];
var formSelectors=myForm.getElementsByTagName("select"),
formTextBoxes=myForm.getElementsByTagName("input"),
missing=0;
var i,
length=formSelectors.length;
for(i=0;length>i;i++){
if(formSelectors[i].value===formSelectors[i].children[0].value)
//Check if select value is equal to
//select please or Select please
//MISSING! (select)
missing++
}
length=formTextBoxes.length;
for(i=0;length>i;i++){
if(formTextBoxes[i].value.length===0)
//MISSING! (input)
missing++
}
alert(missing)
Try this:
if($('#12').val()!='') {
// your code
}
What I'm trying to do is give my textfield a value based an an option is select form my drop down. For example: I have 2 fields, a drop down and a textfield. I select Facebook from the dropdown and the value "http://www.facebook.com/" appears in my textfield. How can I achieve this effect? I know that I have to call a function onchange of the drop down but that's pretty much everything I know. Remember that I'm not trying to copy the exact selected value from the dropdown to the textfield here.
example markup
<select>
<option value="http://www.facebook.com">Facebook</option>
<option value="http://www.twitter.com">Twitter</option>
</select>
<input type="text" />
jquery
$('select').change(function() {
$('input[type="text"]').val(this.value);
});
Here's a fiddle
In response to your comment, there are a number of ways to do it (a switch statement, if/elseif statement etc), the easiest would probably be to create an object mapping the text to the corresponding url:
var urlFromText = {
'Facebook' : 'http://www.facebook.com/',
'Twitter' : 'http://www.twitter.com/'
};
Then, in your change handler, you can simply use:
$('input[type="text"]').val(urlFromText[$('option:selected', this).text()]);
Here's an example
HTML
<select id="network">
<option value="http://www.facebook.com">Facebook</div>
<option value="http://www.twitter.com">Twitter</div>
</select>
<input id="network-txt"/>
Jquery
$("#network").change(function(){
$("#network-txt").val($(this).val());
});
Working Example http://jsfiddle.net/nVEEE/
I've been lurking a bit and couldn't find the answer. Basically I have a bunch of buttons that I want to turn into a drop down menu and have the code be executed onChange. But, I'm new to javascript and I am having a hard time figuring out how this would work. I somewhat got it to work, but I couldn't get it to work with more than one option. Here's what I have:
<button class="lightbutton" onclick="lightswitch(1,true);lightswitch(2,true);lightswitch(3,true);">
All lights on</button>
<button class="lightbutton" onclick="lightswitch(1,false);lightswitch(2,false);lightswitch(3,false);">
All lights off</button>
I got the lights to turn on by doing this:
<form name="functions">
<select name="jumpmenu" onChange="lightswitch(1,true);lightswitch(2,true);lightswitch(3,true);">
<option>LightFunctions</option>
<option value="*";>Light 1 On</option>
<option value="*";>Light 1 Off</option>
</select>
</form>
Now, I see why it works -- it's just telling it that whenever it changes to turn on all the lights. But how do I change the "onChange" to make it so it gets whichever option I have chosen?
I think I'm missing some JS but unsure.
I appreciate the help.
To have that select element control just the first lightswitch you can do this:
<select name="jumpmenu" onChange="lightswitch(1,this.value==='on');">
<option value="on";>Light 1 On</option>
<option value="off";>Light 1 Off</option>
</select>
That is, instead of hardcoding true as the second parameter to lightswitch() test the current value of the select element. (Note that I've changed the value attributes to something more meaningful. The expression this.value==='on' will evaluate to either true or false.)
Within the select's onChange attribute this will refer to the select element itself.
EDIT: To have the same select control multiple parameters you can add some data- attributes to the option elements to store as many extra parameters per option as needed (in this case I think you only need one extra). And I'd move the logic out of the inline attribute:
<select name="jumpmenu" onChange="jumpChange(this);">
<option value="">LightFunctions</option>
<option data-switchNo="1" value="on";>Light 1 On</option>
<option data-switchNo="1" value="off";>Light 1 Off</option>
<option data-switchNo="2" value="on";>Light 2 On</option>
<option data-switchNo="2" value="off";>Light 2 Off</option>
<option data-switchNo="3" value="on";>Light 3 On</option>
<option data-switchNo="3" value="off";>Light 3 Off</option>
</select>
function jumpChange(sel) {
if (sel.value === "") return; // do nothing if user selected first option
var whichLight = +sel.options[sel.selectedIndex].getAttribute("data-switchNo");
lightswitch(whichLight, sel.value==='on');
sel.value = ""; // reset select to display the "Light Functions" option
}
Demo: http://jsfiddle.net/N7b8j/2/
Within the jumpChange(sel) function that I added the parameter sel will be the select element (set as this from the onChange attribute). The "magic" happens on this line:
var whichLight = +sel.options[sel.selectedIndex].getAttribute("data-switchNo");
To explain that line: sel.options[sel.selectedIndex] gets a reference to the currently selected option, and .getAttribute("data-switchNo") gets that option's data- attribute. The + converts the attribute from a string to a number.
I have something like this:
<select class="bla">
<option value="1">...</option>
<option value="2">...</option>
</select>
<select class="bla">
<option value="1">...</option>
<option value="2">...</option>
</select>
<select class="bla">
<option value="1">...</option>
<option value="2">...</option>
</select>
<input class="alloptions" type="hidden" value="">
I want the hidden input field value to change every time a different option is selected in each of the select input fields above.
This value would contain the selected options from all input fields separated with commas.
How can I do this?
Something like:
$('select.bla').change(function() {
$value = $('select.bla').map(function(){return $(this).val()}).get().join(',');
$('input.alloptions').val($value);
});
Explanation:
change() gets fired whenever the value of a select field changes
With map() we create an array of the values of the select fields and join them to a string separated by commas
change event is what you are after.
The .serialize() method can act on a jQuery object that has selected individual form elements, such as "input", "textarea", and "select" - meaning you could do the following:
$('.bla').change(function(){
var opts = $('select').serialize();
$('.alloptions').val(opts);
});
Each "select" would need a name value and would produce:
selec1=1&select2=2&select3=1
Do you really need to use Javascript for that? If you give all three select boxes the same "name" attribute, the values will be sent to the server as a comma-delimited list.
Just make sure that you do a trim of each element when you do a split, as some browsers will put spaces after the commas.