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"
Related
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!
So this is tough to describe but I cannot figure it out, I feel like i am close however!
Basically I have a list of things, that need to be organised.
lets pretend its books, I have all these books, with all the information on them (author, length, title, genre). If I wanted to search my array of books specifically for comedic books. I would tick the comedy tickbox and hit search.
I have gotten this to work easily! the tricky part is that I would like it to search straight away when it is selected, however my javascript searches through checkboxes to see which checkboxes are selected before it runs my code that eliminates the answers that are irrelevant. so it needs to be a checkbox value that is submitted.
Is there a way I can have an image that functions as a button, that carries a value of a checkbox...???
so far I have gotten this close:
<div class="wells">
<input type="image" value="comedy" src="img/pieces/comedy.png"
alt="comedy" onclick="myFunction()" checked>
</div>
I know myFunction works and does what it is told.
I literally need the value of the checkbox to be used as a submit button.
the long way is like this:
<img class="imgcomedy" src="img/pieces/comedy.png"> :
<input type="checkbox" class="roundedOne" name="comedy" value="comedy">
then the user would scroll to the submit button and hit send, sending the value of the checkbox to the function myFunction().
I know myFunction works and does what it is told.
I literally need the value of the checkbox to be used as a submit button.
You can give image which behaves as checkbox, when you click on submit it gives values like true.or false for that check box.
One possible solution, depending on what your actual requirements are...
You can use a <button> instead of a checkbox; the contents of a button are fully customizable with essentially any HTML...
<button type="submit" class="roundedOne" name="comedy" value="comedy">
<img class="imgcomedy" src="img/pieces/comedy.png">
</button>
You may want this as a submit button, and/or attach a javascript click-handler.
If you need several categories chosen together, such as "list things in either category drama or comedy" which you can do with checkboxes, you have several options.
You could also include a checkbox but keep it hidden, and then check/uncheck it by using your click-handler attached to the button.
You could keep an <input type="hidden" value=""> field and set the value in your click-handler, adding and removing categories; for example
initial: value=""
after clicking the comedy button: value="comedy"
after clicking the dramay button: value="comedy,drama"
after clicking the comedy button again: value="drama"
jsfiddle: http://jsfiddle.net/d1zqsayh/9/
Trying to put the search box of DataTables in a <div>.
Html:
<div class="dataTables_filter">
<input type="text" id="dataTables_filter" class="dataTables_filter">
</div>
Script:
oTable = $('#example').dataTable();
$('#dataTables_filter').keyup(function(){
oTable.fnFilter( $(this).val() );
})
I saw this from another stack overflow post , but unfortunately the little 'X' button on the right of the search box doesn't show when you start typing in the box. Any way around this ? Perhaps i am using the wrong class on my <input> or <div>.
You need to add the little x yourself, it's not something that magically appears, unless you're using Internet Explorer.
Edit:
Since datatables creates this search box, You need to use fnInitComplete callback/function in datatables to target this search field, then you initialize this button.
You can see a working example here:
http://jsfiddle.net/d1zqsayh/20/
Edit:
You're referring to the behavior in Chrome for input type=search
Just change the input type from text to search and it will do this behavior in Chrome.
See here: http://jsfiddle.net/d1zqsayh/23/
Should your div class be dataTables_wrapper, not _filter, perhaps?
I know I can disable/lock part of an input box using
<input type="text" disabled="disabled"/>
or
<input type="text" readonly="readonly"/>
but I want to have
<input type="text" value="[[inputbox|edithere]]"/>
where the user can only edit edithere
I have tried to google this, however the only related things I can find are how to disable an input box completely or disable certain keys.
I don't know the input boxes id or how many there are (dynamically created via php onload), but I know that they will always be a pipeline and two ]] bookending the value I want to edit.
EDIT
http://jsfiddle.net/7rTMK/
You can't do this with a stock input just manipulating attributes.
However you can simulate this with css and some extra markup:
<div class="wrapper">
<div class="static text">static text</div>
<input class="text" type="text" />
</div>
Position "static text" div on top of the input and add left padding to the input text.
example http://jsfiddle.net/MTEec/
It's impossible. Use a tag to wrap the input, and put the uneditable parts before, or after the input, and style the tag to look like an input, and style the input to match that styling.
If you need the form to send all the data, create a hidden input after your input, and update it's value with JavaScript (to the static and the input's text concatenated) upon changing the value of the main input. That way when the form is sent, the later hidden input with the same name will be used.
While it's not entirely impossible to do, it would be extremely difficult to do and it's a very bad practice to try doing something like that, at least for your use case.
You should obtain the user input without restriction inside your input box, if you want to add square brackets or the such, you can add them later using either Javascript or your service side language.
Alternatively, if you really wish to display the characters inside the textbox, you can use claustrofob's solution and mess around with the CSS.
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....');
});