Jquery multiple onchange events - dropdown lists and input text - javascript

What i would like to have is sort of this which doesnt work:
http://jsfiddle.net/adige72/BS9rp/
If i select an option, all values of input text fields change but in fact i would like to only one text field to be populated which is next to that dropdown list i select from.
Is this possible?

It is absolutely possible with jquery. On the example in that link you are selecting based on the class of the input boxes "phonenumber". If you select based on the the actual control Id it will not populate all the input boxes on the screen. Please see below for example:
$("#dropdownlistID").live("change", function() {
$("#inputfieldID").val("update with whatever you want");
})

Many ways to do this including using id's on the fields but using your fiddle, you could do this:
$(this).next($('.phonenumber')).val($(this).find('option:selected').attr('data-phonenumber'));

Yea. Use unique ids for each drop down and text field and that will get you in the right direction.
<select id="IDX" class="name" name="name[]">
...
<input id="textIDX" type="text" class="phonenumber"...
...
$('#IDX').change(function(){
$('#textIDX').val('anything....');
});

Related

php drop downlist with 2 values the 2nd value post to hidden field

I've got a regular drop downlist for selecting the countries name as text and countries_id as value.
Example:
<option value="1">Afghanistan</option>
Now I need an hidden form field with the ISO2 code for the country.
Example:
<input type="hidden" name="iso2" id="inputIso2" class="form-control">
And when the country is changed by the drop downlist, the hidden field should also change.
I've added the ISO2 to the option like this:
<option value="1" data-iso2="AF">Afghanistan</option>
But how do I pass it to the hidden field?
Or is there a better way of doing this?
The ISO2 field is being used by another script in the form, so it should work pre post.
This isn't really a PHP problem so much as it is a javascript problem. You need to put an event listener on your select element and when it changes, grab data-iso2 and apply the value to the hidden field.
Using jQuery, you'd do this:
$("#country").change(function(){
var iso2 = $(this).find(':selected').data('iso2');
$("#inputIso2").val(iso2);
});

PHP Multiselect values postback

I have two multiselect boxes and the user can move items from one box to other (accomplished using Javascript). However, when I post the form, the POST value for the multiselect box where the user moves items to is empty. If I select a few of them and then postback, I can see the ones I selected.
My question is....can I get all the values in a particular select box regardless of whether or not they're selected?
<select multiple="multiple" class="form-control" id="viewSelected" name="viewSelected[]">
//options go here
</select>
Thank you!
Jason
I think you are asking about dependable dropdown list. Am i right?
To get option values and text you can loop through them
$('select option').each(function(){
let value = $(this).attr('value');
let text = $(this).text();
});
To print according to the value of first box, you need to give a class to the first box. Every time after clicking the box a unique id will be generated.
According to that, you can get data in the second box by using Ajax function

Creating input text field on marked checkbox in JQuery

I was asked to do something particular, and after trying I eventually found this site https://codepen.io/elmahdim/pen/hlmri from which I'm using the JQuery. I however don't have any knowledge of it so I only understand in parts. What I'm trying to do is upon marking a checkbox an input type="text" appears below it, so if I check 3 results, input type="text"creates 3 fields, etc, and if I uncheck a checkbox, the camp gets deleted.
I've tried to do it by adding
$("div bb")
{
$('<input type="text" id="textbox" style="width:170px;"/><span> CHF <span>');
}
after $(".hida").hide();but as I have no knowledge of JQuery it obviously didn't work and I don't really know what now. Also before that input, is it possible to add some sort of variable that is "attached" to the input so I can specificy what that input is for? Like if I check "Mercedes" in the checkbox, the input type="text" is created and above it the name "Mercedes" then if I check "BMW" it makes another input type="text" with BMW written above it?
Also wruting the code like this $("div bb") { for some reason disabled the $. Not sure why.
One solution:
create an empty element in your html where the input fields
should appear (e.g. <div id="textfields"></div>)
find the "on-checkbox-click-event-handler", which happens to be this line in the jquery: $('.mutliSelect input[type="checkbox"]').on('click', function() {
add code to the handler at the correct location, to append/delete a text box (difficult if you don't know jquery at all). The correct location is where jquery looks for the "checked-state" of the checkbox. Use $().append() to create the text field and $().remove() to remove on unchecking the checkbox. Should be something like $("#textfields").append("<input type='text'/>"); you will need to add a class to the input field to later address it when removing.
Working pen:
https://codepen.io/anon/pen/gRdmXj
Happy coding!

How get dynamic JSON data using chekboxes in Angular JavaScript?

I am struggling so much and find so many links and articles but can't get solution. I have an array like that
$scope.cols=[
{"dpname":"partname","search":'',"qparam":''},
{"dpname":"partid","search":'',"qparam":''},
{"dpname":"partdesc","search":'',"qparam":''}
];
I am displaying array using ng-repeat as well as I repeat checkboxes also. When I click paricular check box one text box should open. The given ng-model value in text box is replaced by that particular check box
Here I attached my fiddle link which I tried:
http://jsfiddle.net/soumyagangamwar/3dygzn8e/
Have a look at this Fiddle
Although you have not clearly mentioned what you want in the question. But if you want each item to have its own text box then the above fiddle should answer your question.
<span ng-if="displayName">
<input type="checkbox" id="searchName{{$index}}" ng-model="searchname[$index]" ng-change="changeColVisibility(col)">
</span>
<div ng-show="col.show">
<input type="text" ng-model="name">
<input type="button" value="submit" ng-click="setName(col)">
</div>
You should try not to use the index and should rather use more of the 2 way binding that comes with angular. Both to show and hide the text box and to save data in models rather than creating loads of functions to do it.
I tweaked your files in this link
jsfiddle.net/3dygzn8e/1/
basically what I did is the following:
add a new column to the array called ischeched and default it to false. this represent the checkbox check state
bind the checkbox to col.ischecked
I changed the textbox ng-show condition to be ng-show="col.ischecked"

Using div's instead of select's

Hello I've implemented a custom select following this instructions:
http://www.onextrapixel.com/2012/06/20/create-a-custom-select-box-with-jquery/
It is based on using div's and span instead of select's and option. My question is, how can I make the form get this values?
Do I need to make hidden select and assign to it the div-select value every time?
Add a hidden input somewhere in form, say
<input type="hidden" name="foo">
Then add this line to the jQuery snippet
$(this).find('span.selectOption').click(function(){
$(this).parent().css('display','none');
$(this).closest('div.selectBox').attr('value',$(this).attr('value'));
$(this).parent().siblings('span.selected').html($(this).html());
$('input[name="foo"]').val($(this).html());
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
});
Basically, whenever an option is clicked it will update the field named "foo" which stores the name of the selected option.
You can use a hidden select that matches the selected value, or just a hidden input with the updated value. Either way, to be included in the form submission, it must be a input, textarea or a select with a name attribute.

Categories

Resources