|
JavaScript - Form/js Problem...
Hi People,
I am trying to use a button I found on: http://monc.se/kitchen/59/scalable-c...ground-colors/ The button setup works fine, but my form doesn't work any more... That is why I am hoping anyone here can help me out. Thanks in advance! The JS I use for my form is: Code: var lv_firstName = new LiveValidation('firstName', {onlyOnBlur: true});
lv_firstName.add(Validate.Presence);
lv_firstName.add(Validate.Length, {minimum: 2, maximum: 50});
lv_firstName.add(Validate.Format, {pattern: /^([a-z \-\']+)$/i});
var lv_insertion = new LiveValidation('insertion', {onlyOnBlur: true});
lv_insertion.add(Validate.Length, {minimum: 2, maximum: 50});
lv_insertion.add(Validate.Format, {pattern: /^([a-z \-\']+)$/i});
var lv_lastName = new LiveValidation('lastName', {onlyOnBlur: true});
lv_lastName.add(Validate.Presence);
lv_lastName.add(Validate.Length, {minimum: 2, maximum: 50});
lv_lastName.add(Validate.Format, {pattern: /^([a-z \-\']+)$/i});
var lv_emailaddress = new LiveValidation('emailaddress', {onlyOnBlur: true});
lv_emailaddress.add(Validate.Presence);
lv_emailaddress.add(Validate.Email);
var lv_message = new LiveValidation('message', {onlyOnBlur: true});
lv_message.add(Validate.Presence, {failureMessage: ' '});
lv_message.add(Validate.Length, {minimum: 10, failureMessage: ' '});
The code I use for the button is: Code: var btn = {
init : function() {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
as = btn.getElementsByClassName('btn(.*)');
for (i=0; i<as.length; i++) {
if ( as[i].tagName == "INPUT" && ( as[i].type.toLowerCase() == "submit" || as[i].type.toLowerCase() == "button" ) ) {
var a1 = document.createElement("a");
a1.appendChild(document.createTextNode(as[i].value));
a1.className = as[i].className;
a1.id = as[i].id;
as[i] = as[i].parentNode.replaceChild(a1, as[i]);
as[i] = a1;
as[i].style.cursor = "pointer";
}
else if (as[i].tagName == "A") {
var tt = as[i].childNodes;
}
else { return false };
var i1 = document.createElement('i');
var i2 = document.createElement('i');
var s1 = document.createElement('span');
var s2 = document.createElement('span');
s1.appendChild(i1);
s1.appendChild(s2);
while (as[i].firstChild) {
s1.appendChild(as[i].firstChild);
}
as[i].appendChild(s1);
as[i] = as[i].insertBefore(i2, s1);
}
if (document.getElementById('submit_btn')) {
btn.addEvent(document.getElementById('submit_btn'),'click',function() {
var form = btn.findForm(this);
form.submit();
});
}
},
findForm : function(f) {
while(f.tagName != "FORM") {
f = f.parentNode;
}
return f;
},
addEvent : function(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent("on"+type, obj[type+fn]);
}
},
getElementsByClassName : function(className, tag, elm) {
var testClass = new RegExp("(^|\s)" + className + "(\s|$)");
var tag = tag || "*";
var elm = elm || document;
var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
var returnElements = [];
var current;
var length = elements.length;
for(var i=0; i<length; i++){
current = elements[i];
if(testClass.test(current.className)){
returnElements.push(current);
}
}
return returnElements;
}
}
btn.addEvent(window,'load', function() { btn.init();} );
HTML: Code: <p><input type="submit" value="Formulier verzenden" class="btn blue" id="submit_btn" /></p> Similar TutorialsHaving a problem with the name of a select list being passed to a function. The function is very simple, just supposed to take the selected index of a select list and make another select list the same index. Putting the actual names of the select lists in the code works fine but i am trying to pass the name as there are 15 of these lists and i dont want to create a function for each of them. Code:
function SetJobAsAbove(Target,Source)
{
if (document.form.Target.selectedIndex == 0)
{
alert ('You must select a Job in the line above before you can copy it')
}
else
{
document.form.Target.selectedIndex == document.form.Source.selectedIndex
}
}
This is link used, L1_Job and L2_job are both select lists. Code:
<a href="javascript:SetJobAsAbove('L2_Job','L1_Job')">Copy</a>
I have checked form names etc and are case correct etc. Any help with this would be greatly apprieciated. 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 Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.showHideDivs {
display: none
}
</style>
<script type="text/javascript">
function showHideDivs(){
var job = '';
for(i=0; i < oRadBtns.length; i++){
if(oRadBtns[i].checked){
job = oRadBtns[i].value;
}
}
switch (job){
case 'yes':
document.getElementById("nombre").style.display = "none";
document.getElementById("apellido").style.display = "none";
document.getElementById("empresa").style.display = "block";
document.getElementById("contacto").style.display = "block";
break;
case 'no':
document.getElementById("nombre").style.display = "block";
document.getElementById("apellido").style.display = "block";
document.getElementById("empresa").style.display = "none";
document.getElementById("contacto").style.display = "none";
}
}
window.onload=function(){
oRadBtns = document.getElementById('radBtnCont').getElementsByTagName('input');
for(i=0; i < oRadBtns.length; i++){
oRadBtns[i].onclick = showHideDivs;
}
showHideDivs();
}
</script>
</head>
<body>
<div id="radBtnCont">
<input type="radio" value="yes" name="job" checked="checked" />Yes
<br />
<input type="radio" value="no" name="job" />No
</div>
<div id="nombre" class="showHideDivs">This is nombre div</div>
<div id="apellido" class="showHideDivs">This is apellido div</div>
<div id="empresa" class="showHideDivs">This is empresa div</div>
<div id="contacto" class="showHideDivs">This is contacto div</div>
</body>
</html>
Hello everyone! I'm new to javascript (started just yesterday) and I've run to some problems... Code: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="hr" lang="hr">
<head>
<title> Tomislav Paj - studentska web stranica </title>
<link rel="stylesheet" type="text/css" href="moj1.css" />
<script type="text/javascript">
function zbroji(){
var MA1 = document.getElementById("MA1");
var LA1 = document.getElementById("LA1");
var EM1 = document.getElementById("EM1");
var PR1 = document.getElementById("PR1");
var MA2 = document.getElementById("MA2");
var LA2 = document.getElementById("LA2");
var EM2 = document.getElementById("EM2");
var PR2 = document.getElementById("PR2");
zbroj = ( 8*MA1.value + 8*LA1.value + 8*EM1.value + 8*MA2.value + 8*LA2.value + 8*EM2.value ) + 0.5 * ( 6*PR1.value + 6*PR1.value );
UKUPNO.value = zbroj;
}
</script>
</head>
.................
<div class="dd" >
<h2> DiplCalc </h2>
<form>
<pre>
PRVI SEMESTAR
Mat. Analiza 1 <input type="number" class="upis" id="MA1" maxLength=1 size=1 />
Lin. Algebra 1 <input type="number" class="upis" id="LA1" maxLength=1 size=1 />
Elem. Mat 1 <input type="number" class="upis" id="EM1" maxLength=1 size=1 />
Programiranje 1 <input type="number" class="upis" id="PR1" maxLength=1 size=1 />
<br/>
DRUGI SEMESTAR
Mat. Analiza 2 <input type="number" class="upis" id="MA2" maxLength=1 size=1 />
Lin. Algebra 2 <input type="number" class="upis" id="LA2" maxLength=1 size=1 />
Elem. Mat 2 <input type="number" class="upis" id="EM2" maxLength=1 size=1 />
Programiranje 2 <input type="number" class="upis" id="PR2" maxLength=1 size=1 />
<br/>
<input type="button" id="suma" value="UKUPNO" onclick="zbroji()" /> <input type="text" class="ispis" id="UKUPNO" size=5/>
</pre>
</form>
</div>
this should be some kind of tool that helps calculate grad points... nevermind... it was working fine, until I've put it inside <div> block... please hepl!! thank you *edit this is working just fine on Safari and Crome, but fails on Firefox and IE... I hope someone can help with this. I needed a form for my website and found one i liked so used there code, however i cannot get mine to work properly, i believe the problem exists here, however not sure what to do with it: <form action="contact.htm" method="post" name="contactForm" onsubmit="return validateForm()" > <p><strong>Contact information: </strong></p> <input type=hidden name="httpref" value="http://www.karenshealthandfitness.com/contact.htm"> also do i need a php file with this or something along those lines? Sorry if that sound lame, i am not the greatest at this just fumble my way through. Working of JS form validation now, this is my code: Code: <html>
<head>
<script>
function notEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus(); // set the focus to this input
return false;
}
return true;
}
</script>
</head>
<body>
<form action="mailto:fonzhende1@yahoo.com" method="post">
<table>
<tr>
<td>Name:</td>
<td>
<input type="text" name="name" value="" />
</td>
</tr>
<tr>
<td>email address:</td>
<td>
<input type="text" name="email" value="" />
</td>
</tr>
<tr>
<th></th>
<td>
<input type="submit" value="Submit" />
</td>
</tr>
</table>
<textarea rows="2" cols="20"> Test area </textarea><br/>
<br/>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select><br/>
<br/>
<input type="radio" name="group1" value="Milk"> Milk<br>
<input type="radio" name="group1" value="Butter" checked> Butter<br>
</form>
</body>
</html>
Problem is when I submit the form I am getting what you see in the attachment, I guess this email form which pops up needs to be directed to Yahoo Hosting then redirected from there back to me? Anyway I would like if it the email could be sent directly to me without this form popping up, is that possible? Also, when I submit the form with the fields empty I am not getting the error message? Hello, I don't see what the problem is with my form validation script. It does not validate. Please point it out to me. Code: <script type="text/javascript">
function validateForm()
{
var x=document.forms["myForm"]["name"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
var x=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Please enter a valid email address");
return false;
}
var x=document.forms["myForm"]["message"].value;
if (x==null || x=="")
{
alert("You have not entered a message");
return false;
}
}
</script>
html Code: <form name="myForm" action="contact.php" onsubmit="return validateForm()" method="post"> First name: </p> <input type="text" name="name"> </p> Email address: </p> <input type="text" name="email"> </p> Subject: </p> <input type="text" name="subject"> </p> Message: </p> <textarea name="message" rows="15" cols="50"></textarea> </p> <input type="submit" value="Submit"> </form> the script is in the <head> section and html in the <body>. Thank you. please see http://bit.ly/i5TwmL for what I am working on. You can see that when selecting 'Contact' from the top navigation a light-box (fancybox) with a contact form opens, this form can be filled and when the submit button is pressed the content of the form is emailed to myself. However.... The 'Thank you message' is not appearing in the light-box as I would like it to and I cannot work out how to do this. Any suggestions muchly appreciated! Hi guys I'm having trouble with my javascript coding. The form works fine in IE but does not work in firefox I've been pulling my hair out overt his for the last hour and can't figure it out. Code: <script type="text/javascript">
<!--
function validate_form ( )
{
valid = true;
if ( document.getElementById.rego_form.First_name.value == "" )
{
//Alert the user to
alert ( "Please fill in your first name." );
valid = false;
}
if ( document.getElementById.rego_form.Last_name.value == "" )
{
//Alert the user to
alert ( "Please fill in your last name." );
valid = false;
}
//Check Age
if (parseInt(document.getElementById.rego_form.Age.value) < 16 || parseInt(document.rego_form.Age.value) > 90)
{
//Alert the user to
alert ("Please enter an age between 16 and 90");
return false;
}
return valid;
}
//-->
</script>
This is the fields I would like them to enter into but when I do this in IE you can't click on the top 3 fields to enter data Code: <form name="rego_form" method="post" action="" onSubmit="return validate_form ( );"> <h1>Please Fill Out Your Details Below</h1> <p>Email: <input type="text" name="Email"></p> <p>First Name: <input type="text" name="First_name"></p> <p>Surame: <input type="text" name="Last_name"></p> <p>Age: <input type="text" name="Age"></p> <p>Address: <input type="text" name="Address"></p> <p>City: <input type="text" name="City"></p> <p>City: <input type="text" name="City"></p> <p><input type="submit" name="send" value="Send Details"></p> </form> Any help would be greatly appreciated! hi again i hope somebody will help me to fix this problem I have a form which has not submit button but two options either to pay or to just submit so i use this in my code: Code: td><input type="button" value="Payment" onClick="this.form.action='payments.php';this.form.submit()" />
<input type="button" value="More Information" onClick="this.form.action='confirmation.php';this.form.submit()" /></td>
so when they click on "Payments" they move to "payments.php and when they click on "More Information" they move to confirmation.php. Now my problem is i wants to validated it either through JavaScript or PHP but there is only one way i know with submit method. here i am using onClick function to move to other page. Please if somebody can help i much appericiate. here is the complete code of form i try to use PHP validation here but no luck please help me Code: <?php
if ($_POST['submit']) {
$title = $_POST['title'];
$name = $_POST['name'];
$insurance = $_POST['insurance'];
$address = $_POST['address'];
$phone = $_POST['phone'];
$email = $_POST['title'];
$error = "";
if (!$title)
$error = $error. "Title <br />";
if (!$name)
$error = $error. "Name <br />";
if (!$insurance)
$error = $error. "National Insurance Number <br />";
if (!$address)
$error = $error. "Address <br />";
if (!$phone)
$error = $error. "Telephone Number <br />";
if (!$email)
$error = $error. "Email Address <br />";
if (!$error !="")
echo "Please Fill in The Following Required Fields <br /> $error";
else {
return $_POST['submit'];
}
}
?>
<div id="form" style="margin: 90px;">
<form action="" method="POST">
<table>
<tr>
<td align="right">
Title:<span style="color:red;">*</span>
</td>
<td>
<input style="border:1px solid #4088b8;" type="text" size="29" name="title">
</td>
</tr>
<tr>
<td align="right">
Name:<span style="color:red;">*</span>
</td>
<td>
<input style="border:1px solid #4088b8;" type="text" size="29" name="name">
</td>
</tr>
<tr>
<td align="right">
National Insurance<br /> Number:<span style="color:red;">*</span>
</td>
<td>
<input style="border:1px solid #4088b8;" type="text" size="29" name="insurance">
</td>
</tr>
<tr>
<td align="right">
Address:<span style="color:red;">*</span>
</td>
<td>
<input style="border:1px solid #4088b8;" type="text" size="29" name="address">
</td>
</tr>
<tr>
<td align="right">
Tleephone Number:<span style="color:red;">*</span>
</td>
<td>
<input style="border:1px solid #4088b8;" type="text" size="29" name="phone">
</td>
</tr>
<tr>
<td align="right">
Email:<span style="color:red;">*</span>
</td>
<td>
<input style="border:1px solid #4088b8;" type="text" size="29" name="email">
</td>
</tr>
<tr>
<td align="right">
CSCS Registration Number:
</td>
<td>
<input style="border:1px solid #4088b8;" type="text" size="29" name="registration">
</td>
</tr>
<tr>
<td align="right">
Special Accommodations:
</td>
<td>
<textarea style="border:1px solid #4088b8;" type="textarea" cols="30" rows="5" name="comments">
</textarea>
</td>
</tr>
<tr><td> </td></tr>
<tr><td> </td>
<td><input type="button" value="Payment" onClick="this.form.action='payments.php';this.form.submit()" />
<input type="button" value="More Information" onClick="this.form.action='confirmation.php';this.form.submit()" /></td>
</tr>
</table>
</form>
</div>
Can any of you nice people out there help I am writing a from with user details input E.G. House Number Street City user can input the house number and the street but the city is restricted to only the city I live in How do I make the input address1 equal house number + a space + street + a space + city, I am a beginner wrote this to learn but have got stuck! The code Code: <form action="#" onsubmit="showLocation(); return false;"> <table width=780 border=0 align=center summary=""> <tr> <td colspan=3><font size="+1"><b><div style="text-align: center">just some test here</div></b></font></td> </tr> <tr> <td><b>Pick Up Address</b></td> <td>House Number</td> <td><input type="text" name="punum" size="40" maxlength="5" /></td> </tr> <tr> <td><!-- --></td> <td>Street</td> <td><input type="text" name="pustreet" size="40" maxlength="20" /></td> </tr> <tr> <td><!-- --></td> <td>City</td> <td><select name="pucity" size="1"><option value="Cardiff" selected> Cardiff</option></select></td> </tr> <tr> <td><!-- --></td> <td>Post Code</td> <td><input type="text" name="pupostcode" size="40" maxlength="10"></td> </tr> <tr> <td><b>ADDRESS 1</b></td> <td>Pick Up Address</td> <td><input type="text" name="address1" value="Contents of punum and pustreet in here" /></td> </tr> <tr> <td></td> <td>Pick Up Time</td> <td><select name="putime" size="1"> <option value="00:00"> 00:00</option> <option value="00:15"> 00:15</option> <option value="00:30"> 00:30</option> <option value="00:45"> 00:45</option> <option value="01:00"> 01:00</option> <option value="01:15"> 01:15</option> <option value="01:30"> 01:30</option> <option value="01:45"> 01:45</option> <option value="02:00"> 02:00</option> <option value="02:15"> 02:15</option> <option value="02:30"> 02:30</option> <option value="02:45"> 02:45</option> <option value="03:00"> 03:00</option> <option value="03:15"> 03:15</option> <option value="03:30"> 03:30</option> <option value="03:45"> 03:45</option> <option value="04:00"> 04:00</option> <option value="04:15"> 04:15</option> <option value="04:30"> 04:30</option> <option value="04:45"> 04:45</option> <option value="05:00"> 05:00</option> <option value="05:15"> 05:15</option> <option value="05:30"> 05:30</option> <option value="05:45"> 05:45</option> <option value="06:00"> 06:00</option> <option value="06:15"> 06:15</option> <option value="06:30"> 06:30</option> <option value="06:45"> 06:45</option> <option value="07:00"> 07:00</option> <option value="07:15"> 07:15</option> <option value="07:30"> 07:30</option> <option value="07:45"> 07:45</option> <option value="08:00"> 08:00</option> <option value="08:15"> 08:15</option> <option value="08:30"> 08:30</option> <option value="08:45"> 08:45</option> <option value="09:00"> 09:00</option> <option value="09:15"> 09:15</option> <option value="09:30"> 09:30</option> <option value="09:45"> 09:45</option> <option value="10:00"> 10:00</option> <option value="10:15"> 10:15</option> <option value="10:30"> 10:30</option> <option value="10:45"> 10:45</option> <option value="11:00"> 11:00</option> <option value="11:15"> 11:15</option> <option value="11:30"> 11:30</option> <option value="11:45"> 11:45</option> <option value="12:00"> 12:00</option> <option value="12:15"> 12:15</option> <option value="12:30"> 12:30</option> <option value="12:45"> 12:45</option> <option value="13:00"> 13:00</option> <option value="13:15"> 13:15</option> <option value="13:30"> 13:30</option> <option value="13:45"> 13:45</option> <option value="14:00"> 14:00</option> <option value="14:15"> 14:15</option> <option value="14:30"> 14:30</option> <option value="14:45"> 14:45</option> <option value="15:00"> 15:00</option> <option value="15:15"> 15:15</option> <option value="15:30"> 15:30</option> <option value="15:45"> 15:45</option> <option value="16:00"> 16:00</option> <option value="16:15"> 16:15</option> <option value="16:30"> 16:30</option> <option value="16:45"> 16:45</option> <option value="17:00"> 17:00</option> <option value="17:15"> 17:15</option> <option value="17:30"> 17:30</option> <option value="17:45"> 17:45</option> <option value="18:00"> 18:00</option> <option value="18:15"> 18:15</option> <option value="18:30"> 18:30</option> <option value="18:45"> 18:45</option> <option value="19:00"> 19:00</option> <option value="19:15"> 19:15</option> <option value="19:30"> 19:30</option> <option value="19:45"> 19:45</option> <option value="20:00"> 20:00</option> <option value="20:15"> 20:15</option> <option value="20:30"> 20:30</option> <option value="20:45"> 20:45</option> <option value="21:00"> 21:00</option> <option value="21:15"> 21:15</option> <option value="21:30"> 21:30</option> <option value="21:45"> 21:45</option> <option value="22:00"> 22:00</option> <option value="22:15"> 22:15</option> <option value="22:30"> 22:30</option> <option value="22:45"> 22:45</option> <option value="23:00"> 23:00</option> <option value="23:15"> 23:15</option> <option value="23:30"> 23:30</option> <option value="23:45"> 23:45</option> </select> <font color="#FF0000">24 Hr</font> </td> </tr> <tr> <td><b>Customer Details</b></td> <td>First Name</td> <td><input type="text" name="fname" size="40" maxlength="20"></td> </tr> <tr> <td><!-- --></td> <td>Last Name</td> <td><input type="text" name="lname" size="40" maxlength="20"></td> </tr> <tr> <td><!-- --></td> <td>Telephone Number</td> <td><input type="text" name="tel1" size="40" maxlength="20"></td> </tr> <tr> <td><b>Destination Address</b></td> <td>House Number</td> <td><input type="text" name="dnum" size="40" maxlength="5"></td> </tr> <tr> <td><!-- --></td> <td>Street</td> <td><input type="text" name="dstreet" size="40" maxlength="20"></td> </tr> <tr> <td><!-- --></td> <td>City</td> <td><select name="dcity" size="1"> <option value="Barry"> Barry</option> <option value="Bridgend"> Bridgend</option> <option value="Caerphilly"> Caerphilly</option> <option value="Cardiff"> Cardiff</option> <option value="Newport"> Newport</option> <option value="Pontypridd"> Pontypridd</option> </select></td> </tr> <tr> <td><!-- --></td> <td>Post Code</td> <td><input type="text" name="dpostcode" size="40" maxlength="10"> <br></td> </tr> <tr> <td><b>ADDRESS 2</b></td> <td>Destination</td> <td><input type="text" name="address2" value="Birmingham Airport UK" /></td> </tr> <tr> <td><!-- --></td> <td><!-- --></td> <td><input type="submit" value="Get Tariff" /></td> </tr> </table> <!-- END OF FORM TABLE --> </form> hello, i have a form in my header that is hidden and i have it show when you click a link, the problem is, when the form appears, it pushes everything down below it, any ideas on how to get around this?
Hello I needed an interdependent form for a website. Since i don't know any JavaScript this has been pretty tricky and i still have some problems. This is the code I'm using: JavaScript: Code: <script type='text/javascript'>
var ss2Values = [
// 'Please choose a subject'
['Please choose a category'],
// '3D Printer'
['Darwin', 'Huxley', 'Mendel', 'Printrbot', 'Prusa Mendel'],
// 'Home'
['Bathroom', 'Bedroom', 'Decorations', 'Furniture', 'Home utilities', 'Household items', 'Kitchen', 'Livingroom', 'Outdoor'],
// 'Mechanical'
['Gears', 'Nuts and bolts', 'Tracks and bogies'],
// 'Fun'
['Games', 'Ornaments', 'Toys'],
// 'Electrical'
['Games', 'Ornaments', 'Toys'],
// 'Educational'
['Biological models', 'Chemical models', 'Mathematical', 'Physical models']
];
window.onload = function()
{
var ss2 = new xSubSelect('sel20', 'sel21', null, ss2Values, ss2OnChange);
}
function ss1OnChange(s0, s1, s2)
{
alert(
s0.options[s0.selectedIndex].value + ' / '
+ s1.options[s1.selectedIndex].value + ' / '
+ s2.options[s2.selectedIndex].value
);
}
function ss2OnChange(s0, s1)
{
alert(
s0.options[s0.selectedIndex].value + ' / '
+ s1.options[s1.selectedIndex].value
);
}
function xSubSelect(sSelId0, sSelId1, sSelId2, aValues, fnOnChange)
{
var s0 = document.getElementById(sSelId0);
var s1 = document.getElementById(sSelId1);
var s2 = sSelId2 ? document.getElementById(sSelId2) : null;
if (s0 && s1)
{
s0.onchange = function()
{
var i, len, val;
// clear existing options for s1
len = s1.options.length;
for (i = 0; i < len; ++i)
{
s1.options[0] = null;
}
// insert new options for s1
len = aValues[s0.selectedIndex].length;
for (i = 0; i < len; ++i)
{
val = aValues[s0.selectedIndex][i];
s1.options[i] = new Option(s2 ? val[0] : val);
}
// update s2
if (s2)
{
s1.onchange();
}
};
if (s2)
{
s1.onchange = function()
{
var i, len;
// clear existing options for s2
len = s2.options.length;
for (i = 0; i < len; ++i)
{
s2.options[0] = null;
}
// insert new options for s2
len = aValues[s0.selectedIndex][s1.selectedIndex].length;
for (i = 1; i < len; ++i)
{
s2.options[i - 1] = new Option(aValues[s0.selectedIndex][s1.selectedIndex][i]);
}
};
s2.onchange = function()
{
if (fnOnChange)
{
fnOnChange(s0, s1, s2);
}
};
}
else
{
s1.onchange = function()
{
if (fnOnChange)
{
fnOnChange(s0, s1);
}
};
}
s0.onchange(); // first init
}
}
</script>
PHP Code: <?php if (isset($_POST['submit'])) { $subject_id = $_POST['sel20']; $category_id = $_POST['sel21']; $output_form = 'no'; } else { $output_form = 'yes'; } if ($output_form == 'yes') { ?> <table> <tr> <td> <form name='form2' method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"> <label for="sel20">Subject and category:</label> <br /> <select id='sel20' name'sel20'> <option>Please choose a subject</option> <option value="3D Printer">3D Printer</option> <option value="Home">Home</option> <option Value="Mechanical">Mechanical</option> <option value="Fun">Fun</option> <option value="Electrical">Electric</option> <option value="Educational">Educational</option> </select> <br /> <select id='sel21' name='sel21'> </select> <p class="signup_mgrey_10px"><a href="request_category">My category is not there?</a></p> <input type="submit" name="submit" value="Upload" /> </form> </td> <td> <img src="../images/upload_guide.png" alt="Upload your 3D model" /> </td> </tr> </table> <?php } if ($output_form == 'no') { //Write data to databse $query = "INSERT INTO models (subject_id, category_id) VALUES ('$subject_id', '$category_id')"; mysqli_query($connection, $query) or die ('Data not inserted.'); } ?> The JavaScript part is from an example including 2 interdependent forms. So there might be code for both forms, since i don't know which parts i can delete. When i write to my database it only writes the category_id. The subject_id won't get set. I tried echoing out $subject_id right before writing the $query without any luck. Can anyone spot the problem? Thanks in advance. EDIT: sorry sorry, I just realized I posted this on the wrong place.... {palmface} Just to start off, Javascript is NOT my forte'. Ive been trying to do some form validating for a few hours now. I've tried many different combos and trying multiple functions to make this work but I have seemed to make more of a mess than anything now. Here's what I've got going on... A simple form with 3 text inputs a checkbox and a submit button. I'm trying to do 7 things. 1. strip special characters from all 3 input fields (except : / and @) 2. make sure no input fields are blank 3. verify that email has @ and . in it 4. insure that the checkbox is checked I would love to set the email not to allow certain domains(yahoo,gmail) but that is a bit out of my league. Any help would be appreciated, below is the current garbled mess of javascript I am left with after hours of trying to get it to work... my appologies. I know it's ugly. Code: <script LANGUAGE="Javascript">
<!-- Begin
function CleanUp() {
name = document.register.name.value;
email = document.register.email.value;
website = document.register.website.value;
var iChars = "!#$%^&*()+=-[]\';,.{}|\"<>?";
//remove crap name
for (var i = 0; i < document.register.name.value.length; i++) {
if ((iChars.indexOf(document.register.name.charAt(i)) != -1)) {
window.alert ("No special characters allowed.");
return false;
}}
//remove crap website
for (var i = 0; i < document.register.website.value.length; i++) {
if ((iChars.indexOf(document.register.website.charAt(i)) != -1)) {
window.alert ("No special characters allowed.");
return false;
}}
//remove crap email
for (var i = 0; i < document.register.email.value.length; i++) {
if ((iChars.indexOf(document.register.email.charAt(i)) != -1)) {
window.alert ("No special characters allowed.");
return false;
}}
//check required field
if ((name == "") || (email == "")|| (website == "")) {
window.alert("Please enter your Name, website, and E-mail address.");
return false;
}
//verify email
if (email.value.indexOf("@", 0) < 0)
{
window.alert("Please enter a valid e-mail address.");
return false;
}
if (email.value.indexOf(".", 0) < 0)
{
window.alert("Please enter a valid e-mail address.");
return false;
}
// check agree term before submit
if (agree.checked == false )
{
alert('Please confirm you are the site owner.');
return false;
//done
}else
return true;
}
// End -->
</script>
I am currently trying to fix a problem on the form submission on my site. On the Request Information page I am using MM_validateForm function and the FormtoEmail.php script. When required fields are blank, you are alerted via pop-up notification when hitting submit. Afterwards though, the form still sends without letting you finish completing required fields. I have noticed that if the First Name field is blank the form will not send, but any other field it just still sends. I have looked this up on Google endlessly and have tried every 'fix'. This is the function: Code: <script type="text/javascript">
<!--
function MM_validateForm() { //v4.0
if (document.getElementById){
var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=document.getElementById(args[i]);
if (val) { nm=val.name; if ((val=val.value)!="") {
if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
if (p<1 || p==(val.length-1)) errors+='- '+nm+' Must Contain an Email Address.\n';
} else if (test!='R') { num = parseFloat(val);
if (isNaN(val)) errors+='- '+nm+' Must Contain a Valid Phone Number.\n';
if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
min=test.substring(8,p); max=test.substring(p+1);
if (num<min || max<num) errors+='- '+nm+' Must Contain a Number Between '+min+' and '+max+'.\n';
} } } else if (test.charAt(0) == 'R') errors += '- '+nm+' Is Required.\n'; }
} if (errors){ alert('Please Complete All Required Fields:\n'+errors); }
document.MM_returnValue = (errors =='');
} }
//-->
This is the form html code: Code: <form action="FormToEmail.php" method="post" name="myform" class="cmxform" id="myform" onsubmit="MM_validateForm('first-name','','R');MM_validateForm('last-name','','R');MM_validateForm('workphone','','RisNum');MM_validateForm('address1','','R');MM_validateForm('city','','R');MM_validateForm('state','','R');MM_validateForm('country','','R');return document.MM_returnValue;">
This is the code on the submit button: Code: <input type="submit" class="buttons" onClick="MM_validateForm('first-name','','R');MM_validateForm('last-name','','R');MM_validateForm('workphone','','RisNum');MM_validateForm('address1','','R');MM_validateForm('city','','R');MM_validateForm('state','','R');MM_validateForm('country','','R');return document.MM_returnValue;" value="Send"/>
I may be missing something really obvious but i've gone over this for three days. I just recently have moved positions to Website Designer and my main background is in Graphic Design so my knowledge is very minimal. I created this site in a month due to time restrictions and the code is far from perfect. any help would be greatly appreciated. thanks! I have two seperate js files. One that houses the functions mylibrary.js and another that call the validated functions myform.js. I can not get the form to validate any data. The data just sits there and will not report errors. Any help would be greatly appreciated. Code: function valForm()
{
if(!isAlpha(document.myform.firstname.value))
{
myform.firstname.focus();
return false;
}
if(!validEmail(document.myform.email.value))
{
myform.email.focus();
return false;
}
if(!isRequired1(document.myform.options.value))
{
myform.options.focus();
return false;
}
return true;
}
// JavaScript Document seperate js file mylibrary.js
function isNumber(num) { return !(/\D/.test(num)); }
function isAlpha(text){ return text.match(/\w+/) }
function validEmail(email){ return email.match(/^([a-zA-Z0-9]{3,})(((\.|\-|\_)[a-zA-Z0-9]{2,})+)?@([a-z]{3,})(\-[a-z0-9]{3,})?(\.[a-z]{2,})+$/i ) }
function isRequired1(){
if(myform.food.selectedIndex ==0)
{
alert("Please select from the drop-down list.");
}
}
can anyone help me validate a survey page i have? it has many questions and each question has 5 radio buttons. i followed many guides and none of them worked for me. I refered to http://www.dynamicdrive.com/forums/s...00&postcount=9 guide and http://javascript.about.com/library/blradio4.htm but for somereason it doesn't seem to work. So can u guys plz look over my simplified version of the survey and see whats is wrong. Sorry if i sound like a noob, I am new here. 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" />
<title>Untitled Document</title>
<script type="text/javascript">
var btn = valButton(form.q1);
if (btn == null) alert('No radio button selected');
else alert('Button value ' + btn + ' selected');
function valButton(btn) {
var cnt = -1;
for (var i=btn.length-1; i > -1; i--) {
if (btn[i].checked) {cnt = i; i = -1;}
}
if (cnt > -1) return btn[cnt].value;
else return null;
}
</script>
</head>
<body>
<table width="800" border="1" cellspacing="0" cellpadding="20">
<form name="science" method="post" action="ad.html" onsubmit="return valButton(btn);">
<tr>
<td width="475"><h3>
<center>
Reasons for organizing Science Olympiad
</center>
</h3></td>
<td width="17"><h3>
<center>
1
</center>
</h3></td>
<td width="17"><h3>
<center>
2
</center>
</h3></td>
<td width="17"><h3>
<center>
3
</center>
</h3></td>
<td width="17"><h3>
<center>
4
</center>
</h3></td>
<td width="17"><h3>
<center>
5
</center>
</h3></td>
</tr>
<tr>
<td width="475">1. It is fun</td>
<td width="17"><input type="radio" id="q1" name="q1" value="1" /></td>
<td width="17"><input type="radio" id="q1" name="q1" value="2" /></td>
<td width="17"><input type="radio" id="q1" name="q1" value="3" /></td>
<td width="17"><input type="radio" id="q1" name="q1" value="4" /></td>
<td width="17"><input type="radio" id="q1" name="q1" value="5" /></td>
</tr>
<tr>
<td>2. To motivate students to pursue further education in Science and Engineering</td>
<td width="17"><input type="radio" id="q2" name="q2" value="1" /></td>
<td width="17"><input type="radio" id="q2" name="q2" value="2" /></td>
<td width="17"><input type="radio" id="q2" name="q2" value="3" /></td>
<td width="17"><input type="radio" id="q2" name="q2" value="4" /></td>
<td width="17"><input type="radio" id="q2" name="q2" value="5" /></td>
</tr>
<tr>
<td><input type="submit" name="submit" /></td>
</tr>
<tr></tr>
</form>
</table>
testing
</body>
</html>
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>
Project 2
</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="en-us" />
<link rel="stylesheet" href="../jsfiles/js_styles.css" type="text/css" />
<script type="text/javascript">
/* <![CDATA[ */
function checkForNumber(fieldValue) {
var numberCheck = isNaN(fieldValue);
if (numberCheck == true) {
window.alert("You must enter a numeric value!");
return false;
}
return true;
}
function calculate()
var shipping = 0;
var total = 0; {
if (document.forms[0].hand_tool.value != document.forms[0].hand_tool.value == true)
(document.forms[0]item1.value == 20); {
&& document.forms[0].shipping.value == (shipping + 5); {
&& (document.forms[0].total.value = document.forms[0].hand_tool.value + document.forms[0].shipping.value)
}
}
function confirmSubmit() {
if (document.forms[0].first_name.value = "null") {
window.alert("You have not entered the requested Customer Information.");
return false;
}
else if (document.forms[0].last_name.value = "none" || document.forms[0].city.value = "" || document.forms[0].state.value = "none") {
window.alert("You have not entered the requested Customer Information.");
return false;
}
var pmntMethod = false
for (var j=0; j<3; ++j) {
if (document.forms[0].credit_card[j].checked == true) {
pmntMethod = true;
break;
}
}
if (pmntMethod != true) {
window.alert("You must select a method of payment.");
return false;
}
return true;
}
function confirmReset() {
var resetForm = window.confirm("Are you sure you want to reset the form?");
if (resetForm == true)
return true;
return false;
}
/* ]]> */
</script>
</head>
<body>
<!-- Your XHTML here -->
<h1>Purchase Order</h1>
<form action="FormProcessor.html" method="get" enctype="application/x-www-form-urlencoded" onsubmit="return confirmSubmit();" onreset="return confirmReset();">
<h3>Products</h3>
<table>
<tr>
<td>
<p>Hand Tools <br />$20.00<img src="handtools.gif" alt="Hand Tools" class="img" /></p>
</td>
<td>
<select name="hand_tool" size="1">
<option value="hand_tool">Hand Tool</option>
<option value="saw">Saw</option>
<option value="hammer">Hammer</option>
<option value="screwdriver">Screwdriver</option>
<option value="wrench">Wrench</option>
<option value="pliers">Pliers</option>
</select>
</td>
<td>
<p>Power Tools <br />$30.00<img src="powertools.gif" alt="Power Tools" class="img" /></p>
</td>
<td>
<select name="power_tool" size="1">
<option value="power_tool">Power Tool</option>
<option value="circular_saw">Circular Saw</option>
<option value="sabre_saw">Sabre Saw</option>
<option value="drill">Drill</option>
<option value="belt_sander">Belt Sander</option>
<option value="table_saw">Table Saw</option>
</select>
</td>
</tr>
</table>
<h3>Shipping Fees</h3>
<table>
<tr>
<td>Item 1: <input type="text" name="item1" value="" onchange="calculate();" /></td>
<td>Item 2: <input type="text" name="itme2" value="" onchange="calculate()" /></td>
</tr>
<tr>
<td>Shipping: <input type="text" name="shipping" value="" /></td>
<td>Total: <input type="text" name="total" value="" /></td>
</tr>
</table>
<h3>Customer Information</h3>
<p>First Name
<input type="text" name="first_name" value="FirstName" onclick="document.forms[0].first_name.value = '';" onchange="confirmSubmit();"/>
Last Name
<input type="text" name="last_name" value="LastName" onclick="document.forms[0].last_name.value = '';" onchange="confirmSubmit();" /></p>
<p>Street Address 1
<input type="text" name="address1" value="Address1" onclick="document.forms[0].address1.value = '';" onchange="confirmSubmit();" /></p>
<p>City
<input type="text" name="city" value="City" onclick="document.forms[0].city.value = '';" onchange="confirmSubmit();" />
State
<input type="text" name="state" value="State" onclick="document.forms[0].state.value = '';" onchange="confirmSubmit();" />
Zip
<input type="text" name="zip" value="Zip" onchange="return checkForNumber(this.value);" onclick="document.forms[0].zip.value = '';" /></p>
<p>Phone
<input type="text" name="phone" value="Phone" onchange="return checkForNumber(this.value);" onclick="document.forms[0].phone.value = '';" />
Fax
<input type="text" name="fax" value="Fax" onclick="document.forms[0].fax.value = '';" onchange="return checkForNumber(this.value);" /></p>
<p>Payment Method?
<input type="radio" name="credit_card" />Visa
<input type="radio" name="credit_card" />MasterCard
<input type="radio" name="credit_card" />American Express</p>
<p>Credit Card Number<input type="text" name="cardNumber" value="CardNumber" size="50" onclick="document.forms[0].cardNumber.value = '';" onchange="return checkForNumber(this.value);" /></p>
<table>
<tr>
<td>
<p>Expiration Month</p>
</td>
<td>
<select name="month" size="1" style="width: 200px">
<option value="months">Month</option>
<option value="january">January</option>
<option value="february">February</option>
<option value="march">March</option>
<option value="april">April</option>
<option value="may">May</option>
<option value="june">June</option>
<option value="july">July</option>
<option value="august">August</option>
<option value="september">September</option>
<option value="october">October</option>
<option value="november">November</option>
<option value="december">December</option>
</select>
</td>
<td>
<p>Expiration Year</p>
</td>
<td>
<select name="expiration" size="1">
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
</select>
</td>
</tr>
</table>
<p><input type="image" alt="Graphical image of a submit button" src="submit.gif" onchange="confirmSubmit()" /></p>
<p><input type="reset" value="Reset Purchase Order Form" onchange="confirmReset();" /></p>
</form>
<!-- your XHTML validation icon-->
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Strict" height="31" width="88"
style="border: 0px;" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img src="http://www.austincc.edu/jscholl/images/vcss.png"
alt="Valid CSS!" height="31" width="88" style="border: 0px;" /></a>
</p>
</body>
</html>
Hi guys, I am new to Javascript and I'm trying to set up a form to make simple calculation based on user inputs. I have set up the form and am unable to get the calculation to work despite what I try (this is based on an online tutorial I found though). Is there any where I am going wrong? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" language="javascript">
function kanban()
{
//variables
A = document.frmone.annualdemand.value;
B = document.frmone.demandVariability.value;
C = document.frmone.weeksHold.value;
D = document.frmone.ContainerSize.value;
E = document.frmone.totalStock.value;
//calculation
F = A/240;
double G = (b/100)+1;
H = g*F;
c = c*5;
i = c*H;
j = i/d;
document.frmone.totalStock.value = i;
document.frmone.noKanBans.value = j;
}
</script>
<title>Insert Title Here</title>
</head>
<body>
<form name="kanban" id="frmone">
Annual Demand: <input type="text" name="annualDemand" value=""/> </br>
Demand Variation: <input type="text" name="demandVariability" value=""/> </br>
Stock to Hold (weeks): <input type="text" name="weeksHold" value=""/> </br>
Size of Container: <input type="text" name="containerSize" value=""/> </br>
</br>
<input type="button" name="calculate" value="Calculate"
onclick="kanban()"/> </br>
</br>
Total Stock: <input type="text" name="totalStock" value=""/> </br>
Qty of Kan Bans: <input type="text" name="noKanBans" value=""/> </br>
</form>
</body>
</html>
Thanks guys. Hello everyone, I've got a problem while trying to fetch some informations from multiple forms in the same page. What I'm trying to do with this code is fetching informations from the multiple forms on my page and checking if the information is the information I need. If so, I take this information and add it into a javascript generated form that I submit once every form in the page have been taken care of. It's the only way I found to 'submit' multiple forms at the same time. Everything was fine until I decided to give the user the option to add more forms on the page by clicking on a button (the form is then generated by javascript and appended on the page). There seems to be a problem when checking these particular forms, the script doesn't seem to recognize the value of the radio button (wich is add_question_faq) and never ever enters in this case. Code: case "add_question_faq":
alert ("pourquoi, ho, pourquoi")
if (mesForms[cpt].question.value=="" || mesForms[cpt].answer.value==""){
chaineModif+="StopSendRightNow"
}
break;
Except when the commentarised Code: //for (h=0;h<mesForms[cpt].elements.length;h++){
//alert (mesForms[cpt].elements[h].name)
//}
ain't commentarised. Any Idea why a simple alert changes the behavior of the function? Here's the said function: Code: function select_forms_faq(){
var chaineModif=""
var mesFormsModif=new Array();
var mesForms=document.getElementsByTagName("form");
for (cpt=0;cpt<mesForms.length;cpt++){
//for (h=0;h<mesForms[cpt].elements.length;h++){
//alert (mesForms[cpt].elements[h].name)
//}
if (mesForms[cpt].action.length!=0 && mesForms[cpt].action.length!=undefined){
for (k=0;k<mesForms[cpt].action.length;k++){
if (mesForms[cpt].action[k].checked==true){
switch (mesForms[cpt].action[k].value){
case "delete":
chaineModif+="<input type=\'text\' name=\'delete_"+mesForms[cpt].id_question.value+"\' value=\'"+mesForms[cpt].id_question.value+"\' />";
break;
case "save_changes_question":
chaineModif+="<input type=\'text\' name=\'update_question_faq_"+mesForms[cpt].id_question.value+"\' value=\'id"+mesForms[cpt].id_question.value+"question"+mesForms[cpt].question.value+"answer"+mesForms[cpt].answer.value+"\' />"
break;
case "save_changes_cat":
chaineModif+="<input type=\'text\' name=\'update_cat_faq_\' value=\'id"+mesForms[cpt].id_cat.value+"category"+mesForms[cpt].cat.value+"\' />"
break;
case "add_question_faq":
alert ("pourquoi, ho, pourquoi")
if (mesForms[cpt].question.value=="" || mesForms[cpt].answer.value==""){
chaineModif+="StopSendRightNow"
}
break;
}
}
}
}
}
if (chaineModif!="" && chaineModif.indexOf("StopSendRightNow")==-1){
var formFinal=document.createElement("form")
with(formFinal){
method="POST"
action=""
name="formFinal"
id="formFinal"
style.display="none"
}
chaineModif+="<input type=\'hidden\' name=\'submit_changes_faq\' value=\'submit_changes_faq\' />"
document.getElementById("wpbody-content").appendChild(formFinal)
document.getElementById("formFinal").innerHTML=chaineModif
formFinal.submit();
return false
}
else{
return false
}
}
|
|||||||