JavaScript - [2 Problems] Adding Form Values & Validation Of Forms.

I have found a code to help me learn how to add forms in javascript, but it's limited to text input forms.

Code:

<script type="text/javascript"><!--
function updatesum() {
document.form.sum.value = (document.form.sum1.value -0) + (document.form.sum2.value -0);
}
//--></script>

Where the inputs sum1 and sum2 are text fields you put whatever numbers you want in. That works fine. Great.

Now what I'm having trouble with is modifying the code so that it will add one form with an input number with a form that spits out a randomly generated number.

Code:

<input type="button" value="D20" onclick="this.form.display.value = Math.round (20 * Math.random())" class="buttonHi" />&nbsp; <input name="display" type="text" size="6" value="" />

This is what I'm using for my random number generator. So basically I want to be able to put, say, 5, into the input text field above this. And then click on the d20 button to get a random number, say, 15, and then have the first code add the inputted 5 with the randomly generated 15. Is this possible?

Hello all!

I am using 'simplecartjs' as a simple shopping cart for my website. To checkout, the user e-mails me his cart containts. I would like to have his name, email and adress with this but i'm unable to add this to my shopping form.

Here is my JS:
Code:

	me.emailCheckout = function() {    

    itemsString = "";
    for( var current in me.items ){ 
        var item = me.items[current];
        itemsString += item.name + " " + item.quantity + " " + item.price + "\n";
    }   

    var form = document.createElement("form");
    simpleCart.empty();
    form.style.display = "none";
    form.method = "POST";
    form.action = "sendjs.php";
    form.acceptCharset = "utf-8";
    form.appendChild(me.createHiddenElement("jcitems", itemsString));
    form.appendChild(me.createHiddenElement("jctotal", me.total));
    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
}

And here is the PHP that sends is (sendjs.php):

Code:

<?php
    $to      = 'info@kheuning.nl';
    $subject = 'the subject';
    $jcitems = $_POST['jcitems'];
    $headers = 'From: webmaster@example.com' . "\r\n" .
               'Reply-To: webmaster@example.com' . "\r\n" .
               'X-Mailer: PHP/' . phpversion();
    mail($to, $subject, $jcitems, $headers);
    Header('Location: thankyou.html');
?>

I understand how to add variables to send in my php form, but it doesn't take normale html form input's i add to the page. How can i add these to the js?

Thanks in advance!

Jonas

Hey there, trying to modify a basic JS validation script Ive been using for a couple of years to work on more than one form on a page, three in fact.

JavaScript (in header)
Code:

<script type="text/javascript">
<!--
function validate_form ()
{
	valid = true;

        if ( document.form.name.value == "" )
        {
                alert ( "Please enter your name" );
                valid = false;
        }


       		if ( document.form.phone.value == "" )
        {
                alert ( "Please enter your phone number" );
                valid = false;
        }
		

        return valid;
}
//-->
</script>
<script type="text/javascript">
<!--
function validate_form1 ()
{
	valid = true;

        if ( document.form1.name1.value == "" )
        {
                alert ( "Please enter your name" );
                valid = false;
        }
		

       		if ( document.form1.email1.value == "" )
        {
                alert ( "Please enter your email address" );
                valid = false;
        }
		
	if ( document.form1.comment1.value == "" )
        {
                alert ( "Please enter your message" );
                valid = false;
        }



        return valid;
}
//-->
</script>
<script type="text/javascript">
<!--
function validate_form2 ()
{
	valid = true;

        if ( document.form2.name2.value == "" )
        {
                alert ( "Please enter your name" );
                valid = false;
        }
		
				
	if ( document.form2.phone2.value == "" )
        {
                alert ( "Please enter your phone number" );
                valid = false;
        }
		

        return valid;
}
//-->
</script>

