|
JavaScript - "kind Of Pop-up Button"
Hi, i want to create this Login-Button:
www.ogame.org Can you give me an idea how that works? Thank u, nvidia Similar TutorialsHello everyone. I'm new to programming, although I've learned HTML and CSS pretty thoroughly. I think I have most of the Javascript basics down as far as definitions, but I'm getting hung up on the actual coding. I'm working on an information request form for my fiancee's business site. In it, I want to have options that users select via radio buttons. Rather than having additional input fields static on the page, I would like to program some of the radios, when clicked, to open a previously unseen option where users will then be able to type in the necessary information. More specifically, since she only works in two states, I want a third option of "other," which, when opened, will allow the user to input any other state. Then, should the radio be deselected or reset, the field would disappear again. If my understanding is correct, I think I will need to use a javascript function in the header, an HTML "div" section with ID, "onclick" and "offclick" events in the button mark-up, and the specific javascript code to call the function (getElementById?). Or maybe I'm way off. Please help. Thanks Hi All, I am very new to HTML programming and Javascripts. What I am trying to accomplish is I have a radio button "RequiredApprovalYesNo". When the selection is "Yes", I need fields "Approver" and "ApproverEmail" to be required upon submit. I also need to make sure that a selection is made with this radio button of either Yes or No. Here is my HTML code for these three fields and was wondering if someone could show me how to code this script or, give me an example of a Radio button selection resulting in additional fields being required or not. Thank you in advance. Code: <td>
<input type="radio" name="RequireApprovalYesNo" id="RequireApprovalYesNo" value="Yes">Yes
<input type="radio" name="RequireApprovalYesNo" id="RequireApprovalYesNo" value="No">No
</tr>
<tr>
<td><table width="190" border="0" align="right" cellspacing="0">
<tr>
</tr>
</table></td>
<tr>
<td colspan="3"><div align="left"><em><strong><b style= 'color: red;'>If Yes, You Must Enter an Approver with a corresponding Email:</b> </strong></em></div></td>
</tr>
<tr>
<td height="25"><div align="right">Approver:</div></td>
<td> </td>
<td><input name="Approver" type="text" id="Approver" size="40";"></td>
</tr>
<tr>
<td height="25"><div align="right">
<p>Approver's Email: </p>
</div></td>
<td> </td>
<td><input name="ApprovalEmail" type="text" id="ApprovalEmail" size="40"></td>
</tr>
<tr>
Hi , Kindly help I have to handle the browser RED X close button in the window. The problem is that its not saving the data. before submitting/saving the data it executes the window.close() I put settime out and form on submit conditionalyy put even its not saving the data But window is closing. how can we sequentiate the save + window.close() im copying the code below. ============ window.onbeforeunload = function() { if (window.event.clientY < 0 && (window.event.clientX > (document.documentElement.clientWidth - 5) || window.event.clientX < 15)) { editedCheck(); document.BuildRequestForm.buttonClicked.value="REDX"; if( document.BuildRequestForm.measdatachanged.value=="false") { setVarZero(); fn_Close(); } else { if(confirm('Do you want to save the changes?')) { elmtForm.onsubmit = fn_Close; //document.BuildRequestForm.onsubmit=fn_Close; //setVarZero() saveMeasurement(); setTimeout('setVarZero()',1000); //window.setTimeout(function() { window.close();}, 1000); //window.setTimeout(function() { fn_Close();}, 1000); //fn_Close(); //return true; } else { return "If you want to close the window click - Leave Page";} } } } ============= browser close RED X button+ popup OK Cancel "save or not" +OK Site in question: www.yourvancouvermortgagebroker.ca/apply On the 3rd step of this form, I want to add a "SKIP" button that will send the user to the 5th step. No clue how to do this, as someone else helped me code. Thank You! Relevant code javascript file: Code:
//step 3
$('#submit_third').click(function(){
//remove classes
$('#third_step input').removeClass('error').removeClass('valid');
//ckeck if inputs aren't empty
var fields = $('#third_step input[type=text]');
var error = 0;
fields.each(function(){
var value = $(this).val();
if( value.length<1 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='cemail' && !emailPattern.test(value) ) ) {
$(this).addClass('error');
$(this).effect("shake", { times:3 }, 50);
error++;
} else {
$(this).addClass('valid');
}
});
if(!error) {
//update progress bar
$('#progress_text').html('60% Complete');
$('#progress').css('width','204px');
//slide steps
$('#third_step').slideUp();
$('#fourth_step').slideDown();
} else return false;
});
//step 4
$('#submit_fourth').click(function(){
//remove classes
$('#fourth_step input').removeClass('error').removeClass('valid');
var fields = $('#fourth_step input[type=text]');
var error = 0;
fields.each(function(){
var value = $(this).val();
if( value.length<1 || value==field_values[$(this).attr('id')]) {
$(this).addClass('error');
$(this).effect("shake", { times:3 }, 50);
error++;
} else {
$(this).addClass('valid');
}
});
if(!error) {
//update progress bar
$('#progress_text').html('80% Complete');
$('#progress').css('width','272px');
//slide steps
$('#fourth_step').slideUp();
$('#fifth_step').slideDown();
}
});
// step 5
$('#submit_fifth').click(function(){
//remove classes
$('#fifth_step input').removeClass('error').removeClass('valid');
I need to figure out the on page button code, what I need to add to the javascript file AND what I need to add in the CSS. (css is here) Thank you SO much to whoever can help. Hello, I'm not really a techie but I was feeling a little adventurous this morning so I thought I'd try to follow some tips online to customize a "buy" button for some products that I'm preparing to sell online at what is currently: www.SensoryEscapeImages.Squarespace.com If you visit this site, then click on "Photo Gallery" on the top nav, then click on the 4th image to the right on the top row of thumbnails, you will see on the overlay, at the bottom, three dropdowns that I'm trying to affect. So, there are three fields presented with the Buy button: Size, Format, and Trim & Finish. If I were to select the Size of 8 x 12 in the first dropdown, the behavior that I am striving for is to only show the Formats available in that size in the second dropdown. Subsequently, each format has Trim & Finish options exclusive to that format and I'm aiming to only make those show in the Trim & Finish dropdown. But it aint working. Here's the code that I started. No laughing <left><form action="https://www.e-junkie.com/ecom/gb.php?c=cart&i=563148&cl=74166&ejc=2" target="ej_ejc" method="POST" name="condition" accept-charset="UTF-8"> <table><tr><td>Size:<select name="o1"> <option value="8 x 12">8 x 12</option> <option value="12 x 18">12 x 18</option> <option value="16 x 24">16 x 24</option> <option value="20 x 30">20 x 30</option> <option value="24 x 36">24 x 36</option> <option value="30 x 45">30 x 45</option> </select></td><td>Format:<select name="o2"> <script type="text/javascript"> if (condition.o1.options = 0) { document.write("<option value="Print $50">Print $50</option> <option value="Print on Gatorboard $80">Print on Gatorboard $80</option> <option value="Canvas $125">Canvas $125</option>"); } if (condition.o1.options = 1) { document.write("<option value="Print $90">Print $90</option> <option value="Print on Gatorboard $125">Print on Gatorboard $125</option> <option value="Canvas $145">Canvas $145</option>"); } if (condition.o1.options = 2) { document.write("<option value="Print $125">Print $125</option> <option value="Print on Gatorboard $165">Print on Gatorboard $165</option> <option value="Canvas $220">Canvas $220</option> <option value="High Def Metal Print $575">High Def Metal Print $575</option>"); } if (condition.o1.options = 3) { document.write("<option value="Print $170">Print $170</option> <option value="Print on Gatorboard $230">Print on Gatorboard $230</option> <option value="Canvas $325">Canvas $325</option> <option value="High Def Metal Print $725">High Def Metal Print $725</option>"); } if (condition.o1.options = 4) { document.write("<option value="Print $215">Print $215</option> <option value="Print on Gatorboard $300">Print on Gatorboard $300</option> <option value="Canvas $430">Canvas $430</option> <option value="High Def Metal Print $830">High Def Metal Print $830</option>"); } if (condition.o1.options = 5) { document.write("<option value="Print $250">Print $250</option> <option value="Print on Gatorboard $340">Print on Gatorboard $340</option> <option value="Canvas $535">Canvas $535</option> <option value="High Def Metal Print $1">High Def Metal Print $1</option>"); } </script></select></td> <td>Trim and Finish:<select name="o3"> <script type="text/javascript"> if (condition.o2.options = 1 || condition.o2.options = 4 || condition.o2.options = 7 || condition.o2.options = 11 || condition.o2.options = 15 || condition.o2.options = 19) { document.write("<option value="None">None</option>"); } if (condition.o2.options = 0 || condition.o2.options = 3 || condition.o2.options = 6 || condition.o2.options = 10 || condition.o2.options = 14 || condition.o2.options = 18) { document.write("<option value="1/4 Inch White Trim">1/4 Inch White Trim</option> <option value="1/4 Inch Black Trim">1/4 Inch Black Trim</option>"); } if (condition.o2.options = 2 || condition.o2.options = 5 || condition.o2.options = 8 || condition.o2.options = 12 || condition.o2.options = 16 || condition.o2.options = 20) { document.write("<option value="White Sides">White Sides</option> <option value="Black Sides">Black Sides</option> <option value="Stretched Sides">Stretched Sides</option>"); } if (condition.o2.options = 9 || condition.o2.options = 13 || condition.o2.options = 17 || condition.o2.options = 21) { document.write("<option value="Silver Recessed Frame">Silver Recessed Frame</option> <option value="Silver Frame to Edge">Silver Frame to Edge</option> <option value="Black Recessed Frame">Black Recessed Frame</option> <option value="Black Frame to Edge">Black Frame to Edge</option> <option value="Pewter Recessed Frame">Pewter Recessed Frame</option> <option value="Pewter Frame to Edge">Pewter Frame to Edge</option>"); } </script></select></td> <td><input type="image" src="http://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" alt="Add to Cart" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this.parentNode);"/> </form></td></tr></table></left> Code:
<html>
<body>
var j=0;
var temp,temp2,temp3;
<script>
function scor(j)
{
switch(j)
{
case 1: alert("Απαντήσατε σωστά μόνο σε μία ερώτηση.Προσπαθήστε πάλι");
break;
case 2: alert("Απαντήσατε σωστά στις δύο από τις τρείς ερωτήσεις");
break;
default: alert ("Συγχαρητήρια απαντήσατε σωστά και στις τρεις ερωτήσεις");
}
}
</script>
<meta http-equiv="content-type" content="text/hmtl; charset=iso-8859-7">
<p align="center"><font size="5">Σε μία σελίδα html πόσα είναι τα μέγιστα frames που μπορούμε να τοποθετήσουμε; </p></font>
<form name="for1">
<input type="radio" name="fr1"value="1" > 5 <br>
<input type="radio" name="fr1"value="2" > Όσα τα pixels<br>
<input type="radio" name="fr1"value="3" > Δεν υπάρχει όριο<br>
<input type="button" value="Εκχώρηση Απάντησης" onClick="getVal1()">
</form>
<script type = "text/javascript">
function getVal1()
{
for(var i=0; i<document.for1.fr1.length; i++)
{
if (document.for1.fr1[i].checked)
{
if (document.for1.fr1[i].value==2)
{
j++;
}
}
}
}
function getVal2()
{
for (var i=0;i<document.for2.fr2.length;i++)
{
if (document.for2.fr2[i].checked)
{
if (document.for2.fr2[i].value==2)
{
j++;
}
}
}
}
function getVal3()
{
for (var i=0;i<document.for3.fr3.length;i++)
{
if (document.for3.fr3[i].checked)
{
if (document.for3.fr3[i].value==3)
{
j++;
}
}
}
}
</script>
<p align="center"><font size="5"> Είναι απαραίτητο σε κάθε σελίδα html να υπάρχουν τα tags head και title;</p></font>
<form name="for2">
<input type="radio" name="fr2" value="1"> Ναι <br>
<input type="radio" name="fr2" value="2"> Όχι <br>
<input type="button" value="Εκχώρηση Απάντησης" onClick="getVal2()">
</form>
<p align="center"><font size="5"> Τι κάνει το εξής tag: meta http-equiv="content-type" content="text/hmtl; charset=iso-8859-7" </p></font>
<form name="for3">
<input type ="radio" name="fr3" value="1"> Δημιουργεί τις προυποθέσεις για την απόκτηση τιμών <br>
<input type ="radio" name="fr3" value="2"> Ισσοροπεί τις παραγράφους σε στήλες <br>
<input type ="radio" name="fr3" value="3"> Επιτρέπει την κωδικοποίηση ελληνικών χαρακτήρων στην ιστοσελίδα <br>
<input type="button" value="Εκχώρηση Απάντησης" onClick="getVal3()"
</form>
<input type ="button" value="Υπολογισμός" onClick="scor(j)">
Apart from any logical mistakes this thing i have created might have , my question is this.Why upon pressing the last button and calling the "scor(j)" function , no alerts pop up?Thanks in advance. I'm completely stumbled by this as i have no clue as what might be wrong.But then again , my experience is extremely limited I am trying to add a pulldown menu with a button to my website. I have successfully done this with a javascript I found online here to give credit: http://www.blazonry.com/javascript/js_menu.php I tried to modify the form so it will use an image file instead of the default button. To troubleshoot I took the relevant code and put into a seperate html file. This one is using the default code from the site referenced above. This is the page published online: http://www.keylimecomputerservice.com/test/default.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">
<head>
<SCRIPT LANGUAGE="JavaScript"><!--
function openURL()
{
// grab index number of the selected option
selInd = document.theForm.aaa.selectedIndex;
// get value of the selected option
goURL = document.theForm.aaa.options[selInd].value;
// redirect browser to the grabbed value (here a URL)
top.location.href = goURL;
}
//-->
</SCRIPT>
</head>
<body>
<TABLE SPAN="3" BORDER=1 CELLSPACING=0 CELLPADDING=0 align="center" WIDTH="60%">
<TR>
<TD WIDTH="33%">
<center><font color="black">Choose a connection</font></center><br>
<form name="theForm"> <tt>
<center>
<select name="aaa" size="1">
<option selected value="#"> ---------- </option>
<option value="/remote/connect1.exe">Connection 1</option>
<option value="/remote/connect2.exe">Connection 2</option>
<option value="/remote/connect3.exe">Connection 3</option>
<option value="/remote/connect4.exe">Connection 4</option>
<option value="/remote/connect5.exe">Connection 5</option>
<option value="/remote/connect6.exe">Connection 6</option>
<option value="/remote/connect7.exe">Connection 7</option>
<option value="/remote/connect8.exe">Connection 8</option>
</select>
</center>
</TD>
<TD WIDTH="33%">
<input type="button" value=" GO " onClick="openURL()"> </tt>
</form>
</TD>
<TD WIDTH="33%">
</TD>
</TR>
</TABLE>
</body>
I then tried to change the form to use an image instead of the default button. Obviously I didn't do it right. THIS ONE DOES NOT WORK. When you choose a menu item and then click the image, it just refreshes the page. Published page: http://www.keylimecomputerservice.co.../modified.html This is the modified code.: 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>
<SCRIPT LANGUAGE="JavaScript"><!--
function openURL()
{
// grab index number of the selected option
selInd = document.theForm.aaa.selectedIndex;
// get value of the selected option
goURL = document.theForm.aaa.options[selInd].value;
// redirect browser to the grabbed value (here a URL)
top.location.href = goURL;
}
//-->
</SCRIPT>
</head>
<body>
<TABLE SPAN="3" BORDER=1 CELLSPACING=0 CELLPADDING=0 align="center">
<TR>
<TD WIDTH="33%">
<center><font color="black">Choose a connection</font></center><br>
<form name="theForm"> <tt>
<center>
<select name="aaa" size="1">
<option selected value="#"> ---------- </option>
<option value="/remote/connect1.exe">Connection 1</option>
<option value="/remote/connect2.exe">Connection 2</option>
<option value="/remote/connect3.exe">Connection 3</option>
<option value="/remote/connect4.exe">Connection 4</option>
<option value="/remote/connect5.exe">Connection 5</option>
<option value="/remote/connect6.exe">Connection 6</option>
<option value="/remote/connect7.exe">Connection 7</option>
<option value="/remote/connect8.exe">Connection 8</option>
</select>
</center>
</TD>
<TD WIDTH="33%">
<input type="image" src="connectbutton.jpg" onClick="openURL()"> </tt>
</form>
</TD>
<TD WIDTH="33%">
</TD>
</TR>
</TABLE>
</body>
Any and all help is appreciated. Runout74 This is a general question on if it's possible and how I'd go about it... I'm working on a site hosted through a blog-managing company. Sometimes their programming doesn't seem to let me do things that would normally be possible, so I have to find creative work-arounds. This time, It doesn't seem I can use javascript to change an href destination that is generated by their system. I want the user to go to a different page, when they click on that link. I can have a script find a specific href, but it can't change it for some reason. So I'm wondering if there's a way I can just have the script redirect the user if they click on that link? I know it seems like a long way round, but I don't see any other way to do this under the circumstances. Just in case it helps, here's what I thought would work, but didn't: Code:
document.getElementById('elementName').href == 'http://www.newURL.com';
I am trying to manipulate a an image gallery that functions well. Now, I have the ability to pull information from a user's preference pannel and need to place it in the an href="" // And other information in each of the "src" | "url" | "alt". Any ideas would be truly helpful. This is what I am working with at the moment and it doesn't work (obviously because it is adding code inside a span). Here is what I am starting from: [CODE] var title01Span = document.getElementById('title01Span'), //Finds the id that I want prefs = new gadgets.Prefs(), // Pulls from the user's preferences yourtitle01 = prefs.getString("title01"); // Pulls the correct string from those preferences title01Span.innerHTML = yourtitle01; // replaces the span.id with that text but I need to be able to do this in the src / href / url / etc. [CODE] Thank you so much! I seriously could use as much help as possible! Hi guys what i'm trying to do without sucess , can't find anything on google.. Is trying to arrange a button to do a "CTRL+T" (Select all) effect in the HTML i'm currently viewing. Is this possible in Javascript? I dont want to select the text in a textbox ! I want it in the whole .html i'm currently viewing. Cheers Code: window.onload = initForms;
function initForms(){
for(var i=0; i<document.forms.length; i++){
document.forms[i].onsubmit = function(){
return validForm();
}
}
}
Hi, this is the first part of a long code and I have three questions wondering if anyone could help me.. 1. What is the benifit of having the above code with "window.onload" and "for loop" and loop through the forms if I only have ONE form in html? 2. What is this line of code "document.forms[i].onsubmit" saying? Does it mean "Execute function() when submit button within form[i] has been pressed?" 3. function() - Does this empty function mean "run every following function below"?? Thank you!! Hey guys. New here on the forum, and writing in desperate need for help! I tried the search, but couldn't come up with an answer for my question. I am running a clothing webshop with a CMS based on ASP. I would like to add a "Back" button on every 'product page' (PP), leading back to the latest 'product list page' (PLP). My problem is that the supplier of the CMS does not support AJAX, which leaves me with a page that is refreshed (and therefore stored as refer-URL) every time I select a different color, size or picture on the PP. My original thought was to add the 'Back' button and make it link to the selected menu point in the left (which could be brand, size, pants, shirts etc.) however, I came to the conclussion that this would be a bad solution, since under the category 'Pants' I'd have 6-7 pages of pants, so if a user was on page 4 and entered the PP for a pair of pants and pressed the 'Back' button, the user would be taken back to page 1. Therefore I am looking for a solution that will let me go back x number of steps, until on the previous PLP. To my knowledge ASP only supports reffer URL and not reffer URL of the reffer URL. ? Now, the URL for PLP's have 'pl' embeded in them, where the URLs inside the PP have 'pi' embeded in them, I don't know if that is usable somehow? Is there a JS fix for this in any way? Thanks in advance. Best regards. I'm looking for something, preferably JQuery, that will let me load new content (blog posts) when "View More" is clicked. Something with a smooth animated motion would be nice. Any tutorials or info on what this technique is called?
Hi, I want the user to choose one option in each of the radio group. But when I click only one button out of all 12 buttons, it allows the user to submit. How do I change it to a way that the user must click one option for each group in order to allow him/her to submit the form? Javascript Code: function valbutton(thisform)
{
// place any other field validations that you require here
// validate myradiobuttons
myOption = -1;
for (i=thisform.myradiobutton.length-1; i > -1; i--)
{
if (thisform.myradiobutton[i].checked)
{
myOption = i; i = -1;
}
}
for (i=thisform.myradiobutton1.length-1; i > -1; i--)
{
if (thisform.myradiobutton1[i].checked)
{
myOption = i; i = -1;
}
}
for (i=thisform.myradiobutton2.length-1; i > -1; i--)
{
if (thisform.myradiobutton2[i].checked)
{
myOption = i; i = -1;
}
}
for (i=thisform.myradiobutton3.length-1; i > -1; i--)
{
if (thisform.myradiobutton3[i].checked)
{
myOption = i; i = -1;
}
}
for (i=thisform.myradiobutton4.length-1; i > -1; i--)
{
if (thisform.myradiobutton4[i].checked)
{
myOption = i; i = -1;
}
}
for (i=thisform.myradiobutton5.length-1; i > -1; i--)
{
if (thisform.myradiobutton5[i].checked)
{
myOption = i; i = -1;
}
}
if (myOption == -1)
{
alert("You must select a radio button");
return false;
}
// place any other field validations that you require here
thisform.submit(); // this line submits the form after validation
}
HTML Code: <p>Cookies</p> <input type="radio" value="1st value" name="myradiobutton" class="style31" />Enable <input type="radio" value="2nd value" name="myradiobutton" class="style31" />Enable<br /> <p>Java</p> <input type="radio" value="3rd value" name="myradiobutton1" class="style31" />Enable <input type="radio" value="4th value" name="myradiobutton1" class="style31" />Enable<br /> <p>Javascript</p> <input type="radio" value="5th value" name="myradiobutton2" class="style31" />Enable <input type="radio" value="6th value" name="myradiobutton2" class="style31" />Enable<br /> <p>PHP</p> <input type="radio" value="7th value" name="myradiobutton3" class="style31" />Enable <input type="radio" value="8th value" name="myradiobutton3" class="style31" />Enable<br /> <p>C#</p> <input type="radio" value="9th value" name="myradiobutton4" class="style31" />Enable <input type="radio" value="10th value" name="myradiobutton4" class="style31" />Enable<br /> <p>CSS</p> <input type="radio" value="11st value" name="myradiobutton5" class="style31" />Enable <input type="radio" value="12nd value" name="myradiobutton5" class="style31" />Enable<br /> <input type="submit" name="submitit" onclick="valbutton(myform);return false;" value="Validate" /> <input type="reset" name="reset" value="Clear" /> Hi all, I'm having a bit of a problem.. I need to disable the submit button on body onload, and i need to re-enable it when "i agree" is checked. the problem is, it wont do this.. it literally stays disabled, even after check mark.. code: Code: <html>
<head><title>Metal Detecting</title></head>
<body onload="disable()" oncontextmenu="return false;">
<script>
function disable(){
if(document.forms.test.agree.checked == false){
document.forms.test.s1.disabled = true;
}
}
function enable(){
if(document.forms.test.agree.checked == true){
document.forms.test.s1.disabled = false;
}
}
function checkCheckBox(f) {
if (f.agree.checked == false) {
alert('You MUST agree to the terms by checking the box above.');
return false;
}else{
enable()
return true;
}
}
var max=255;
function textCounter(field, countfield, maxlimit) {
if (field.value.length > maxlimit){ // if too long...trim it!
field.value = field.value.substring(0, maxlimit);
// otherwise, update 'characters left' counter
}else{
countfield.value = maxlimit - field.value.length;
}
}
function submitonce(theform){
//if IE 4+ or NS 6+
if (document.all||document.getElementById){
//screen thru every element in the form, and hunt down "submit" and "reset"
for (i=0;i<theform.length;i++){
var tempobj=theform.elements[i]
if(tempobj.type.toLowerCase()=="submit"||tempobj.type.toLowerCase()=="reset")
//disable em
tempobj.disabled=true
}
}
}
function checkdata(which) {
var pass=true;
var t1 = document.forms.test;
for (i=0;i<which.length;i++) {
var tempobj=which.elements[i];
if (tempobj.name.substring(0,8)=="required") {
if (((tempobj.type=="text"||tempobj.type=="textarea")&&
tempobj.value=='')||(tempobj.type.toString().charAt(0)=="s"&&
tempobj.selectedIndex==0)) {
pass=false;
break;
}
}
}
if (!pass) {
shortFieldName=tempobj.name.substring(8,30).toUpperCase();
alert("The "+shortFieldName+" field is a required field.");
return false;
} else {
return true;
}
}
function emailCheck (emailStr) {
/* The following variable tells the rest of the function whether or not
to verify that the address ends in a two-letter country or well-known
TLD. 1 means check it, 0 means don't. */
var checkTLD=1;
/* The following is the list of known TLDs that an e-mail address must end with. */
var knownDomsPat=/^(com|net|org|edu|int|mil|gov|arpa|biz|aero|name|coop|info|pro|museum)$/;
/* The following pattern is used to check if the entered e-mail address
fits the user@domain format. It also is used to separate the username
from the domain. */
var emailPat=/^(.+)@(.+)$/;
/* The following string represents the pattern for matching all special
characters. We don't want to allow special characters in the address.
These characters include ( ) < > @ , ; : \ " . [ ] */
var specialChars="\\(\\)><@,;:\\\\\\\"\\.\\[\\]";
/* The following string represents the range of characters allowed in a
username or domainname. It really states which chars aren't allowed.*/
var validChars="\[^\\s" + specialChars + "\]";
/* The following pattern applies if the "user" is a quoted string (in
which case, there are no rules about which characters are allowed
and which aren't; anything goes). E.g. "jiminy cricket"@disney.com
is a legal e-mail address. */
var quotedUser="(\"[^\"]*\")";
/* The following pattern applies for domains that are IP addresses,
rather than symbolic names. E.g. joe@[123.124.233.4] is a legal
e-mail address. NOTE: The square brackets are required. */
var ipDomainPat=/^\[(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})\]$/;
/* The following string represents an atom (basically a series of non-special characters.) */
var atom=validChars + '+';
/* The following string represents one word in the typical username.
For example, in john.doe@somewhere.com, john and doe are words.
Basically, a word is either an atom or quoted string. */
var word="(" + atom + "|" + quotedUser + ")";
// The following pattern describes the structure of the user
var userPat=new RegExp("^" + word + "(\\." + word + ")*$");
/* The following pattern describes the structure of a normal symbolic
domain, as opposed to ipDomainPat, shown above. */
var domainPat=new RegExp("^" + atom + "(\\." + atom +")*$");
/* Finally, let's start trying to figure out if the supplied address is valid. */
/* Begin with the coarse pattern to simply break up user@domain into
different pieces that are easy to analyze. */
var matchArray=emailStr.match(emailPat);
if (matchArray==null) {
/* Too many/few @'s or something; basically, this address doesn't
even fit the general mould of a valid e-mail address. */
alert("Email address seems incorrect (don't forget to add an @ and a . to your email address!)");
return false;
}
var user=matchArray[1];
var domain=matchArray[2];
// Start by checking that only basic ASCII characters are in the strings (0-127).
for (i=0; i<user.length; i++) {
if (user.charCodeAt(i)>127) {
alert("Ths username contains invalid characters.");
return false;
}
}
for (i=0; i<domain.length; i++) {
if (domain.charCodeAt(i)>127) {
alert("Ths domain name contains invalid characters.");
return false;
}
}
// See if "user" is valid
if (user.match(userPat)==null) {
// user is not valid
alert("The username doesn't seem to be valid.");
return false;
}
/* if the e-mail address is at an IP address (as opposed to a symbolic
host name) make sure the IP address is valid. */
var IPArray=domain.match(ipDomainPat);
if (IPArray!=null) {
// this is an IP address
for (var i=1;i<=4;i++) {
if (IPArray[i]>255) {
alert("Destination IP address is invalid!");
return false;
}
}
return true;
}
// Domain is symbolic name. Check if it's valid.
var atomPat=new RegExp("^" + atom + "$");
var domArr=domain.split(".");
var len=domArr.length;
for (i=0;i<len;i++) {
if (domArr[i].search(atomPat)==-1) {
alert("The domain name does not seem to be valid.");
return false;
}
}
/* domain name seems valid, but now make sure that it ends in a
known top-level domain (like com, edu, gov) or a two-letter word,
representing country (uk, nl), and that there's a hostname preceding
the domain or country. */
if (checkTLD && domArr[domArr.length-1].length!=2 &&
domArr[domArr.length-1].search(knownDomsPat)==-1) {
alert("The address must end in a well-known domain or two letter " + "country.");
return false;
}
// Make sure there's a host name preceding the domain.
if (len<2) {
alert("This address is missing a hostname!");
return false;
}
// If we've gotten this far, everything's valid!
return true;
}
</script>
Please contact us!<br><br>
*Please note you can submit the form ONLY once. Any double form submissions will be deleted.<br>
<form name="test" id="test" method="POST" onsubmit="return checkdata(this), emailCheck(this.email.value), checkCheckBox(this)" action="send.php">
<div id = "div01" style="width: 100; height: 25;">
Firstname: <input name="requiredfirstname" id="firstname" type="text" />
Lastname: <input name="requiredlastname" id="lastname" type="text" />
Email: <input name="requiredemail" id="email" type="text" /><br /><br />
</div>
<H4>Your statement: </H4>
<textarea onKeyDown="textCounter(this.form.statement,this.form.counter,max);" onKeyUp="textCounter(this.form.statement,this.form.counter,max);" name="requiredstatement" id="statement" rows="15" cols="40"></textarea><br />
Characters left: <input readonly="readonly" value="255" size=3 maxlength=3 type="text" name="counter" id="counter"><br/><br />
<textarea name="license" cols="40" rows="15" id="license">Blah!</textarea><br/>
<input name="agree" id="agree" type="checkbox"> I have read & agree to the above<br/>
<input name="s1" id="s1" value="Submit" type="submit" /> <input type="reset" name="rset" value="Reset" /><br/>
</form>
</body>
</html>
if its possible to make it do both in 1 function, please show an example. if you have to use 2 functions, then also show me an example. ANY help is GREATLY appreciated! Hello, recently I have been to many government websites where I have noticed that the programmer has used window.open() method in JavaScript to link to different pages instead of using <a> tags! I was just getting curious to know whether it is normal or has it been used due to security concerns(if any, I don't know)? Any comments? Hello, I run a online gaming website, and I'm having problems with certain websites iframing our games. Actually I'm ok with iframing, as long as they include the banner ad located just beneath our games. But often times unscrupulous webmasters will iframe only the game, preventing us from generating any revenue from the banner ad (and costing us additional bandwidth charges). I'm hoping to find a way to detect the dimensions of the iframe, so that I may dynamically resize the game, in order to include the banner ad within the iframe. Does anybody know how to extract the "height" and "width" attribute values from an <iframe> tag sitting on a different site? Regards, Steve Hi guys, I have a JS calculator on my website which is basically a load of radio buttons that the user clicks and as they do so a price is calculated in their view. At the moment - the price box starts with a blank box but is essentially "0". Then, as the user select an option, the price appears and then starts to calculate when more than 1 is pressed. All I want to do is have the price start at "300" instead of a blank box or "0". Then the rest of the options calculate onto that. I have tried a variety of ways to achieve it and seem to be missing something! I am pretty new to JS although do have a basic understanding ..... clearly not enough to do this thou! lol Basically imagine 300 is the initial price. That only gets charged once ... Here's my code .... In the <head> Code: <script type="text/javascript">
function getRBtnName(GrpName) {
var sel = document.getElementsByName(GrpName);
var fnd = -1;
var str = '';
for (var i=0; i<sel.length; i++) {
if (sel[i].checked == true) { str = sel[i].value; fnd = i; }
}
return fnd; // return option index of selection
// comment out next line if option index used in line above
// return str;
}
function chkrads(rbGroupName) {
var ExPg = [
[0,''],
[100,"1 extra page"],
[200,"2 extra pages"],
[250,"3 extra pages"],
[300,"4 extra pages"],
[350,"5 extra pages"]
];
var ExEm = [
[0,''],
[10,"1 extra email"],
[20,"2 extra emails"],
[30,"3 extra emails"],
[40,"4 extra emails"],
[50,"5 extra emails"]
];
var ImgBun = [
[0,''],
[10,"3 extra image"],
[20,"5 extra images"],
[30,"7 extra images"],
[40,"10 extra images"]
];
var rbtnGroupNames = ['extrapages','extraemail','imagebundles'];
var totalprice = 0;
var tmp = ''; var items = [];
for (var i=0; i<rbtnGroupNames.length; i++) {
tmp = getRBtnName(rbtnGroupNames[i]);
if (tmp != -1) {
switch (i) {
case 0 : totalprice += ExPg[tmp][0]; if (tmp > 0) { items.push(ExPg[tmp][1]); } break;
case 1 : totalprice += ExEm[tmp][0]; if (tmp > 0) { items.push(ExEm[tmp][1]); } break;
case 2 : totalprice += ImgBun[tmp][0]; if (tmp > 0) { items.push(ImgBun[tmp][1]); } break;
}
}
}
document.getElementById('QUOTED_PRICE').value = totalprice;
document.getElementById('ITEMS_SELECTED').value = items.join('\n');
document.getElementById('PRICE_IN_VIEW').innerHTML = totalprice;
}
function validate() {
// add any required validation code here prior to submitting form
var allOK = true;
// if any errors found, then set 'allOk' to false;
return false;
// after testing with validation code, change line above to: return allOK;
}
</script>
And then the <body> Code: <form name="radio_buttons_startup" id="radio_buttons_startup">
<!--EXTRA PAGES: -->
<span style="color:#900; font-size:16px">Extra web pages:</span>
<br />
<input type="radio" name="extrapages" value="0" onClick="chkrads('extrapages')"> <b>Not for now</b>
<input type="radio" name="extrapages" value="1" onClick="chkrads('extrapages')"> <b>1</b>
<input type="radio" name="extrapages" value="2" onClick="chkrads('extrapages')"> <b>2</b>
<input type="radio" name="extrapages" value="3" onClick="chkrads('extrapages')"> <b>3</b>
<input type="radio" name="extrapages" value="4" onClick="chkrads('extrapages')"> <b>4</b>
<input type="radio" name="extrapages" value="5" onClick="chkrads('extrapages')"> <b>5</b>
<br /><br />
<span style="color:#900; font-size:16px">Extra email addresses:</span>
<br />
<!-- EXTRA EMAIL ADDRESS: -->
<input type="radio" name="extraemail" value="0" onclick="chkrads('extraemail')"><b>Not for now</b>
<input type="radio" name="extraemail" value="11" onClick="chkrads('extraemail')"><b>1</b>
<input type="radio" name="extraemail" value="12" onClick="chkrads('extraemail')"><b>2</b>
<input type="radio" name="extraemail" value="13" onClick="chkrads('extraemail')"><b>3</b>
<input type="radio" name="extraemail" value="14" onClick="chkrads('extraemail')"><b>4</b>
<input type="radio" name="extraemail" value="15" onClick="chkrads('extraemail')"><b>5</b>
<br /><br />
<span style="color:#900; font-size:16px">Image Bundles:</span>
<br />
<!--Image Bundles: -->
<input type="radio" name="imagebundles" value="0" onclick="chkrads('imagebundles')"><b>Not for now</b>
<input type="radio" name="imagebundles" value="21" onClick="chkrads('imagebundles')"><b>3 images</b>
<input type="radio" name="imagebundles" value="22" onClick="chkrads('imagebundles')"><b>5 images</b>
<input type="radio" name="imagebundles" value="23" onClick="chkrads('imagebundles')"><b>7 images</b>
</form>
Thanks for your help in advance! i am trying to make a comment editor with iframe, and want to trigger the change of content inside iframe, the following code cant work. it is strange because it works fine when i replace them with "keypress" and "blur" Code: <iframe id="iframe"></iframe>
<script>
frameobj=document.getElementById('iframe').contentWindow;
// IE
frameobj.attachEvent('onpropertychange', function(){alert();} );
//FireFox
frameobj.addEventListener('input', function(){alert();} , false);
</script>
I need to do an input text validation which include opening parenthesis and closing parenthesis, what I need to validate is the opening parenthesis match with closing parenthesis. Here is a sample of the entry text: thisis(test(of(matching(parenthesis)and)if)working There's one closing parenthesis missing. I would like to warn the user to correct it before submit, but not quite sure how to do it with javascript. Please advice. Thanks JT |
|||||||