javascript variable not setting (possible jquery issue) - javascript

I've got the a piece of a form where I've applied some javascript (the end-purpose of the js is to show the appropriate follow up question), but the part that loads the input's and select's values into variables doesn't seem to be working.
Here's the exact code:
# HTML
<ul id="m_mlt_t">
<li>How long have you known <span class="nom">__</span>?</li>
<li><input name="m_mlt_n" type="text" maxlength="3" /> <select name="m_mlt_t"><option></option><option>days</option><option>months</option><option>years</option></select></li>
<li><input name="m_mlt_n" type="radio" value="777" />I prefer not to answer</li>
<li><input name="m_mlt_n" type="radio" value="999" />Don't know</li>
<li><span class="m_mlt_t" style="display:none;"></span></li>
</ul>
# JAVASCRIPT
$('select[name="m_mlt_t"], input[name="m_mlt_n"]').change(function() {
var time = $('input[name="m_mlt_n"]').val();
$("span#m_mlt_t").text(time);
$("span#m_mlt_t").fadeIn();
var period = $('select[name="m_mlt_t"]').val();
$("span#m_mlt_t").append(" " + period);
$("span#m_mlt_t").fadeIn();
});
In the fiddle, I expect the span to fade in and display the values of the textfield and the dropdown.
http://jsfiddle.net/vxvSU/
btw the code for the following custom functions isn't included, but I know they work
counter_multiChoice(),fadeOUT_sect(),fadeIN_sect()

A first problem is your selector
$('select[name="m_mlt_t"] input[name="m_mlt_n"]')
This selects any child input elements inside the select element, which doesn't make any sense and should probably be...
$('select[name="m_mlt_t"], input[name="m_mlt_n"]')
Which selects all matching select, and input elements with the appropriate names.

Related

Inject Javascript to select all radio buttons with specified value