and the forms...
Code:

	<form class="cmxform" id="form" name="form" method="post" action="send.php"  onsubmit="return validate_form ( );">
		
		<input  name="name2" class="custominput" id="name2"  size="25" />
				
		<input name="tel2" class="custominput" id="tel2"  size="25" />
		
        	<input type="image" src="/send.png" alt="Submit Form" />
	
	</form>
        
	
	<form class="cmxform" name="quoteForm" id="quoteForm" method="post" action="send.php"  onsubmit="return validate_form1 ( );">

		<input name="name" class="custominput" id="name"  size="25" />

		<input  name="email"  class="email custominput" id="cemail"  size="25" />
			
		<textarea id="comment" name="comment" cols="20" rows="2" class="customtextarea" ></textarea>

		<input type="image" src="send.png" alt="Submit Form" />
	
	</form>

                     
     	<form class="cmxform" id="form2" name="form2" method="post" action="send.php"  onsubmit="return validate_form2 ( );">
	
		<input  name="name2" class="custominput" id="name2"  size="25" />
				
		<input  name="phone2" class="custominput" id="phone2"  size="25" />
		
        	<input type="image" src="send.png" alt="Submit Form" />
	
	</form>

Ive stripped the forms down to the bones, they have default values set and onfocus commands in the full code. The problem Im having is rewriting the script above seems to work fine for the middle form but on the other two it tells me to input a valid name and then submts the form.

Many thanks

I have two simple forms on the site, each captures an email address they are for two separate languages. However when I try to validate, only one validates and the other one doesn't

Javascript:
Code:

<script type="text/javascript">
function checkform ( form )
{ 
  // ** START **
  if (form.email.value == "") {
    alert( "Please enter your email address." );
    form.email.focus();
    return false ;
  }
  // ** END **
   return true ;
}
</script>
<script type="text/javascript">
function checkform ( form )
{ 
  // ** START **
  if (form.email2.value == "") {
    alert( "Please enter your email address." );
    form.email2.focus();
    return false ;
  }
  // ** END **
   return true ;
}

</script>

Form 1- It Validates Just Fine
Code:

<form name="quote" method="post" action="contact.php" onsubmit="return checkform(this);">
            <td>
              
              
              <input name="email" style=" background-color:#FFFFFF; width:200px; height:13; font-size:11px; color:#666666" type="text" /></td>
            
             <td> <input style="border:none" type="image" name="imageField" id="image" src="submit.jpg" />
              </td>
            </form>

Form2 Doesn't Validate
Code:

<form name="quote" method="post" action="contact.php" onsubmit="return checkform(this);">
              <td><input name="email2" style=" background-color:#FFFFFF; width:200px; height:13; font-size:11px; color:#666666" type="text" /></td>
              <td>
                
                <input style="border:none" type="image" name="imageField2" id="image2" src="submit2.jpg" />
                </td>
              </form>

Hello, I'm trying to make a simple webpage with two input text boxes that when submitted when empty, I'll get an error pop-up telling me which ones are empty, both, first name, or last name. When there's only one if, the script works. But when there's multiple else ifs, nothing happens if I press submit. Can someone help me?

Code:

<html>
<head>
<script type="text/javascript">
function validateForm()
{
var x=document.forms["myForm"]["firstname"].value;
var y=document.forms["myForm"]["lastname"].value;
if (x==null || x=="" && y==null || y=="")
  {
  alert("Please put in your first and last name.");
  return false;
  }
else if (x==null || x=="")
  {
  alert("Please put in your first name.");
  return false;
  }
else if (y==null || y=="")
  {
  alert("Please put in your last name.");
  return false:
  }
}
</script>
</head>

<body>
<form name="myForm">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
<input type="submit" value="Submit" onclick="validateForm()">
</form>
</body>

</html>

I am trying to split the (id) values between seperate forms
and the submit buttons are not located between the form tags.

Note:
->The 3 forms are located at the top of page
->the (3) Submit buttons are in a query and are outside the form tags.
->In this case it does not make sense to have the form duplicating itself in the sql_query.

need the correct code for the 3 script functions var form1, form2, form3
then i need the correct function submit code something like -> onClick='Split(this.form1,1)'

