JavaScript - Output Two Values Into A Single Form Field

Hi,

I am setting up an email form & i would like the subject field to hold multiple values, the forrm will be something like this:

Name:Mr A
Date: 01/01/01
Reason:Football

I want the form to send an email without opening an email client & I would like the subject field to look like this:

Subject: Mr A, 01/01/01, Football

or

Subject Mr A - 01/01/01 - Football

Can anyone tell me if this is possible, if if is can you please point me in the right direction.

Thanks

I have to update the rowid(assigned to checkbox) whenever the textbox value is updated and this needs updating value of document.getElementsByName('rf_select[]') when checkbox value matches the textbox id. There can be mutliple number of rows each with a uniqueID (checkbox value) that matches with the textboxID onload.

Code :-


<td align="center"><input type='checkbox' name='rf_select[]' id='rf_select' value="rowId" CHECKED border="none"/>
<td align="left"><input type='text' name='policy_no' id="rowId" size='25' value="test" onBlur=handleRowId('policy_no'); /></td>

<script language="javascript">
function handleRowId(){
var arr = new Array();
var rowarr = new Array();
arr = document.getElementsByName('policy_no');
rowarr = document.getElementsByName('rf_select[]');
for(var i = 0; i < arr.length; i++)
{
var obj = arr.item(i); //alert(obj.id + " = " + obj.value);
for(var j=0; j< rowarr.length; j++){
if(rowarr[j].value == obj.id){
document.getElementsByName('rf_select')[j].value = rowarr[j].value+"#@#"+obj.value;
}
}
}
}
</script>

I am having problem assigning values here - document.getElementsByName('rf_select')[j].value = rowarr[j].value+"#@#"+obj.value;


Any help is appreciated.

Hi all, I'm a beginner in JavaScript can someone please help me to resolve this issue and thanks in advance for your help!

What I'm trying to do is..

When you select multiple <div> get the value of each one and save in separate hidden fields accordingly.

What needs to happen is...

Click div 1 --> if hidden field1 value is "none", save there, else check hidden field 2 if that's "none" save in hidden field 2

Click div 2 --> if hidden field1 value is "none", save there, else check hidden field 2 if that's "none" save in hidden field 2

