We Keep Coding

jquery placeholder form submit in ie

I use this function for supporting placeholder in internet explorer:
function placeHolder() {
$('[placeholder]').focus(function () {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function () {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur().parents('form').submit(function () {
$(this).find('[placeholder]').each(function () {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
}
I use :
.parents('form').submit(function () {
$(this).find('[placeholder]').each(function () {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
to prevent from submitting input with placeholder value,
but It doesn't work,I search for other solutions but all of them has problem with form submitting ...
can everyone help me? I must use placeholder in ie...
thank you

first of all detect that which browser is it. does it support placeholder?
for that use following code :
if (($.support.placeholder = (function () { var i = document.createElement('input'); return 'placeholder' in i; })()) == false) {
Then give value to those input box with $('selector').val('abc')
hope..this will work for you.

on click of button, use jquery submit instead of javascript submit
$('#myForm').attr('action', 'value');
$("#myForm").submit();

Placeholder code used for IE8 causing dropdown login field to lose focus

I am using the below placeholder code for IE8, however about 70% of the time when you move your mouse around in the dropdown login field it loses focus (the whole dropdown login field vanishes); through debugging - when I remove this code the problem goes away - I have found the cause of the problem is this code:
Edit: I have found it isn't caused by any particular placeholder code, but it IS caused by some part of the process as I have tried 3 separate placeholder plugins and it happens on all 3 of them; take them away and no problems.
$(document).ready(function() {
if ( !("placeholder" in document.createElement("input")) ) {
$("input[placeholder], textarea[placeholder]").each(function() {
var val = $(this).attr("placeholder");
if ( this.value == "" ) {
this.value = val;
}
$(this).focus(function() {
if ( this.value == val ) {
this.value = "";
}
}).blur(function() {
if ( $.trim(this.value) == "" ) {
this.value = val;
}
})
});
// Clear default placeholder values on form submit
$('form').submit(function() {
$(this).find("input[placeholder], textarea[placeholder]").each(function() {
if ( this.value == $(this).attr("placeholder") ) {
this.value = "";
}
});
});
}
});
You can view an example here: http://condorstudios.com/stuff/temp/so/header-sample.php
Edit: Not sure if it will help as jsfiddle doesn't work on IE8 and I can't test if the fiddle behaves badly in IE8 too, but here is the fiddle: http://jsfiddle.net/m8arw/7/
Any way to fix this?

Have you tried switching your event to show/hide dropdown to 'mouseenter' and 'mouseleave'?
It's a lot more reliable on old IE than 'focus' and 'blur' event. Also, bind the event directly on the 'dropdown' div is more preferable than on the 'input' element.
In short, please try change this part of your code like this.
$(function() {
var dropdown = $('div.login div.dropdown')
.on('mouseenter', function() {
dropdown.css('display', 'block');
})
.on('mouseleave', function() {
dropdown.removeAttr('style');
});
});

demo: http://so.devilmaycode.it/placeholder-code-used-for-ie8-causing-dropdown-login-field-to-lose-focus
$(function(){
$('#main_header .login li').hover(function(){
$(this).find('.dropdown').show();
},function(){
$(this).find('.dropdown').hide();
});
});
NOTE: i have also cleaned up and fixed some coding horror in your js code...

I use this code to implement placeholder on all browsers (it uses Modernizr to detect it):
Demo: http://jsfiddle.net/S3zQ9/
var placeholder_OnBlur = function () {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
};
var placeholder_OnFocus = function () {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
};
var placeholder_OnSubmit = function () {
$(this).find('[placeholder]').each(function () {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
});
};
var placeholder_OnLoad = function () {
if (!!$(this).attr('placeholder')) {
$(this).on('focus', placeholder_OnFocus);
$(this).on('blur', placeholder_OnBlur);
$(this).parents('form').on('submit', placeholder_OnSubmit);
$(this).blur();
}
};
if (!Modernizr.input.placeholder) {
$('[placeholder]').each(placeholder_OnLoad);
}
Don't have IE8 to test it, but it should work.

Disable submit if checkbox value has not changed from initial page-render

I have a script that does not allow submit until the form value is changed from the initial page-render.
Everything works, except for the radio buttons. When I try to check or uncheck them, they have no effect on the button.
Anyone see what is wrong? (I want to do a check to see if one or more of the checkboxes has changed from the initial page-render)
$(document).ready(function () {
var button = $('#submit-data');
$('input, select, checkbox').each(function () {
$(this).data('val', $(this).val());
});
$('input, select, checkbox').bind('keyup change blur', function () {
var changed = false;
$('input, select, checkbox').each(function () {
if ($(this).val() != $(this).data('val')) {
changed = true;
}
});
$('#submit-data').prop('disabled', !changed);
});
});
Edit:
Checkbox html:
<input checked="checked" id="contactemail" name="contactemail" type="checkbox" />
<input id="contactsms" name="contactsms" type="checkbox" />
<input checked="checked" id="contactphone" name="contactphone" type="checkbox" />
Edit 2:
New code from answer from Marikkani Chelladurai. It is almost working, but it only works if the checkbox is not checked initially, and then checked by the user. Link to JSFiddle
$(document).ready(function() {
var button = $('#submit-data');
$('input, select').each(function () {
$(this).data('val', $(this).val());
});
$('input[type=radio], input[type=checkbox]').each(function (e) {
$(this).data('val', $(this).attr('checked'));
}); //For radio buttons
$('input, select').bind('keyup change blur', function (e) {
var changed = false;
if (e.target.type == "radio" || e.target.type == "checkbox" ) {
if($(this).data('val') != $(this).attr('checked')){
changed = true;
}
} else {
if ($(this).val() != $(this).data('val')) {
changed = true;
}
}
$('#submit-data').prop('disabled', !changed);
});
});
Link to JSFiddle

You can handle radio buttons and checkboxes by a different way as follows
$('input, select').not('[type=checkbox]').each(function () {
$(this).data('val', $(this).val());
});
$('input[type=radio], input[type=checkbox]').each(function (e) {
$(this).data('val', $(this).is(':checked'));
}); //For radio buttons
$('input, select').bind('keyup change', function (e) {
var changed = false;
if (e.target.type == "radio" || e.target.type == "checkbox" ) {
console.log($(this).is(':checked'));
console.log($(this).data('val'));
if($(this).data('val') != $(this).is(':checked')){
changed = true;
}
} else {
if ($(this).val() != $(this).data('val')) {
changed = true;
}
}

As the comments say, radio buttons use the checked property. Pass in event to your each and check the target.type:
$('input, select, checkbox').each(function (e) {
if (e.target.type == "radio") {
//check radio
} else {
if ($(this).val() != $(this).data('val')) {
changed = true;
}
}
});

How to edit and update <td> value when double click Jquery

I have written my code such that when user double clicks on a <td> element I am:
appending am <input> of type="text"
adding a value to it and update it if the user clicks on enter
Here is the my problem:
If user double clicks on <td> and clicks on another <td> without pressing enter, I need the initial <td>'s <input> to be reset to previous value.
// Selecting the table <th> odd elements
$("#div table td").dblclick(function(){
var currentEle = $(this);
var value = $(this).html();
updateVal(currentEle, value);
});
function updateVal(currentEle, value)
{
$(currentEle).html('<input class="thVal" type="text" value="'+value+'" />');
$(".thVal").focus();
$(".thVal").keyup(function(event){
if(event.keyCode == 13){
$(currentEle).html($(".thVal").val().trim());
}
});
$('body').not(".thVal").click(function(){
if(('.thVal').length != 0)
{
$(currentEle).html($(".thVal").val().trim());
}
});
}
Please help me.
I don't want to use jeditable datatable.

Here in your case you need .stopPropagation(): http://jsfiddle.net/jFycy/
$(function () {
$("#div table td").dblclick(function (e) {
e.stopPropagation(); //<-------stop the bubbling of the event here
var currentEle = $(this);
var value = $(this).html();
updateVal(currentEle, value);
});
});
function updateVal(currentEle, value) {
$(currentEle).html('<input class="thVal" type="text" value="' + value + '" />');
$(".thVal").focus();
$(".thVal").keyup(function (event) {
if (event.keyCode == 13) {
$(currentEle).html($(".thVal").val().trim());
}
});
$(document).click(function () { // you can use $('html')
$(currentEle).html($(".thVal").val().trim());
});
}
Instead doing click on body do the event on document or html which is the parent elem of all others elems.

Fixed the last answer. by checking who triggered the event i can prevent the double click issue on the input.
Also, with the .off('click') you dont have the problem where every td you updated before changes with the last one.
$(function () {
$(".inner").dblclick(function (e) {
if($(event.target).attr('class')!="thVal")
{
e.stopPropagation();
var currentEle = $(this);
var value = $(this).html();
updateVal(currentEle, value);
}
});
});
function updateVal(currentEle, value) {
$(document).off('click');
$(currentEle).html('<input class="thVal" type="text" value="' + value + '" />');
$(".thVal").focus();
$(".thVal").keyup(function (event) {
if (event.keyCode == 13) {
$(currentEle).html($(".thVal").val());
}
});
$(document).click(function () {
if($(event.target).attr('class')!="thVal")
{
$(currentEle).html($(".thVal").val());
$(document).off('click');
}
});
}

I know its an old topic... but the answer that posted here didnt worked well because of the click event on the input, I took the answer and modified it
$(".daily-signals > tbody > tr > td").dblclick(function (e) {
e.stopPropagation(); //<-------stop the bubbling of the event here
var currentEle = $(this);
var value = $(this).html();
console.log('fire!');
updateVal(currentEle, value);
});
function updateVal(currentEle, value) {
$(currentEle).html('<input class="thVal" type="text" value="' + value + '" />');
var thVal = $(".thVal");
thVal.focus();
thVal.keyup(function (event) {
if (event.keyCode == 13) {
$(currentEle).html(thVal.val());
save(thVal.val());
}
});
thVal.focusout(function () {
$(currentEle).html(thVal.val().trim());
return save(thVal.val()); // <---- Added missing semi-colon
});
}
function save(value) {
console.log(value);
}
the save function will make the ajax request

Placeholders in IE

I am using this script : http://www.morethannothing.co.uk/wp-content/uploads/2010/01/placeholder.js to get some placeholders into IE. Works a treat for input types of text and password.
But just does'nt seem to load for Text Areas. Does anyone know of a line of code I could add to that, or maybes a little bit of jQuery or JavaScript to execute to get it to load.
Thanks in advance.

instead of $(':text[placeholder],:password[placeholder]') use $(':text[placeholder],:password[placeholder],textarea[placeholder]')

For all inputs and textarea:
$('input[placeholder],textarea[placeholder]')

<script type="text/javascript">
if(navigator.userAgent.indexOf("MSIE") > 0 )
{
$(function()
{
var input = document.createElement("input");
if(('placeholder' in input) == false)
{
$('[placeholder]').focus(function()
{
var i = $(this);
if(i.val() == i.attr('placeholder'))
{
i.val('').removeClass('placeholder');
if(i.hasClass('password'))
{
i.removeClass('password'); this.type='password';
}
}
}).blur(function()
{
var i = $(this);
if(i.val() == '' || i.val() == i.attr('placeholder'))
{
if(this.type=='password')
{
i.addClass('password'); this.type='text';
}
i.addClass('placeholder').val(i.attr('placeholder'));
}
}).blur().parents('form').submit(function()
{
$(this).find('[placeholder]').each(function()
{
var i = $(this);
if(i.val() == i.attr('placeholder')) i.val('');
});
});
}
});
}
</script>