Also: To keep this simple could the 3 scripts be combined into one?

Code:

<!-- SPLIT VALUES BETWEEN SEPERATE FORMS -->

<script type="text/javascript"> 
function Add(sel,first) 
{
  if (sel.selectedIndex == 0 ) return;
  var temp = sel.id.split(",");
  sel.form1["F"+first].value = temp[0];
  sel.form1["F"+(first+1)].value = temp[1];
}
</script>

<script type="text/javascript"> 
function Edit(sel,first) 
{
  if (sel.selectedIndex == 0 ) return;
  var temp = sel.id.split(",");
  sel.form2["F"+first].value = temp[0];
  sel.form2["F"+(first+1)].value = temp[1];
}
</script>

<script type="text/javascript"> 
function Delete(sel,first) 
{
  if (sel.selectedIndex == 0 ) return;
  var temp = sel.id.split(",");
  sel.form3"F"+first].value = temp[0];
  sel.form3["F"+(first+1)].value = temp[1];
}
</script>

<form method='post' name='form1' action='record_add.php'>
<input type='hidden' id='F1' name='t101' value='' >
<input type='hidden' id='F2' name='t102' value='' >
</form>

<form method='post' name='form2' action='record_edit.php'>
<input type='hidden' id='F3' name='t103' value='' >
<input type='hidden' id='F4' name='t104' value='' >
</form>

<form method='post' name='form3' action='record_delete.php'>
<input type='hidden' id='F5' name='t103' value='' >
<input type='hidden' id='F6' name='t106' value='' >
</form>


<!-- NOTE: THE SUBMIT BUTTONS ARE IN A QUERY OUTSIDE THE FORM TAGS AND NEED TO TARGET THE PROPER FORM1,2,3 onClick -->
<button type='submit' id='$mytable,$columns[Field]' onClick='Split(this.form1,1)'>
<button type='submit' id='$mytable,$columns[Field]' onClick='Split(this.form2,3)'>
<button type='submit' id='$mytable,$columns[Field]' onClick='Split(this.form3,5)'>

I know that Javascript is client side, but I'd like to know the best way to populate HTML drop downs in real time based on information typed in the other HTML form fields with information found on the server as opposed to the client.

For instance if a user wants to select certain files located in a directory on the server, as they type in the pathname supposedly containing the files the drop downs continually refresh themselves with the server files listed in that directory (if it exists, and apache has permissions to see what's inside) as if it was showing client files instead.

What would be nice is if my browser could continually query the server for some of its private information and not have to refresh itself to obtain it, whether that means the server-side would have to continually refresh itself makes no difference to me as long as the client-side doesn't have to. But I guess this is not possible because no matter what you would have to at least refresh the client-side page once?

Submitting the form to a CGI or PHP script would not work because I need this functionality to help populate the form BEFORE I send it.

I would like to not have to press a button to update the form every time I change the pathname and need to update the drop downs since this would be annoying.

I'm open to anything that could do this or something similar not just Javascript. I'm not sure if you could accomplish this by converting the HTML page to CGI/PHP and having it continually reload itself without refreshing the page?

I'm not worried about any security risks this may pose because:
1) The server is located on company intranet which is firewalled
2) I could always password protect and encrypt all transmissions, making sure only authorized users use the app

Hello

Thanks to those people on this Forum who have provided me with help, along with my little knowledge of Javascript I have been able to create the basis of a form for my Skittle League which will allow teams to submit results over the web.

I have one calculation to complete before I look to make the form live and I am hoping someone can provide the final peice of the jigsaw.

The scoresheet can be found at

http://www.stroudskittles.co.uk/test/scorecard.html

The form adds togther the 5 values for each half for each team and places them in a Half Total box below.

The form adds together the two totals for each half for each team then places them in a Total box below

I have been able to add a operation using the onchange event the points are automatically calculated for each half and total, depending on the overall scores, 2 points for a win, 1 for a draw 0 for a loss.

What I'm struggling to do is add the three points totals together to generate the Overall Points for a team and place them in a text box at the top of the scoresheet (marked xxx on the page).

