|
JavaScript - Split Name And Populate Email Field
I have a web form that requests a user full name and email address. What I would like to do is when the user fills in the full name in one input box, I would like to take the full name and populate the email address field as such. "first.last@allstate.com". So pretty much split the full name and popluate email address field "first.last@allstate.com".
Tracy Similar TutorialsI have a table where when the cursor passes/hovers over a cell, the current cell, as well as the top cell in its column and the first cell in its row change backgroundColor. I have text fields outside the table which I want to populate with the contents of the cells affected by the mouseover event. So as the mouse moves over different cells, the contents of the text fields changes accordingly. I've got the backgroundColor to change, but when I try to assign the contents of the cells to the text fields, nothing happens. The change of backgroundColor even stops working. This is the code I'm usign to populate the fields. Code: document.getElementById("tableID").textfieldID.value = Col1Cell[0].innerHTML;
document.getElementById("tableID").textfieldID.value = HeaderCell[n].innerHTML;
document.getElementById("tableID").textfieldID.value = this.innerHTML;
I'm traversing through the <th> and <td> tags to find the header cell HeaderCell[n] and first column cell Col1Cell[0] associated with the current cell. If I leave out these lines the backgroundColor changes, if I use them, nothing happens at all. Can't figure out why. Any suggestions? I would like to set up an image gallery so that when customer clicks on their chosen image, the image caption populates into the associated field in the form below the gallery, on the same page. Any way you know of to do this? I am not really a coder, I only know this and that, so examples or detailed instructions will be most helpful. Thanks very much. Hi all I have relatively easy task I need to accomplish but as per usual I have very little idea of how to do it. I have done a google search to no avail. Basically I need to: 1. Pull a value from inside a div Code: <div id="number">(invoice #1017)</span> 2. Populate a form input field with that value. Does this make sense? If not let me know if you need any more info. Thanks Hello I have a form validation script which checks for empty fields and an email address. The empty fields part seems to work, but not the validation (as long as I type characters in the email field, it seems to be acceptable). Here is what I have: Code: //function to check for empty fields
function isEmpty(strfield1, strfield2, strfield3) {
//change "name, email and subject" to your field names
strfield1 = document.forms[0].ContactUs_Name.value
strfield2 = document.forms[0].ContactUs_Email.value
strfield3 = document.forms[0].ContactUs_Subject.value
//name field
if (strfield1 == "" || strfield1 == null || !isNaN(strfield1) || strfield1.charAt(0) == ' ')
{
alert("\"Name\" is a mandatory field.\nPlease amend and retry.")
return false;
}
//url field
if (strfield2 == "" || strfield2 == null || strfield2.charAt(0) == ' ')
{
alert("\"Email\" is a mandatory field.\nPlease amend and retry.")
return false;
}
//title field
if (strfield3 == "" || strfield3 == null || strfield3.charAt(0) == ' ')
{
alert("\"Subject\" is a mandatory field.\nPlease amend and retry.")
return false;
}
return true;
}
//function to check valid email address
function isValidEmail(strEmail){
validRegExp = /^[^@]+@[^@]+.[a-z]{2,}$/i;
strEmail = document.forms[0].email.value;
// search email text for regular exp matches
if (strEmail.search(validRegExp) == -1)
{
alert('A valid e-mail address is required.\nPlease amend and retry');
return false;
}
return true;
}
//function that performs all functions, defined in the onsubmit event handler
function check(form){
if (isEmpty(form.ContactUs_Name)){
if (isEmpty(form.ContactUs_Email)){
if (isEmpty(form.ContactUs_Subject)){
if (isValidEmail(form.email)){
return true;
}
}
}
}
return false;
}
</script>
</head>
<body bgcolor="#ECECEC" text="#000000">
<h3>Form validation with JavaScript</h3>
<form name="theform" method="post" action="#" onSubmit="return check(this);">
Name:<br />
<input name="ContactUs_Name" type="text" /><br />
E-Mail:<br>
<input name="ContactUs_Email" type="text" id="ContactUs_Email" />
<br />
Subject:<br>
<input name="ContactUs_Subject" type="text" id="ContactUs_Subject" />
<br>
I just wondered, is it here that the problem lies: if (isValidEmail(form.email)){ Thanks. Steve Hello, I'm trying to make sure that my email field contains at least 5 characters and the @ symbol. I've been trying to do this using an if...else loop, but so far I've only been running into brick walls. I think my problem is I don't know what to use when it comes to document.form1.email.value This is the latest script I tried: Code: <html>
<head>
<title>Form Example</title>
<script language="JavaScript" type="text/javascript">
function validate() {
if (document.form1.yourname.value.length < 1) {
alert("Please enter your full name.");
return false;
}
if (document.form1.address.value.length < 3) {
alert("Please enter your address.");
return false;
}
if (document.form1.phone.value.length < 3) {
alert("Please enter your phone number.");
return false;
}
if (document.form1.email.value.length < 5) alert("Please enter at least 5 characters.");
else if (document.form1.email.value.match(@)) alert("Please enter an @ symbol.");
return false;
return true;
}
</script>
</head>
<body>
<h1>Form Example</h1>
<p>Enter the following information. When you press the Submit button,
the data you entered will be validated, then sent by email.</p>
<form name="form1" action="mailto:user@host.com" enctype="text/plain"
method="POST" onSubmit="return validate();">
<p><b>Name:</b> <input type="TEXT" size="20" name="yourname">
</p>
<p><b>Address:</b> <input type="TEXT" size="30" name="address">
</p>
<p><b>Phone: </b> <input type="TEXT" size="15" name="phone">
</p>
<p><b>Email Address: </b> <input type="TEXT" size="30" name="email">
</p>
<p><input type="SUBMIT" value="Submit"></p>
</form>
</body>
</html>
Hello: I have an expression validating email addresses but it seems there is a loophole. If a user enters a comma this is accepted. Can anyone tell me how i can modify the following to disallow commas? validRegExp = /^[^@]+@[^@]+.[a-z]{2,}$/i; strEmail = document.form1.df_email1.value; if (strEmail.search(validRegExp) == -1) { alert("A valid e-mail address is required."); document.form1.df_email1.focus(); return false; } i'm using a shopping cart template and i do NOT want to require that shoppers have to enter their email address. how do I disable the requirement, but still ensure if they do type it in, that the format is correct (i.e. person@website.com)? thanks! PHP Code: <?php if(! is_array($alladdresses)){ ?> if(frm.email.value==""){ alert("<?php print $xxPlsEntr?> \"<?php print $xxEmail?>\"."); frm.email.focus(); return (false); } validemail=0; var checkStr = frm.email.value; for (i = 0; i < checkStr.length; i++){ if(checkStr.charAt(i)=="@") validemail |= 1; if(checkStr.charAt(i)==".") validemail |= 2; } if(validemail != 3){ alert("<?php print $xxValEm?>"); frm.email.focus(); return (false); } here is my current email validation code: function validateEmail(strValue) { var objRegExp = /(^[a-z]([a-z_\.]*)@([a-z_\.]*)([.][a-z]{3})$)|(^[a-z]([a-z_\.]*)@([a-z_\.]*)(\.[a-z]{3})(\.[a-z]{2})*$)/i; return objRegExp.test(strValue); } what should i add to reject email addresses from hotmail.com and yahoo.com? Hey All, Been having some trouble with this, I am trying to find a javascript or DHTML form field which is similar to the outlook web access email address fields which show an icon to identify the address, and the screen name of the address instead of the full email address, as a hyperlink. I was wanting to know if anyone knows of something like this already around or if I need to design my own. Thanks in advance. so that the form only submits when 2 fields are identical? this is the code I am trying to edit Code: <div class="title">ENROLLMENT</div>
<p>You are on your way to receiving <strong>generous cash backs</strong> <em>PLUS</em> a <strong>steady stream of free dinners</strong> just for shopping at your favorite stores!</p> <br />
<form action="" class="registration" id="cform">
<div>
To begin, please complete the following:<br />
<div class="f11">
<input type="text" name="name" value="Name:" onfocus="if(this.value=='Name:')this.value=''" /><br />
<input type="text" name="address" value="Address:" onfocus="if(this.value=='Address:')this.value=''" /><br />
<input type="text" name="phone" value="Phone:" onfocus="if(this.value=='Phone:')this.value=''" /><br />
<input type="text" name="email" value="E-mail:" onfocus="if(this.value=='E-mail:')this.value=''" /><br />
<input type="text" name="confirm" value="Confirm Email:" onfocus="if(this.value=='Confirm Email:')this.value=''" /><br />
<fieldset style="width:330px">
How would you like your free restaurant gift certificates sent to you? <br /> <input class="checkbox" name="gift_1" id="c1" type="checkbox" value="yes" /> <label for="c1">U.S. Mail</label> <input class="checkbox" name="gift_2" id="c2" type="checkbox" value="yes" /> <label for="c2">E-mail</label>
</fieldset>
</div>
<br />
<div class="align-center"><a href="javascript:void(0);" id="sbm"><img alt="" src="images/button-submit.gif" /></a></div>
</div>
</form>
<center><img src="/images/registration.jpg" ALT="registration" class="border" style="margin-top:20px" /></center>
Code: /**
* @author bob4ik
*/
$(document).ready(function(){
html = '<div id="displayResponse" style="display:none;"><div id="inner">Processing...</div></div>';
$('#cform').before(html);
$('#sbm').click(function(){
$('#cform').submit();
});
var options = {
target: '#displayResponse', // target element(s) to be updated with server response
beforeSubmit: before, // pre-submit callback
// success: success, // post-submit callback
url: 'includes/mail.ctrl.php', // override for form's 'action' attribute
type: 'post', // 'get' or 'post', override for form's 'method' attribute
resetForm: true // reset the form after successful submit
};
// bind to the form's submit event
$('#cform').submit(function(){
error = '<div id="inner">Processing...</div>';
$('#displayResponse').empty();
$('#displayResponse').append(error);
$('#displayResponse').toggle();
$(this).ajaxSubmit(options);
return false;
});
});
function before(formData, jqForm, options){
var error = '';
var form = jqForm[0];
if (!form.name.value && !form.email.value && !form.address.value && !form.phone.value && !form.hear.value && !form.confirm.value) {
error = error + '<div style=""><b>Please fill all fields</b></div>';
}
else {
if (!form.name.value||form.name.value=="Name:")error = error + '<div style=""><b>Please fill "Name" field</b></div>';
if (!form.address.value||form.address.value=="Address:")error = error + '<div style=""><b>Please fill "Address" field</b></div>';
if (!form.phone.value||form.phone.value=="Phone:")error = error + '<div style=""><b>Please fill "Phone" field</b></div>';
if (!form.c1.checked && !form.c2.checked)error = error + '<div style=""><b>Please fill "How would you like your free restaurant gift certificates sent to you?" field</b></div>';
if (!form.email.value||form.email.value=="E-mail:")error = error + '<div style=""><b>Please fill "E-mail address" field</b></div>';
if (!form.confirm.value||form.confirm.value=="Confirm Email:")error = error + '<div style=""><b>Please fill "Confirm E-mail address" field</b></div>';
if ((form.email.value.match(/[0-9a-z_]+@[0-9a-z_^.]+.[a-z]{2,3}/i) == null) && form.email.value && (form.email.value.match(/^.+@.+\..+$/) == null)&& form.email.value!="E-mail:") {
error = error + '<div style=""><b>Invalid e-mail</b></div>';
}
if ((form.confirm.value.match(/[0-9a-z_]+@[0-9a-z_^.]+.[a-z]{2,3}/i) == null) && form.confirm.value && (form.confirm.value.match(/^.+@.+\..+$/) == null)&& form.confirm.value!="Confirm Email:") {
error = error + '<div style=""><b>Invalid e-mail</b></div>';
}
}
if (error != '') {
error = error + '<br><a href="#" onclick="javascript: $(\'#displayResponse\').toggle(); return false;"><img src="images/close.gif" border="0"></a>';
error = '<div id="inner">' + error + '</div>';
$('#displayResponse').empty();
$('#displayResponse').append(error);
return false;
}
else {
return true;
}
}
hiiii, im new to javascripts . Can anyone help me to know that a javascript which is validating a phone number accepts only digits but if the text field is left empty it should accept the entry as an empty entry.... plz share knowledge u will be more knowledgeable Hi folks. Looking to see if anyone could tell me where I'm going wrong with this script... I'm trying to have a field automatically filled with the day of the week ("Monday", "Tuesday", "Wednesday" and so on), upon the user selecting a date from the datepicker jQuery. If this isn't clear, I'll clarify further down the page. Here is the script: Code: <script type="text/javascript">
jQuery(document).ready(function($){
$('input[name="item_meta[428]"]').change(function(){
var d = $('input[name="item_meta[428]"]').val();
var n = new Date(d).getDay();
if(n == 0)
val v = 'Sunday';
else if(n == 1)
val v = 'Monday';
else if(n == 2)
val v = 'Tuesday';
else if(n == 3)
val v = 'Wednesday';
else if(n == 4)
val v = 'Thursday';
else if(n == 5)
val v = 'Friday';
else if(n == 6)
val v = 'Saturday';
$('input[name="item_meta[429]"]').val(v).change();
});
});
</script>
I'm basically trying to say, if the user selected today (15/05/2012) in the field 428 it would fill the field 429 with "Tuesday". Again, if the user selected 18/05/2012 in the field 428 then it would automatically fill field 429 with "Friday". It's being done to work in conjunction with a wordpress plugin called Formidable Pro hence the item_meta[428] etc. Any assistance would be greatly appreciated. Sam. I have a text field, call it income, that when the input is > 0 I need to dynamically show the next text box, and if it is blank hide the next text box. I would like to use onBlur but can't seem to get it to work. Can I do this? Help Resolution if interested: Code: <head>
<title>Lab8</title>
<script src="arrays.js" type="text/javascript"></script>
<link href="css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function amountTotal() {
var totalDonations = 0;
for (var i = 0; i < amount.length; i++) {
totalDonations += amount[i];
}
return totalDonations;
}
</script>
</head>
<body>
<table id="donations" rules="rows">
<tr>
<th>
Date
</th>
<th>
Name
</th>
<th>
Amount
</th>
<th>
Address
</th>
</tr>
<script type="text/javascript">
for (var i = 0; i < amount.length; i++) {
if (i % 2 == 0) document.write("<tr>")
else document.write("<tr class='yellowrow'>");
document.write("<td>" + date[i] + "</td>");
document.write("<td>" + firstName[i] + lastName[i] + "</td>");
document.write("<td>" + amount[i] + "</td>");
document.write("<td>" + street[i] + "<br />" + city[i] + "," + " " + state[i] + " " + zip[i] + "</td>");
}
document.write("</tr>")
</script>
</table>
<table id="totalsTable">
<tr>
<th colspan="2">
Summary
</th>
</tr>
<tr>
<td>
Contributions
</td>
<td class="amt">
<script type="text/javascript">
document.write(amount.length);
</script>
</td>
</tr>
<tr>
<td>
Amount
</td>
<td class="amt">$
<script type="text/javascript">
var totalTotal = amountTotal();
document.write(totalTotal);
</script>
</td>
</tr>
</table>
</body>
</html>
I have a seperate .js sheet with some arrays on them (firstName, lastName, date, amount, city, state, zip) and I am trying to populate a table with these indexes. The 'yellowrow' highlights everyother row which is called out in my css sheet. My header rows fill in but not the rest. Here is the link for the site actually posted on the web. Code: <body>
<table id="donations" rules="rows">
<tr>
<th>Date</th>
<th>Name</th>
<th>Amount</th>
<th>Address</th>
</tr>
<script type="text/javascript">
for (var i = 0; i < amount.length; i++) {
if (i % 2 == 0) document.write("<tr>")
else document.write("<tr class='yellowrow'>");
document.write("<td>" + date(i) + "</td>");
document.write("<td>" + firstName(i) + lastName(i) + "</td>");
document.write("<td>" + amount(i) + "</td>");
document.write("<td>" + "<br />" + city(i) + "," + state(i) + zip(i) + "</td>");
}
document.write("</tr>")
</script>
</table>
</body>
I am trying to populate a listbox using Javascript. The listbox is populated using the xml response from ajax request. Below is the code used for the same Code: var xmlDoc = xmlhttp.responseXML;
for (var i = 0; i < xmlDoc.getElementsByTagName("id").length; i++) {
traderlists.add(new Option(xmlDoc.getElementsByTagName("name")[i].childNodes[0].nodeValue, xmlDoc.getElementsByTagName("id")[i].childNodes[0].nodeValue));
}
This works fine for me. But i am facing performance issue here. some ajax requests retrieves xmls with around 11,000 nodes and this takes too much of time to populate the listbox. Can anyone please advice me with an better solution? I have a check box right now that calls an onClick event. Here is the Input: Code: <input name="usePad" type="checkbox" value="usePad" id="usePad" onclick="showBind('padShow','padOk')" />
Here is the Script: Code: var xmlhttpshowBind;
var showBindDiv;
function showBind(BindPage,BindDiv) {
xmlhttpshowBind=GetXmlHttpObject();
if (xmlhttpshowBind==null) {
alert ("Browser does not support HTTP Request");
return; }
var url="/scripts/"+BindPage+".php";
showBindDiv=BindDiv;
xmlhttpshowBind.onreadystatechange=showBindGet;
xmlhttpshowBind.open("GET",url,true);
xmlhttpshowBind.send(null); }
function showBindGet() {
if (xmlhttpshowBind.readyState==4) {
document.getElementById(showBindDiv).innerHTML=xmlhttpshowBind.responseText; } }
It works great to fill the div called for, but I would like it to remove the div contents if it's unchecked, I'm not sure how to do this?? Any help would be appreciated! Thank you in advance! Hello guys, How to populate array from dropdownlist? I've tried like this var array = new array(); var d = document.getElementById("DropDownListl"); for (var i = 0; i < d.options.length; i++) { array[i] = d.options[i].value; } Thank you <!-- *** NEED HELP PASSING VALUE id TO POPULATE SUBRECORDS *** --> <!-- *** See line #51 to #55 *** --> <?php session_start(); ob_start(); if($_SESSION[userdetails]->role != "Admin") { die("Access Denied!"); } require_once("includes/connect.php"); // Check if he has the right info. $sql = sprintf("SELECT * FROM members ORDER BY username ASC", $_SESSION[userdetails]->id); $query = mysql_query($sql); // You are now connected ?> <head> <html> <head> <title>Split ListBox Text To Text Boxes</title> <script type="text/javascript"> <!-- archaic format: language="javascript" --> function SplitText (info) { if (info == '') { return; } var tarr = info.split(","); document.getElementById('tBox1').value = tarr[0]; document.getElementById('tBox2').value = tarr[1]; document.getElementById('tBox3').value = tarr[2]; document.getElementById('tBox4').value = tarr[3]; } </script> </head> <body> <form name="convert"> <p style="margin: 2px"> <p><select name="Groups" style="width: 176; height: 19; border: 1px solid #C0C0C0 ; font-size: 11px; font-family:Arial" size="1" onChange="SplitText(this.value)"> <option>===Select Group===</option> <?php $sql1 = mysql_query("SELECT * FROM qw_groups"); while($r1=mysql_fetch_assoc($sql1)){ $f1 = $r1[id]; $f2 = $r1[GroupName]; echo "<option value='$f1,$f2,,'>$f2</option>"; } echo "</select>"; ?> <p><select name="GroupItems" style="width: 176; height: 19; border: 1px solid #C0C0C0 ; font-size: 11px; font-family:Arial" size="1" onChange="SplitText(this.value)"> <option>===Select Group Item===</option> <?php // **** IS IT POSSIBLE TO PASS THE VALUE "$f1" FROM GROUPS TO GROUPITEMS **** // **** I WANT TO POPULATE THE SECOND DROPDOWN LIST WITH SUB-RECORDS WITHOUT SUBMIT /POST /REFRESH /OR RELOAD **** // WHERE id = $f1 ?? maybe some java code id = $val onChange ?? $sql2 = mysql_query("SELECT * FROM qw_groupitems WHERE id = $f1"); while($r2=mysql_fetch_assoc($sql2)){ $f3 = $r2[Subid]; $f4 = $r2[GroupItem]; echo "<option value='$f1,$f2,$f3,$f4'>$f4</option>"; } echo "</select>"; ?> </p> <!-- Input selected data from listBox --> <p style="margin: 2px"> <input type="text" name="textbox1" id="tBox1" value=""><br> <input type="text" name="textbox2" id="tBox2" value=""><br> <input type="text" name="textbox3" id="tBox3" value=""><br> <input type="text" name="textbox4" id="tBox4" value=""><br> </p> </form> </body> </html> I have a div what will contain a various number on images and i need to put all their src's into an array. Is this doable? Heres the code Code: <div id="imageHolder">
<!-- ONLY CHANGE THE SRC, NOTHING ELSE -->
<div style="width:770px;height:400px;overflow-y:auto;margin-bottom:5px;">
<img src="http://wholesalepadlocks.co.uk/ebayImages/AU080.JPG" alt="" width="750" id="mainImage"/><br /><br />
</div>
<img src="http://wholesalepadlocks.co.uk/ebayImages/au080a.jpg" alt="" width="240" height="120" onmouseover="Images = this.src;alert(Images)" />
<img src="http://wholesalepadlocks.co.uk/ebayImages/au080b.jpg" alt="" width="240" height="120" onmouseover="Images = this.src;alert(Images)"/>
<img src="http://wholesalepadlocks.co.uk/ebayImages/AU080.JPG" alt="" width="240" height="120" onmouseover="Images = this.src;alert(Images)"/>
</div>Ignore the onmouseover code i was attempting to do this but so far no luck :P
I really need help with this. I really don't know how to make this work. I need to populate a drop down menu with a value passed through the browser if it's passed. so the browser URL will look like: domain.com/?referer=YellowPagesOnline I need to capture the referer value from the browser store it into a cookie. If the cookie is set and then populate the drop down on the page with the cookie. If it's not set then a list of sources should appear. So I already have the code to grab the string and store it in a cookie but I'm not sure how to do the initialization of the drop down with the cookie value. This is what I have... Code: <script>
//Get the referer string out of the URL
function getQuerystring(key, default_)
{
if (default_==null) default_="";
key = key.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regex = new RegExp("[\\?&]"+key+"=([^&#]*)");
var qs = regex.exec(window.location.href);
if(qs == null)
return default_;
else
return qs[1];
}
//Set the cookie for 30 days
function SetCookie(cookieName,cookieValue,nDays) {
var today = new Date();
var expire = new Date();
if (nDays==null || nDays==0) nDays=1;
/* expire.setTime(today.getTime() + 3600000*24*nDays);*/
expire.setTime(today.getTime() + (1000 * 60 * 60 * 24 * 30));
document.cookie = cookieName+"="+escape(cookieValue)
+ ";expires="+expire.toGMTString();
}
//Put the cookie on the user's computer
function putcookie()
{
var val = getQuerystring('referer');
if(val !=""){
if (document.cookie.length == 0)
{
SetCookie('referer', val, 1);
alert(val);
}
}
alert(document.cookie);
}
putcookie();
getCookie(name);
//If there is a cookie then get the cookie
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=");
if (c_start!=-1)
{
c_start=c_start + c_name.length+1;
c_end=document.cookie.indexOf(";",c_start);
if (c_end==-1) c_end=document.cookie.length;
if(document.SECatJax.referer.length > 0)
{
document.SECatJax.referer.value = unescape(document.cookie.substring(c_start,c_end));
return false;
}
alert(document.cookie);
}
}
document.SECatJax.referer.value = 'Website';
}
The dropdown to appear if there isn't a cookie is Code: <select name="source_code" size="1" id="source_code" class="select_2" style="display:none"> <option value="" selected="selected">--</option> <option value="Direct Mail">Direct Mail</option> <option value="High School Presentation">High School Presentation</option> <option value="Search Engine">Internet Search</option> <option value="Newspaper">Newspaper</option> <option value="Poster">Poster</option> <option value="Radio">Radio</option> <option value="Referral">Referral</option> <option value="TV">TV</option> <option value="Yellow Pages">Yellow Pages</option> </select> The drop down to appear if there is a cookie is[CODE]<select name="source_code2" size="1" id="source_code2" class="select_2" style="display:none"> <option value="YellowPagesOnline" selected="selected">YellowPagesOnline</option> </select>[CODE] Can someone help me with this please? Thanks. |
|||||||