Slightly odd question, but I'm trying to find a way (if possible) to select all radio buttons that have the same value. We regularly get hundreds of spam accounts signing up on our website, and it would be easier to set all radio buttons to "Reject" and double-check to make sure there's no legitimate ones, as opposed to constantly clicking on a radio button. (Lazy is my middle name, yes.)
Is this possible? If so, how? I haven't got access to the actual web pages to code in a button to do just this yet, but it's something I'm looking at long term. Right now though, I need something quick and dirty to do what I want it to do. I'm using Chrome, and can use Greasemonkey if that's required.
The value to select by is "reject".
A snippet of code that's being used. If it's of any consequence, our forum is running Xenforo:
<li>
<label for="ctrl_users16667action_reject">
<input type="radio" name="users[16667][action]" value="reject" class="Disabler" id="ctrl_users16667action_reject">
Reject and delete with rejection reason:
</label>
<ul id="ctrl_users16667action_reject_Disabler" class="disablerList">
<li>
<input type="text" name="users[16667][reject_reason]" value="" size="45" placeholder="Optional" class="textCtrl" id="ctrl_users16667reject_reason">
</li>
</ul>
</li>
You're looking for a bookmarklet or a GreaseMonkey (or TamperMonkey or similar) script.
Re bookmarklets, you can use the javascript: pseuedo-protocol to run script on the page you're looking at from your bookmarks manager. Just make the URL in your bookmark:
javascript:(function() { /* ...your code here ...*/ })();
Because it has to be URI-encoded, you can find "bookmarklet generators" out there to handle that part for you.
Alternately, there are GreaseMonkey, TamperMonkey, and similar add-ons/extensions for browsers.
Then it's a trivial matter of selecting the relevant radio buttons:
$('input[type=radio][value="reject"]').prop('checked', true);
So if jQuery is already loaded on the page in question, you could use this as a bookmarklet:
javascript:(function(){$('input[type=radio][value="reject"]').prop('checked',true);})();
Use :radio to get radio buttons, then for filtering use attribute equals selector
var $ele = $(':radio[value="reject"]')
or filter()
var $ele = $(':radio').filter(function(){ return this.value == 'reject'; });
FYI : It's a jQuery solution and it only works if you are loaded jQuery library in the page.
Try this it will work
$("input:radio[value=reject]")
you have to give unique name to all radio buttons then you can select multiple radio buttons using javascript
you have to give same class to radio button
<input type="radio" name="radio[]" class="my_class" value="1" />
<input type="radio" name="radio[]" class="my_class" value="1" />
<input type="radio" name="radio[]" class="my_class" value="0" />
$(".my_class").each(function(){
if($(this).val() == "1"){
$(this).attr('checked','checked);
}
});
Thanks

JQuery Datepicker - displaying date in several fields

I'm having a list with several activities, and I want the jQuery Datepicker to display the date in a field in each row.
At the moment I'm able to display the date in the first row, but it seem like it only will display in one field with id="date" at a time.
The field in each row look like this:
<td><input id="date" name="date" /></td>
So, what I'm wondering: Is there a way I can display the date in every input field with id="date"?
ids must be unique on a page. Use a class instead to identify the elements.
The reason is that browsers maintain a fast-lookup dictionary of id value vs element and there is only one entry per value available in a dictionary.
To use a class
<td><input class="date" name="date" /></td>
and target with $(".date").datepicker(); instead of $('#date').datepicker()
JSFiddle: http://jsfiddle.net/TrueBlueAussie/D4AGz/485/
Following what #TrueBlueAussie said, you can do :
$( ".your_class" ).each(function() { //You access all your elements with the class "your_class"
//Do STG, you can access the current element with $(this)
});
As an alternative, taking your list as example
<ul id="listDisp">
<li>
Activity 1<input type="text" id="datePicker1"/>
</li>
<li>
Activity 2<input type="text" id="datePicker2"/>
</li>
<li>
Activity 3<input type="text" id="datePicker3"/>
</li>
</ul>
and your js would be
$("#listDisp").find('input').datepicker();
OR
$("#listDisp input").datepicker();
Here is FIDDLE

Different length of list item when its created dynamically with javascript

I made e a list of input (type = file) fields where the number of input fields can be dynamically altered by adding or removing fields.
So the list looks like this:
<ol>
<li><input type="file"><input type="text" placeholder="..."></li>
</ol>
See picture#1: http://i.stack.imgur.com/JG2dc.jpg
And when I click the '+' button a new list item is created with the same attributes but somehow it is longer than the first item which is coded in the html file.
See picture#2: http://i.stack.imgur.com/5neP3.jpg
I tried Firefox and Chrome, both the same result. Anyone know why this happens?
My guess is the fact you have a white space in the hard-coded code and the generated code you do not.
<ul>
<li><input type="file"> <input type="text" placeholder="Has Space"></li>
<li><input type="file"><input type="text" placeholder="No Space"></li>
</ul

How to prevent checking checkbox when added dynamically to a div?

so I've been struggling with this issue.
I want to add a checkbox into a div dynamically by clicking a button. Let's say I already have 2 checkboxes in the div, then I uncheck those 2. When I click the button, the checkboxes become 3 (which is what I want), but all those 3 will be checked. What I want is when I add a checkbox, the other checkbox(s)' checked state remain the same as before.
Here is my code (http://jsfiddle.net/gr2o47wt/4/):
HTML:
<div id="chkbox_container">
<input type="checkbox" checked>Check<br />
</div>
<input type="button" value="Add CheckBox" onClick="addCheckBox();">
JavaScript:
function addCheckBox() {
txt = "<input type=\"checkbox\" checked>Check<br />";
document.getElementById('chkbox_container').innerHTML += txt;
}
Thanks in advance for your answers! :)
You can use insertAdjacentHTML() rather than manipulating the innerHTML:
<input type="button" value="Add CheckBox"
onClick="document.getElementById('chkbox_container').insertAdjacentHTML('beforeend','<input type=\'checkbox\' checked=\'checked\' />Check<br />');">
JS Fiddle demo.
The problem you had was that the original HTML (as returned by innerHTML) is from the source of the page, not the DOM; and therefore the checked/unchecked nature of the checkbox originally in place was restored.
insertAdjacentHTML() simply adds the HTML string in the specified place ('beforeend' in this case).
More or less as an aside, it's worth trying, where possible, to keep your event-handling outside of your HTML elements; and binding those event-handlers in the JavaScript itself. This makes for somewhat easier maintainability, and would lead to code like the following:
// note that I gave the button an 'id' for simplicity:
var button = document.getElementById('addCheckboxes');
button.addEventListener('click', function () {
document.getElementById('chkbox_container').insertAdjacentHTML('beforeend', '<input type=\'checkbox\' checked=\'checked\' />Check<br />');
});
JS Fiddle demo.
Finally, some of your HTML is invalid (or at least erroneous), an <input /> is a void element, it can have no descendants; therefore it either has no closing tag (just: <input>) or self-closes (<input />).
Further, the text beside the checkboxes is a little misleading, usually with an HTML form the text beside the <input /> will focus that input; that's achieved by using a <label> element to associate the text with the control, for example:
<label><input type="checkbox" /> click</label>
JS Fiddle demo.
Or:
<input type="checkbox" id="inputElementID" />
<label for="inputElementID">click</label>
But this latter form does require the dynamic generation of ids (which is a little beyond the scope of this question).
References:
insertAdjacentHTML().

Ractive radio button binding - preserve name

I understand that to bind a ractive variable to a radio-button, the easiest way is to have
<input type="radio" name="{{myVar}}" value="1" checked>
in the template, but the curly brackets on the name persist into the html. Is there a clever way to get it to output
<input type="radio" name="myVar" value="1" checked>
in the html, so I don't have to alter the form-handling? I've tried some logic along the lines of
<input type="radio" name="myVar" value="1" {{#myVar==1}}checked{{/myVar==1}}
but that doesn't bind.
Also, less importantly, is there a way to bind it as a numeric value, as if I have
data:{myVar:1}
Then the button doesn't get checked?
Ractive adds the curly braces to input names to guard against the (highly unlikely) possibility of a conflict between name='{{myVar}}' and name='myVar' - no other reason. The binding is created when the element is rendered; what the name becomes after that is irrelevant.
So although there's no way to prevent the curly braces being added in the first place, you can certainly change them afterwards:
ractive.findAll('input[type="radio"]').forEach( function(input) {
input.name = input.name.replace('{{','').replace('}}','');
});
If you were creating a component with Ractive.extend() this could be part of the init() method, for example.
It shouldn't have a problem with numeric values, at least as of the last released version (0.3.9) and current development version (0.4.0). See this fiddle for an example: http://jsfiddle.net/rich_harris/7qQZ8/
Short answer: I don't think it's possible to do what you want.
Ractive handles radio buttons differently than simple HTML markup. It assumes that you're going to want to retrieve which radio button is set using a simple variable, and it relies on the name attribute to do that. Specifically, it expects you to set the name attribute to the same specific variable (e.g. "{{myVar}}") in all radio buttons in a group. It will then automatically set that variable to the value attribute of whichever individual radio button is selected.
For example, if you have the following code:
<label><input type='radio' name='{{myVar}}' value='1' checked> 1</label>
<label><input type='radio' name='{{myVar}}' value='2' > 2</label>
<label><input type='radio' name='{{myVar}}' value='3' > 3</label>
<p>The selected value is {{myVar}}.</p>
Then Ractive will automatically update the <p> with information on whatever radio button is selected.

Categories