|
JavaScript - Form Doesn't Stop, Just Submits Right After Validateddfield. @firefox Only
hi dears,
I'm trying to do simple form validation. But the form submits right after validated! at FireFox only. as i tried it at IE it works fine. condition: if return false the event must be stop, killed submitting the form value's. my form is: Code: <form action="index.php" id="cat_form" method="post" name="cat_form" onsubmit="return cats();"> my js is: Code: function cats()
{
if (document.cat_form.txttitle.value=="")
{
alert ("Sorry, Don't keep it blank!!")
cat_form.txttitle.focus();
return false;
}
else if (document.farticle.txtperpg.value==0)
{
alert("Sorry, Value must be grater than Zero");
cat_form.txtperpg.focus();
return false;
}
else
{
return true;
}
}
Any Idea ? Similar TutorialsHi all, Maybe I'm missing something simple here, but for some reason this form validates in both IE and Firefox, but it doesn't submit in IE. Little yellow exclamation icon appears on the status bar on form submit. Any help would be great. Thanks! Code:
/*
Creation Date: Dec 8, 2009
Description:
*/
function validate_school_form() {
var valid = false;
var error = "";
if (element("fname").value.length < 1 ){
error += "Please enter your first name.<br/>";
element("fname").style.border = "1px solid red";
} else {
element("fname").style.border = "";
}
if ( element("lname").value.length < 1 ){
error += "Please enter your last name.<br/>";
element("lname").style.border = "1px solid red";
} else {
element("lname").style.border = "";
}
if ( !validate_email_address(element("email").value) ){
error += "Please enter a valid email address.<br/>";
element("email").style.border = "1px solid red";
} else {
element("email").style.border = "";
}
if ( element("addr").value.length < 1 ){
error += "Please enter your street address.<br/>";
element("addr").style.border = "1px solid red";
} else {
element("addr").style.border = "";
}
if ( element("zip").value.length != 5 || isNaN(element("zip").value) ){
error += "A zip code must be 5 digits.<br/>";
element("zip").style.border = "1px solid red";
} else {
element("zip").style.border = "";
}
if ( element("city").value.length < 1 ){
error += "Please enter your city.<br/>";
element("city").style.border = "1px solid red";
} else {
element("city").style.border = "";
}
if ( element("state").value.length < 1 ){
error += "Please enter your state.<br/>";
element("state").style.border = "1px solid red";
} else {
element("state").style.border = "";
}
if (( element("phone1").value.length != 3 ) || ( element("phone2").value.length != 3 ) || ( element("phone3").value.length < 4 ) ){
error += "Please enter a valid phone number.<br/>";
element("phone1").style.border = "1px solid red";
element("phone2").style.border = "1px solid red";
element("phone3").style.border = "1px solid red";
} else {
element("phone1").style.border = "";
element("phone2").style.border = "";
element("phone3").style.border = "";
}
if ( element("gender").selectedIndex == 0 ){
error += "Please enter your gender.<br/>";
element("gender").style.border = "1px solid red";
} else {
element("gender").style.border = "";
}
if ( element("birth_day").selectedIndex == 0 ){
error += "Please enter a valid day of birth.<br/>";
element("birth_day").style.border = "1px solid red";
} else {
element("birth_day").style.border = "";
}
if ( element("birth_month").selectedIndex == 0 ){
error += "Please enter a valid month of birth.<br/>";
element("birth_month").style.border = "1px solid red";
} else {
element("birth_month").style.border = "";
}
if ( element("birth_year").selectedIndex == 0 ){
error += "Please enter a valid year of birth.<br/>";
element("birth_year").style.border = "1px solid red";
} else {
element("birth_year").style.border = "";
}
if ( element("program_type").selectedIndex == 0 ){
error += "Please enter your program of interest.<br/>";
element("program_type").style.border = "1px solid red";
} else {
element("program_type").style.border = "";
}
if ( element("level_of_education").selectedIndex == 0 ){
error += "Please enter your level of education.<br/>";
element("level_of_education").style.border = "1px solid red";
} else {
element("level_of_education").style.border = "";
}
if ( error != "" ){
alert('Error! Please fix the marked fields for missing or wrong information.');
return false;
} else {
var d = new Date();
var o = element("birth_year");
var birth_year = o.options[o.selectedIndex].value;
if (birth_year <= (d.getFullYear()-22)) {
submit_school_form();
} else {
goToStep3();
}
}
}
function submit_school_form() {
var o = "";
var text = "http://xxxxxx.com/engine/directpost?";
//var text = "../response2.php?";
text += "CID=" + encodeURIComponent(element("CID"));
text += "first=" + encodeURIComponent(element("fname").value);
text += "&last=" + encodeURIComponent(element("lname").value);
text += "&mail_addr_1=" + encodeURIComponent(element("addr").value);
text += "&mail_city=" + encodeURIComponent(element("city").value);
text += "&mail_stateprov=" + encodeURIComponent(element("state").value);
text += "&mail_postalcode=" + encodeURIComponent(element("zip").value);
text += "&email=" + encodeURIComponent(element("email").value);
var phone = element("phone1").value + element("phone2").value + element("phone3").value
text += "&home_phone=" + encodeURIComponent(phone);
o = element("birth_day");
var birth_day = o.options[o.selectedIndex].value;
text += "&bdate_day=" + encodeURIComponent(birth_day);
o = element("birth_month");
var birth_month = o.options[o.selectedIndex].value;
text += "&bdate_month=" + encodeURIComponent(birth_month);
o = element("birth_year");
var birth_year = o.options[o.selectedIndex].value;
text += "&bdate_year=" + encodeURIComponent(birth_year);
o = element("gender");
var gender = o.options[o.selectedIndex].value
text += "&gender=" + encodeURIComponent(gender);
o = element("program_type");
var program_type = o.options[o.selectedIndex].value
text += "&program_type=" + encodeURIComponent(program_type);
o = element("level_of_education");
var level_of_education = o.options[o.selectedIndex].value
text += "&level_of_education=" + encodeURIComponent(level_of_education);
text += "&user_ip=" + encodeURIComponent(element("user_ip").value);
text += "×tamp=" + encodeURIComponent(element("timestamp").value);
text += "&domain=" + encodeURIComponent(element("domain").value);
var complete = sendData(text);
// if (complete) {
goToStep3();
// }
}
function goToStep3(){
window.location = "redirect3.php";
}
function GetXmlHttpObject() {
var xmlHttp=null;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e) {
// Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
alert("Your webbrowser does not support AJAX");
return false;
}
}
}
return xmlHttp;
}
function sendData(text) {
xmlHttp=GetXmlHttpObject();
var url = 'http://xxxxxx.com/engine/directpost?'+text;
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
return true;
} else {
return false;
}
}
}
xmlHttp.open('GET', url, true);
xmlHttp.send(null);
}
THanks! Hello all, I have a multistep jquery form that validates user input and then should send me an email. Problem is, right now, I can only get it to validate the first page, then it sends the email before the rest of the pages are viewed. I'm just trying to delay the submission of the form until the "submit_fourth" button is pressed. I've got $25 via paypal for the one who sticks with this one for long enough to come up with a workable solution. Here is my code... I know it's a lot, but I wasn't sure how much would be helpful. HTML code is in the second post in this thread (it was just too much to fit in one go). Cheers! -Dave The Javascript: Code: $(function validateForm(){
//original field values
var field_values = {
//id : value
'name' : 'your name',
'email' : 'email',
'phone' : '(555) 123-4567',
'other' : 'other',
'detail' : 'project overview'
};
//inputfocus
$('input#name').inputfocus({ value: field_values['name'] });
$('input#email').inputfocus({ value: field_values['email'] });
$('input#phone').inputfocus({ value: field_values['phone'] });
$('input#other').inputfocus({ value: field_values['other'] });
$('input#detail').inputfocus({ value: field_values['detail'] });
//reset progress bar
$('#progress').css('width','0');
$('#progress_text').html('0% Complete');
//first_step
$('form').submit(function(){ });
$('#submit_first').click(function(){
//remove classes
$('#first_step input').removeClass('error').removeClass('valid');
//ckeck if inputs aren't empty
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
var fields1 = $('#first_step input[type=text]');
var error = 0;
fields1.each(function(){
var value = $(this).val();
if( value.length<5 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) {
$(this).addClass('error');
$(this).effect("shake", { times:3 }, 50);
error++;
} else {
$(this).addClass('valid');
}
});
if(error <= 0) {
//update progress bar
$('#progress_text').html('25% Complete');
$('#progress').css('width','85px');
//slide steps
$('#first_step').slideUp();
$('#second_step').slideDown();
} else
return false;
});
$('#back_second').click(function(){
//update progress bar
$('#progress_text').html('0% Complete');
$('#progress').css('width','0px');
//slide steps
$('#second_step').slideUp();
$('#first_step').slideDown();
});
$('#submit_second').click(function(){
//remove classes
$('#second_step input').removeClass('error').removeClass('valid');
var fields2 = $('#second_step input[textarea]');
var error = 0;
fields2.each(function(){
var value = $(this).val();
if( value.length<5 || value==field_values[$(this).attr('id')] ) {
$(this).addClass('error');
$(this).effect("shake", { times:3 }, 50);
error++;
} else {
$(this).addClass('valid');
}
});
if(error <= 0) {
//update progress bar
$('#progress_text').html('50% Complete');
$('#progress').css('width','170px');
//slide steps
$('#second_step').slideUp();
$('#third_step').slideDown();
} else
return false;
});
$('#back_third').click(function(){
//update progress bar
$('#progress_text').html('25% Complete');
$('#progress').css('width','85px');
//slide steps
$('#third_step').slideUp();
$('#second_step').slideDown();
});
$('#submit_third').click(function(){
//update progress bar
$('#progress_text').html('75% Complete');
$('#progress').css('width','255px');
//prepare the fourth step
var fields3 = new Array(
$('#time').val(),
$('#budget').val()
);
var fields2half = new Array(
$('#detail').val()
);
var fields2 = new Array(
$('#other').val(),
$('#pages').val()
);
var fields1 = new Array(
$('#name').val(),
$('#email').val(),
$('#phone').val(),
$('#contact').val(),
$('#url').val()
);
var tr = $('#fourth_step tr');
tr.each(function(){
//alert( fields[$(this).index()] )
$(this).children('.1 td:nth-child(2)').html(fields1[$(this).index()]);
$(this).children('.2 td:nth-child(2)').html(fields2[$(this).index()]);
$(this).children('.2half td:nth-child(2)').html(fields2half[$(this).index()]);
$(this).children('.3 td:nth-child(2)').html(fields3[$(this).index()]);
});
//slide steps
$('#third_step').slideUp();
$('#fourth_step').slideDown();
});
$('#back_fourth').click(function(){
//update progress bar
$('#progress_text').html('50% Complete');
$('#progress').css('width','170px');
//slide steps
$('#fourth_step').slideUp();
$('#third_step').slideDown();
});
$('#submit_fourth').click(function(){
//send information to server
//update progress bar
$('#progress_text').html('100% Complete');
$('#progress').css('width','339px');
//slide steps
$('#fifth_step').slideUp();
$('#fourth_step').slideDown();
if(error <= 0) {
return true
}
else{
return false
}
});
});
Hello, I am using a simple form to submit values to another website. This has been working without any problems. I now have added a second form to the page. I have separated the text boxes and duplicated the information from one form to another. The problem is, when I click on the link that use to submit the information, nothing happens. Before the addition of the new form a new window would open with the search that I had submitted. Am I missing something to point to one form or the other? The following is the code that i am using in the form that no longer submits. Thanks in advance for any help. Code: <script language="javascript">
function submitPostLink()
{
document.postlink.submit();
}
</script>
<form action="http://wcca.wicourts.gov/simpleCaseSearch.do;jsessionid=61EFDA464D938EB53461CABB6EFC7D3B.renderHTTP/1.1" name="postlink" method="post" target="_blank">
<input type="hidden" name="partyName.lastName" id="ccapLAST">
<input type="hidden" name="partyName.firstName" id="ccapFIRST">
<input type="hidden" name="partyName.middleName" id="ccapMIDDLE">
<input type="hidden" name="partyName.showMissingMiddleNames" value="true">
<input type="hidden" name="recordsPerPage" value="25"><br>
<a onclick="submitPostLink()" href="#" a>SEARCH</a>
</form>
I have a form, on which I have multiple checkboxes and text fields. Now I want that the form can't submit untill at least 1 checkbox is selected or a text field is filled. But even with the javascript validation I already have the form still submits. Any help on this one? Here is the whole page on which the checkboxes, text fields and javascript validation a PHP Code: <script type="text/javascript" language="javascript"> function checkCheckBoxes() { if (document.form2.nbs_vmb[].checked == false) { alert ('Select at least checkbox to make a selection!'); return false; } else { return true; } </script> <div id="left2"> <div id="left_02"> <div id="toppage"> <h3><?php echo $tcm_label[59]; ?></h3> </div> <div style="margin:0px 1px 0px 1px"> <form id="form_ins_contact" onsubmit="return checkCheckBoxes();" name="form2" action="test.php" method="POST" > <table width="680" height="350" border="0" align="center" cellpadding="0" cellspacing="2"> <tr> <td width="160" align="right"><strong><?php echo $tcm_label[36]; ?></strong></td> <td class="td_no_border"><input name="nbs_vmb[]" type="checkbox" value="nbs_lid_vmb" /></td> <td class="td_no_border2"></td> <td class="td_no_border2"></td> </tr> <tr> <td width="160" align="right"><strong><?php echo $tcm_label[37]; ?></strong></td> <td class="td_no_border"><input name="nbs_vmb[]" type="checkbox" value="nbs_selfburns" /></td> <td align="right"><strong><?php echo $tcm_label[29]; ?></strong></td> <td class="td_no_border"><input name="nbs_zip" type="text" id="nbs_zip" maxlength="6" size="6" /></td> </tr> <tr> <td width="160" align="right"><strong><?php echo $tcm_label[40]; ?></strong></td> <td class="td_no_border"><input name="nbs_vmb[]" type="checkbox" value="nbs_profrelatie" /></td> <td align="right"><strong><?php echo $tcm_label[60]; ?></strong></td> <td class="td_no_border"><input name="nbs_contact_year" type="text" id="nbs_contact_year" maxlength="4" size="4" /></td> </tr> <tr> <td width="160" align="right"><strong><?php echo $tcm_label[42]; ?></strong></td> <td class="td_no_border"><input name="nbs_vmb[]" type="checkbox" value="nbs_revalinet" /></td> <td align="right"><strong><?php echo $tcm_label[38]; ?></strong></td> <td class="td_no_border" width="194"><input name="nbs_year" type="text" id="nbs_year" maxlength="4" size="4" /></td> </tr> <tr> <td align="right"><strong><?php echo $tcm_label[44]; ?></strong></td> <td class="td_no_border"><input name="nbs_vmb[]" type="checkbox" value="nbs_juridischehulp" /></td> <td align="right"><strong><?php echo $tcm_label[41]; ?></strong></td> <td class="td_no_border" width="194"><input name="nbs_vmb[]" type="checkbox" value="nbs_psychonet" /></td> </tr> <tr> <td align="right"><strong><?php echo $tcm_label[45]; ?></strong></td> <td class="td_no_border"><input name="nbs_vmb[]" type="checkbox" value="nbs_nomail" /></td> <td align="right"><strong><?php echo $tcm_label[43]; ?></strong></td> <td class="td_no_border"><input name="nbs_vmb[]" type="checkbox" value="nbs_reintegranet" /></td> </tr> <tr> <td align="right" class="td_no_border2"> </td> <td class="td_no_border2"> </td> <td></td> <td class="td_no_border2"><img src="../images/intra icon.png" width="96" height="96" /></td> </tr> </table> <table width="281" border="0" align="center" cellpadding="0" cellspacing="2"> <tr> <td align="center" class="td_no_border2" nowrap="nowrap"> <input type="submit" name="submit" class="buttons" value="Export Selecties" /> </td> </tr> </table> </form> </div> </div> </div> Thanks in advanced. Heya, I wrote the following page in a day or two (please don't mind the layout). Everything seems to work excellent, apart from in Firefox (FF) in which it doesn't seem to work at all. None of the other browsers have any trouble with it. I'm pretty new to Javascript (everything you see in the source code is pretty much all I know) and I have absolutely no idea why it doesn't work in Firefox. The page in question could be found [link has been removed]. It's all there is to it. So yeah, how to actually make this work in FF? Thanks a whole bunch in advance! Much appreciated. i am using the following code to set the height of the div based on its contents. it works fine in IE but not in mozilla. Do anybody help me to solve this? <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript"> function fnCheckScroll() { document.getElementById('btnCheck').innerHTML = "The value of scrollHeight is: " + oID_1.scrollHeight + "px"; } function fnSetHeight() { oID_1.style.height = oID_1.scrollHeight; return false; } </script> </head> <body> <form id="form1" runat="server"> <div> <h1>scrollHeight Property Sample</h1> <p>This sample demonstrates the use of the <b>scrollHeight</b> property to retrieve the height of the viewable content.</p> <div id="oID_1" style="overflow: scroll; height: 200px; width: 150px; text-align: left"> The <b>scrollHeight</b> property is read-only, allowing you to obtain the actual height of the scrollable content. Even though the height of this <b>div</b> is 200 pixels, the height inside the scrolling text box might be less, since the wrapped text may not use the entire area within the object. The <b>scrollHeight</b> dimension may be useful for a variety of reasons; for example, the height of the <b>div</b> could be set to the <b>scrollHeight</b> to conserve horizontal space while respecting the set width as a maximum. </div> <p><button id="btnCheck" onclick="fnCheckScroll()">Check scrollHeight </button></p> <p><button id="btnSetIt" onclick="return(fnSetHeight());">Set DIV height to scrollHeight </button></p> <!-- START_PAGE_FOOTER --><br> <br> <br> </div> </form> </body> </html> i am using the following code to set the height of the div based on its contents. it works fine in IE but not in mozilla. Do anybody help me to solve this? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function fnCheckScroll() {
document.getElementById('btnCheck').innerHTML = "The value of scrollHeight is: " + oID_1.scrollHeight + "px";
}
function fnSetHeight() {
oID_1.style.height = oID_1.scrollHeight;
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>scrollHeight Property Sample</h1>
<p>This sample demonstrates the use of the <b>scrollHeight</b> property to retrieve
the height of the viewable content.</p>
<div id="oID_1" style="overflow: scroll; height: 200px; width: 150px; text-align: left">
The <b>scrollHeight</b> property is read-only, allowing you to obtain the
actual height of the scrollable content. Even though the height of this
<b>div</b> is 200 pixels, the height inside the scrolling text box might
be less, since the wrapped text may not use the entire area within the object.
The <b>scrollHeight</b> dimension may be useful for a variety of reasons;
for example, the height of the <b>div</b> could be set to the <b>scrollHeight</b>
to conserve horizontal space while respecting the set width as a maximum.
</div>
<p><button id="btnCheck" onclick="fnCheckScroll()">Check scrollHeight
</button></p>
<p><button id="btnSetIt" onclick="return(fnSetHeight());">Set DIV height to scrollHeight
</button></p>
<!-- START_PAGE_FOOTER --><br>
<br>
<br>
</div>
</form>
</body>
</html>
I put in a code, so that when you hover over a link, text appears at the bottom of the page. My code works fine in IE 8, but the text doesn't appear in Firefox. I ran Firebug, and it gave me a "detailsbox is not defined" error. I'm still trying to figure javascript out, and could really use your help! Thanks Code: <script type="text/javascript">
function menu (whichMenu,whatState){
if (document.getElementById)
{document.getElementById(whichMenu).style.visibility = whatState;}
else {document[whichMenu].visibility = whatState;}
}
function details(what){
myInfo={"Threat":"text.",
"Compliance":"text.",
"Virtualization":"text.",
"Convergence":"text."}
detailsBox.innerHTML=myInfo[what]
}
</script>
<LINK href="main.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
a.black:link {color: #000000;}
a.black:active {color: #000000;}
a.black:visited {color: #000000;}
a.black:hover {color: #000000;}
a.red:link {color: #ff0000;}
a.red:active {color: #ff0000;}
a.red:visited {color: #ff0000;}
a.red:hover {color: #ff0000;}
-->
</style>
<script type="text/javascript">
function newPopup(url) {popupWindow = window.open(url,'popUpWindow','dependent=yes,height=570,width=750,left=10,top=10,resizable=no,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no,status=no')}
</script>
<script type="text/javascript">
function newPopup2(url) {popupWindow = window.open(url,'popUpWindow','dependent=yes,height=570,width=750,left=10,top=10,resizable=no,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no,status=no')}
</script>
</head>
<body bgcolor="#c1c2c2">
<table width="1065" cellpadding="0" cellspacing="0" border="0">
<tr><td colspan="6"><img src="images/White_Rectangle.jpg" width="1065" height="24"></td></tr>
</table>
<table width="1065" bgcolor="white" cellpadding="0" cellspacing="0" border="0">
<tr><td><img src="images/White_Rectangle.jpg" width="17" height="55"></td><td colspan="5"><a href="index.html"><img src="images/Trend_Micro_Securing_Your_Web_World_Logo.gif" border="0"></a></td>
<td><img src="images/White_Rectangle.jpg" width="100" height="55"></td>
<td align="right"><font size="2" face="Interstate-Regular"><a href="JavaScript:newPopup('help.html');" style="text-decoration:none" class="red">Help</a></font>
<font size="2" face="Interstate-Regular" color="gray"> | </font>
<font size="2" face="Interstate-Regular"><a href="JavaScript:newPopup2('quiz.html');" style="text-decoration:none" class="red">Feedback</a></font>
<br>
<br>
<font size="2" face="Interstate-Regular"><a href="http://www.trendmicro.com" style="text-decoration:none" class="black" rel="nofollow" target="blank">www.trendmicro.com</a></font>
</td>
<td><img src="images/White_Rectangle.jpg" width="25" height="55"></td>
</tr>
</table>
<table width="1065" cellpadding="0" cellspacing="0" border="0">
<tr><td colspan="6"><img src="images/White_Rectangle.jpg" width="1065" height="18"></td></tr>
</table>
<table width="1065" cellpadding="0" cellspacing="0" border="0">
<tr><td><A HREF="products.html" onmouseover="document.but.src='images/Upsell_Reference_Gradient.jpg'"onmouseout="document.but.src='images/Upsell_Reference_Tab.jpg'"><IMG SRC="images/Upsell_Reference_Tab.jpg" NAME="but" width="178" height="38" BORDER="0"></A></td><td><A HREF="competitor_products.html" onmouseover="document.but2.src='images/Competitor_Products_Gradient.jpg'"onmouseout="document.but2.src='images/Competitor_Products_Tab.jpg'"><IMG SRC="images/Competitor_Products_Tab.jpg" NAME="but2" width="178" height="38" BORDER="0"></A></td><td><img src="images/Red_Bar.jpg" width="178" height="38"></td><td><img src="images/Red_Bar.jpg" width="177" height="38"></td><td><img src="images/Red_Bar.jpg" width="177" height="38"></td><td><img src="images/Red_Bar.jpg" width="177" height="38"></td></tr>
<tr><td colspan="6"><img src="images/White_Rectangle.jpg" width="1065"></td></tr>
</table>
<table width="1024" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top">
<table cellpadding="0" cellspacing="0" border="0" >
<tr>
<td valign="top" bgcolor="#FFFFFF">
<div style="overflow:auto; width:300px; height:820px; background-color:#ebebe9; text-align:right; padding-right:1px;">
<div style="text-align:left;">
<a href="index.html"><img src="images/home_btn.jpg" border="0" /></a>
<div class="glossymenu" >
<a class="menuitem submenuheader" href="" ><div style="margin-top:4px;">Client/Server Suite</div></a>
<div class="submenu">
<ul>
<li><a onmouseover="details('Threat')" href="products_css_detail1.html" rel="nofollow" target="mainBody" class="menulink">Threat Landscape</a></li>
<li><a onmouseover="details('Compliance')" href="products_css_detail2.html" rel="nofollow" target="mainBody" class="menulink">Security Compliance</a></li>
<li><a onmouseover="details('Convergence')" href="products_css_detail4.html" rel="nofollow" target="mainBody" class="menulink">Convergence and Cost Reduction</a></li>
</ul>
</div>
HI I have a form that has some fields and inputs . I wrote some javascript code that if there was any problem with entered values , it shows the errors but when the user press submit button , the form submited before it had shown the problems . How can halt it and showing the problems ? TNX Hi all, firstly i'm not a coder but i am capable of doing as instructed. I have some script that when used in conjunction with a button highlights all the text between 2 tags to make it easier for copying, it works great in IE but doesn't work in firefox, could someone help please? Here's the script and the button is below. Code: <script type="text/javascript">
function selectCode(a)
{
// Get ID of code block
var e = a.parentNode.parentNode.getElementsByTagName('CODE')[0];
// Not IE
if (window.getSelection)
{
var s = window.getSelection();
// Safari
if (s.setBaseAndExtent)
{
s.setBaseAndExtent(e, 0, e, e.innerText.length - 1);
}
// Firefox and Opera
else
{
var r = document.createRange();
r.selectNodeContents(e);
s.removeAllRanges();
s.addRange(r);
}
}
// Some older browsers
else if (document.getSelection)
{
var s = document.getSelection();
var r = document.createRange();
r.selectNodeContents(e);
s.removeAllRanges();
s.addRange(r);
}
// IE
else if (document.selection)
{
var r = document.body.createTextRange();
r.moveToElementText(e);
r.select();
}
}
</script>
Html button Code: <input type="button" value="Highlight Code" onclick="selectCode(this); return false;"> hi -- someone wrote a script for me to simulate an image map on a background header in wordpress. it works great in chrome and ie, but not firefox. can someone pls. help? thx. <code> <script type="text/javascript"> function geturl() { myMouseX=event.clientX if(myMouseX < 400) { return "http://www.alexandrazissu.com/az-blog/books/"; } else { return "http://www.alexandrazissu.com/az-blog/"; } } </script> </code> and then the call: <code> <div id="header-image" onclick="location.href = geturl();" style="cursor: pointer;"> </code> Hey guys, noobie here. I created a page with a thumbnail viewer. Click on a thumbnail and a larger version appears on the same page, NOT a pop up or Lightbox. It previews and validates fine. Even runs in IE. But not in FF(V. 3.6.18). Ideas? Code below with JS highlighted. [code] <?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>603 products page</title> <link rel="stylesheet" type="text/css" href="css/603.css" /> <script type="text/javascript"> <!-- <![CDATA[ function changeImage(filename) { mainimage.src = filename; } // ]]> --> </script> </head> <body> <div id="frame"> <div id="logoheader"> </div> <div id="navigation"> <table align="center" cellpadding="0" cellspacing="0"border="0"> <tr> <th><a href="index.html"><img src="images/buttons/homeup.png" border="0" alt="home"/></a></th> <th><img src="images/buttons/productsup.png" border="0" alt="products"/></th> <th><a href="web.html"><img src="images/buttons/webup.png" border="0" alt="web"/></a></th> <!--<th><a href="resume.html"><img src="images/buttons/resumeup.png" border="0" /></a></th>--> <th><a href="contact.html"><img src="images/buttons/contactup.png" border="0" alt="contact"/></a></th> </tr> </table> <!--home<a href="products.html"> | products | </a><a href="web.html">web / interface | </a><a href="resume.html">resume | </a><a href="contact.html">contact</a>--> </div> <div id="contentproducts"> <div id="tablediv"> <table align="center" cellpadding="0" border="0"> <tr> <th><a href="javascript:changeImage('images/imageslarge/lumbarlarge.jpg')"><img src="images/slices/images/lumbarslice.jpg" border="0" alt="hh"/></a></th> <th><a href="javascript:changeImage('images/imageslarge/shaverlarge.jpg')"><img src="images/slices/images/shaverslice.jpg" border="0" alt="hh"/></a></th> <th><a href="javascript:changeImage('images/imageslarge/laptoplarge.jpg')"><img src="images/slices/images/laptopslice.jpg" border="0" alt="hh"/></a></th> <th><a href="javascript:changeImage('images/imageslarge/bodyformlarge.jpg')"><img src="images/slices/images/bodyformslice.jpg" border="0" alt="hh"/></a></th> <th><a href="javascript:changeImage('images/imageslarge/footlarge.jpg')"><img src="images/slices/images/footslice.jpg" border="0" alt="hh"/></a></th> <th><a href="javascript:changeImage('images/imageslarge/boomboxlarge.jpg')"><img src="images/slices/images/boomboxslice.jpg" border="0" alt="hh"/></a></th> <th><a href="javascript:changeImage('images/imageslarge/hhlarge.jpg')"><img src="images/slices/images/hhslice.jpg" border="0" alt="hh"/></a></th> <th><a href="javascript:changeImage('images/imageslarge/wandlarge.jpg')"><img src="images/slices/images/wandslice.jpg" border="0" alt="wand"/></a></th> </tr> </table> <!--START--> <div id="largeimage"> <img name="mainimage" src="images/blank.jpg" alt="main image"/> </div> <!--END--> </div> </div> <div id="footer"> <img src="images/copyright.png" border="0" alt="footer logo"/> </div> </div> </body> </html> [code] Hi. I have a form and if a field is blank a message pops up. This doesnt stop my php from running though and takes the user to another page. Is there a line to keep them on that page untill all fields are filled out? code so far is simple. <script type="text/javascript" language="JavaScript"> function nameempty() { if ( document.form.subject1.value == '' ) { alert('No name was entered!') return false; } } </script> //then down the bottom I have a small bit that implements that code The photo html files on the Fanac Fan History project's website are setup to be displayed properly when JavaScript is disabled and reformatted by a php script when JavaScript is enabled. The reformatting adds some features and positions each photo's caption and credits based on the width of the photo and the browser's page width. This worked well except that, when a photo page was accessed the browser's back button wouldn't work properly. This was because I had failed to include the replace option in my windows.open statement. The statement now reads fileWindow = window.open(fileURL, "_self", "", true); and this has cured the problem with IE but it still doesn't work with FireFox. Oddly enough it worked correctly with Google's Chrome with/without the replace and with Opera and Safari it also sort of worked without the replace. With replace Opera works correctly but Safari stll needs a double click. Any suggestions? I have created a small file where I check if the passwords entered in the code match or not, if they do not match, the button that links to the next webpage should not work(allow them to go to the next wepage). ive tried various websites to help me try and solve this but I just dodont understand what they are doing. I'm very new to programming btw here is some example code: Code: !doctypeHTML
<html>
<script>
//lets just pretend that ive already done all the .getelement by id stuff to get the code things
//suppose the person did not write anything in the form, an error will get pushed(alerted basically)
if(!form['password'].value)
error.push('Missing Password');
<form>
<label>Password<br><input type="password" name="password"></label>
<label>Confirm Password<br><input type="password" name="confirm"</label>
</form>
</html>
now how would I make the submit button not submit if there are errors? please be as simple as possible, I am new to this! I am very new to javascript and cannot find any info anywhere regarding the following problem: On my website I have around 100 pages containing an action form. Occasionally it is necessary to cancel the action throughout the 100 pages which is very time-consuming. Then the action has to be reinstated once again for all the 100+ pages. I thought the solution would be to use javascript to change the action from a .js file which would mean only one page, the .js file, would require alteration: The action that appears on all 100+ pages several times that I am trying to change or stop happening by overwriting the "form action": <form action="http://www.changenamecart.com/" method="post"> <input type="hidden" name="userid" value="1234567"> <input type="hidden" name="return" value="http://www.thehomepage.co.uk/index.htm"> <input type="image" src="http://www.changenamecart.com/images/pic.gif"> </form> My efforts to date a The change .js file: function change() { var myChange = form action; if(myChange == form action){ document.write("form xction"); } } The html file in the header: <script src="change.js" type="text/javascript"></script> I am afraid that my knowledge of programming is very small and I would welcome any help to solve this problem. Is there a way to stop a form submit after hitting submit? Refresh wouldn't realy be an option. Is abort() what I'm looking for?
Hi guys im trying to give users a warning message with javascript when the submit my login form without inserting any new data. But I can't seem to find out how to stop the form from going to the login.php here is my code. Code: <form name="te" onsubmit='login();' action='login.php' method='post'>
<input name='username' maxlength='14' value='Username' type='text' />
<input name='password' maxlength='20' value='Password' type='password' />
<input type="submit" name="login" value="Login" />
</form>
javascript: Code: <script type="text/javascript">
function login() {
var username = document.te.username.value;
var password = document.te.password.value;
if (username == 'Username' || username == '') {
alert('empty username!');
return false;
}
else {
if (password == 'Password' || password == '') {
alert('empty pass');
return false;
}
}
return true;
}
</script>
Hey guys, I'm working on a user website and have got the upload form working and the cropping working, also got the image in my profile, all works great. A few things I need tho and wondering if you could help. I need to stop the form from resubmitting the image when I refresh the upload.php page below upload.php PHP Code: <?php define('INCLUDE_CHECK',true); require 'connect.php'; session_start(); $session_id ='1'; $username = $_SESSION['user']; $upload = $_POST['upload']; $new_name = "small".$username.".jpg"; $path = "uploads/"; ?> <html> <head> <title>My Network</title> </head> <link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.imgareaselect.pack.js"></script> <script type="text/javascript"> function getSizes(im,obj) { var x_axis = obj.x1; var x2_axis = obj.x2; var y_axis = obj.y1; var y2_axis = obj.y2; var thumb_width = obj.width; var thumb_height = obj.height; if(thumb_width > 0) { if(confirm("Do you want to save image..!")) { $.ajax({ type:"GET", url:"ajax_image.php?t=ajax&img="+$("#image_name").val()+"&w="+thumb_width+"&h="+thumb_height+"&x1="+x_axis+"&y1="+y_axis, cache:false, success:function(rsponse) { $("#cropimage").hide(); $("#thumbs").html(""); $("#thumbs").html("<img src='uploads/"+rsponse+"' />"); } }); } } else alert("Please select portion..!"); } $(document).ready(function () { $('img#photo').imgAreaSelect({ aspectRatio: '1:1', onSelectEnd: getSizes }); }); </script> <?php $valid_formats = array("jpg", "png", "gif", "bmp"); if(isset($_POST['submit'])) { $name = $_FILES['photoimg']['name']; $size = $_FILES['photoimg']['size']; if(strlen($name)) { list($txt, $ext) = explode(".", $name); if(in_array($ext,$valid_formats) && $size<(1024*1024)) { $actual_image_name = time().substr($txt, 5).".".$ext; $tmp = $_FILES['photoimg']['tmp_name']; if(move_uploaded_file($tmp, $path.$actual_image_name)) { mysql_query("UPDATE user SET profile_image='$actual_image_name' WHERE id='$username'"); $image="<h1>Please drag on the image</h1><img src='uploads/".$actual_image_name."' id=\"photo\" style='max-width:500px' >"; $profile_image="<img src='uploads/".$new_name."' style='max-width:500px' >"; } else echo "failed"; } else echo "Invalid file formats..!"; } else echo "Please select image..!"; } ?> <body> <div style="margin:0 auto; width:600px"> <?php echo $image; ?> <div style="padding:5px; width:600px"> <?php echo $profile_image; ?> </div> <div style="width:600px"> <form id="cropimage" method="post" enctype="multipart/form-data"> Upload your image <input type="file" name="photoimg" id="photoimg" /> <input type="hidden" name="image_name" id="image_name" value="<?php echo($actual_image_name)?>" /> <input type="submit" name="submit" value="Submit" /> </form> </div> </div> </body> </html> ajax_image.php PHP Code: <?php define('INCLUDE_CHECK',true); require 'connect.php'; session_start(); $username = $_SESSION['user']; $upload = $_POST['upload']; $t_width = 100; // Maximum thumbnail width $t_height = 100; // Maximum thumbnail height $new_name = "small".$username.".jpg"; // Thumbnail image name $path = "uploads/"; if(isset($_GET['t']) and $_GET['t'] == "ajax") { extract($_GET); $ratio = ($t_width/$w); $nw = ceil($w * $ratio); $nh = ceil($h * $ratio); $nimg = imagecreatetruecolor($nw,$nh); $im_src = imagecreatefromjpeg($path.$img); imagecopyresampled($nimg,$im_src,0,0,$x1,$y1,$nw,$nh,$w,$h); imagejpeg($nimg,$path.$new_name,90); mysql_query("UPDATE user SET profile_image_small='$new_name' WHERE username='$username'"); echo $new_name."?".time(); exit; } ?> And I also need a live preview of cropping. So when the user is selecting what area of the Large image they want as there final thumb image, they can see the thumb change to that selection at the same time. The thumb is below the uploaded image, and without refreshing, which I cannot yet do because of the form resubmit, you can't see the final image until you go back to your profile. If I didn't make the above clear enough, please tell me. Thanks for any help and suggestions. Hi, doing form validation at college just now. The lecturer gave all of us this following example. But it doesn't seem to work in firefox. I have tried my own scripts and they seem to work so have no idea whats happening! Code: <html>
<head>
<title>Javascript validation program - limits field length and content</title>
<script type="text/javascript">
function ValidateForm()
{
var msg='';
if(document.getElementById('CC').value=='')
{
msg+='- Please enter CC\n\n';
}
else
// Now test if CC is purely 2 capital letters...
{
var CC=RTrim(document.getElementById('CC').value);
// alert(CC);
if (CC.length==2)
{
if (isCHAR(CC)==false)
{
msg+=' - CC not solely 2 capital letters \n\n';
}
}
else
msg+=' - CC not 2 letters in length \n\n';
}
if(document.getElementById('NNNNNN').value=='')
{
msg+='- Please enter NNNNNN \n\n';
}
else
{
// Now test if NNNNNN is purely 6 digits...
var NIdigits=RTrim(document.getElementById('NNNNNN').value);
if (NIdigits.length==6)
{
if (isInteger(NIdigits)==false)
{
msg+=' - NNNNNN not solely digits \n\n';
}
}
else
msg+=' - NNNNNN not 6 digits in length\n\n';
}
// Lastly check if the last field contains only 1 char
if(document.getElementById('C').value=='')
{
msg+='- Please enter C \n\n';
}
else
// Now test if C is a single letter...
{
var C=RTrim(document.getElementById('C').value);
if (C.length==1)
{
if (isCHAR(C)==false)
{
msg+=' - C not a capital letter \n\n';
}
}
else
msg+=' C not 1 character in length';
}
// alert(msg);
if(msg!='')
{
//alert('Here...');
alert('The following fields are empty and/or invalid:\n\n'+msg);
return false
}
else
{
return true
}
}
function RTrim(str){
if (str==null){return null;}
for(var i=str.length-1;str.charAt(i)==" ";i--);
return str.substring(0,i+1);
}
//-------------------------------------------------------------------
// isBlank(value)
// Returns true if value only contains spaces
//-------------------------------------------------------------------
function isBlank(val){
if(val==null){return true;}
for(var i=0;i<val.length;i++) {
if ((val.charAt(i)!=' ')&&(val.charAt(i)!="\t")&&(val.charAt(i)!="\n")&&(val.charAt(i)!="\r")){return false;}
}
return true;
}
//-------------------------------------------------------------------
// isInteger(value)
// Returns true if value contains all digits
//-------------------------------------------------------------------
function isInteger(val){
if (isBlank(val)){return false;}
for(var i=0;i<val.length;i++){
if(!isDigit(val.charAt(i))){return false;}
}
return true;
}
//-------------------------------------------------------------------
// isCHAR(value)
// Returns true if value contains all CHARS
//-------------------------------------------------------------------
function isCHAR(val){
if (isBlank(val)){return false;}
for(var i=0;i<val.length;i++){
if(!isCAPlet(val.charAt(i))){return false;}
}
return true;
}
//-------------------------------------------------------------------
// isDigit(value)
// Returns true if value is a 1-character digit
//-------------------------------------------------------------------
function isDigit(num) {
if (num.length>1){return false;}
var string="1234567890";
if (string.indexOf(num)!=-1){return true;}
return false;
}
//-------------------------------------------------------------------
// isCAPlet(value)
// Returns true if value is a 1-character letter
//-------------------------------------------------------------------
function isCAPlet(num) {
if (num.length>1){return false;}
var string="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
if (string.indexOf(num)!=-1){return true;}
return false;
}
</script>
</head>
<body bgcolor="#FFFFFF">
<form action='http://10.205.3.202/Valid.php' method='POST' onsubmit='return ValidateForm();'>
<H1>Validate NI No</H1>
<p>
NI-No :
<INPUT TYPE="text" id='CC' NAME="CC" SIZE='2' maxlength='2' >
-
<INPUT TYPE="text" id='"NNNNNN"' NAME="NNNNNN" SIZE='6' maxlength='6' >
<INPUT TYPE="text" id='C' NAME="C" SIZE='1' maxlength='1'>
<p>
<INPUT TYPE="submit" id='Process' value="Process" name="submit">
</form>
</body>
</html>
Any help would be great. |
|||||||