|
JavaScript - Submit A Form Without Submit On Same Page
Hi all,
I'm designing something to addon to an existing product. I'm struggling with some javascript problems. I want to submit a hidden field when you click on an image button, rather than it being an actual submit button. It's going to submit the value "1" to a PHP page, but I don't want it to actually have to GO to the PHP page, just submit it within the webpage. Is this possible? Thanks Similar TutorialsI am running into a problem, that no one else in the world seems to have. When I make a form and submit the page is refreshed, or rather redirected to a state with the values filled after the ? (i.e. http://localhost/comp-267/lab15.html -> http://localhost/comp-267/lab15.html?cardNUm=). I have found solutions that have worked for other people, none of them work for me. I have tested my forms on multiple browsers on multiple systems and the problem persists. Here is one example of my code where this happens. Code: <script type="text/javascript">
function checkCC(myForm)
{
var ccType;
var ccLength;
var ccNum = myForm.cardNum.value;
if (myForm.cardType.selectedIndex == 0)
{
ccType = "Visa";
}
else if (myForm.cardType.selectedIndex == 1)
{
ccType = "MasterCard"
}
else if (myForm.cardType.selectedIndex == 2)
{
ccType = "AmericanExpress"
}
switch(ccType)
{
case "Visa":
valid = /^4[0-9]{12}(?:[0-9]{3})?$/;
if (valid.test(myForm.cardNum.value))
{
alert("This is a Valid Visa Card");
return true;
}
else
{
alert("This Card Number is Invalid For Visa");
return false;
}
break;
case "MasterCard":
valid = /^5[1-5][0-9]{14}$/;
if (valid.test(myForm.cardNum.value))
{
alert("This is a Valid MasterCard Card");
}
else
{
alert("This Card Number is Invalid For MasterCard");
}
break;
case "AmericanExpress":
valid = /^3[47][0-9]{13}$/;
if (!valid.test(myForm.cardNum.value))
{
alert("This is a Valid American Express Card");
return true;
}
else
{
alert("This Card Number is Invalid For American Express");
return false;
}
break;
default:
valid = /^$/;
alert("Card type not found");
return false;
}
}
</script>
</head>
<body>
<h1>Credit Card Validator</h1>
<form name="creditCard" onsubmit="return checkCC(this)">
<span class="labels">Card Type:</span>
<select name="cardType" size="3">
<option name="visa">Visa</option>
<option name="mc">Master Card</option>
<option name="amex">American Express</option>
</select>
<br />
<span class="labels">Card Number:</span>
<input name="cardNUm" type="text" size=30 value="" />
<br />
<br />
<input type="submit" value="Death to All"
style="background-color:#666666 !important; border:thick groove !important; border-color:#333333 !important"
onclick="javascript:return checkCC(this.form)" />
</form>
</body>
</html>
you can find the page he Form Example How do I get this to not happen? I've tried almost every fix I could find that worked for other people none have worked for me. I want to use Javascript to submit a form - without filling the form in physically Is this possible? Let's say a web page has a form that submit First Name and Last Name to the next page Instead of filling in the form and hitting submit, can I submit the data in variables and call the next page somehow using Javascript? Thanks OM he everyone please i want to know how to submit a form using ajax every 5 minutes without reloading page i have a huge form for exams and i need to submit the form without the need to wait until pressing submit because the user may wait to think about the answer a very long time.. so i want to submit the form and at the same time i cant reload the page as it is in normal submit form.. so how i can submit form in the background without letting the user knows that the form is submitted??? Hi, I have a form that when you click submit gives a warning box asking if to continue code below Now when I type in the text field and press enter it doesn't submit nor does it pop up the warning box, how would I do this Code for submit button Code: <script LANGUAGE="JavaScript">
<!--
function submitMyForm()
{
var agree=confirm("ARE YOU SURE ?");
if (agree)
return true ;
else
return false ;
}
// -->
</script>
Code: <form action="admin-delete.php" method="post" name="cp_delete" id="cp_delete"> <input type="text" name="cp_delete_bg" id="cp_delete_bg"> <input type="submit" name="submit" value="submit" onclick="return submitMyForm()"/> </form> I have created some online software which uses form data to submit to another page. The problem is that I have other submit buttons in the same form which submit to different pages (depending on which button is pressed). The first submit button works fine but all the others only work once. Code: <input class="cssbutton" type='submit' value='Button1' onclick="wbform.action='page1.php'; target='mainFrame'; return true;"> <input class="cssbutton" type='submit' value='Button2' onclick="wbform.action='page2.php'; target='_blank'; return true;"> <input class="cssbutton" type='submit' value='Button3' onclick="wbform.action='page3.php'; target='topFrame'; return true;"> <input class="cssbutton" type='submit' value='Button4' onclick="wbform.action='page4.php'; target='topFrame'; return true;"> <input class="cssbutton" type='submit' value='Button5' onclick="wbform.action='page5.php'; target='_blank'; return true;"> <input class="cssbutton" type='submit' value='Button6' onclick="wbform.action='page6.php'; target='_blank'; return true;"> Any ideas my friends? Hi all Is using the real form submit button a problem in any way? Can it actaully send a form when a person uses 'enter' in a text field. When I use this submit, it triggers my validation which is great. Code: <input type="submit" value="OnSubmit validate" /> However this way doesn't seem to trigger my validation although It may solve the above form send problem (if that realy exists). How do I get it to act the same as real submit so it will trigger validation like onsubmit above? Code: <input type="button" value="Send Feedback" onclick="this.form.submit()" /> LT does any of that make sense? all ideas helpful and appreciated I've got the following 2 fields in my form: <input type="file" name="filename" id="filename" value="filename"> <input type="submit" name="submit" value="Upload Image" /> Now I want to hide both of them as soon as the submit button is pressed. Problem is that I'm a javascript noob and I can't find it with google :S Can someone help me? I am trying to auto submit a login form remotely using .submit() . It's submitting, but for some reason if I use submit() the login isn't processing. However, if I turn off the auto submit and use an actual submit button it logs in just fine. Now, in the form tag there is a call onsubmit for some validation, does .submit() trigger that form onsubmit="" function? Is there something that happens differently when a user clicks a button verses the .submit(). Thanks! Paul I want to implement a javascript function where a submit button will be submitted from the parent page each time I close a child page. Please let me know what I did wrong in my code and please elaborate your answer so that I could understand it better. Thank you so much for your help. I have the following jscript code but it is now working. Code: window.onunload = submitParent;
function submitParent()
{
var doc = window.opener.document,
theForm = doc.getElementById("finalForm");
theField = doc.getElementById("finalSelected");
theForm.submit();
theField.trigger('click');
}
My form from the parent page is as follow. I want my jscript to just click on the submit button once. Code: <form id = "finalForm "name= "finalForm" method="POST" action=""> <input type="Submit" id = "finalSelected" name="finalSelected"/> I've literally tried everything. Read 26 tutorials, interchanged code, etc. My validation functions all work. My AJAX functions work (tested manually using servlet URL's). The second servlet validates the reCaptcha form that's generated on my webpage. After the form is validated, even if everything's correct, nothing happens upon clicking submit. I even have an alert pop up if with the captcha result, just for middle-layer debugging purposes. I want to do all of my validation clientside; none serverside. However, going to be tough if I can't get my god damn form to submit. I've been puzzled by this for close to 36 hours straight. I can't see, and I'm going to get some rest and hope that there is some useful insight on my problem when I return. html form: Code: <form id="f1" name="form1" onsubmit="validate_form(this); return false;" action="register" method="post">
<table cellspacing="5" style="border: 2px solid black;">
<tr>
<td valign="top">
<table cellspacing="5">
<tr>
<td>*First name</td>
<td align="right"><span id="valid_one"></span></td>
<td><input type="text" style="width: 320px;" id="fn" name="fn" onBlur="validate_one();"></td>
</tr>
<tr>
<td align="left">*Last name</td>
<td align="right"><span id="valid_two"></span></td>
<td><input type="text" style="width: 320px;" id="ln" name="ln" onBlur="validate_two();"></td>
</tr>
<tr>
<td align="left">*Email address</td>
<td align="right"><span id="result"></span></td>
<td><input type="text" style="width: 320px;" id="mailfield" name="email" onBlur="startRequest();"></td>
</tr>
<tr>
<td align="left">*Phone number</td>
<td align="right"><span id="valid_three"></span></td>
<td><input type="text" style="width: 320px;" id="pn" name="pn" onBlur="validate_three();"></td>
</tr>
<tr>
<td align="left">*City/Town</td>
<td align="right"><span id="valid_four"></span></td>
<td><input type="text" style="width: 320px;" id="c" name="c" onBlur="validate_four();"></td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<select name="s">
<option value="AL">Alabama
<option value="AK">Alaska
<option value="AZ">Arizona
<option value="AR">Arkansas
<option value="CA">California
<option value="CO">Colorado
<option value="CT">Connecticut
<option value="DE">Delaware
<option value="FL">Florida
<option value="GA">Georgia
<option value="HI">Hawaii
<option value="ID">Idaho
<option value="IL">Illinois
<option value="IN">Indiana
<option value="IA">Iowa
<option value="KS">Kansas
<option value="KY">Kentucky
<option value="LA">Louisiana
<option value="ME">Maine
<option value="MD">Maryland
<option value="MA">Massachusetts
<option value="MI">Michigan
<option value="MN">Minnesota
<option value="MS">Mississippi
<option value="MO">Missouri
<option value="MT">Montana
<option value="NE">Nebraska
<option value="NV">Nevada
<option value="NH">New Hampshire
<option value="NJ">New Jersey
<option value="NM">New Mexico
<option value="NY">New York
<option value="MC">North Carolina
<option value="ND">North Dakota
<option value="OH">Ohio
<option value="OK">Oklahoma
<option value="OR">Oregon
<option value="PA">Pennsylvania
<option value="RI">Rhode Island
<option value="SC">South Carolina
<option value="SD">South Dakota
<option value="TN">Tennessee
<option value="TX">Texas
<option value="UT">Utah
<option value="VT">Vermont
<option value="VA">Virginia
<option value="WA">Washington
<option value="WV">West Virginia
<option value="WI">Wisconsin
<option value="WY">Wyoming
</select>
</td>
</tr>
<tr>
<td>
<br>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td><span id="error"></span></td>
</tr>
<tr>
<td valign="top">*Anti-Spam Verification</td>
<td></td>
<td id="reCaptcha"></td>
</tr>
</table>
</td>
<td valign="top">
<table cellspacing="5">
<tr>
<td align="left">*Affiliation</td>
<td align="right"><span id="valid_five"></span></td>
<td><input type="text" style="width: 320px;" id="affl" name="affl" onBlur="validate_five();"></td>
</tr>
<tr>
<td align="left">*Research Area:</td>
<td align="right"><span id="valid_six"></span></td>
<td><input type="text" style="width: 320px;" id="ra" name="ra" onBlur="validate_six();"></td>
</tr>
<tr>
<td valign="top" align="left">*Research Overview</td>
<td align="right"><span id="valid_seven"></span></td>
<td><textarea cols="38" rows="6" id="ro" name="ro" onKeyDown="limitText(this.form.ro,this.form.countdown,500)" onKeyUp="limitText(this.form.ro,this.form.countdown,500)" onBlur="validate_seven();"></textarea></td>
</tr>
<tr>
<td></td>
<td></td>
<td><font size="1">You have <input readonly type="text" name="countdown" size="1" value="500"> characters remaining.</font></td>
</tr>
<tr>
<td align="left">*Talk Availability</td>
<td></td>
<td>
<input type="radio" name="ta" value="In person">In person
<input type="radio" name="ta" value="Online">Online
<input type="radio" name="ta" value="Both" checked>Both
</td>
</tr>
<tr>
<td align="left" valign="top">Links</td>
<td></td>
<td>
<table id="linkTable" border="0">
<td><input type="text" style="width: 320px;" name="link"></td>
<td><div id="result"></div></td>
</table>
</td>
<td align="left" valign="top"><input type="button" value="Add Link" onclick="addLink('linkTable')"></td>
</tr>
<tr>
<td></td>
<td><span style="color: red;"></span></td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<input type="submit" id="submit" name="submit" value="Submit Form">
</form>
Javascript file: Code: /*
* script.js - ajax and table functions
*/
var xmlHttp; // global instance of XMLHttpRequest
var xmlHttp2; // second for captcha functions
var validAjax = new Boolean();
var validCaptcha = new Boolean();
var valid_one = new Boolean();
var valid_two = new Boolean();
var valid_three = new Boolean();
var valid_four = new Boolean();
var valid_five = new Boolean();
var valid_six = new Boolean();
var valid_seven = new Boolean();
function init() {
showRecaptcha('reCaptcha');
// Separate booleans for AJAX funcs
validAjax = false;
validCaptcha = false;
// Booleanse for fields that don't require servlet validation
valid_one = false;
valid_two = false;
valid_three = false;
valid_four = false;
valid_five = false;
valid_six = false;
valid_seven = false;
}
function showRecaptcha(element) {
Recaptcha.create("6Le1a8ESAAAAAGtxX0miZ2bMg0Wymltnth7IG-Mj", element, {theme: "red", callback: Recaptcha.focus_response_field});
}
function validate_form() {
if (valid_one && valid_two && valid_three && valid_four && validEmail) {
startCaptchaRequest();
if (validCaptcha) {
return true;
}
}
else {
alert("Submission contains errors. Please fill out all required fields before submitting.");
return false;
}
}
function validate_one() {
if (document.getElementById("fn").value == 0) {
valid_one = false;
document.getElementById("valid_one").innerHTML = "No";
}
else {
valid_one = true;
document.getElementById("valid_one").innerHTML = "";
}
}
function validate_two() {
if (document.getElementById("ln").value == 0) {
valid_two = false;
document.getElementById("valid_two").innerHTML = "No";
}
else {
valid_two = true;
document.getElementById("valid_two").innerHTML = "";
}
}
function validate_three() {
if (document.getElementById("pn").value == 0) {
valid_three = false;
document.getElementById("valid_three").innerHTML = "No";
}
else {
valid_three = true;
document.getElementById("valid_three").innerHTML = "";
}
}
function validate_four() {
if (document.getElementById("c").value == 0) {
valid_four = false;
document.getElementById("valid_four").innerHTML = "No";
}
else {
valid_four = true;
document.getElementById("valid_four").innerHTML = "";
}
}
function validate_five() {
if (document.getElementById("affl").value == 0) {
valid_five = false;
document.getElementById("valid_five").innerHTML = "No";
}
else {
valid_five = true;
document.getElementById("valid_five").innerHTML = "";
}
}
//
//function validate_six() {
// if (document.getElementById("ra").value == 0) {
// valid_six = false;
// document.getElementById("valid_six").innerHTML = "No";
// }
// else {
// valid_six = true;
// document.getElementById("valid_six").innerHTML = "";
// }
//}
//
//function validate_seven() {
// if (document.getElementById("ro").value == 0) {
// valid_seven = false;
// document.getElementById("valid_seven").innerHTML = "No";
// }
// else {
// valid_seven = true;
// document.getElementById("valid_seven").innerHTML = "";
// }
//}
function addLink(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "link" + rowCount;
element1.style.width = "320px";
cell.appendChild(element1);
}
function limitText(limitField, limitCount, limitNum) {
if (limitField.value.length > limitNum) {
limitField.value = limitField.value.substring(0, limitNum);
}
else {
limitCount.value = limitNum - limitField.value.length;
}
}
function createXmlHttpRequest() {
if(window.ActiveXObject) {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest) {
xmlHttp=new XMLHttpRequest();
}
}
function startRequest() {
createXmlHttpRequest();
var param1 = document.getElementById('mailfield').value;
if (param1 == "") {
validEmail = false;
document.getElementById("result").innerHTML = "Blank";
}
else {
xmlHttp.open("GET", "http://localhost:1979/PolarSpeakers/servlet/mailCheck.do?e=" + param1, true)
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.send(null);
}
}
function handleStateChange() {
if(xmlHttp.readyState==4) {
if(xmlHttp.status==200) {
var message =
xmlHttp.responseXML
.getElementsByTagName("valid")[0]
.childNodes[0].nodeValue;
if (message == "Unregistered") {
validEmail = true;
document.getElementById("result").style.color = "green";
}
else {
validEmail = false;
document.getElementById("result").style.color = "red";
}
document.getElementById("result").innerHTML = message;
}
else {
alert("Error checking e-mail address - " + xmlHttp.status +
" : " + xmlHttp.statusText);
}
}
}
function createCaptchaRequest() {
if(window.ActiveXObject) {
xmlHttp2=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest) {
xmlHttp2=new XMLHttpRequest();
}
}
function startCaptchaRequest() {
alert('made it to captcha requeswt');
createCaptchaRequest();
var param1 = Recaptcha.get_challenge();
var param2 = Recaptcha.get_response();
xmlHttp2.open("POST", "http://localhost:1979/PolarSpeakers/servlet/captchaCheck.do?c=" + param1 + "&r=" + param2, true)
xmlHttp2.onreadystatechange = handleStateChangeCaptcha;
xmlHttp2.send(null);
}
function handleStateChangeCaptcha() {
if(xmlHttp2.readyState==4) {
if(xmlHttp2.status==200) {
var message =
xmlHttp2.responseXML
.getElementsByTagName("result")[0]
.childNodes[0].nodeValue;
if (message == "Valid") {
alert("captcha valid");
validCaptcha = true;
}
else {
document.getElementById("error").innerHTML = message;
validCaptcha = false;
}
}
else {
alert("Error checking captcha validity - " + xmlHttp2.status +
" : " + xmlHttp2.statusText);
}
}
}
the showUser function has ajax in it that calls a php file that accesses a db to perform some calculations. I wanted to use the clicked function to force required dropdowns to be selected but I cannot seem to get the submit button to do anything. It does nothing when you click it. Not sure how to proceed, have looked everywhere. If anyone has any advice I would really appreciate it. Code: <form id="forecastfilter" action="indexo_beats.php" method="get" onsubmit="clicked(this.value='yes')"> <div class="fc">Date:</div> <select name="date" onchange="showUser(this.value)"> <option value="">-- </option> <option value="Date: Past Hour">Past hour</option> <option value="Date: Past week">Past week</option> <option value="Date: Past month">Past month</option> <option value="Date: Past year">Past year</option> </select> <br /> <div class="fc">Wideouts:</div> <select name="wideouts" onchange="showUser(this.value)"> <option value="">-- </option> <option value="Wideouts: Higher">Revised Higher</option> <option value="Wideouts: Unchanged">Remains Unchanged</option> <option value="Wideouts: Lower">Revised Lower</option> </select> <br /> <div class="fc">QBs:</div> <select name="qbs" onchange="showUser(this.value)"> <option value="">-- </option> <option value="QBs: beat">Above Analyst Estimates</option> <option value="QBs: inline">Inline with Analyst Estimates</option> <option value="QBs: miss">Below Analyst Estimates</option> </select> <br /> <div class="fc">Football:</div> <select name="football" onchange="showUser(this.value)"> <option value="">-- </option> <option value="Football: beat">Above Analyst Estimates</option> <option value="Football: inline">Inline with Analyst Estimates</option> <option value="Football: miss">Below Analyst Estimates</option> </select> <br /> <div class="fc">Sentiment:</div> <select name="sentiment" onchange="showUser(this.value)"> <option value="">-- </option> <option value="Sentiment: good">Good</option> <option value="Sentiment: neutral">Neutral</option> <option value="Sentiment: bad">Bad</option> </select> <div class="searchbutton"> <input type="button" value="Search Draft" /> </div> </form> Hi, I currently have a form which is submitted using a html submit button. I was wondering what the best way is of using ajax to submit the page without the use of a submit button, and when the page submits, a message is displayed saying thank you for your booking. Thanks. Hi there, Our development team created a page using JS to submit a form. It works fine in IE6... but not in IE8 nor FF3. They can't seem to detect why, so I'm posting this in the hopes that someone will be able to let me know... so that I can tell them. Man! Here is the code that they use: Code: function doSubmit() {
var form = document.RegistrationForm;
form.actionType.value = "userInfo";
form.action = "/fdl/benefitsmanager/registration/UserInfoSubmit.do";
var prefix = document.getElementById('userInfo.prefix')[document.getElementById('userInfo.prefix').selectedIndex].text;
var suffix = document.getElementById('userInfo.suffix')[document.getElementById('userInfo.suffix').selectedIndex].text;
document.getElementById('userInfo.prefixString').value = prefix;
document.getElementById('userInfo.suffixString').value = suffix;
form.submit();
}
It's called by clicking the below image: Code: <a href="javascript:doSubmit();"><img src="../images/buttons/submit.gif" alt="Submit" width="108" height="23" border="0"></a> The above code works fine in IE6 and lets the user submit the form. However, in FF3 nothing happens when the image is clicked and I get the following error using Firebug: document.getElementById("userInfo.prefix") is null var prefix = document.getElementById(...rInfo.prefix').selectedIndex].text; And in IE8 nothing happens when the image is clicked and it just tells me that there is an error. I don't have access to the code, so I can't play around with manipulating the JS. Darn! However, can anyone see what might be causing the error in modern browsers? I'm a bit surprised it's IE8 and FF3 that are having issues... as IE6 is normally the least forgiving browser. Thanks so much, CO I have written some code below which hopefully changes teh value of the flag using JavaScript, I now want to request the value of the flag to see if it's a 1 or a 2? Code: <script>
function collatedata()
{
document.f1.flag.value=1;
document.f1.submit();
}
function generateinvoices()
{
document.f1.flag.value=2;
document.f1.submit();
}
</script>
<input type="hidden" name="flag" id="flag" />
<a href="javascript:collatedata();" class="button"><span>Collate</span></a>
<a href="javascript:generateinvoices();" class="button"><span>Generate</span></a>
Why do I get "Object doesn't support method" error when clicking my links? Code: <script>
function approve(){
document.forms['approve'].submit();
}
function decline(){
document.forms['decline'].submit();
}
</script>
<form method="POST" name="approve" action="">
<input type="hidden" name="STATUS" value="APPROVED">
</form>
<form method="POST" name="decline" action="">
<input type="hidden" name="STATUS" value="DECLINED">
</form>
<p><a href="#" onClick="javascript: approve()" ; >Click here to APPROVE this request.</a></p>
<p><a href="#" onClick="javascript: decline()" ; >Click here to DECLINE this request.</a></p>
Ok - I'm using an 'off the peg' shopping cart (Mal's e-commerce) that posts items to the cart using a standard form with a submit button. What I want to do is send an item to the cart 'automatically', that is without the user actually filling a form or pressing a 'submit' button. What I send to the cart will be dependant upon the value of a cookie that will have been set at some earlier point in the session. My plan was to use document.write statements to build the 'form' and send it to the shopping cart... Here is the kind of form i will be creating: <form method="post" /> <input type="hidden" name="product" value="XXXXXXXX" /> <input type="hidden" name="price" value="0.00" /> <input type="hidden" name="qty" value="1" /> <input type="submit" value="add to basket" /> </form> 1) 1st problem the product value "XXXXXXXX" actually needs to be 'constructed' out of text plus the value held in the cookie eg... 'here is your COOKIEVALUE product' what i was going to try here was "here is your" + COOKIEVALUE + "product" which doesn't work - but that's what I'm trying to achieve. 2) 2nd problem is the submit 'button' needs to be an automatic 'invisible' action - i don't actually want to give them a button to click i just want to submit it from the coding. Hope that makes some kind of sense! I have a php page with a form and some hyperlinks. User types in the form's textarea, if the user forgets to click on submit button of the form and click on any hyper link, it should alert the user "The form has not been submitted" please submit form. if user clicks OK, the form will be submitted. How can I implement this?? onmouseclick works?? please help me.. thanks in adv Hi all, I am building a custom validator. I don't want any suggestions on using a jQuery framework, i just want to ask a few question on how best to continue. Code: <script type="text/javascript">
//Validator Strings And Expressions.
var Letters = /^[A-Za-z]+$/;
var Numbers = /^[0-9]+$/;
var Alphanumeric = /^[A-Za-z0-9]+$/;
var Email = /^[a-z0-9][a-z0-9~_\-]*(\.[a-z][a-z0-9~_\-]*)*@(([a-z0-9][a-z0-9_\-]*\.)+[a-z]{2,4}|[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3})$/i;
var Telephone = "0123456789- +()";
document.onkeyup = function(event){
//IE doesn't pass in the event object
var event = event || window.event;
//IE uses srcElement as the target
var target = event.target || event.srcElement;
var strId = target.id
switch(target.id){
case "M_FIRSTNAME":
validEmpty(strId,"* Please enter your 'First Name'.");
validChars(strId,Letters,"* Your 'First Name' contains invalid characters.");
break;
case "M_LASTNAME":
validEmpty(strId,"* Please enter your 'Last Name'.");
validChars(strId,Letters,"* Your 'Last Name' contains invalid characters.");
break;
case "M_EMAIL":
validEmpty(strId,"* Please enter your 'E-mail Address'.");
validChars(strId,Email,"* Your 'E-mail Address' should be in the format you@email.com.");
break;
case "M_EMAIL_CONF":
validEmpty(strId,"* Please confirm your 'E-mail Address'.");
validMatch(strId,"M_EMAIL","Your 'E-mail Address' does not match.")
break;
case "M_USERNAME":
validEmpty(strId,"* Please enter your 'Username'.");
validChars(strId,Alphanumeric,"* Your 'Username' contains invalid characters.");
validRange(strId,6,12,"* Your 'Username' should be between 6-12 characters.");
OnCheckAvailability(strId);
break;
case "M_PASSWORD":
validEmpty(strId,"* Please enter your 'Password'.");
validChars(strId,Alphanumeric,"* Your 'Password' contains invalid characters.");
validRange(strId,6,12,"* Your 'Password' should be between 6-12 characters.");
break;
case "M_PASSWORD_CONF":
validEmpty(strId,"* Please confirm your 'Password'.");
validMatch(strId,"M_PASSWORD","Your 'Password does not match.'")
break;
}
//document.write(return true);
};
document.onclick = function(event){
//IE doesn't pass in the event object
var event = event || window.event;
//IE uses srcElement as the target
var target = event.target || event.srcElement;
var strId = target.id
switch(target.id){
case "M_TERMS":
validCheck(strId,"* Please accept our Terms and Conditions.");
break;
}
};
</script>
This is the "on page" validation. This, as you can see calls functions held in an included file onkeyup. This all works well, also the username check ajax call works great. However I have 2 questions that I need to sort before this will work correctly. 1. Using M_USERNAME form as an example. If I start typing in there it will begin validating, which is great, However, if i typed in "matt_thomas" based on the validations, Empty:Pass, ValidChars:Fail, Range:Pass, Check:Pass. So I know that it isn't empty, it's the correct length and it's not already in the DB. But it fails because of the "_". This should mean that I receive the error i have setup for that failure. But I don't. Because I don't stop on a Fail, I receive the success message of the last function. So my question is; How Can I stop running any more functions when one fails? 2. Looking at the above code, How can I make sure that a submit will only work when ALL fields validate correctly? Is this possible? I'm sure it is, but Can't see the woods for the trees right now Thanks for any advice you can give. Even if you can just suggest something to look for. Also sorry in advance but I don't understand alot of "tech" jargon lol, so please keep it simple. Help, i need to edit my code to submit the form so that it will submit the data once clicked on. I am using this tutorial he http://www.switchonthecode.com/tutor...-jquery-plugin here is my code so far: my JS file: // run rating jQuery.fn.ratings = function(stars, initialRating) { //Save the jQuery object for later use. var elements = this; //Go through each object in the selector and create a ratings control. return this.each(function() { //Make sure intialRating is set. if(!initialRating) initialRating = 0; //Save the current element for later use. var containerElement = this; //grab the jQuery object for the current container div var container = jQuery(this); //Create an array of stars so they can be referenced again. var starsCollection = Array(); //Save the initial rating. containerElement.rating = initialRating; //Set the container div's overflow to auto. This ensure it will grow to //hold all of its children. container.css('overflow', 'auto'); //create each star for(var starIdx = 0; starIdx < stars; starIdx++) { //Create a div to hold the star. var starElement = document.createElement('div'); //Get a jQuery object for this star. var star = jQuery(starElement); //Store the rating that represents this star. starElement.rating = starIdx + 1; //Add the style. star.addClass('jquery-ratings-star'); //Add the full css class if the star is beneath the initial rating. if(starIdx < initialRating) { star.addClass('jquery-ratings-full'); } //add the star to the container container.append(star); starsCollection.push(star); //hook up the click event star.click(function() { //set the containers rating containerElement.rating = this.rating; // document.voteform.submit(); //When clicked, fire the 'ratingchanged' event handler. //Pass the rating through as the data argument. elements.triggerHandler("ratingchanged", {rating: this.rating}); }); star.mouseenter(function() { //Highlight selected stars. for(var index = 0; index < this.rating; index++) { starsCollection[index].addClass('jquery-ratings-full'); } //Unhighlight unselected stars. for(var index = this.rating; index < stars; index++) { starsCollection[index].removeClass('jquery-ratings-full'); } }); container.mouseleave(function() { //Highlight selected stars. for(var index = 0; index < containerElement.rating; index++) { starsCollection[index].addClass('jquery-ratings-full'); } //Unhighlight unselected stars. for(var index = containerElement.rating; index < stars ; index++) { starsCollection[index].removeClass('jquery-ratings-full'); } }); } }); }; $(document).ready(function() { $('#example-1').ratings(10).bind('ratingchanged', function(event, data) { $('#example-rating-1').text(data.rating); }); }); My html: PHP Code: echo '<form action="stream.php?task=vote" name="voteform" method="post"> '; echo ' <div id="example-1"></div> <input id="example-rating-1" type="hidden" name="score" value="0"/>'; echo '</form>'; Heres what i want it to do, I want it to submit the form once a star has been clicked, i already achieved this with the document.voteform.submit() in comments in the JS file but i cant seem to get the input to change so that it submits the actual user vote value. Please help me |
|||||||