|
JavaScript - Change Form Target Upon User Selection Of Country. Possible?
Please help with the code details as to how this would be possible. Thanks.
<form method="post" name="validate" action="internet_marketing_and_email_blasting_signup.php" enctype="multipart/form-data" onmouseover="change(event,'../images/submit1.png')" onmouseout="change(event,'../images/submit.png')" onkeyup="highlight(event)" onclick="highlight(event)"> Similar TutorialsHello I've been struggling trying to get a small order form to work the way I want it to. Here is a link to the live page: http://www.watphotos.com/introductio...otography.html And here is the code in question: Code: <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var initial = 0
var total = 0;
var services = 0;
function addServices()
{
initial = 150
total = initial
services = 0;
$("input:checked").each(function(){
value = $(this).attr("value");
services += parseInt(value);
});
}
$(function()
{
addServices();
total += services;
$("form").before('<p class="price"></p>')
$("p.price").text("Total Price: US$" + total);
});
$("input:radio, input:checkbox").click(function () {
addServices();
total += services
$("p.price").text("Total Price: US$" + total);
});
});
</script>
I have two questions... Question 1 How can I make this piece of script act a little smarter. Look at the order form, I'm catering for up to 4 people and providing lunch for them. If they select 3 people and the spaghetti bol for lunch, it's only adding $10 where it should be adding $30. Obviously this is simple multiplication but since the values in my form are prices it makes it a little tricky. I'm guessing an onselect on the first part of the form which changes the pricing of the other items would be the way to go, but how do I do this? Question 2 The "Total Price" is placed before the <form> tag by the script. This is ok but it's not where I want it. How can I position this text elsewhere in the document? Thanks in advance! Ok I am very very new to java to the point where I only know how to use pre-made javascripts in my php code so be gentle. First, here is part of a form I have: Code: <select name = "pulmonologist" >
<option selected="" value="">---Select---
<option value="none">None</option>
<?php
while ($row2 = mysql_fetch_assoc ($results2)) {
?><option value = "<?php echo $row2['staff_name'];?>"><?php echo $row2['staff_name'];?></option>
<?php }
?>
</select>
Ok now I want to echo the value that the user selects on the SAME page (i.e. before the submit button is pressed) (so I can't do it with php, I need javascript) like this: Code: <input type="submit" value = "Contact <?php echo $pulmonologist;?>" /> Can you tell me how to do this? Thanks! I'm trying to write a progressively enhanced web application. I have an index page and a form with some select boxes and some radio buttons on a different php page. Before enhancement occurs, the form is accessible via regular links and everything works as expected. No issues. In the enhanced version of the application, the form is AJAXed into the index page. When this occurs, the select boxes in the form work perfectly. The radio buttons are initially unchecked and I can check one option as usual. However, once one is checked, clicking the other radio options does nothing. I am unable to check a different option. Anybody got a clue what the problem is? Using Chrome by the way. Firefox is the same as Chrome. In IE I can't even check a radio button the first time. Here's the code that's ajaxed in: Code: <label>First Time Buyer Status <!--These values can't be 1/0 because 0 stands for not set--> <input type="radio" name="FTB" id="FTBYes" value="1" <?php $M->checkFTBValue(1); ?> title=""/>First Time Buyer <input type="radio" name="FTB" id="FTBNo" value="2" <?php $M->checkFTBValue(2); ?> title=""/>Not First Time Buyer </label> The PHP script you see there checks if the value on the server matches the value of the radio button and echo's checked="checked" if true. I thought this could be causing the problem initially but the exact same code is used in the non-enhanced version and it works fine. I tried commenting it out anyway but it makes no difference. The only thing I can think of is that some javascript is preventing me from selecting a different radio option. That would explain why it works ok in the non-enhanced version because there is no JS there. I can't find anything that I've written that might cause this effect I'm using jQuerys form plugin on my pages. I'm going to try writing it out and see if that fixes anything. Any body ever experience a similar problem with this? In the mean time, is there a way I can check if any JS functions when I click on the radio button? Sorry if this is in the wrong forum, there's so many different languages involved, I hadn't a clue where to put it. Hi, I am looking for the equivalent for the following Internet Explorer code for Firefox: Code: z=event.srcElement; z.style.pixelLeft = 500px; Must be something like: Code: function move(e) {
z=e.target;
z.style.left .....
maybe. This is to assign a new left position to an Element. Any hints welcome ?! Thank you for your help ! Hi all, Could someone please tell me how to properly add some text content before and after a user's selection? I am working with the TinyMCE editor, and I can get the following from it: * User's selection as a W3C compatible range * User's selection as a browser selection object * User's selection as a node (element) that encompasses the user's selection I also need the user's selection to remain selected after being wrapped. I've looked all over the web and could find nothing (except running into my OWN previous questions about this). Here's an example of what I'm trying to do: First line is original text, second line a part is selected, third line the selection is wrapped and the selection remains selected. I will greatly appreciate some help here. I've been asking everywhere and nobody seems to know (or they don't bother to answer). Thanks! -- Roger Hi all.This is part of my code which I am using to edit the record from database.Initially the input boxes show the values from database and if any one of the value is changed, I want to reflect the change according to the changes made in the fields.The code works fine but if I change values in qty,rate or amount, the other values are not changing.Can experts over here tell me why?Here is my code: Code:
<html>
<head>
<script type="text/javascript">
function tot() {
var d=document.getElementById("total").value;
var st=Number(d);
var e=document.getElementById("vat_amt").value;
var tx=Number(e);
var f=document.getElementById("cash_discount").value;
var ad=Number(f);
var g=document.getElementById("vat").value;
var vat=Number(g);
var h=(st+tx)-ad;
document.getElementById("amount").value = Math.ceil(h);
var z=vat+100;
var y=(st*100)/z;
var i=st-y;
var result=Math.round(i*100)/100; //returns 28.45
document.getElementById("vat_amt").value =result;
}
var total = 0;
function getValues() {
var qty = 0;
var rate = 0;
var obj = document.getElementsByTagName("input");
for(var i=0; i<obj.length; i++){
if(obj[i].name == "qty[]"){var qty = obj[i].value;}
if(obj[i].name == "rate[]"){var rate = obj[i].value;}
if(obj[i].name == "amt[]"){
if(qty > 0 && rate > 0){obj[i].value = qty*rate;total+=(obj[i].value*1);}
else{obj[i].value = 0;total+=(obj[i].value*1);}
}
}
document.getElementById("total").value = total*1;
total=0;
}
</script>
</head>
<body>
<table width="23%" cellpadding="0" cellspacing="0" class="normal-text" border="0" style="margin-top:0px; padding-top:0px; margin-bottom:0px; padding-bottom:0px;">
<tr>
<td>Qty</td>
<td>Rate</td>
<td>Amount</td>
</tr>
<tr>
<td class="forhead"><input type="text" name="qty[]" onkeyup="getValues()" style="width:120px;" value="<?PHP echo "$row3[qty]" ?>" class="text medium"></td>
<td class="forhead"><input type="text" name="rate[]" onKeyUp="getValues()" style="width:120px;" value="<?PHP echo "$row3[rate]" ?>" class="text medium"></td>
<td class="forhead"><input type="text" name="amt[]" style="width:120px;"
onKeyUp="getValues()" class="text medium" value="<?PHP echo "$row3[amt]" ?>"></td>
</tr>
<tr>
<td class="dt" colspan="2">Sub Total:</td>
<td class="forhead"><input type="text" id="total" name="total" style="width:120px;" value="<?PHP echo "$row[total]" ?>" class="text medium"></td>
</tr>
<tr>
<td class="dt" colspan="2">Vat:</td>
<td class="forhead"><?PHP
$query5=mysql_query("SELECT * FROM vat");
echo "<select name='vat' id='vat' style='width:120px; border: 1px solid #BFBFBF;' onChange='tot()'>";
echo "<option value='0'>
Select</option>";
while($row5=mysql_fetch_array($query5))
{?>
<option value= <?PHP echo $row5[vat]; ?> <?PHP echo($row5[vat]==$row[vat])?'selected':''?>> <?PHP echo $row5[vat]; ?> </option>
<?PHP }
echo "</select>";
?></td>
</tr>
<tr>
<td class="dt" colspan="2">Vat Amt :</td>
<td class="forhead"><input type="text" id="vat_amt" name="vat_amt" style="width:120px;" value="<?PHP echo "$row[vat_amt]" ?>" class="text medium" onKeyUp="tot()"></td>
</tr>
<tr>
<td class="dt" colspan="2">Cash Discount :</td>
<td class="forhead"><input type="text" id="cash_discount" name="cash_discount" style="width:120px;" value="<?PHP echo "$row[cash_discount]" ?>" class="text medium" onKeyUp="tot()"></td>
</tr>
<tr>
<td class="dt" colspan="2">Total :</td>
<td class="forhead"><input type="text" name="amount" id="amount" style="width:120px;" class="text medium" onKeyUp="tot()" value="<?PHP echo "$row[amount]" ?>"></td>
</tr>
</table>
</body>
</html>
I apologize for all the text I'm about to type, but I just want to make sure I explain my problem in detail. So I have created a simple Weather Forecast algorithm containing the JavaScript code that uses a prompt to allow a user to enter a temperature in degrees Celsius, and based on the degrees entered (temperature scale is below), the program will display one of the following messages based on the selection structure I have created: (Kindly find attached .txt file of my entire code, I wasn't able to upload an HTML file.) -18 degrees Celsius: "Bundle up! It's freezing out there!" -18 - 0 degrees Celsius: "Pretty cold with a chance of snow!" 15 degrees Celsius: "Don't forget your jacket. It's still chilly out!" 16 - 27 degrees Celsius: "Perfect, lovely weather... unless it rains." 28 - 35 degrees Celsius: "Nice and warn. Go for a swim." 35 degrees Celsius: "Really hot! Best to stay in air conditioning." HELP Now i want improve on the same program and let the user enter the degrees in either unit using a prompt to ask the user whether the entry is Celsius(C) or Fahrenheit (F) (F scale is below) and use the correct degree breakdown to display the same messages: Less than 0 degrees Fahrenheit: "Bundle up! It's freezing out there!" 0 - 32 degrees Fahrenheit: "Pretty cold with a chance of snow!" 33 - 59 degrees Fahrenheit: "Don't forget your jacket. It's still chilly out!" 60 - 80 degrees Fahrenheit: "Perfect, lovely weather... unless it rains." 81 - 95 degrees Fahrenheit: " Nice and warn. Go for a swim." Greater than 95 degrees Fahrenheit: " Really hot! Best to stay in air conditioning." I'd appreciate if anyone can help me with this. Again, I've attached my original file where the user can only enter in degrees Celsius and gets the corresponding messages. I have tested it and it works perfectly. Attached Files hourlyForecast1.txt (954 Bytes, 24 views) Hello. The code below lets a user select a drop down option and a picture changes depending on the selection. I am trying to make it so when you select an option on the dropdown the picture shows up in the center of the screen and in the background behind the text. Here is the code. Code: <html>
<head>
<style type='text/css'>
#txt {background-repeat:no-repeat;width:200px;height:200px;}
</style>
<script type='text/javascript'>
function div_bg(team){
document.getElementById('txt').style.backgroundImage="url(images/" + team + ".jpg)";
}
</script>
</head>
<body>
<select name='team' onChange='div_bg(this.value);'>
<option name='arsenal' value='arsenal'>Arsenal</option>
<option name='liverpool' value='liverpool'>Liverpool</option>
</select>
<div id='txt'></div>
</body>
Thanks in advance!! Need help adding var target to this form action Would This be correct? var form = inp.form; form.target = "_self"; Code: <html>
</head>
<script type="text/javascript">
function formop(inp,op)
{
var form = inp.form;
form.action = op + ".php";
var temp = inp.id.split(",");
form.id.value = temp[0];
form.FirstName.value = temp[1];
form.LastName.value = temp[2];
}
</script>
</head>
<body>
<form method="post">
<input type="hidden" name="id">
<input type="hidden" name="FirstName">
<input type="hidden" name="LastName">
<input type='image' id='show,me,data' onclick=formop(this,'add'); src='static/icon16/add.jpg'>
<input type='image' id='show,me,data' onclick=formop(this,'edit'); src='static/icon16/edit.jpg'>
<input type='image' id='show,me,data' onclick=formop(this,'delete'); src='static/icon16/delete.jpg'>
</form>
</body>
I've been having problems getting my select option to change the options of another select option. I'm not much of a javacsript coder, so I'm at a lost. When I select the first option nothing appears in the second option. here's the javascript code: Code:
function createOption(OptionText, OptionValue){
var temp = document.captcha_form("option");
temp.innerHTML = OptionText;
temp.value = OptionValue;
return temp;
}
function valChange(){
var firstList = document.getElementById("emailaddress");
var secondList = document.getElementById("subject");
while(secondList.hasChildNodes())
secondList.removeChild(secondList.childNodes[0]);
switch(firstList.value){
case "1":{
secondList.appendChild(createOption("Report Site Browsing Issue", Report Site Browsing Issues));
secondList.appendChild(createOption("Report Page Errors", Report Page Errors));
secondList.appendChild(createOption("Other", Other));
break;
}
case "2":{
secondList.appendChild(createOption("Report Unauthorized Game", Report Unauthorized Game));
secondList.appendChild(createOption("Report Spam", Report Spam));
secondList.appendChild(createOption("Report Harassment", Report Harassment));
secondList.appendChild(createOption("Report Illegal Activities", Report Illegal Activities));
secondList.appendChild(createOption("Request Account Removal", Request Account Removal));
break;
}
// ....
default:{
secondList.appendChild(createOption("Please select from the first list", ""));
break;
}
}
}
window.onload = valChange;
this is the form code Code: <div class="mailto_form"> <form method="POST" id="captcha_form" name="captcha_form" action="../includes/mailform.php"> <div style="padding-bottom: 1em;">Choose Recipient: <select name="emailaddress" id="emailaddress" onchange="valChange();"> <option value=""></option> <option value="1">Webmaster</option> <option value="2">Admin</option> </select> </div> <div style="padding-bottom: 1em;">Subject: <br /><select name="subject" id="subject"> </div> <div style="padding-bottom: 1em;">From: <br /><input type="text" name="email" id="email" value=""> </div> <div style="padding-bottom: 1em;">Enter the text contained in the image into the text box: <br /><img src="../includes/captcha.php" /> <br /><input type="text" name="userpass" value=""> </div> <div style="padding-bottom: 1em;">Message: <br /><textarea name="message" id="message" rows="10" cols="60"><?php echo "</tex" . "tarea>"; ?> </div> <div style="padding-bottom: 1em;"><input name="submit" type="submit" value="Submit"> </div> </form> </div> Link to the page http://www.netgamegurus.com/contact/ Hi Everyone, I'm encountering errors with a form I have created. I feel confident that the issue is with my JS validation form because when I allow the form to submit without validating any of the fields, my php processor correctly uploads all the content into my database (but, I will need the form validation to prevent the user from skipping fields). The issue (I believe) is with IE. In IE, both drop-downs seem to populate correctly but when I submit the form, I get a prompt to make a selection for the first drop-down menu. The form does submit properly in FireFox and Safari but with some testing I noticed that I was getting a prompt to make a selection in the first drop-down in instances where a selection was already made but I just had not yet populated the second country/state drop-down. Still, in Firefox and Safari, the form does pass validation upon submit.. So, I am hoping it's just IE specific issue. I'm thinking the issue is with IE not recognizing my selection. The form had a drop-down menu where the user selects a letter, then that selection triggers (in JS using a function to process the selection) another drop-down to populate with all the countries or states that begin with the letter from the first selection. Here is the code from my form: Code: <p><span class="title">Sign Up</span></p>
<br />
<form id = "signupForm" action="signup_process.php" method = "post" onsubmit="return validateSignupForm();">
<p>All required fields are marked with ( <span class = "requiredStar">*</span> )</p>
<br />
<p><label for="first_name">First Name: <span class = "requiredStar">*</span></label></p>
<div class = "contactRight"><input type="text" name="first_name" id="first_name" style="height: 20px;" size="30" tabindex="1" maxlength="30" /></div>
<br />
<p><label for="last_name">Last Name: <span class = "requiredStar">*</span></label></p>
<div class = "contactRight"><input type="text" name="last_name" id="last_name" style="height: 20px;" size="30" tabindex="2" maxlength="30" /></div>
<br />
<p><label for="countryLtr">Select the first letter of your country: <span class = "requiredStar">*</span></label></p>
<select id="countryLtr" name="countryLtr" id="countryLtr" size="1" tabindex="3" onchange="processSelection()">
<option value=""></option>
<option value="USA">USA</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
<option value="I">I</option>
<option value="J">J</option>
<option value="K">K</option>
<option value="L">L</option>
<option value="M">M</option>
<option value="N">N</option>
<option value="O">O</option>
<option value="P">P</option>
<option value="Q">Q</option>
<option value="R">R</option>
<option value="S">S</option>
<option value="T">T</option>
<option value="U">U</option>
<option value="V">V</option>
<option value="W">W</option>
<option value="Y">Y</option>
<option value="Z">Z</option>
</select>
<br />
<br />
<p><label for="countryState">Select your country/ state (if USA): <span class = "requiredStar">*</span></label></p>
<select id="countryState" name="countryState" id="countryState" size="1" tabindex="4">
</select>
<br />
<br />
<p><label for="username">Create a username: <span class = "requiredStar">*</span></label></p>
<div class = "contactRight"><input type="text" name="username" id="username" style="height: 20px;" size="30" tabindex="5" maxlength="30" /></div>
<br />
<p><label for="email">Email: <span class = "requiredStar">*</span></label></p>
<div class = "contactRight"><input type="text" name="email" id="email" style="height: 20px;" size="30" tabindex="6" maxlength="30" /></div>
<br />
<p><label for="password">Create a password: <span class = "requiredStar">*</span></label></p>
<div class = "contactRight"><input type="password" name="password" id="password" style="height: 20px;" size="30" tabindex="7" maxlength="30" /></div>
<br />
<br />
<input type="hidden" name="source" value="12345">
<input type="image" name="submit" value="Submit" class="submitButton" src="images/submit-button.png" />
<input type="image" name="reset" value="Reset" class="resetButton" src="images/reset-button.png" />
<br />
</form>
and here is the code for processing the selection of the first drop-down and populating the second drop-down (I reduced the number of options for the countries to save on characters for this post): Code: function processSelection() {
choice1 = document.getElementById("countryLtr");
choice2 = document.getElementById("countryState");
choice2.length = 0;
if (choice1.value == "USA") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Alaska");
choice2[choice2.length] = new Option("American Samoa");
choice2[choice2.length] = new Option("Arizona");
choice2[choice2.length] = new Option("Arkansas");
choice2[choice2.length] = new Option("California");
choice2[choice2.length] = new Option("Colorado");
choice2[choice2.length] = new Option("Connecticut");
choice2[choice2.length] = new Option("Delaware");
choice2[choice2.length] = new Option("District of Columbia");
choice2[choice2.length] = new Option("Florida");
choice2[choice2.length] = new Option("Georgia");
choice2[choice2.length] = new Option("Guam");
choice2[choice2.length] = new Option("Hawaii");
choice2[choice2.length] = new Option("Idaho");
choice2[choice2.length] = new Option("Illinois");
choice2[choice2.length] = new Option("Indiana");
choice2[choice2.length] = new Option("Iowa");
choice2[choice2.length] = new Option("Kansas");
choice2[choice2.length] = new Option("Kentucky");
choice2[choice2.length] = new Option("Louisiana");
choice2[choice2.length] = new Option("Maine");
choice2[choice2.length] = new Option("Maryland");
choice2[choice2.length] = new Option("Massachusetts");
choice2[choice2.length] = new Option("Michigan");
choice2[choice2.length] = new Option("Minnesota");
choice2[choice2.length] = new Option("Mississippi");
choice2[choice2.length] = new Option("Missouri");
choice2[choice2.length] = new Option("Montana");
choice2[choice2.length] = new Option("Nebraska");
choice2[choice2.length] = new Option("Nevada");
choice2[choice2.length] = new Option("New Hampshire");
choice2[choice2.length] = new Option("New Jersey");
choice2[choice2.length] = new Option("New Mexico");
choice2[choice2.length] = new Option("New York");
choice2[choice2.length] = new Option("North Carolina");
choice2[choice2.length] = new Option("North Dakota");
choice2[choice2.length] = new Option("Northern Marianas Islands");
choice2[choice2.length] = new Option("Ohio");
choice2[choice2.length] = new Option("Oklahoma");
choice2[choice2.length] = new Option("Oregon");
choice2[choice2.length] = new Option("Pennsylvania");
choice2[choice2.length] = new Option("Puerto Rico");
choice2[choice2.length] = new Option("Rhode Island");
choice2[choice2.length] = new Option("South Carolina");
choice2[choice2.length] = new Option("South Dakota");
choice2[choice2.length] = new Option("Tennessee");
choice2[choice2.length] = new Option("Texas");
choice2[choice2.length] = new Option("Utah");
choice2[choice2.length] = new Option("Vermont");
choice2[choice2.length] = new Option("Virginia");
choice2[choice2.length] = new Option("Virgin Islands");
choice2[choice2.length] = new Option("Washington");
choice2[choice2.length] = new Option("West Virginia");
choice2[choice2.length] = new Option("Wisconsin");
choice2[choice2.length] = new Option("Wyoming");
} else if (choice1.value == "A") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Azerbaijan");
} else if (choice1.value == "B") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("The Bahamas");
} else if (choice1.value == "C") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Czech Republic");
} else if (choice1.value == "D") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Denmark");
} else if (choice1.value == "E") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Ecuador");
} else if (choice1.value == "G") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Gabon");
} else if (choice1.value == "H") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Haiti");
} else if (choice1.value == "I") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Iceland");
} else if (choice1.value == "J") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Jamaica");
} else if (choice1.value == "K") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Kazakhstan");
} else if (choice1.value == "L") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Laos");
} else if (choice1.value == "M") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Macau");
} else if (choice1.value == "N") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Namibia");
} else if (choice1.value == "O") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Oman");
} else if (choice1.value == "P") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Pakistan");
} else if (choice1.value == "Q") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Qatar");
} else if (choice1.value == "R") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Reunion");
} else if (choice1.value == "S") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Saint Helena");
} else if (choice1.value == "T") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Taiwan");
} else if (choice1.value == "U") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Uganda");
} else if (choice1.value == "V") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Vanuatu");
} else if (choice1.value == "W") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Wake Island");
} else if (choice1.value == "Y") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Yemen");
} else if (choice1.value == "Z") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Zambia");
}
}
Here is the code for validating the form upon submission: Code:
function validateRequestForm() {
var theForm = document.getElementById("requestForm"); //form reference
var valid = true; //flag, must be true to proceed
if (theForm.name.value == "") {
alert ("Please enter a name");
valid = false;
theForm.username.focus();
} else if (theForm.countryLtr.value == "") {
alert ("Please select the first letter of your country");
valid = false;
theForm.countryLtr.focus();
} else if (theForm.countryState.value == "") {
alert ("Please select your country. If USA, please select your state");
valid = false;
theForm.countryState.focus();
} else if (theForm.email.value == "") {
alert ("Please enter your email address");
valid = false;
theForm.email.focus();
} else if (theForm.title.value == "") {
alert ("Please enter a title for your request");
valid = false;
theForm.title.focus();
} else if (theForm.request.value == "") {
alert ("Please enter your request");
valid = false;
theForm.request.focus();
} if (valid == true) {
alert ("Thank you for your prayer request. Your request has been submitted for review. Please check your account to see the status of your prayer request. You may also check recent requests to view your request after it has been posted.");
return true; //submit form
} else {
return false; //form invalid
}
}
I'm totally stumped as to what could be going on in IE that is not allowing the form to pass JS validation.. Any help would be greatly appreciated!! Thanks! I have rough ideas on how to achieve this but I dont know how to start. I want to use a drop-down menu selection option to submit a form. But the form's contents change depending on the option. This is the basic form: Code: <FORM ID="go1" METHOD="POST" TARGET="_self"> <INPUT TYPE=HIDDEN NAME=UserID VALUE="<%UserID%>"> <INPUT TYPE=HIDDEN NAME=Password VALUE="<%Password%>"> <INPUT TYPE=HIDDEN NAME=SubUnitID VALUE="4266"> <INPUT TYPE=HIDDEN NAME=PageID VALUE="1"> <INPUT TYPE="IMAGE" class="hand" border="0" src="/images/my.gif" width="45" height="26" vspace="5"> </FORM> At the moment, it's an image which gets clicked on but it needs to be the option chosen. I think I can do that with: Code: function gotoPage(s){
var v = s.selectedIndex;
var select = document.forms.form.elements.input; // selects question
if (v == 1){...}
if (v == 2){...} etc.
However, as I said, the form's contents must change depending on the option chosen: The form's values which change a Code: <INPUT TYPE=HIDDEN NAME=SubUnitID VALUE="4266"> <INPUT TYPE=HIDDEN NAME=PageID VALUE="1"> Can someone point me in the right direction? I have created this form. I would like to use javascript to mail the form to the selected email from the selection list when the submit button is pressed. could anyone help with this? <form name="Contact Us" id="contact" action="mailto:" method="post"> <fieldset id="selection"> Who would you like to email: <select> <option value="email1" >email1</option> <option value="email2" >email2</option> <option value="email3">email3</option> </select> <fieldset id="Name" > Name <input type="text" id="firstname" name="firstname"> <input type="text" id="email" name="email"> </fieldset> <fieldset id="question"> Comments and Questions <input type="text" id="comment" name="comment" style="width: 500; height: 300"> </fieldset> </form> I want to make a search form where inputs only appear if a certain selection has been made. For example the user selects "Green" then the input "X" appears, and if the user clicks "Black" then input "Y" appears. How can this be done? If so, can someone give me a basic example in code that I can use to copy off?
The Script works in Firefox, BUT not in Internet Explorer. What am I missing? I need Drop Down menu Boxes to appear when User clicks on a certian Menu option. The way it appears now on the website is all the boxes appear. They should stay "hidden" until a User clicks on the drop down menu selection. Thanks! <head> <script type="text/javascript" language="javascript"> function showInfo() { var typeOne = document.getElementById('bmp'); var typeTwo = document.getElementById('junction'); var typeThree = document.getElementById('mile'); if(document.basicform01.Location_Type.value == "BMP to EMP") { typeOne.style.display="inline"; typeTwo.style.display="none"; typeThree.style.display="none"; } else if(document.basicform01.Location_Type.value == "Junction to Junction") { typeOne.style.display="none"; typeTwo.style.display="inline"; typeThree.style.display="none"; } else if(document.basicform01.Location_Type.value == "Milepost") { typeOne.style.display="none"; typeTwo.style.display="none"; typeThree.style.display="inline"; } else { typeOne.style.display="none"; typeTwo.style.display="none"; typeThree.style.display="none"; } } </script> <style>*[style] {outline:none}</style> </head> <body> <fieldset> <dl> <dt><label for="Location_Type">Location Type *</label></dt> <dd><select class="inputselect" name="Location_Type" id="Location_Type" onchange="showInfo()"> <option value="" selected="selected">Select One...</option> <option value="BMP to EMP">BMP to EMP</option> <option value="Junction to Junction">Junction to Junction</option> <option value="Milepost">Milepost</option> </select></dd> <div id="bmp" style="display:none;"> <dt><label for="bmpDetails">BMP</label></dt> <dd><input class="inputtext" type="text" name="bmpDetails" id="bmpDetails" /></dd> <dt><label for="empDetails">EMP</label></dt> <dd><input class="inputtext" type="text" name="empDetails" id="empDetails" /></dd> </div> <div id="junction" style="display:none;"> <dt><label for="fromJunction">From Junction:</label></dt> <dd><input class="inputtext" type="text" name="fromJunction" id="fromJunction" /></dd> <dt><label for="toJunction">To Junction:</label></dt> <dd><input class="inputtext" type="text" name="toJunction" id="toJunction" /></dd> </div> <div id="mile" style="display:none;"> <dt><label for="milepostNum">Milepost</label></dt> <dd><input class="inputtext" type="text" name="milepostNum" id="milepostNum" /></dd> </div> <p> </dl> <p> </fieldset> </body> Hi there, I need help in form validation! I want this to be validated upon selection of the drop down list (not when it comes to submit button) I have 2 drop down lists: Starting date (June 5th, 6th 7th) Ending date (June 5th, 6th 7th) I want to write a script that would NOT ALLOW one to choose: - Starting date June 6th and Ending date June 5th - Starting date June 7th and Ending date June 6th - Starting date June 7th and Ending date June 5th I appreciate your help Hello everyone, I just stumbled across this forum and thought maybe someone here could help me with a few coding alterations. I would like to position the rss feed selection fields on this feed output so I can scroll the feed with the selection fields remaining stationary. Code: <link rel="icon" type="image/png" href="rss_include/feed-icon-red.png">
<style language='text/css'>
@import url('rss_include/style.css');
</style>
<script language="javascript">
var XMLHttpRequestObject = false;
var img = new Image();
img.src = "rss_include/loading.gif";
if ( window.XMLHttpRequest )
XMLHttpRequestObject = new XMLHttpRequest();
else if (window.ActiveXObject)
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
function changeOptions()
{
LoadFeed();
}
function LoadFeed(value, initial)
{
if ( XMLHttpRequestObject )
{
var dsource = "rss_include/ajax.php?loadfeed";
if (value)
dsource += "=" + value;
else
{
var val = document.getElementById("rss_feed").value;
if ( val == "" )
document.getElementById("rss_feed").selectedIndex += 1;
dsource += "=" + document.getElementById("rss_feed").value;
}
dsource += "&fulltext=" + document.getElementById("showtext").checked;
dsource += "&showimages=" + document.getElementById("showimages").checked;
XMLHttpRequestObject.open("GET",dsource);
XMLHttpRequestObject.onreadystatechange = function()
{
if ( XMLHttpRequestObject.readyState != 4 )
{
document.getElementById("rss_div").innerHTML = "<center><img class=\"loading\" src=\"" + img.src + "\"></center>";
}
if ( XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200 )
{
document.getElementById("rss_div").innerHTML = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send(null);
}
}
</script>
<?php
require_once("rss_include/config.php");
function LoadFile($xml_file)
{
$xml = null;
if ( !file_exists($xml_file) || !($xml = simplexml_load_file($xml_file)) )
{
echo '</select>';
echo "Error opening XML feeds file: $xml_file<br>";
return;
}
return $xml;
}
function ShowFeedOptions($xml_file)
{
echo '<select id="rss_feed" onChange="LoadFeed(this.value)" title="GuyWMustang.com RSS Reader">';
$xml = LoadFile($xml_file);
if ( $xml == null )
return;
$url = array();
foreach($xml->feeds->category as $category)
{
echo "<option value=\"\">" . $category['name'] . "</option>";
foreach($category->feed as $feed)
{
if ( $feed['name'] != "" )
{
// Add a spacing to the feeds
$name = " " . $feed['name'];
$url = str_replace("&", "%26", $feed['url']);
$url = str_replace("http://", "", htmlspecialchars($url));
echo "<option value=\"$url\">" . $name . "</option>";
}
}
}
echo '</select>';
$options = array();
$rss = $xml->options[0];
if ( strcasecmp($rss['fulltext'],"true") == 0 )
array_push($options, "true");
else
array_push($options, "false");
if ( strcasecmp($rss['images'],"true") == 0 )
array_push($options, "true");
else
array_push($options, "false");
return $options;
}
function SetOptions($options)
{
if ( sizeOf($options) == 2 )
{
echo "<script>document.getElementById(\"showtext\").checked = " . $options[0] . ";</script>";
echo "<script>document.getElementById(\"showimages\").checked = " . $options[1] . ";</script>";
}
}
if ( isset($_GET['links']) )
{
$xml = LoadFile($xml_file);
if ( $xml == null )
return;
// end the link editing
return;
}
?>
<div class="container" id="container_div">
<a name="top"></a>
<div class="header_div">
<div style="display:run-in;float:left;">
<font class="graytext">RSS Feed:</font>
<?php $options = ShowFeedOptions($feeds_xml); ?>
<input type="checkbox" id="showtext" onChange="changeOptions(this)" checked><font class="graytext">Show Full Article Text</font>
<input type="checkbox" id="showimages" onChange="changeOptions(this)" checked><font class="graytext">Show Images</font>
</div>
<?php SetOptions($options); ?>
</div>
<div class="rss" id="rss_div">
<script>LoadFeed(document.getElementById('rss_feed').value, true);</script>
</div>
<!-- <p style="padding:0px;margin-right:2px;margin:0px;" align="center"><a class="top" href="#top">Top</a></p> -->
</div>
<-- CSS BELOW --> Code:
body
{
overflow: auto;
font-family: arial;
}
div.header_div
{
position: relative;
/*background-color: #EFEFEF;*/
width: 100%;
overflow: auto;
margin: auto;
}
div.container
{
/*border: 1px solid black;
background-color: #EFEFEF;*/
position: relative;
margin: auto;
display: block;
overflow: auto;
/* SPECIFY HEIGHT & WIDTH AS DESIRED */
height: 90%;
width: 80%;
}
div.rss
{
width: 99%;
margin: 2px;
background-color: tan;
position: relative;
/*border: 1px solid black;*/
}
img.loading
{
position: relative;
margin-top: 50px;
}
a.rss_link,a.rss_link:active
{
display: inline;
color: blue;
}
a.rss_link:hover
{
color: #BBBBFF;
}
a.rss_link:visited
{
color: black;
}
a.top,a.top:active {
text-decoration: none;
font-size: 10pt;
display: inline;
color: black;
}
a.top:hover {
text-decoration: underline;
color: brown;
display: inline;
}
font.graytext
{
font-size: 10pt;
color: #444444;
}
font.rss_title
{
font-size: 12pt;
font-weight: bold;
text-decoration: underline;
}
font.rss_date
{
font-size: 9pt;
font-weight: normal;
color: black;
display: block;
}
font.rss_description
{
font-size: 12pt;
color: blue;
}
select
{
color: black;
font-size: 10pt;
background-color: #EAEAEA;
}
any help would be greatly appreciated.....thanks I want to have several forms on one page that are not displayed until a selection is made from the category drop down box(select element). The form displayed will depend on the selection made. Here is the code I have so far. Please help. Code: <body> <label id="Label1">ADMINISTRATOR CONSOLE - ADD AND EDIT ASSETS<br /> </label> <form action="" method="post" style="border-style: ridge; width: 311px; height: 37px;" name="myform"> <table> <tr> <td>Select Category:</td><td> <select name="category" onchange="set_sub_category()" style="width: 157px"> <option selected="selected" value="select">Select an Option</option> <option value="add">Add Category</option> <option value="district">Council District</option> <option value="region">Region</option> <option value="pom">POM</option> <option value="proptype">Property Type</option> <option value="assetcat">Asset Category</option> <option value="assettype">Asset Type</option> <option value="property">Property</option> <option value="asset">Asset</option> </select> </td> </tr> </table> </form> <form style="display:none" action= "admin_console_new.html" onsubmit="return (validate_form(this)& validate_list(this))" method="post" style="border-style: ridge; border-width: medium; height: 154px; width: 346px;" name="district"> <table style="height: 86px"> <tr> <td>Select District Value:</td><td> <select name="district"> <option selected="selected">Select an Option</option> <option>Add Council District</option> </select> </td> </tr><tr> <td>Enter District Name:</td><td> <input name="name" type="text"/> </td> </tr><tr> <td>Enter Description:</td><td><textarea name="description"></textarea> </td> </tr><tr> <td><input type="submit" value="Submit" name="Submit3" /><input type="reset" value="Reset" /> </td> </tr> </table> </form> What I want to do, is that, when the user select one option out of many from the dropdown box some new fields appears. I was so close to make it , using this example: Code: <script type="text/javascript">
function showInfo()
{
var elem = document.getElementById('verify');
if(document.forms[0].menu.value == "verify"){
elem.style.display="inline";}
else{
elem.style.display="none";}
}
</script>
</head>
<body>
<form action="#" method="post">
<select name="menu" onchange="showInfo()">
<option value="none">Select an option</option>
<option value="email">Email</option>
<option value="verify">Verify</option>
</select>
<div id="verify" style="display:none;">
<input type="text" value="Username" >
<input type="password" value="password" >
</div>
</form>
But what I do want, is that two differen things appear on the page and in the different location of the page. And this script does not read the second <div>. So the result is, that the only first <div> appears. Here are some images of what I want to do. Befo http://img82.imageshack.us/img82/7093/beforens9.jpg After http://img246.imageshack.us/img246/2759/afterzh2.jpg (what has to be changed is on the red circules). So can someone help me with this script?? Please! I am pritty noob to the javascript. I'm a long time lurker on here just barely created an account to ask this question. I work at a call center, and we use different webapps to fill out tickets. One I've used for a long time allows dynamically updating forms with javascript. I have a whole bunch of bookmarked javascript injections like: Code: javascript:if((top.detail.findObj('X31').value="Inquiry")!="");
That code will fill out most everything in that ticket, leaving me to fill in the details. I have one of those for all of the most common tickets, and can create and finish a ticket in less than 30 seconds when it takes others 3-4 minutes. I recently switched to a different system and I'm having trouble with my code. I'm a noob at javascript for sure, but I'm not new to programming. Anyway any pointers would be nice. The system we use doesn't allow me to see the source... I'm not sure how to explain it. It loads everything in a frame. In chrome I can right click then inspect element and get the ID but it the above javascript doesn't work. Examples: Old app source ex: Code: <label for="X31">Category:</label> was all i needed new app(before the body code is just code for the login form, etc): Code: <body onLoad="startit()" onUnload="stopit()">
</body>
<div align="center" valign="center" id="LoadMessageID" style="position: relative; top:40%; color:#0069A5; font-size:100% ;">
<img src="/arsys/shared/images/Progress_NonModal-circle.gif" alt="wait image"/>
Loading...
</div>
</html>
formloader: Code: <form name="form1" action="/arsys/forms/bmcitsm/HPD:Incident+Management+Console/Default+User+View+(Support)/?cacheid=a22a36a8" method="post"> example of inspect element in chrome (something i want to change with javascript injection): Code: <input id="arid301602600" type="text" class="text " style="top:0; left:0; width:225; height:21;" readonly=""> |
|||||||