Develop Reference

How to inspect any data change in one composed popup

I have one notification on the web, when I click on it, it will open new popup, the save button is default disable, this popup is one kind of window that composed from many elements (list of radio check boxes of many id of goods have just imported to my shop, from that I can choose one or multiple id to attach them to one shelf, and I can do the second time to attach other/others to another shelf, the name of shelf will display under the name of kind of ids...and many others elements).
Question is, how can I inspect that there is any data change (there is any id already attached or cancel attach) in order to enable the button again by Javascript.
.
Thank you!

if what you want is to "enable" the button just add the code to the onClick event of the "list radio check" controls, something like:
<form action="">
<input type="radio" onclick="activate()" name="good1" value="1">12345746<br/>
<input type="radio" onclick="activate()" name="good2" value="2">456548765<br/>
<input type="radio" onclick="activate()" name="good3" value="3">54654654546<br/>
<button id="saveButton" disable> save</button>
</form>
<script>
function activate(){
document.getElementById("saveButton").disabled = false;
//the code that enable your button, what ever serve you better...
</script>
or add an event listener to the click event on all the radio buttons, which will do the same (because is "the same")
let rb = document.getElementsByTagName("input");
for(let idx=0; idx<rb.length; idx++){
if(rb[idx].getAttribute("type") == "radio"){
rb[idx].addEventListener("click", function(){
document.getElementById("saveButton").disabled = false;
}
}
}
which again, do the same ;)
Hope it helps.

on focus display just one element

I have a simple problem:
I have a form:
<form>
<textarea type="text" name="comment_text" class="comment-input"></textarea>
<div class="remaining"></div>
<input type="submit" class="button comment-button" />
</form>
Now when the textarea (.comment-text) is focused I want the submit button (.comment-button) to be displayed using jQuery.
$(document).ready(function() {
//display the comment button when the comment textarea is focused
$('.comment-input').focus(function() {
$('.comment-button').fadeIn(800);
});
});
This works fine. The problem is that I have the form in a foreach loop and when I focus one textarea all the buttons get selected. So I was trying to do it with the 'this' keyword something like this:
$(document).ready(function() {
//display the comment button when the comment textarea is focused
$('.comment-input').focus(function() {
$(this).find('.comment-button').fadeIn(800);
});
});
But that did not work. After trying things out for way too long now, I just decided that I do not speak sufficient jQuery to master this simple task and turned to somebody in the know for help!
Thank you in advance!

That is because the button is a sibling element of the textarea
$(this).siblings('.comment-button').fadeIn(800);

find will try to find a child element in the textarea so it will never find your button:
you can use siblings
$(document).ready(function() {
//display the comment button when the comment textarea is focused
$('.comment-input').focus(function() {
$(this).siblings('.comment-button').fadeIn(800);
});
});

Sibling is the solution for this problem , but no more will works if you wrap the submit button in any wrapper(div or span) .
This will work safer -
$(this).closest("form").find('.comment-button').fadeIn(800);

There are others ways to get the correct element other than these 3 answers,
$(this).parent().find('.comment-button').fadeIn(800);
or
$(this).next().next().fadeIn(800);
or
$(this).nextUntil('.comment-button').next().fadeIn(800);

trouble resetting form through javascript or jquery

I have the below jQuery function which is called when ever I click a button on my page. This button is supposed to reset the form and reload a fresh page.
function Create(txt) {
if (txt="createUser") {
document.forms[0].reset();
$('#myform').each(function() {
this.reset();
});
$('input[name=method]').val(txt);
document.forms[0].submit();
}
}
But for some reason, it does not go to this.reset() at all and I see all the form values in my action class. How should I solve this?
Below is how the button is defined.
<input type="button" value="Create" class="btn" onclick="Create('createUser');">
edit: Ok guys.. i know how input type="reset" works and i have another button in my page doing the same.. I have a create user form where i can search and see an existing user details or fill the form and create a new user. if i search for a user and then click on create to create another user, it sends a new request to the server and reloads the page.. but in the action class.. the bean has not been reset.. and i get all the values back on the page. hence ..i want to reset the form...without using the reset button...
I selected John's answer .. made a slight modification and below is the final function i used.
function Create(txt){
if (txt="createUser"){
var $form = $('#myform');
$form.find(':input').not(':button,:submit, :reset, :hidden').val('').removeAttr('checked').removeAttr('selected'); // Clear all inputs
$form.find('input[name=method]').val(txt);
$form.submit();
}
}

Instead of java script, you can have html code,
<input type="reset" value="Reset">

As others have pointed out, you have = where you should have ==, but that means the if-statement is always true. It is not, however, the reason you "see all the form values in my action class".
I think the problem may be that you are misinterpreting what the reset() method does. It does not clear all the input values; instead, it resets them to their original values (i.e., the values in the "value" attributes).
You may want to clear them yourself, rather than use the reset() method.
function Create(txt) {
if (txt == 'createUser') {
var $form = $('#myform');
// Clear form values
$form.find(':input:not(:button,:submit,:reset,:checkbox,:radio,:hidden)').val('');
$form.find('input:checkbox,input:radio)').prop('checked', false);
$form.find('input[name=method]').val(txt);
$form.submit();
}
}
Note: The :input selector matches all input, textarea, select and button elements.
Note: It appears the OP does not want hidden inputs to be cleared, but does want checkboxes and radio buttons cleared.

You seem to be setting a variable here -
if (txt="createUser"){...
Change it to -
if (txt == "createUser") {..
That way you're doing a comparison, instead of setting a variable.

the button does not have type="reset" so either change it to reset or use
document.getElementById("myform").reset(); instead of
document.forms[0].reset();
$('#myform').each(function(){
this.reset();
});

I would do like this:
$(document).ready(function() {
$("#createUserButton").on("click", function() {
var form = $("#myForm")[0];
form.reset();
$("input[name=method]").val("CreateUser");
form.submit();
}
});
And your button becomes:
<input type="button" value="Create" class="btn" id="createUserButton">
I'd suggest you to place an id attribute as well in your input text, something like:
<input type="text" name="method" id="methodName" />
And then you could reference it by id which is faster than by name, like this:
$("#methodName").val("CreateUser");
Your code was wrong, in your if you should've used == or === instead of just = and your form should've just have called reset method. No need to iterate over an id using each, even because an ID have to be unique in an HTML page.
Here's a workin fiddle, just type something in the first input to see it happening.

Issue with jQuery :not selector

I have a search icon that when hovered over reveals an input text search box. I'm using jQuery to add a class to the input to reveal the text box when the search icon is hovered over. That is working fine.
The next function is that if the user decides not to click in the search box and elsewhere on the page, the search box goes away. That's working fine too.
The only remaining issue is that if the user clicks in the search box, it also goes away which I don't want.
My HTML:
<input type="text" class="form-text text-hidden" title="Enter the terms you wish to search for." value="" size="15" id="edit-search-block-form-1" name="search_block_form" maxlength="128">
<input type="image" src="http://d3j5vwomefv46c.cloudfront.net/photos/large/802431483.png?1377197793" class="form-submit search-hover" alt="Search" id="edit-submit">
My jQuery:
$(".search-hover").hover(function () {
$('.text-hidden').addClass('hover');
});
// Now remove the class in case of a false start or the user decides to do something else.
$("body:not(.text-hidden)").click(function(){
//alert('The body click is working!!!');
$('.form-text.text-hidden').removeClass('hover');
});
Note that I'm attempting to use the :not selector to indicate to only remove the hover class if clicked anywhere but the search box but it's not working.
I've got a fiddle here

Try
jQuery(function(){
$(".search-hover").hover(function () {
$('.text-hidden').addClass('hover');
});
// Now remove the class in case of a false start or the user decides to do something else.
$("body").click(function(e){
//alert('The body click is working!!!');
if($(e.target).closest('.text-hidden').length == 0)
$('.form-text.text-hidden').removeClass('hover');
});
})
Demo: Fiddle

The problem is that when you click the input, the body's click event still arises.
There's a simple solution. Just stop the event's propagation when the input's being clicked.
jsFiddle Demo
$(".form-text.text-hidden").click(function(e) {
e.stopPropagation();
});
P.S - Notice that I've removed the :not selector from the JS. It has become unnecessary.

jQuery checkbox script as facebook invite friends window

I'm looking for a jQuery script or idea on how to create a similar window to the one facebook uses when you invite friends to an event.
So basically a dialog window that has a list of people inside and when you select your friends it changes the background color and checks the checkbox of that friend so when they submit the form I can collect the data.
Thanks,

How about something like this? Oversimplified, but this should get the point across...
Markup:
<div class="member">
<span class="member_name">Mike</span>
<input type="checkbox" class="member_checkbox" />
<input type="hidden" value="002" class="member_id" />
</div>
Member Select javascript:
// .member-selected would set a new background color
$(".member").click(function() {
$(this).addClass("member-selected");
// Find the checkbox
var checkbox = $(this).find('.member_checkbox');
// If the checkbox is checked, uncheck it, and
// if it's not, then check it
if( $(checkbox).attr("checked") != true) {
$(checkbox).attr("checked", true);
} else {
$(checkbox).attr("checked" false);
}
});
Form submission javascript:
// Create an array to hold ID numbers to submit
var add_members = [];
$(".member").each(function() {
if( $(this).find('.member_checkbox').is(":checked") ) {
add_members.push( $(this).find('.member_id').val() );
}
});
You would end up with an array of member IDs that you could then post using AJAX.
** EDIT **
In the click function (see above) there should be additional lines that check or uncheck the checkbox based on its current state.

EDIT: I made a JSBIN out of Mike's suggestion. May help you solve your problem. When a checkbox is clicked its class is alerted then changed (member-selected is added or removed, I'm using toggleClass()) and then its class is alerted again. Check it out: jsbin.com/uxuxu3/4/edit
I don't know how facebook's 'invite friends to an event' window looks these days, but I believe you will find Facebox a similar modal. Check Facebox and other, perhaps even better options, at 19 jQuery Modal Boxes to improve your UI.