Here's what I've come up with so far (currently I'm using JQuery)

The problem with this is that no matter what div I click in which order it only updates the 1st hidden field

Code:

<div id="click1" name="click1" value="123" onclick="abc()"/>Click 1</div>
<div id="click2" name="click2" value="225" onclick="def()"/>Click 2</div>

<input id="passenger_1" name="passenger_1" type="hidden" value="none" />
<input id="passenger_2" name="passenger_2" type="hidden" value="none" />

<script>
function abc() {
var pasvalue = $('#click1').attr('value');
var pas1_value = $('#passenger_1').attr('value');
var pas2_value = $('#passenger_2').attr('value');
if(pas1_value == "none"){
	$('#passenger_1').attr('value', pasvalue);
}else if (pas2_value == "none"){
	$('#passenger_2').attr('value', pasvalue);
}}

function def() {
var pasvalue = $('#click2').attr('value');
var pas1_value = $('#passenger_1').attr('value');
var pas2_value = $('#passenger_2').attr('value');
if(pas1_value == "none"){
	$('#passenger_1').attr('value', pasvalue);
}else if (pas2_value == "none"){
	$('#passenger_2').attr('value', pasvalue);
}}
</script>

I've set up a mock registration form page so I can learn a bit about javascript's form validation. (newbie) I want to try to attempt to style the border of a form field green when the user enters the correct info into the form text field and red on all other fields if the user doesnt enter any info into them. When i test it, enter the right info into the username field, leave the others blank, and hit the submit button it styles the username field green ok but it doesnt make the next fields (password and so on) red. Could someone please explain what I am doing wrong?

here is my code so far...
Note: just for testing purposes I've put return false on everything so it displays a message when everythings ok.

Code:

....
<script type="text/javascript">
	window.onload = function() {
		document.forms[0].username.focus();
	}
	function validate(form)
	{
		var form = document.getElementById("reg");
		var e = document.getElementById("error");
		e.style.background = "red";
		
		for(var i = 0; i < form.elements.length; i++)
		{
			var el = form.elements[i];
			if(el.type == "text" || el.type == "password")
			{
				if(el.value == "")
				{
					e.innerHTML = "Please fill in all fields!";
					el.style.border = "1px solid red";
					el.focus();
					return false;
				} else {
					el.style.border = "1px solid green";
					return false;
				}
			}
		}
		var un = form.username;
		un.value = un.value.replace(/^\s+|\s+$/g,"");
		if((un.value.length < 3)|| (/[^a-z0-9\_]/gi.test(un.value)))
		{
			e.innerHTML = "Only letters,numbers and the underscore are allowed (no spaces) - 3-16 characters";
			un.focus();
			return false;
		}
		var pw = form.password;
		pw.value = pw.value.replace(/^\s+|\s+$/g,"");
		if((pw.value.length < 3) || (/[^a-z0-9]/gi.test(pw.value)))
		{
			e.innerHTML = "Only letters and numbers are allowed (no spaces) - 3-16 characters";
			pw.focus();
			return false;
		}
		e.innerHTML = "You filled in all the fields, well done!";
		e.style.background = "green";
		return false;
	}
</script>
</head>

<body>
<div id="wrapper">
	<div id="header">
    	<h1>My Cool Website</h1>
    </div>
    <div id="content">
		<div class="padding">
       	  <h2>Registration</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
<form id="reg" action="#" method="post" onsubmit="return validate(this)">
	    <div id="error"></div>
		<div><label for="username">Username</label></div>
    			<div><input type="text" name="username" id="username" size="30" maxlength="16" /></div>
		<div><label for="password">Password</label></div>
    			<div><input type="password" name="password" id="password" size="30" maxlength="16" /></div>
        <div><label for="c_password">Confirm Password</label></div>
                <div><input type="password" name="c_password" id="c_password" size="30" maxlength="16" /></div>
        <div><label for="email">Email address</label></div>
                <div><input type="text" name="email" id="email" size="30" maxlength="200" /></div>
        <div><label for="c_email">Confirm Email address</label></div>
                <div><input type="text" name="c_email" id="c_email" size="30" maxlength="200" /></div>
        <div><label for="firstname">First name</label></div>
                <div><input type="text" name="firstname" id="firstname" size="30" maxlength="100" /></div>
        <div><label for="surname">Surname</label></div>
                <div><input type="text" name="surname" id="surname" size="30" maxlength="100" /></div>
        <div><label for="gender">Gender</label></div>
                <div>
                    <div><input type="radio" name="gender" id="gender" value="m" checked="checked" />Male</div>
                    <div><input type="radio" name="gender" value="f" />Female</div>
                </div>
                <div><input type="submit" value="Register" name="submit" /></div>
          </form>
		</div>
    </div>
    <div id="footer">
    	<p>Copyright &copy; 2009 My Cool Website</p>
    </div>
</div>
</body>
</html>

I have a order form page and on submitting it opens a new web page that displays the order totals. Below is my code and most probably wrong but for me it seems logic. Please assist.

Order Form:
Code:

<td colspan="1" height="120" align="left"> 
<select style="margin-left: 60px; background-color: #00FF77;" name="prod_bed_359"  onchange="calculateValue(this.form)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select> R359</td></tr>

New page I called a unction to print:
Code:

function itemsOrdered() {
var beds = document.forms[2].prod_bed_359.value;
document.write("<pre><strong>Description\t\tQuantity\tPrice</strong></pre>");
document.write("<pre>Doggie Bed\t\t" + beds + "</pre>");	
}

This is still basic as I need to get this right before adding the prices and totals which is also extracted from the order page.

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.

Hey guys, I am pretty new at javascript but am trying to learn.

Here is a problem I have encountered.

I have made a form with various input fields and a set of radio buttons which change the parameters of the form.
One of the radio button sets is "Search by X" and "Search by Y"

I want the action parameter for the form to change depending on whethere X or Y is selected

Code:

<FORM name=ENTRY_FORM  onSubmit="return Check();" action="pointMeTo()" method="get">

If X is selected then action="http://site.com//doSomething.action"
if Y is selected then action="http://site.com//doSomethingElse.action"

The way I attempted to do the above(and I am not claiming this to be most efficient, just what comes to mind at the moment) is to create three functions and two global variables.

Code:

var xyToggler = false;
var out = "";

function toggleX(){
   xyToggler = false;
}

function toggleY(){
   xyToggler = true;
}

function pointMeTo(){
   if(xyToggler){
      out="http://site.com//doSomething.action"
   }
   else
      out="http://site.com//doSomethingElse.action"
}

Thats the javascript part, now on the html form part:

Code:

<FORM name=ENTRY_FORM  onSubmit="return Check();" action="pointMeTo()" method="get">
<!-- Stuff -->

<input type="radio" name="choose" id="X" NAME="rbXY" value="X" onClick="toggleX()" checked/><label for="X">X</label>

<input type="radio" name="choose" id="Y" NAME="rbXY" value="Y"  onClick="toggleY()" /><label for="Y">Y</label>

The logic seems like it would work to me, but when I try it out the results that are expected to come depending on the parameters X or Y are not displayed, in fact nothing is displayed but a msg saying that there is no such link. So I am assuming that means that the function is not properly assigning the corresponding links to the action= field in the form.

Many thanks to whoever can spot my error or give me some advise!

All the best.

Hi !

i sometimes are able to alter simple javascript, but i need help with the following.

MaxMind.com has a javascript or geotargetting. It displays the country where ur at.

I need this output in a form, so i can store it in a database.

this is the script i use:

<script language="JavaScript" src="http://j.maxmind.com/app/country.js"></script>

<br>Country Code:
<script language="JavaScript">document.write(geoip_country _code());</script>
<br>Country Name:
<script language="JavaScript">document.write(geoip_country _name());</script>

How can i get the country name to be displayed in an input field ?

something like:

<form name="xx" action="somepage.htm" method="post">
<input type="Text" size="50" name="country" value="country name">
</form>

Hi does anyone know how to output a reformated number to a form?? This is what I have so far:

Code:

if (!document.userSurvey.phone.value)
    {
        alert("Phone number missing. Please enter a valid phone number to continue.");
        document.userSurvey.phone.focus();
        return false;	  
    }
    else
    {
        var numbersOnly = "";
        var chars = "";
        var phoneNo = document.userSurvey.phone.value;

        for (i = 0; i < phoneNo.length; i++)
        {
            chars = phoneNo.substring(i,i+1);
          
            if (chars >= "0" && chars <= "9")
            {
                numbersOnly = numbersOnly + chars;
            }
        }

        if (numbersOnly.length != 13)
        {
            alert("Incorrect phone number format.You must enter 13 numbers.");
            document.userSurvey.focus();
            return false;
        }
        else
        {
            var areacode = numbers.substring(0,2);
            var leading0 = numbersOnly.substring(2,3);
            var exchange = numbersOnly.substring(3,5);
            var ext1 = numbersOnly.substring(5,9);
            var ext2 = numbersOnly.substring(9);
            var newNumber =( "+" + areacode + " " +"(" + leading0 + ")" +       exchange + " " + ext1 + "-" + ext2);

Hey everyone. I hope you can help me getting through this problem, because I have no idea of what else to try. I'm a web designer and sometimes modify Javascript, but my main focus is HTML and CSS, meaning I have no idea how to code in Javascript or how to write something from scratch in PHP.

So I designed a form that works pretty well, and integrated a PHP and Javascript script to make it work. This is the form:

Code:

    <form name="form" id="form" method="post" action="contact.php">
    <p>Hello,</p>
    <p>My name is <input type="text" name="name">, from <input type="text" name="location">, and I'd like to get in touch with you for the following purpose:</p>
    <p><textarea name="message" rows="10" ></textarea></p>
    <p>By the way, my email address is <input type="text" name="email" id="email" placeholder="john@doe.com">, and I can prove I'm not a robot because I know the sky is <input type="text" name="code" placeholder="Red, green or blue?">.</p>
	<p title="Send this message."><input type="submit"  id="submit" value="Take care."></p>
    </form>

And this is the script, in an external file called contact.php:

Code:

<?php
  $name = check_input($_REQUEST['name'], "Please enter your name.") ;
  $location = check_input($_REQUEST['location']) ;
  $message = check_input($_REQUEST['message'], "Please write a message.") ;
  $email = check_input($_REQUEST['email'], "Please enter a valid email address.") ;
  if (!preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/",$email)) {die("E-mail address not valid");}
  if (strtolower($_POST['code']) != 'blue') {die('You are definitely a robot.');}

  $mail_status = mail( "my@email.com", "Hey!", "Hello,\n\n$message\n\nRegards,\n\n$name\n$location", "From: $email $name" );
  
  function check_input($data, $problem='')
{
    $data = trim($data);
    $data = stripslashes($data);
    $data = htmlspecialchars($data);
    if ($problem && strlen($data) == 0)
    {
        show_error($problem);
    }
    return $data;
}

function show_error($myError)
{
?>
    <html>
    <body>

    <b>Please correct the following error:</b><br />
    <?php echo $myError; ?>

    </body>
    </html>
<?php
exit();
}

    if ($mail_status) { ?>
      <script language="javascript" type="text/javascript">
      alert('Thank you for the message. I will try to respond as soon as I can.');
      window.location = '/about';
    </script>
<?php
}
    else { ?>
    <script language="javascript" type="text/javascript">
      alert('There was an error. Please try again in a few minutes, or send the message directly to aalejandro@bitsland.com.');
      window.location = '/about';
    </script>
<?php
}
?>

So what it does is this: if everything's OK, it sends an email with "Hey!" as the subject, "[name]" as the sender, "Hello, [message]. Regards, [name], [location]" as the body, and a popup saying the message was delivered appears. If something fails, it outputs the error in a new address, so the user will have to go back to the form and correct the error.

What I actually want to happen is this: if everything's OK, a <p> which was hidden beneath the form appears saying the message was delivered, or, alternatively, make the submit button gray out and confirm the message was delivered. I found a script to make this happen, but with "Please wait...", so the user can't resubmit the form.

If there's an error, I'd like another <p> which was hidden to appear with the specific error, so there'd be many <p>'s hidden with different IDs. If possible, I'd also like to change the CSS style of the input field, specifically changing the border color to red, so it'd be a change in class for the particular field.

--

So in essence, I want the errors and the success messages to output in the same page as the form (without refresh), and a change of class in the input fields that have an error. It'd be great if the submit button could be disabled until all fields are filled correctly, but I don't know if this is possible.

Thanks in advance, and please let me know if it'll be possible. :)

I have a form that I've made in the XHTML comprised of text boxes and radio buttons. I want to put a button on the page that when clicked, takes the values in the data, processes it client-side and then outputs it to the same page that it took the data from.

I'm having difficulty know exactly how to reference the data in each form element. So far, it seems like I can use getElementById, but my efforts so far have stymied me.

The code is this:
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>QuadWay DomQuote</title>
	<meta http-equiv="content-type" 
		content="text/html;charset=utf-8" />

<!-- external script declarations -->		
<script type="text/javascript" src="chkValidityOfNumber.js"></script>
<script type="text/javascript" src="calcQuote.js"></script>
<script type="text/javascript" src="calcGoodsAndServicesTax.js"></script>
<script type="text/javascript" src="calcTotalCostIncludingGST.js"></script>
<script type="text/javascript" src="outPutResultsToPage.js"></script>

</head> 


<body>

        <form action="" name="quadway">
<!-- create fields to enter customer details into -->
                <b>Customer Details</b>
               
                <p>Customers Full Name:
                        <input type="text" id="customersfullname" name="custName" />
                        </p>
                       
                        <p>Contact Telephone Number:
                        <input type="text" id="customerstelephonenumber" name="phoneNumber" />
                        </p>
                       
                        <p>Customers Address:
                        <textarea id="customersaddress" name="custAddress" cols="20" rows="5"></textarea>
                        </p>
               
                                <hr />
<!-- create fields to enter the regularity of service -->              
                <b>Regularity</b>
                        <p>
                        <input type="radio" name="regularity" value="1" />
                        Once only
                        </p>
                       
                        <p>
                        <input type="radio" name="regularity" value="4" checked />
                        Weekly
                        </p>
                       
                        <p>
                        <input type="radio" name="regularity" value="2" />
                        Fortnightly
                        </p>
                       
                        <p>
                        <input type="radio" name="regularity" value="1" />
                        Monthly
                        </p>
               
                                <hr />
 
<!-- create radio buttons to select the contract period -->                            
                <b>Contract Period</b>
                        
                        <p>
                        <input type="radio" name="contractperiod" value="1" />
                        N/A (Once Only)
                        </p>
						
						<p>
                        <input type="radio" name="contractperiod" value="6" />
                        Six Months
                        </p>
                       
                        <p>
                        <input type="radio" name="contractperiod" value="12" />
                        One Year
                        </p>
                       
                        <p>
                        <input type="radio" name="contractperiod" value="24" />
                        Two Years
                        </p>
               
                                <hr />
 
<!-- create radio buttons to select the type of service -->                            
                <b>Type</b>
                        <p>
                        <input type="radio" name="typeOfService" value="1" />
                        Standard
                        </p>
                       
                        <p>
                        <input type="radio" name="typeOfService" value="1.4" />
                        Premium
                        </p>
               
                                <hr />
 
<!-- create fields to enter how many bedrooms, living areas and service areas there are and their area -->                                                             
                <b>Bedrooms</b>
                        <p>Number of bedrooms:
                        <input type="text" name="numBedrooms" size="3" maxlength="3" onchange="return chkValidityOfNumber(this)" />
                        </p>
                       
                        <p>Area:
                        <input type="text" name="areaBedrooms" size="3" maxlength="3" onchange="return chkValidityOfNumber(this)" />
                        m2
                        </p>
                       
                <b>Living Areas</b>
                        <p>Number of living areas:
                        <input type="text" name="numLivAreas" size="2" maxlength="3" onchange="return chkValidityOfNumber(this)" />
                        </p>
                       
                        <p>Area:
                        <input type="text" name="areaLivAreas" size="3" maxlength="3" onchange="return chkValidityOfNumber(this)" />
                        m2
                        </p>
                       
                <b>Service Areas</b>
                        <p>Number of service areas:
                        <input type="text" name="numServAreas" size="2" maxlength="3" onchange="return chkValidityOfNumber(this)" />
                        </p>
                       
                        <p>Area:
                        <input type="text" name="areaServArea" size="3" maxlength="3" onchange="return chkValidityOfNumber(this)" />
                        m2
                        </p>
		<input type="button" name="calculateQuoteButton" value="Calculate Quote" onClick = "calcQuoteBeforeTax(this.form)"></input>
		
		
			var theForm=document.getElementById("quadway");
			<input type="button" name="tester" value="test" onClick = "alert(document.quadway.getElementById.elements[0].value);"></input>
		
		
		</form>
                                <hr /><hr />

	<b>Quote</b>




</body>
</html>

Right down the bottom, under the word 'Quote is where the output should go.

Any suggestions on how to do this?

Regards


Jenny

How can I add a form field value to a url. I tried the below but it no work.

Code:

href="index2.php?q=4&id=+document.theForm.lists.value+&picklist"

function checkValidFormInput() {

if (document.getElementsByName('customerName').value != '') {
document.getElementById('customerNameImg').innerHTML = '<img alt="Valid" src="images/greenTick.png">';
} else {
document.getElementById('customerNameImg').innerHTML = '<img alt="Invalid" src="images/redX.png">';
}

if (document.getElementsByName('customerEmail').length > 0) {
document.getElementById('customerEmailImg').innerHTML = '<img alt="Valid" src="images/greenTick.png">';
} else {
document.getElementById('customerEmailImg').innerHTML = '<img alt="Invalid" src="images/redX.png">';
}

}

Is there a way to give an input or textarea field the focus and set the focus to begin right at the end of the current text in the field?