Using jQuery to change radio button to checkbox - javascript

PS: Problem solved. Thx all you guys.
I need to change radio button to checkbox when page loading.
I can not make the checkbox directly, so I have to find a way to solve this.
I've tried How can I change a checkbox for a radio button using jQuery?, but got errors like replace is not a function or undefined.

$(':radio').attr('type','checkbox')
No need to iterate with "each". The selector selects all radios.
JSFiddle

The answer to this question depends a lot on where and when you can insert a script. If the script runs before the element is loaded into the page, then you will not be able to find it because it does not yet exist. However, if you are able to load the script inside the body either before or after the element has loaded, you can run a function with the body onload event (if before the element is created) or you can run it as the page is loading if the element has been created. Not withstanding the question of what code you need to garner a DOM reference to the element, the rest is easy. You just change the attribute on the element in question.
$("#foo").attr("type", "checkbox");

Just change the type of your inputs.
$(':radio').each(function(){
$(this).prop("type","checkbox");
});

Related

Limit number of JQuery appends

I'm making a userscript that adds a button to a specific stie, but I have encountered a problem that I'm not able to solve at my level of competence.
So in order to add the button I use JQuery, but the problem is that the element I'm appending it to does not hold a specific ID, which makes locating only the wanted element hard using JQuery.
I'm currently doing this:
$("div:contains('Add line')")
This works in the sense that my button is added at the place where I want it, but here's the problem that comes out of this: this also appends my button at other places on the site where I don't want it. So my question is if I'm able to limit the times that JQuery appends my button. The correct button is added first of them all so ideally I would just like to tell jquery to append my button once.
Thanks
You can get the very first element that matches your selector by using the .first() method right after your selector. Like this:
$("div:contains('Add line')").first()
To expand a bit on what #martin said you can iterate over what jQuery returns and only pick the dom node you want to append to.
However, the main issue here is that the button could change the it's order in the dom, so you're going to have broken code.
Since you're mentioning a single button, isn't there a more unique identifier / css path / x-path that you can use to pinpoint that div ?

Issue with summernote saving the textarea value when dynamically injected

So i am having trouble sending the value of the textareas that are dynamically generated and have summernote applied to them.
Here is a link that will reproduce the problem:
http://jsfiddle.net/jk6pjnt7/1/
so basically, i am trying to add a new textarea dynamically when i click the "add Step-textarea" because i don't know how many "step" the user will need. the problem is that when i submit the form, i won't get the value of the new textarea. they will have a blank value.
If i do the same and i remove summernote plugin form the process everything works fine.
I have this small pice of coed that prevents the form from submitting and will display what would be submitted in the console, so you might need to open your devtools to see the debugging info.
$('form').submit(function () {
//console.log($(this));
console.info($('form').serializeArray())
return false;
});
Since the DOM is being dynamically changed, we cannot 'watch' these new elements in the typical way. In jquery what we use is called delegation and in particular jQuery.fn.on. We bubble up from the dynamically altered container (in this case, being <form>) to an element that will exist and guaranteed not to change. In this specific case in particular, your line $(next_input).val(''); I changed to $(next_input).html(''); as we're dealing with delegated textarea's which work a bit differently from input boxes in the way they take data.
Here is the fixed code: http://jsfiddle.net/jk6pjnt7/3/

drupal form trigger add more javascript

I have a node add form with a field that has an 'add more' button. This particular field needs to be populated dynamically. Why doesn't it work to trigger a jquery click on the 'add more' button ($('#edit-field-roof-area-und-add-more').click();)? If I do that in the console, it returns an empty array.
What is the simplest way to create one or two fields in a node add form that I can add an unlimited amount to dynamically from the client side (the values come from a JS application.)
found it!! jQuery('#edit-field-phone-no-und-add-more').trigger('mousedown') Also, the ID changes each time the button is clicked.
when adding nodes you might want to look into using context in your handler:
$('#edit-field-roof-area-und-add-more', 'body').click();
since the elements i dynamically created after the DOM is loaded.. try that, since the body tag is already present in the DOM when the page loads
and/or provide a jsfiddle or codepen example to better help you more...
EDIT:
you could also try this jQuery trigger():
$('#edit-field-roof-area-und-add-more', 'body').trigger("click");
or jQuery triggerHandler():
$('#edit-field-roof-area-und-add-more', 'body').triggerHandler("click");
the difference between the two is that triggerHandler does not bubble up the DOM
also do have an example jsfiddle or codepen.. of your click event handler you are trying to trigger?

jquery statement to focus on live generated input

Okay, so I need for an input element to be automatically focused when it shows up in the DOM. This is what I am currently trying to do:
modal.fadeIn('fast', function(){
$('input.cm_modal_input_elem').focus();
});
This isn't working. What is the official way to do this?
That is the official way of doing it, and if it's not working something else besides the posted code must be causing the problem. Like say you are inserting the element dynamically and expecting a function you called on page load to execute later on when the element is inserted or that there are other elements that receive focus later in your script etc.
Here's a fiddle to show it working !

Setting the textbox to read only on submit

Can anyone suggest me a javascript function to set the text box to readonly on pressing the submit button. So that the contents cannot be modified.
To disable an input you'll want to set its disabled attribute. If you can use jQuery then something like this would be what you're looking for:
$('#idOfYourInput').attr('disabled', true);
If jQuery isn't an option, then you'll want to use the setAttribute function. Take a look at the MDN documentation for it. Something like this:
var d = document.getElementById('idOfYourInput');
d.setAttribute('disabled', 'true');
(Both of these code samples assume that you're identifying your input by its id attribute. If that's not the case, these would need to change. The jQuery one would be trivial to change, you'd just need to update your selector to identify the target attribute. The latter code sample would need to use some other DOM navigation/selection functions to find your input element.)
You'd want to include this within the handler for your submit button. Understand, however, that this will only matter on the current context of the page. So I'm assuming your submit button is being used to perform a submit via AJAX and not actually POST the whole page, correct? Because if you're POSTing the whole page then, when the page refreshes, you'll be on an entirely new page context. (Which means any code associated with a button click event will not yet have run.)

Categories

Resources