|
JavaScript - Iframe Submission Via Javascript With Form Action Designation
Hey all -
I've searched high and low for this through Google, and tried piecing together some solutions, but 1) I'm way too incompetent from a Javascript perspective to take two ideas and make them work and 2) I've spent close to 2 hours and dont have a solution. SOOOO I thought I'd ask the geniuses here for some ideas: I have a page with an iFrame called portalCalcFrame that I'm trying to submit data to to do some calculations and preview in the iFrame before actually submitting the page to the next...well...page (both the "Recalculate" button to send to iFrame and the "Next Step" button to submit it further into the process are on the main frame). So I've got two problems. A) I need to submit a form to a different target, aka portalCalcFrame B) I need to submit the form to a different "action" page than my form actually submits to. (The form submits to a page called step2.php, whereas the iFrame needs to load page calcframe.php and have the form submit to that) I don't really know where to start, Javascript is far from my forte. I've taken it a couple of different ways. Any ideas guys? I love you long time. Thanks in advance! JE Similar TutorialsHi and hope someone can help. I have a form with various input fields and, on submission, I'd like some validation done and if that's OK, for it to load another page in the parent directory. Trouble is I end up with Error 404 when I test it, the page actually exists but when I look at the URL within the Error 404 page it looks like this... Code: http://localhost/my_sites/webmaestro/assignments/Lesson06/pages/register()?First_Name=&Initials=&Last_Name=&Address_Line_1=&Address_Line_2=&City=&County=&Post_Code=&Email=&submit=Register The URL with the form on it is... Code: http://localhost/my_sites/webmaestro/assignments/Lesson06/pages/wm6ex1_register.html and the page I'm trying to call is... Code: http://localhost/my_sites/webmaestro/assignments/Lesson06/wm6ex1_home.html Is the problem to do with the fact that the form is actually trying to pass all those variables from the input fields? My form looks like this... Code: <form method="get" name="register" action="register()" onreset="return confirm('This will remove all your entries so far.\nIs that O.K?')" >
Various input fields here.
<input type="reset" name="reset" value="Reset" />
<input type="submit" name="submit" value="Register" />
</form>
My function currently has no validation and simply looks like this... Code: function register()
{
window.open("../wm6ex1_home.html", "_self")
}
My thanks R Hello there, I hope you might be able to help me with an issue I'm having getting a form to validate before submission. I've been trying to figure out where I'm going wrong but being relatively new to javascript I'm obviously missing something. I have a form which calls one of two validation scripts with onBlur for each field (I've only included one of each field, there are 8 fields in total in the form): Code:
<form name="submitrunnertime" action="http://......reflect.php" onsubmit="return valResultsForm();" method="post">
<table>
<tr><td><label for="RunnerID">Runner ID</label></td>
<td><input type="text" name="RunnerID" size="5" maxlength="5" onBlur="valRange(RunnerID, 1, 99999, 'RunnerID_bk');" />
</td><td id="RunnerID_bk"><span></span></td></tr>
<tr><td><label for="">Date (YYYY-MM-DD)</label></td>
<td><input type="text" name="Date" size="10" maxlength="10" onBlur="valExpression(Date, '^(19[0-9{2}|20[01][0-9])\-(0[1-9]|1[012])\-([012][0-9]|3[01])$', 'Date_bk', 'please use indicated format');" />
</td><td id="Date_bk"><span></span></td></tr>
etc. etc.
</table>
<input type="submit" name="submitrunnertime" value="submit">
</form>
I've managed to get each individual field to validate as the form is filled in. Now, if I fill valResultsForm.js with a simple line return false; then the form refuses to submit as it should do, but if I try and re-run the validation of each field so that the form will only submit if all fields have been filled in correctly, even if I force valResultsForm to return a false result, the form still submits. I just can't figure out why it is doing this and it's driving me around the bend. valResultsForm looks like: Code:
function valResultsForm() {
var res1 = valRange(RunnerID, 1, 99999, 'RunnerID_bk');
var res2 = valExpression(Date, '^(19[0-9{2}|20[01][0-9])\-(0[1-9]|1[012])\-([012][0-9]|3[01])$', 'Date_bk', 'please use indicated format');
if (res1 == true && res2 == true) {
return true;
}
else { return false; }
}
Any hints or advice that anyone could give me would be hugely appreciated. Thank you, Andrew Hello, I have a very simple file upload form, which I'm submitting with javascript whenever the value in the file input changes. I open the Open File.. dialog with javascript too(in IE - in FF the control just has opacity:0 over a button), just by calling click() on it. This works like a charm in both firefox and IE so far, but when I set either the visibility or z-index of the file input control so that it gets hidden, the form doesn't submit in IE(still works fine in FF). The alert fires, so the function is still called, but submitting just doesn't work - nothing received serverside. Anyone know what I'm doing wrong here/what the fix is? Thanks a lot in advance for any help The form looks like this: Code: <form id="form2" runat="server" name="xmluploadform">
<asp:FileUpload ID="xmlupload" onchange="SubmitForm();" runat="server" />
</form>
And the SubmitForm function looks like this: Code: function SubmitForm() {
alert('submitting');
$('#form2').submit();
}
PS. I thought about maybe it was because the browse... button gets hidden so it can't click it, but then is there any way to set the width of it or something? The width of <input type="file"/> is completely different in IE/FF, so it's impossible to make it fit into the design For part of a project, I'm trying to create an order form with a real-time calculator (so, for example, if you enter in a quantity of a product into a form input box, it will multiply that quantity with the price of the product and display the total price in a different form input box). Most of the code works, in the sense that when I press the submit button on the form, I can see all of the values of each of the form input boxes in the address bar. However, when I wrote a function that sums all of the individual total prices into a final price and displays that in another form input box, pressing the submit button no longer puts the value of each field into the address bar. (In effect, everything works if I remove this code...but I really want to include it, since it seems like such a logical part of my intentions with this webpage.) Here's the function that I'm trying to get to work with the form. ("orderform" is the name of the form, and all of the "t#"s are the individual total prices that I'm trying to sum.) I know this code is probably far from the most efficient solution, but as long as it works...ahaha... Code:
function totaled(){
b = parseInt(document.orderform["t0"].value);
c = parseInt(document.orderform["t1"].value);
d = parseInt(document.orderform["t2"].value);
e = parseInt(document.orderform["t3"].value);
f = parseInt(document.orderform["t4"].value);
g = parseInt(document.orderform["t5"].value);
h = parseInt(document.orderform["t6"].value);
i = parseInt(document.orderform["t7"].value);
j = parseInt(document.orderform["t8"].value);
a = b+c+d+e+f+g+h+i+j;
document.orderform["total"].value = a;
}
Could anyone help me out, in explaining why my code is messing up the form submission? And I really really apologize if anyone out there is appalled by some ignorance of mine - I'm only just starting to learn how to use JavaScript. (Also, I'm sorry if I referred to things with the wrong terms and confused anyone. I'm not too good with proper naming either.) Oh, right! Just wanted to add, the code does exactly what it's supposed to do (minus the messed up form submission) and nothing comes up in the Error Console when I open my webpage, so there's no help to be found there. (I doubt that was actually helpful, but just in case...) I have been hard at work coding a fancy JQuery form validation script. Problem is, when I run validation on my form, it seems to work, but no email is sent. But when I disable validation, the email sends just fine. I am fairly new to JavaScript, and need some help pinpointing where my error is. Here is the code. Code: // BEGIN JAVASCRIPT
$(function(){
//original field values
var field_values = {
//id : value
'name' : 'your name',
'email' : 'your email',
'yourmessage' : 'I would like to inquire about'
};
//inputfocus
$('input#name').inputfocus({ value: field_values['name'] });
$('input#email').inputfocus({ value: field_values['email'] });
$('textarea#yourmessage').inputfocus({ value: field_values['yourmessage'] });
//form validation
$('form').submit(function validateForm(){ return false }); // removing this return false seems to mess up validation
$('#submit').click(function(){
//remove classes
$('#sendamessage 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 = $('#sendamessage input[type=text],#sendamessage textarea');
var error = 0;
fields1.each(function(){
var value = $(this).val();
if( value.length<2 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) {
$(this).addClass('error'); // css class
$(this).effect("shake", { times:3 }, 50);
error++;
} else {
$(this).addClass('valid'); // css class
}
});
if(!error) {
// this is where I get confused. How do I make this send the form?
alert('Data sent');
});
}
});
});
// END JAVASCRIPT
<form method="post" action="" onsubmit="return validateForm()" >
<input type="hidden" name="ccf_customhtml" value="1" />
<input type="hidden" name="success_message" value="Thank you for filling out our form!" />
<input type="hidden" name="destination_email" value="dauidus@gmail.com" />
<input type="hidden" name="required_fields" value="" />
<label for="name">Name</label>
<input type="text" name="name" id="name" value="your name" />
<label for="email">Email</label>
<input type="text" name="email" id="email" value="your email" />
<label for="yourmessage">Your Message</label>
<textarea name="yourmessage" id="yourmessage" value="I would like to inquire about" style="margin-bottom:20px;" />I would like to inquire about</textarea>
<input class="send submit" id="submit" type="submit" value="" style="position: relative; bottom: -70px; left: 25px; " />
</form>
I am using a WordPress plugin to automatically send the contents of the form to email. It works without the javascript enabled. But when I turn on JS the form gets validated, but no email is sent. Please let me know if I should include anything else here... I've been looking at this code so much that I'm having a hard time doing it with fresh eyes. The problem page is on http://new.dauidusdesign.com/contact/. FYI, I am also looking to make this work with the 'request a quote' link on the same page. Cheers! -Dave So I have a little calendar widget on my site, for people to choose their dates for a reservation system. They then click a 'Book Now' button which creates a dynamic url (using their start date and the number of dates) to the booking engine. The problem is, the way it accomplishes this (window.location.href=), breaks cross-domain tracking on Google Analytics. And I'm not smart enough to figure out how to do it any other way. What I'd like to do is have clicking the Book Now button change the URL in the form action within the form with ID resForm, and then submit the form. I'm hoping someone can help me edit the form so that it accomplishes this. I'd be incredibly thankful. This is what I currently have: Code: <script>
jQuery(document).ready(function($) {
$(".book-now").click(function() {
if($('#check-in').length > 0 && $('#DepartureDate').val() != '') {
var data = $('#check-in').val();
var arr = data.split('/');
var datac = $('#DepartureDate').val();
var arr2 = datac.split('/');
var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds
var firstDate = new Date(arr[2],arr[0] -1,arr[1]);
var secondDate = new Date(arr2[2],arr2[0] -1,arr2[1]);
var diffDays = Math.round((firstDate.getTime() - secondDate.getTime())/(oneDay));
if ((diffDays) < 0)
{
diffDays = Math.abs(diffDays);
var link = "https://res.windsurfercrs.com/bbe/page1.aspx?propertyID=13841&checkin=" + arr[0] + "/" + arr[1] + "/" + arr[2] + "&nights=" + diffDays;
console.log(link);
window.location.href= link;
}
else
{
alert ('Please fill in correct Check-In and Check-Out dates. The Check-In date must be before the Check-Out date.');
}
} else {
alert ('Please fill in a Check-In and Check-Out date, thanks!');
}
});
});
</script>
The form looks like this: Code: <form action="#" onSubmit="_gaq.push(['_linkByPost',this]);" method="post" id="resForm"> <input type='text' name="checkin" id="check-in" readonly="readonly" style="cursor: text" data-default="MM/DD/YYYY" class='arrivaldate'/> <input name="checkout" id="DepartureDate" readonly="readonly" style="cursor: text" data-default="MM/DD/YYYY" class='departuredate'/> <input type="button" value="BOOK NOW" class='book-now' /> </form> Reply With Quote 01-25-2015, 12:46 AM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,310 Thanks 82 Thanked 4,754 Times in 4,716 Posts Just call the _gaq() function manually. Code: _gaq.push(['_linkByPost',document.getElementBy("resForm")])
window.location.href= link;
Hi. I am new here. I wanted help for a JavaScript code. You might think I'm lazy for not writing it myself, but the truth is I am not a JavaScript coder. I just have a really simple website and I am trying to do something for which I know JS is required but I don't know how to do it. I've also searched around but couldn't find the appropriate code. I created a submission form for users when they log in to my website they can submit their info . when they fill the form and click on submit button is not sending the info to my email .............................please help here is my my codes please take a look at it Thanks 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="verify-v1" content="N1J6LLa/OdGf52xzkbegP/YFAD+RaeKa9FQ2/8UJfKo=">
<title>southernfiremag.co.za</title>
<link href="southernfiremag.co.za_files/webstyle.css" rel="stylesheet" type="text/css">
<link href="southernfiremag.co.za_files/balloontip.css" rel="stylesheet" type="text/css">
<script src="southernfiremag.co.za_files/balloontip.js" type="text/javascript"></script><style media="screen" type="text/css">#FLheader {visibility:hidden}</style><style media="screen" type="text/css">#subFlash {visibility:hidden}</style><style media="screen" type="text/css">
#footer {visibility:hidden}.style1 {color: #FFFFFF}
body {
background-color: #000000;
}
</style></head><body class="sIFR-active"><div id="dhtmltooltip"></div>
<script src="southernfiremag.co.za_files/gen_validatorv2.js" type="text/javascript"></script>
<div id="container">
<script type="text/javascript">
var flashvars = {
dater:'',
};
var params = {};
params.menu = "false";
params.wmode = "transparent";
params.bgcolor = "#1A1A1A";
var attributes = {};
swfobject.embedSWF("/header.swf", "FLheader", "977", "145", "8.0.0", false, flashvars, params, attributes);
</script>
<div id="maincontent">
<script type="text/javascript">
var flashvars = {
};
var params = {};
params.menu = "false";
params.wmode = "transparent";
params.bgcolor = "#1A1A1A";
var attributes = {};
swfobject.embedSWF("/subHeader.swf", "subFlash", "963", "167", "8.0.0", false, flashvars, params, attributes);
</script>
<div class="textArea">
<div id="crumbsBar"><b><a href="http://www.southernfiremag.co.za/">SOUTHERN FIRE MAG</a></b> >> <a href="http://www.southernfiremag.co.za/submissions/model_submission.php">MODEL SUBMISSION </a> >> Submit to modelsubmission@southernfiremag.co.za</div>
<div id="adPanel">
<img src="southernfiremag.co.za_files/become_Southern Fire Girl.png" border="0" height="258" width="292"><br>
<!-- <a href="/join/"><img src="/images/membershipPrice.jpg" alt="" width="186" height="117" border="0" /></a><br />-->
<img src="southernfiremag.co.za_files/index_20.jpg" alt="" height="258" width="292"><br>
<img src="southernfiremag.co.za_files/ban_secure.jpg" alt="" height="120" width="186"><br>
<img src="southernfiremag.co.za_files/ban_updates.jpg" alt="" height="120" width="186"><br>
<br>
<br class="clear">
</div> <div id="mainPanel">
<h1 style="" class="sIFR-replaced"> </h1>
<h2 class="sIFR-replaced" style="width: 460px;"> </h2>
</div>
<br class="clearLeft">
<div style="width: 400px; float: left;">
<p><span class="style1">Fill out this form with your pics. Be sure to include head-shots,
commercial fashion, glamour/swim and beauty.
</span></p>
<div>
<form action="index.htm" method="post" enctype="multipart/form-data" name="SOUTHERN FIRE MAG" id="SOUTHERN FIRE MAG">
<table class="tableBK" border="0" cellpadding="3" cellspacing="1" width="400px">
<!--DWLayoutTable-->
<tbody><tr>
<td colspan="2" height="35"></td>
</tr>
<tr>
<td width="141" height="24"><b class="formfont"><span style="color: red">*</span><span class="style1"> Name: </span></b></td>
<td width="242"><input name="name" id="name" size="25" type="text"> </td>
</tr>
<tr>
<td height="24"><b><span style="color: red">*</span><span class="style1"> Email:</span></b></td>
<td><input name="email" id="email" size="25" type="text"> </td> </tr>
<tr>
<td height="24"><span class="style1">Address:</span></td>
<td><input name="address" id="address" size="25" type="text"> </td>
</tr>
<tr>
<td height="24"><span class="style1">City:</span></td>
<td><input name="city" id="city" size="25" type="text"> </td>
</tr>
<tr>
<td height="24"><span class="style1">State:</span></td>
<td><input name="state" id="state" size="25" type="text"> </td>
</tr>
<tr>
<td height="24"><span class="style1">Zip:</span></td>
<td><input name="zip" id="zip" size="25" type="text"> </td>
</tr>
<tr>
<td height="24"><span class="style1">Phone:</span></td>
<td><input name="phone" id="phone" size="25" type="text"> </td>
</tr>
<tr>
<td height="29"> </td>
<td> </td>
</tr>
<tr>
<td height="24"><span style="color: red">*</span><span class="style1"> Stage Name:</span></td>
<td><input name="alias" id="alias" size="25" type="text"> </td>
</tr>
<tr>
<td height="24"><span class="style1">Age:</span></td>
<td class="tdGrey2"><input name="age" id="age" size="25" type="text"></td>
</tr>
<tr>
<td height="24"><span class="style1">Ethnicity:</span></td>
<td class="tdGrey2"><input name="ethnicity" id="ethnicity" size="25" type="text"></td>
</tr>
<tr>
<td height="24"><span class="style1">Height:</span></td>
<td class="tdGrey2"><input name="height" id="height" size="25" type="text"></td>
</tr>
<tr>
<td height="25"><span class="style1">Weight:</span></td>
<td class="tdGrey2"><select name="weight">
<option selected="selected" value="85-99">85-99</option>
<option value="100-110">100-110</option>
<option value="111-115">111-115</option>
<option value="116-125">116-125</option>
<option value="126-135">126-135</option>
<option value="136-145">136-145</option>
<option value="146-155">146-155</option>
<option value="156-165">156-165</option>
<option value="Other">Other</option>
</select></td>
</tr>
<tr>
<td height="24"><span class="style1">Bust:</span></td>
<td class="tdGrey2"><input name="bust" id="bust" size="25" type="text"></td>
</tr>
<tr>
<td height="24"><span class="style1">Waist:</span></td>
<td class="tdGrey2"><input name="waist" id="waist" size="25" type="text"></td>
</tr>
<tr>
<td height="24"><span class="style1">Hip:</span></td>
<td class="tdGrey2"><input name="hip" id="hip" size="25" type="text"></td>
</tr>
<tr>
<td height="24"><span class="style1">Shoe:</span></td>
<td class="tdGrey2"><input name="shoe" id="shoe" size="25" type="text"></td>
</tr>
<tr>
<td height="24"><span class="style1">Dress:</span></td>
<td class="tdGrey2"><input name="dress" id="dress" size="25" type="text"></td>
</tr>
<tr>
<td height="24"><span class="style1">Agency:</span></td>
<td class="tdGrey2"><input name="agency" id="agency" size="25" type="text"></td>
</tr>
<tr>
<td height="24"><span class="style1">Personal Website:</span></td>
<td class="tdGrey2"><input name="website" id="website" size="25" type="text"></td>
</tr>
<tr>
<td height="29"> </td>
<td> </td>
</tr>
<tr>
<td height="45" colspan="2"><span class="style1">We have several different photographers that
we work with in the following Country. Please select which Country you
are willing to meet with our photographers if selected for a test shoot? </span></td>
</tr>
<tr>
<td height="25"><span class="style1">Country:</span></td>
<td><!--<input name="location" type="text" id="location" size="25" value="" > -->
<select name="location">
<option selected="selected" value="SOUTH AFRCA">SOUTH AFRICA</option>
<option value="USA">USA</option>
<option value="DRC CONGO">DRC CONGO</option>
<option value="ANGOLA">ANGOLA</option>
<option value="MOZABIQUE">MOZABIQUE</option>
<option value="MILAN">MILAN</option>
<option value="OTHERS">OTHERS</option>
</select></td>
</tr>
<tr>
<td colspan="2" height="2"></td>
</tr>
<tr>
<td height="32" colspan="2"><span style="color: red;">Image upload is required.</span> <span class="style1">Please upload 1 or up to 4 images below. Each image size must be below 1MB</span></td>
</tr>
<tr>
<td colspan="2" height="2"></td>
</tr>
<tr>
<td height="27"><span style="color: red">*</span><span class="style1"> Image 1</span></td>
<td><label><span class="td1">
<input name="fileatt[]" type="file">
</span></label> </td>
</tr>
<tr>
<td height="27" valign="top"><span class="style1">Image 2 </span></td>
<td><label><span class="td1">
<input name="fileatt[]" type="file">
</span></label></td>
</tr>
<tr>
<td height="27" valign="top"><span class="style1">Image 3 </span></td>
<td><label><span class="td1">
<input name="fileatt[]" type="file">
</span></label></td>
</tr>
<tr>
<td height="27" valign="top"><span class="style1">Image 4 </span></td>
<td><label><span class="td1">
<input name="fileatt[]" type="file">
</span></label></td>
</tr>
<tr>
<td height="29"> </td>
<td> </td>
</tr>
<tr>
<td height="24"><span class="style1">Myspace<b>:</b></span></td>
<td><input name="myspace" size="25" type="text"></td>
</tr>
<tr>
<td height="24"><span class="style1">ModelMayhem<b>:</b></span></td>
<td><input name="mayhem" size="25" type="text"></td>
</tr>
<tr>
<td height="24"><span class="style1">Facebook<b>:</b></span></td>
<td><input name="facebook" size="25" type="text"></td>
</tr>
<tr>
<td height="8" colspan="2">
<hr> </td>
</tr>
<tr>
<td height="24"><span class="style1">Twitter<b>:</b></span></td>
<td><input name="twitter" size="25" type="text"></td>
</tr>
<tr>
<td height="32" colspan="2">
<span class="style1">Have a twitter account? If so, let us know your account and we'll post your tweets here. </span></td>
</tr>
<tr>
<td height="8"></td>
<td></td>
</tr>
<tr>
<td height="87" valign="top"><span class="style1">TV</span></td>
<td>
<textarea name="tv" cols="45" rows="6"></textarea> </td>
</tr>
<tr>
<td height="87" valign="top"><span class="style1">Film</span></td>
<td>
<textarea name="film" cols="45" rows="6"></textarea> </td>
</tr>
<tr>
<td height="87" valign="top"><span class="style1">Commercial</span></td>
<td>
<textarea name="commercial" cols="45" rows="6"></textarea> </td>
</tr>
<tr>
<td height="87" valign="top"><span class="style1">Advertising</span></td>
<td>
<textarea name="advertising" cols="45" rows="6"></textarea> </td>
</tr>
<tr>
<td height="87" valign="top"><span class="style1">Editorial</span></td>
<td>
<textarea name="editorial" cols="45" rows="6"></textarea> </td>
</tr>
<tr>
<td height="87" valign="top"><span class="style1">Music Video</span></td>
<td>
<textarea name="music" cols="45" rows="6"></textarea> </td>
</tr>
<tr>
<td height="87" valign="top"><span class="style1">Web</span></td>
<td>
<textarea name="web" cols="45" rows="6"></textarea> </td>
</tr>
<tr>
<td height="26" valign="top"><span class="style1">Tattoos?</span></td>
<td>
<input name="tyn" value="yes" type="radio"> Yes <input name="tyn" value="no" checked="checked" type="radio"> No<br> </td>
</tr>
<tr>
<td height="87" valign="top"><span class="style1">Give more details about your tattoos...</span></td>
<td>
<textarea name="tattoos" cols="45" rows="6" id="tattoos"></textarea> </td>
</tr>
<tr>
<td height="87" valign="top"><span class="style1">Why are you the right girl for SOUTHERN FIRE...</span></td>
<td><textarea name="description" cols="45" rows="6" id="description"></textarea> </td>
</tr>
<tr>
<td height="24" valign="top"><span class="style1">3 + 4 =?</span></td>
<td>
<!--
<img src="/submissions/random_code/code.php" alt="" /><br />
-->
<input name="code" type="text"> </td>
</tr>
<tr>
<td colspan="2" class="tablebar" height="2"></td>
</tr>
<tr>
<td height="41" colspan="2" align="center" class="tdGrey2">
<input name="action" id="action" value="sendform" type="hidden">
<input name="Submit" src="southernfiremag.co.za_files/confrim.gif" value="SUBMIT" type="image"> </td>
</tr>
<tr>
<td colspan="2" class="tdGrey" height="5"></td>
</tr>
</tbody></table>
</form>
<script language="JavaScript" type="text/javascript">//You should create the validator only after the definition of the HTML form
var frmvalidator = new Validator("SOUTHERN FIRE MAG");
frmvalidator.addValidation("email","maxlen=50");
frmvalidator.addValidation("email","req","Please enter your email address");
frmvalidator.addValidation("email","email");
frmvalidator.addValidation("name","req","Please enter your name");
frmvalidator.addValidation("alias","req","Please enter your alias");
</script>
</div>
</div>
<div style="width: 250px; float: left; text-align: left; margin-left: 10px;">
<!-- right side - inner content -->
<!--
<img src="/images/extra/041410/bmd1.jpg" alt="" /><br /><br />
<img src="/images/extra/041410/bmd2.jpg" alt="" /><br /><br />
<img src="/images/extra/041410/bmd3.jpg" alt="" /><br />
-->
</div>
<br class="clear">
</div>
<br class="clear">
</div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script><script src="southernfiremag.co.za_files/ga.js" type="text/javascript"></script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-589703-16");
pageTracker._trackPageview();
} catch(err) {}
</script>
</body></html>
I have the below code to validate and send my form. It sends the email fine, but I receive the error message at the bottom of the page instead of the success message. Any help on why it is doing this would be great. This is my first form validation script. Here is the page live: Website here is the javascript: Code: $(document).ready(function() {
$('form #response').hide();
$('#submitbtn').click(function(e) {
e.preventDefault();
var valid = '';
var required = ' is required.';
var name = $('form #name').val();
var phone = $('form #phone').val();
var email = $('form #email').val();
var details = $('form #details').val();
var honeypot = $('form #honeypot').val();
var humancheck = $('form #humancheck').val();
if (!name.match(/^[A-Za-z ]{3,20}$/)) {
valid = '<p>- Your name' + required +'</p>';
}
if (!phone.match(/^([1]-)?[0-9]{3}-?[0-9]{3}-?[0-9]{4}$/i)) {
valid += '<p>- A valid phone number' + required +'</p>';
}
if (!email.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) {
valid += '<p>- A valid email address' + required +'</p>';
}
if (honeypot != 'http://') {
valid += '<p>Spambots are not allowed.</p>';
}
if (humancheck != '') {
valid += '<p>A human user' + required + '</p>';
}
if (valid != '') {
$('form #response').removeClass().addClass('error')
.html('<strong>Please correct the errors below:</strong>' +
valid).fadeIn('fast');
}
else {
$('form #response').removeClass().addClass('processing').html('Processing...').fadeIn('fast');
var formData = $('form').serialize();
submitForm(formData);
}
});
});
function submitForm(formData) {
$.ajax({
type: 'POST',
url: 'bookings.php',
data: formData,
dataType: 'json',
cache: false,
timeout: 7000,
success: function(data) {
$('form #response').removeClass().addClass((data.error === true) ? 'error' : 'success')
.html(data.msg).fadeIn('fast');
if ($('form #response').hasClass('success')) {
setTimeout("$('form #response').fadeOut('fast')", 5000);
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$('form #response').removeClass().addClass('error')
.html('<strong>There was an error. Please use the above information and contact us directly.</strong>').fadeIn('fast');
},
complete: function(XMLHttpRequest, status) {
$('form')[0].reset();
}
});
};
PHP Code: PHP Code: <?php sleep(4); $name = trim(stripslashes(htmlspecialchars($_POST['name']))); $phone = trim(stripslashes(htmlspecialchars($_POST['phone']))); $email = trim(stripslashes(htmlspecialchars($_POST['email']))); $details = trim(stripslashes(htmlspecialchars($_POST['details']))); $humancheck = $_POST['humancheck']; $honeypot = $_POST['honeypot']; if ($honeypot == 'http://' && empty($humancheck)) { //Validate data and return success or error message $error_message = ''; $name_check_exp = "/^[A-Za-z ]{3,20}$/"; $phone_check_exp = "/^([1]-)?[0-9]{3}-?[0-9]{3}-?[0-9]{4}$/i"; $email_check_exp = "/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,4}$/"; if (!preg_match($name_check_exp, $name)) { $error_message .= "<p>Your name is required.</p>"; } if (!preg_match($phone_check_exp, $phone)) { $error_message .= "<p>A valid phone number is required.</p>"; } if (!preg_match($email_check_exp, $email)) { $error_message .= "<p>A valid email address is required.</p>"; } if (!empty($error_message)) { $return['error'] = true; $return['msg'] = "<h3>Oops! The request was successful but your form is not filled out correctly.</h3>".$error_message; echo json_encode($return); exit(); } else { //send to an email $emailSubject = 'Bookings Form'; $webMaster = 'some.email@gmail.com'; $body=" <br><hr><br> Name: $name <br> Phone: $phone <br> Email: $email <br> Details: $details "; $headers = "From: $email\r\n"; $headers .= "Content-type: text/html\r\n"; //send email and return to user if(mail($webMaster, $emailSubject, $body, $headers)) { $return['error'] = false; $return['msg'] = "<p>Message sent successfully. Thank you for your intrest " .$name .".</p>"; echo json_encode($return); } else { $return['error'] = true; $return['msg'] = "<h3>Oops! There was a problem with your submission. Please try again.</h3>"; echo json_encode($return); } } } ?> Ok, I am reasonably new to javascript, and I have been trying to code some really basic client-side form validation. The validation part is working, but for some reason the form won't submit if no errors are found. I have tried all different variations of the submit syntax. i.e. document.login_form.submit();. But settled with the one on W3Schools even though it still didn't work. I would really appreciate any advise. Here is my code: Code: <head>
<title>Project Rival - Authentication</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function verify() {
var themessage = "Please enter your";
if (document.login_form.user.value=="") {
themessage = themessage + " username";
}
if (document.login_form.user.value=="" && document.login_form.pass.value=="") {
themessage = themessage + " and";
}
if (document.login_form.pass.value=="") {
themessage = themessage + " password";
}
//alert if fields are empty and cancel form submit
if (document.login_form.user.value!="" && document.login_form.pass.value!="") {
document.getElementById("login_form").submit();
return true;
}
else {
document.getElementById("error").innerHTML = themessage;
return false;
}
}
</script>
</head>
<body>
<div id="container">
<div id="login_box_top"> </div>
<div id="logo"><img src="images/projectrival.jpg" width="150"/></div>
<div id="error"></div>
<div id="login">
<form action="login.php" method="post" name="login_form" id="login_form">
<input name="user" class="input" id="user" type="text" size="30" maxlength="30" /><br /><br />
<input name="pass" class="input" id="pass" type="password" size="30" maxlength="30" /><br /><br />
<input name="submit" id="submit" type="button" value="Login" onclick="verify()" />
</form>
</div>
<div id="login_box_bottom"> </div>
<div id="copy"><p>© Martin Day 2011 </div>
</div>
</body>
</html>
Many Thanks I am trying to submit my form and receive a success message that go's away. My form validation is working fine and I receive the email, but the echo back to json is giving my error message instead of my success message. This is my first try doing this and am brand new to javascript. If anyone could please help me figure out what is wrong or tell me how to rewrite it, I would be much obliged. Code: function submitForm(formData) {
$.ajax({
type: 'POST',
url: 'bookings.php',
data: formData,
dataType: 'json',
cache: false,
timeout: 7000,
success: function(data) {
$('form #response').removeClass().addClass((data.error === true) ? 'error' : 'success')
.html(data.msg).fadeIn('fast');
if ($('form #response').hasClass('success')) {
setTimeout("$('form #response').fadeOut('fast')", 5000);
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$('form #response').removeClass().addClass('error')
.html('<strong>There was an error. Please use the above information and contact us directly.</strong>').fadeIn('fast');
},
complete: function(XMLHttpRequest, status) {
$('form')[0].reset();
}
});
};
All my parameters will not work after my first form submission unless I refresh my page. Is there a way to refresh the page after the page loads without a continuous loop of refreshes?
Hi I have an insert form.....to insrt data to DB. if user typed in something, BUT clicked on an url in navigation menu TO GO to an OTHER Page...I would be able to give an alert to user-"please submit the form" some thing that way.....Is it possible to do?? pls suggest me some example... TIA I have this form he When a user enters a value in the quantity field that is NaN then a alert messages comes up for the user, also when the NAN is entered the value is submitted on the form. If the user enters a number then then that number is submitted on the form. What I want to do is when the user enters NAN the alert keeps coming up and the value is not submitted on the form, but if they enter no value or a number those values will be submitted on the form. Code: <script>
function getCost(tool,price){
var tags = document.getElementsByName(tool);
var str = tags[0].value;
str = str.trim();
if (str == "")
return 0;
var quanity = Number(str);
if(isNaN(quanity))
{
alert("Please enter a valid number for the " + tool);
quanity = 0;
return false;
}
}
function validateInput(){
val = getCost("Saw",12);
if (val == "NaN")
return false;
val = getCost("Hoe",18);
if (val == "NaN")
return false;
val = getCost("Tree Trimmer",22);
if (val == "NaN")
return false;
}
</script>
<form action="http://crm.abc.com/formtest.php" method="post" onsubmit="return validateInput();">
<p>
<label> Buyer's Name:
<input type="text" name="name"
size="30"/> </label>
<label> Street Address:
<input type="text" name="street"
size="30"/> </label>
<label> City, State, Zip:
<input type="text" name="city"
Size="30"/> </label>
</p>
<table>
<tr>
<th> Tool Name </th>
<th> Price </th>
<th> Quantiy </th>
</tr>
<tr>
<td> Saw </td>
<td> $12.00</td>
<td> <input type= "text" name="Saw"
size="2" />
</td>
</tr>
<tr>
<td> Hoe </td>
<td> $18.00 </td>
<td> <input type="text" name="Hoe"
size="2" />
</td>
</tr>
<tr>
<td> Tree Trimmer </td>
<td> $22.00 </td>
<td> <input type="text" name="Tree Trimmer"
size="2" />
</td>
</tr>
</table>
<h2> Payment Method </h2>
<label> Visa
<input type="radio" name="payment"
id="payment_visa" value="visa" checked="checked"/>
</label>
<br />
<label> Mastercard
<input type="radio" name="payment"
id="payment_mastercard" value="mastercard"/>
</label>
<br />
<label> American Express
<input type="radio" name="payment"
id="payment_american_express" value="american express"/>
</label>
<br />
<input type="submit" value="Submit" />
</form>
Hello, I'm using simple form validation, found online, to check certain fields before submitting. The problem is that, although the script detects the error/missing field/wrong syntax and pops up the corresponding alert, after the user presses OK in the alert box the script continues and sends the form - which of course is not valid. HTML PART: Code: <input name="Submit" type="submit" class="textfield" value="Register" onclick="checkitems();"> JAVASCRIPT PART: Code: function checkitems() {
valid = true;
if ( document.registration.Onoma.value == "" ) {
alert ( "Please enter your name." );
return false;
}
if ( document.registration.HlekDieuthinsi.value == "" ) {
alert ( "Please enter your email." );
return false;
}
var e=document.registration.HlekDieuthinsi.value
var emailFilter=/^\w+[\+\.\w-]*@([\w-]+\.)*\w+[\w-]*\.([a-z]{2,4}|\d+)$/i
if (!(emailFilter.test(e))) {
alert ( "The email address you entered is not valid." );
return false;
}
return valid;
}
Hi - Im pretty new to all this! Have created a form on my website, uploaded database to server, but when the form is submitted - instead of opening the property selection, it just lists the Index of /home/properties and files within that folder. Can anyone help me please? Perky
Hello. I have what I think is a simple request, but I'm not quite sure how to go about it. I hope you can help me! Problem: I am building an online store and need to restrict checkout unless a customer has bought at least $20 worth of items. If they have >$20, they can check out. If they have <$20, they should get an error when they click the checkout button that explains that there is a $20 minimum. I don't want them to be able to checkout, so maybe I also need to disable the button or hide it? Here are the two elements in my HTML: The total price div: Code: <div id="totalprice">{tag_productgrandtotal}</div>
The checkout button: Code: {tag_buybutton,<img alt="" src="/CatalystImages/shop_checkout.png" />}
Here is what I've tried to put together with my bare minimum knowledge of Javascript: Code: <body onload="checkOut()">
<script type="text/javascript">
function checkOut() {
var tp = document.getElementById('totalprice').innerHTML;
tp = tp.replace(/[^0-9$\.]/g,""); // strip anything except numbers decimals and $ sign
if (tp < "$20.00") {
????????????????
}
else {
?????????????????
}
}
</script>
I'm not sure the top part is correct, and where I've put "?????" I have no idea what to do to deactivate the checkout button and produce the error message. Thank you SO much for any help you can provide. Hi I have a entry form which inserts data 2 DB. while the user entering info if he wants to click on any url in left nav pane there should show message: the data won't be saved if you navigate from this page. I have written some code..it works fine but if i Hit submit button on the form It wont submit, still gives the same popup -the data won't be saved if you navigate from this page. HRE IS my code: <script language="javascript"> function closeIt() { return " "; } window.onbeforeunload = closeIt; </script> BUT this works only if i try to navigate from page. But it still prevents the submission. TIA I have rough ideas on how to achieve this but I dont know how to start. I want to use a drop-down menu selection option to submit a form. But the form's contents change depending on the option. This is the basic form: Code: <FORM ID="go1" METHOD="POST" TARGET="_self"> <INPUT TYPE=HIDDEN NAME=UserID VALUE="<%UserID%>"> <INPUT TYPE=HIDDEN NAME=Password VALUE="<%Password%>"> <INPUT TYPE=HIDDEN NAME=SubUnitID VALUE="4266"> <INPUT TYPE=HIDDEN NAME=PageID VALUE="1"> <INPUT TYPE="IMAGE" class="hand" border="0" src="/images/my.gif" width="45" height="26" vspace="5"> </FORM> At the moment, it's an image which gets clicked on but it needs to be the option chosen. I think I can do that with: Code: function gotoPage(s){
var v = s.selectedIndex;
var select = document.forms.form.elements.input; // selects question
if (v == 1){...}
if (v == 2){...} etc.
However, as I said, the form's contents must change depending on the option chosen: The form's values which change a Code: <INPUT TYPE=HIDDEN NAME=SubUnitID VALUE="4266"> <INPUT TYPE=HIDDEN NAME=PageID VALUE="1"> Can someone point me in the right direction? hi, I would like to pop up an edit window when I submit my form, my code below doesn't seem to work?! think my syntax is wrong soemwhere?! Code: function popUpBig(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=400,height=360,left = 220,top = 250');");
}
<form method="post" name="times"><input type="hidden" name="day" value="Monday" /><a type="submit" class="button" onSubmit="javascript:popUpBig('edit_day.php')" ><span>Edit</span></a></form>
Need help adding var target to this form action Would This be correct? var form = inp.form; form.target = "_self"; Code: <html>
</head>
<script type="text/javascript">
function formop(inp,op)
{
var form = inp.form;
form.action = op + ".php";
var temp = inp.id.split(",");
form.id.value = temp[0];
form.FirstName.value = temp[1];
form.LastName.value = temp[2];
}
</script>
</head>
<body>
<form method="post">
<input type="hidden" name="id">
<input type="hidden" name="FirstName">
<input type="hidden" name="LastName">
<input type='image' id='show,me,data' onclick=formop(this,'add'); src='static/icon16/add.jpg'>
<input type='image' id='show,me,data' onclick=formop(this,'edit'); src='static/icon16/edit.jpg'>
<input type='image' id='show,me,data' onclick=formop(this,'delete'); src='static/icon16/delete.jpg'>
</form>
</body>
|
|||||||