I did a code in jquery and ajax with working very well in Safari, FF and IE8, but dont work in IE6.
He can 5 Group of forms editable, which should not be showing, but only the first works, the ajax is also not working in IE6 and IE7.
scintillation only put in 2, but is 5 how can you see the link below.
$(document).ready(function(){
var n=1;
$forms = $('#MemberCont'+n+' form');
$('#MemberCont'+n+' #toogle').hide();
$('#MemberCont'+n+' #hide').hide();
$('#MemberCont'+n+' a').bind('click', function(){
switch(this.id){
case 'c':
$('#MemberCont'+n+' #change').hide();
$('#MemberCont'+n+' #phone').hide();
$('#MemberCont'+n+' #hide').show();
$('#MemberCont'+n+' #toogle').show();
return false;
break;
case 'd':
$('#MemberCont'+n+' #change').show();
$('#MemberCont'+n+' #phone').show();
$('#MemberCont'+n+' #hide').hide();
$('#MemberCont'+n+' #toogle').hide();
return false;
break;
}
})
$forms.bind('submit', function(){
var $button = $('#MemberCont'+n+' button',this).attr('disabled',true);
var params = $(this.elements).serialize();
var self = this;
$.ajax({
type: 'POST',
url: this.action,
data: params,
beforeSend: function(){
$('#MemberCont'+n+' #phone').show();
$('#MemberCont'+n+' #hide').hide();
$('#MemberCont'+n+' #phone').html("Loading...");
},
success: function(txt){
$('#MemberCont'+n+' #top').show();
$('#MemberCont'+n+' #cadastro').hide ();
$('#MemberCont'+n+' #hide').hide ();
$('#MemberCont'+n+' #toogle').hide();
$('#MemberCont'+n+' #change').show();
$button.attr('disabled',false);
$('#MemberCont'+n+' #phone').html(txt);
self.reset();
},
error: function(txt){
$('#MemberCont'+n+' #phone').html(txt);
}
})
return false;
});
});
$(document).ready(function(){
var n=2;
$forms = $('#MemberCont'+n+' form');
$('#MemberCont'+n+' #toogle').hide();
$('#MemberCont'+n+' #hide').hide();
$('#MemberCont'+n+' a').bind('click', function(){
switch(this.id){
case 'c':
$('#MemberCont'+n+' #change').hide();
$('#MemberCont'+n+' #phone').hide();
$('#MemberCont'+n+' #hide').show();
$('#MemberCont'+n+' #toogle').show();
return false;
break;
case 'd':
$('#MemberCont'+n+' #change').show();
$('#MemberCont'+n+' #phone').show();
$('#MemberCont'+n+' #hide').hide();
$('#MemberCont'+n+' #toogle').hide();
return false;
break;
}
})
$forms.bind('submit', function(){
var $button = $('#MemberCont'+n+' button',this).attr('disabled',true);
var params = $(this.elements).serialize();
var self = this;
$.ajax({
type: 'POST',
url: this.action,
data: params,
beforeSend: function(){
$('#MemberCont'+n+' #phone').show();
$('#MemberCont'+n+' #hide').hide();
$('#MemberCont'+n+' #phone').html("Loading...");
},
success: function(txt){
$('#MemberCont'+n+' #top').show();
$('#MemberCont'+n+' #cadastro').hide();
$('#MemberCont'+n+' #hide').hide();
$('#MemberCont'+n+' #toogle').hide();
$('#MemberCont'+n+' #change').show();
$button.attr('disabled',false);
$('#MemberCont'+n+' #phone').html(txt);
self.reset();
},
error: function(txt){
$('#MemberCont'+n+' #phone').html(txt);
}
})
return false;
});
});
Html:
<div id="MemberCont1" style="float:left; display:block; margin: 15px 30px 10px 30px; width: 563px;">
<div id="ResultTitle" style="width:217px;">Business Name</div>
<div id="MemberPhone" style="width:340px;"><div id="hide"><a href="" id="d"><img src="../img/hide_btn.gif" width="65" height="25" alt="Hide" /></a></div><div id="phone"><?php echo $result['business']; ?></div></div>
<hr class="Line" />
<div id="toogle" style="font-size:12px; color:#FFF; ">
<div id="none" style="position:relative; float:left; display:inline; padding-bottom:2px;">Change business name</div>
<form action="personal_update.php" style="clear:left; margin:0 0 10px 0;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input name="dataform" type="text" class="FormMember" id="dataform" />
<input name="id_member" type="hidden" value="<?php echo $result['id_member']; ?>" />
<input name="table" type="hidden" value="business" /></td>
<td align="right"><input name="submit" type="image" value="submit" src="../img/submit_member.gif" /></td>
</tr>
</table>
</form>
</div><!--toogle-->
<div id="change"><a href="" id="c"><img src="../img/change_btn.gif" alt="Change" width="64" height="25" align="left" /></a></div>
</div><!--/*MemberCont*/-->
<div id="MemberCont2" style="float:left; display:block; margin: 15px 30px 10px 30px; width: 563px;">
<div id="ResultTitle" style="width:217px;">Contact Name</div>
<div id="MemberPhone" style="width:340px;"><div id="hide"><a href="" id="d"><img src="../img/hide_btn.gif" width="65" height="25" alt="Hide" /></a></div><div id="phone"><?php echo $result['contact']; ?></div></div>
<hr class="Line" />
<div id="toogle" style="font-size:12px; color:#FFF; ">
<div id="none" style="position:relative; float:left; display:inline; padding-bottom:2px;">Change contact name</div>
<form action="personal_update.php" style="clear:left; margin:0 0 10px 0;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input name="dataform" type="text" class="FormMember" id="dataform" />
<input name="id_member" type="hidden" value="<?php echo $result['id_member']; ?>" />
<input name="table" type="hidden" value="contact" /></td>
<td align="right"><input name="submit" type="image" value="submit" src="../img/submit_member.gif" /></td>
</tr>
</table>
</form>
</div><!--toogle-->
<div id="change"><a href="" id="c"><img src="../img/change_btn.gif" alt="Change" width="64" height="25" align="left" /></a></div>
</div><!--/*MemberCont*/-->
You can only have one ID anywhere in your HTML. Try using classes instead for things you have to repeat.
I suspect that, once they find the first ids you were looking for, they stop looking after that.
Here’s the W3’s description of ids and classes.