Can anyone suggest the best method to do this.

Also is it possible to combine the sums into one script therefore reduing the overall size.

Your help very much appreciated

hello everybody!
this is my first atempt in writing javascript and i have a problem which I have no idea how to solve.

I want to take the values from several dropdown forms and make some calculations whit those in order to display a number. Unfortunately the script responts in a way that i cannot identify what is happening. this is a shorten example of my script.

Code:

<html>
<head>
<script type="text/javascript">



function calcul()
{


	var pcno = document.plithospc.listplpc.value;
	var ndno = document.plithosnd.listplnd.value;
	var hotline = document.hotlform.listhotl.value;

	var sumhotline = 0;

if (hotline == 2)
	{
		sumhotline = 8*(1+0.5*pcno) + 2*(1+0.5*ndno);
	}
	else if (hotline == 3)
	{
		sumhotline = 16*(1+0.5*pcno) + 4*(1+0.5*pcno);
	}
	else 
	{
		sumhotline = 0;
	}

document.write(sumhotline);

</script>

</head>
<body>


<FORM NAME="plithospc">
<SELECT NAME="listplpc">
<OPTION SELECTED="SELECTED" VALUE=0>choose one</OPTION>
<OPTION VALUE=1>-1-</OPTION>
<OPTION VALUE=2>-2-</OPTION>
<OPTION VALUE=3>-3-</OPTION>
</SELECT>

<FORM NAME="plithosnd">
<SELECT NAME="listplnd">
<OPTION SELECTED="SELECTED" VALUE=0>choose one</OPTION>
<OPTION VALUE=1>-1-</OPTION>
<OPTION VALUE=2>-2-</OPTION>
<OPTION VALUE=3>-3-</OPTION>
</SELECT>

<FORM NAME="hotlform">
<SELECT NAME="listhotl">
<OPTION SELECTED="SELECTED" VALUE=0>choose one</OPTION>
<OPTION VALUE=1>1st selection</OPTION>
<OPTION VALUE=2>second selection</OPTION>
<OPTION VALUE=3>third selection</OPTION>
</SELECT>

<button type="button" onclick="calcul()">click me</button>

</body>

does anyone knows how to fix this?
thanks in advance

Hi,

I'm currently designing a website for a takeaway company, and have one page displaying their menu. So that customers can easily calculate how much their takeaway will cost, I'm going to put checkboxes next to each item.

Each of the checkboxes' value will be the price of the item, and I need a script that will add the values (prices) of the checkboxes they've ticked.

They can then see the total cost of their takeaway without having to work it out, and add or remove items accordingly. I will then add a button which will print out a list of the items they ticked with the total price at the bottom. The customer can bring this in with them and the staff can easily see what they want and how much to charge them.
Firstly, I need to know how to make Javascript add these values (and probably save them as a variable) Secondly, how would I make this display on the page (either after they click a button, or automatically so they can see the price real-time)? - I assume this would be basic coding --- Code:

document.write(var)

And finally, how could I make a script which would print only the items which are ticked, and the total price?

Any help with this, even if you can only answer one of the questions, would be much appreciated.

Thanks in advance!

--
AJE

It adds fine when any number but 12.3 is used if 12.3 is used however it gives
54.099999999999994

var liu = [10.6,11.2,9.4,12.3,10.1];


var calculateTotal= function(raceTimes){
var totalTime;
var raceTime = raceTimes[0];
var i =0;
for (i = 0; i< 4; i++){

raceTime = raceTime+raceTimes[i];
totalTime = raceTime;
}
return totalTime;
};
var liuTotal = calculateTotal(liu);

console.log(liuTotal);

Hello Everyone,

I need to add some sort of validation that will only allow users to upload .jpg files. I really need to add this to an existing script I've already written. I've seen scripts and tutorials that add the jpg validation but only incorporate the image field of the form. I need the script to validate several forms in the field, not just one. When I try to add validation for the jpg field to the follow script everything stops working. Can someone please point me in the right direction? Thanks!

Code:

<form id="uploadForm" method=post class="upload" action=submit_script.php enctype='multipart/form-data' onsubmit="return validate_form(this)">
		<p><b>First Name</b><br/>
		<INPUT TYPE="TEXT" NAME="name_first" size="40"></p>

		<p><b>Last Name</b><br/>
		<INPUT TYPE="TEXT" NAME="name_last" size="40"></p>

		<p><b>School Name</b><br/>
		<INPUT TYPE="TEXT" NAME="name_school" size="40"></p>

		<p><b>Your School E-Mail</b><font class="super">1</font><br/>
		<INPUT TYPE="TEXT" NAME="school_email" size="40"></p>

		<p><b>Your File</b><font class="super">4,5</font><br/>
		<input id="userfile1" name="userfile1" type="file" size="30"></p>
	
		<p><input name="upload" type="submit" class="box" id="upload" value="Submit Your Poster" onClick="YAHOO.example.container.wait.show();"></p>
	</form>

Code:

function validate_required_field(field,alertText) {
	with (field) {
		if (value==null||value=="") {
            YAHOO.example.container.wait.hide();
			alert(alertText);
	  		return false;
		}
		else {
			return true;
		}
	}
}


function validate_email(field,alertText)
{
	with (field) {
		apos=value.indexOf("@");
		dotpos=value.lastIndexOf(".");
		if (apos<1||dotpos-apos<2) {
            YAHOO.example.container.wait.hide();
			alert(alertText);
			return false;
		}
		else {
			return true;
		}
	}
}


function validate_form(thisform) {
	with (thisform) {
		if (validate_required_field(name_first,"Please enter a value in the 'First Name' field before continuing")==false) {
			name_first.focus();
			return false
		}
	}
	with (thisform) {
		if (validate_required_field(name_last,"Please enter a value in the 'Last Name' field before continuing")==false) {
			name_last.focus();
			return false
		}
	}
	with (thisform) {
		if (validate_required_field(name_school,"Please enter a value in the 'School Name' field before continuing")==false) {
			name_school.focus();
			return false
		}
	}
	with (thisform) {
		if (validate_required_field(school_email,"Please enter a value in the 'School Email' field before continuing")==false) {
			school_email.focus();
			return false
		}
	}
	with (thisform) {
		if (validate_email(school_email,"Please enter a valid email address before continuing")==false) {
			school_email.focus();
			return false
		}
	}
}

Hello,

I am extremely new to JS so please bear with me. Any help is very much appreciated.

Currently I am trying to take the values of 2 or more select boxes, add them together and then update a text field each time a selection in one of the select boxes is made. Basically, I am trying to keep a running total.

Currently I have it set up so that onchange it grabs the selected value. The problem is that it is being processed as a string I believe. For instance, if there are two variables, a=111 and b=222, the output in the text field reads 111222. I tried using parseInt, but that just returns NaN (not a number?...just a guess).

I have seen this solved with if statements, grabbing the selected index # and then assigning an integer, but I am hoping there is an easier way.

Again, your help is appreciated.

Hey javascript newbie,

Im trying to figure out how to add different radio if its selected or not

example:

Radio_Button1 value="5": Selected
Radio_Button2 value="15": Not Selected
Radio_Button3 value="25": Selected
Radio_Button4 value="35": Selected

var addingitup = ??? and im lost????

I have some asp:radiobutton lists that need to update a label with the sum of their values each time a user selects a new value. I am brand new to javascripting and would like some insight on how to get this done. I have inserted my code below.

Code:

<asp:Label runat="server" Text="Greeting:" />&nbsp;<asp:Label runat="server" ForeColor="Red" ID="lbl_GreetingScore" Text="0" />

<asp:RadioButtonList ID="rdb1_1" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Selected="True" Text="N/A" Value="4" />
<asp:ListItem Text="Yes" Value="4" />
<asp:ListItem Text="No" Value="0" />
</asp:RadioButtonList>