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!
Related
how can i detect if an input value is changed.. i have a series of inputs which is from an ajax request.
something like this:
for each result of the ajax request
print some <input type="text"> here
i tried to use an id to detect the changes made but multiple inputs have the same id and it seemed not to work on my case.
done something like this but it does not work, maybe because i have many input with the same id?
$('body').on('DOMAttrModified propertychange paste', '#rn', function() {
alert("test");
});
You can use onchange() to detect any changes on the input. For example,
<input type="text" onchange="doSomethingOnChange()">
This will trigger doSomethingOnChange() every time the value in the input is changed.
Now that you want to add classes to html elements. This will guide you on how to do such task.
I am currently working on a project, that requires me to implement the following:
I've got 2 input fields - a regular text field, and a checkbox.
What I want to do is - if the user fills in the text field, the checkbox should be automatically disabled. If the checkbox is checked instead, the text field should be disabled.
What I've come up with so far is:
<input type="text" name="num-input1" id="dis_rm" value=""
onblur="document.getElementById('dis_per').disabled = (''!=this.value);" >
<input type="checkbox" name="num-input2" id="dis_per" value=""
onblur="document.getElementById('dis_rm').disabled = (''!=this.value);" >
If I fill in the text field, the checkbox is successfully disabled. However, if I tick the checkbox, the text field remains available.
What am I missing?
If I were you I would:
Move my JS code out of the HTML and into a separate file or at least into a script element.
Use document.getElementById to find an item in the DOM. See https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
Once you have the element from the DOM, add an event listener for the blur events like this myElement.addEventListener('blur', myCallbackMethod). See https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener for more info.
Inside your callback method you can use event.target.checked to see if the element you've added the event listener to is checked.
Here is a little snippet to get you going:
const
textInput = document.getElementById('element-ID-here'),
checkbox = document.getElementById('element-ID-here');
function onTextInputBlurHandler(event) {
// if textinput value is empty then
// set disabled for checkbox to false
// else
// set disabled for chexbox to true
}
textInput.addEventListenet('blur', onTextInputBlurHandler);
<input type="text" name="num-input1" id="dis_rm" value=""/>
<input type="checkbox" name="num-input2" id="dis_per" value=""/>
With this info you should be able to get (a little) further. When you do, update your question with your JavaScript code and I am sure people will be happy to help you further.
People are bringing up great suggestions in the comments and answers for better code design and quality, but from a purely functional point of view, there are two core things that you should do to get the functionality that you are describing:
1) As mentioned by Paul S. use the checked property for your checkbox logic. Right now, you are checking to see if the checkbox value is not an empty string, but it will always be an empty string, because that's the value that you've assigned to the element:
<input type="checkbox" name="num-input2" id="dis_per" value="" <----- *here*
Nothing else in your code is changing that, so it will always fail the logic check.
However, the checked property automatically switches between true and false as you check and uncheck the input. To do the logic check that you are looking for using that, do this for your JavaScript!
document.getElementById('dis_rm').disabled = this.checked;
2) Switch the event that you are binding for (at least) the checkbox to the "change" event instead of "blur". For checkboxes, the "change" event will trigger when you click on the checkbox (or hit space bar), but the element still maintains its focus. The blur event Will only fire once the user moves the focus to another element of the page.
I'd also recommend using "change" for the text field (there's no point in running the check, if the value is the same when you leave the field as it was when you entered it), but it's not as important since, from a timing point of view, when the "change" event fires, it happens immediately after the "blur" event, so, from the user's point-of-view, the behavior would be the same.
When it's all said and done, if you made no other changes to your code to improve the code design/quality (Thijs made some great suggestions, BTW), this is the minimum change that you would need to get the functionality that you want:
<input type="text" name="num-input1" id="dis_rm" value=""
onblur="document.getElementById('dis_per').disabled = (''!=this.value);" >
<input type="checkbox" name="num-input2" id="dis_per" value=""
onchange="document.getElementById('dis_rm').disabled = (this.checked);" >
I have a empty page where i dinamically add the element, i'm tryng to use materialize and i have a graphic problem...
I have follow the different tutorial on "http://materializecss.com/" to add the element with the correct method, but i have a problem with checkbox...
If i add the checkbox directly on the HTML page i have some graphic effect on checking and unchecking checkbox, but i must add it with javascript/jquery (dinamically) and i lost the graphic error.
On the website there is some initialization function to solve similar problem, but there isn't a initialization function for checkbox...
Someone say how to manually initialize checkbox with Materialize?
ty!
edit:
i have id and for on my checkbox...
sorry gor difficult code but it it's everithing dinamically added...
You have to have <span> right after your checkbox. Thing is that all magic about creating nice checkbox happens inside of span rather than input itself.
So here is minimal structure of HTML to get fancy checkbox in Materialize
<input type="checkbox" />
<span></span>
When you add them dynamically, do you also add the for attribute in the label for the checkbox? Per Materialize's documentation for Checkboxes:
The for attribute is necessary to bind our custom checkbox with the input. Add the input's id as the value of the for attribute of the label.
An ID should be unique within a page.
new member but I've been reading and learning here for a bit. I hope I"ve formatted this question correctly but here goes. Here's the basics of my problem. I'm using JQuery replaceWith to swap a dropdown select with an input box and vice-versa. It seems that I'm affecting the ability of JQuery to set focus() on the swapped out id. Here's the code (no closing tags).
For the form
Select A Sign
lawn signs
banners
carved signs
sandblasted signs
Quantity:
the JQuery that swaps the drop down select with the input box which happens on a change of the product id shown above newField either contains on or the other of the following:
newField = "<select id='quantity' name='quantity'><option selected value='10'>10</option><option value='20'>20</option><option value='30'>30</option><option value='40'>40</option>option value='50'>50</option><option value='60'>60</option><option value='70'>70</option><option value='80'>80</option><option value='90'>90</option><option value='100'>100</option></select>";
newField = "<input id='quantity' name='quantity' maxlength='2' size='2' \>"
and the JQuery replaceWith() which will swap out one of the two fields above depending upon another selection drop down box.
$('#quantity').replaceWith($(newField)).attr("id", "quantity");
This all works just fine and the swaps work great except that when I do the following (my test code), nothing happens. No alert is triggered when I focus into the input box.
$('#quantity').focus(function(){
alert ("focused");
});
Am I losing some sort of context on the id with the swap using replaceWith() since the id is the same regardless of whether I swap a select drop down with an input box.
Thanks
You should use .on() for binding events to dynamically created elements. Try:
$(document).on('focus','#quantity',function(){
alert ("focused");
});
you should use deligates for dynamically created objects
$(document).on("focus","#quantity",function(){
alert ("focused");
});
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....');
});