|
JavaScript - Passing A Dynamic Variable To Be Checked By Javascript ?
I have a signup form on a site that does a check on submission of fields to see if they populated and error box if not changes focus to missing field and highlights field name in red.
I wanted to improve on its effectiveness as it only checks 2 fields atm and I wanted it to check some dynamic fields as well the fields are associative arrays generated via php as follows:- Code: echo "<select name='nfield[$t]'>\n";
for ($i = 0; $i<count($value2); $i++) {
echo "<option value=\"".trim($value2[$i])."\">".trim($value2[$i])."</option>\n";
}
echo "</select>";
the javascript is as follows:- Code: function checkForm() { //This is the name of the function
if (Form1.password.value == "") {
alert("Please enter a Password.");
Form1.password.focus( );
document.getElementById('password').style.color="red";
return false;
}
The field is displayed via php as follows:- echo "<tr><td align='center' id='password'>Password:</td><td><input type='password' name='password' size='10'></td></tr>\n"; So i thought ah easy, i will just add the following checking javascript to check each of the associative arrays as they never change Code: if (Form1.nfield[1].value == "") {
alert("Please choose an option for option1");
Form1.nfield["1"].focus( ); //This focuses the cursor on the problem field
document.getElementById('nfield[1]').style.color="red";
return false; //This prevents the form from being submitted
}
if (Form1.nfield[2].value == "") {
alert("Please choose an option for option2");
Form1.nfield[2].focus( ); //This focuses the cursor on the problem field
document.getElementById('nfield[2]').style.color="red";
return false; //This prevents the form from being submitted
}
if (Form1.nfield[3].value == "") {
alert("Please choose an option for option3");
Form1.nfield[3].focus( ); //This focuses the cursor on the problem field
document.getElementById('nfield[3]').style.color="red";
return false; //This prevents the form from being submitted
}
but this doesn't work, i think it doesn't recognise the nfield[1] syntax, can a javascript guru point me in the right direction ? I also wanted to enhance the form somewhat as atm it only displays one error popup at a time, so if the user has missed out a few fields they will get an initial popup, try and submit again and then get the second popup for the other missing field. Can my code be modified to show a list of the missing fields and highlight all the titles in red (and if possible change the background colour of the input boxes or border the input fields in red etc)? Similar TutorialsHello, i'm working on a 3 page survey. When hitting next, previous, or submit it passes the values of all the questions to the next page. I've got the whole thing working correcting except for one thing: When the box is "not" checked it passes no value. I'm needing it to have a value of "1" when checked and a value of "0" when not checked, and currently when its not checked and i pass the info it leaves it blank. I'd post the whole code to one of the pages but it's long , so i'll post the snipits of the code. Code: <script type="text/javascript">
/* <![CDATA[ */
function processQueryString() {
var formData = location.search;
formData = formData.substring(1, formData.length);
while (formData.indexOf("+") != -1) {
formData = formData.replace("+", " ");
}
formData = unescape(formData);
var formArray = formData.split("&");
for (var i=0; i < formArray.length; ++i) {
//document.writeln(formArray[i] + "<br />");
var sDataName = formArray[i].split("=")
switch (sDataName[0]) {
case ".lib_use":
for (var j=0; j < document.getElementsByName(".lib_use").length; ++j) {
if (document.getElementsByName(".lib_use").item(j).value == sDataName[1]) {
document.getElementsByName(".lib_use").item(j).checked = true;
//alert("lib_use set");
}
}
break;
case ".lib_comp":
if (sDataName[1] == 1) {
document.getElementsByName(".lib_comp").checked = true;
document.getElementsByName(".lib_comp").value= 1;
}
else {
document.getElementsByName(".lib_comp").checked = false;
document.getElementsByName(".lib_comp").value= 0;
}
break;
default:
alert("not caught = " + sDataName[0]);
continue;
}
}
}
/* ]]> */
</script>
<input type="checkbox" name=".lib_comp" id="lib_comp" value="1" />
The first case that i showed in my code is a radio button, and it passes correctly, i just wanted to show the "format" i was using in a working sense. The 2nd case is an example of the check boxes. Thanks for looking at this, and giving any suggestions you might have! Hi, I'm having one javascript function which will return the variable and I need to pass that variable to command button action.Please find the below code and let me know how I can achieve this. <script> function addEntry(entries) { var uploadedEntry = entries[0].entryId; alert("Uploaded Entry Details::::" + uploadedEntry ); } </script> <h:commandButton tabindex="1" image="../img/submit.gif" action="#{portfolioListing.uploadMediaEntry(uploadedEntry)}" Thanks, Anil Hello Can i pass php Variable into javascript function like this example. PHP Code: <script type="text/javascript"> <!-- function confirmation() { var answer = confirm("are u sure?") if (answer){ window.location = "user.php?action=statusd&uid=".$row['id'].""; } else{ alert("Canceled") } } //--> </script> This ".$row['id']." will be an user id ... link PHP Code: <a href='#' onclick='confirmation(); return false;'>Go</font></a> I have the following code, where I am inputting a word and on clicking the button , i am setting the value of the text box in div class="twit" which is hidden. now I have to access the value of this hidden text box (name=q) using php.Say I want to print using php .How do I do this ? Code:
<html
<head>
<title></title>
<link rel="stylesheet" href="search.css" type="text/css" media="screen" />
<script type = "text/javascript">
function gettweet()
{
document.getElementById("src").value= document.getElementById("searchbox").value;
}
</script>
</head>
<BODY>
<form align="center">
<div id="top">
<h3>Search </h3>
<input type ="text" name="q1" id = "searchbox"\>
<input type ="button" value="ClickMe!" id = "b1" onclick="gettweet();"\>
</div>
<div id= "twit">
<input type ="text" name="q" id = "src"\>
<?php
?>
</div>
</form>
</BODY>
</HTML>
I'm more of an actionscript person but got roped into an html/javascript job. What I need to do, and it shouldn't be that difficult is this: page1.html - there is a yellow button and a red button - if the user clicks on the yellow button I want to set a cookie with the value "yel" then load the next page - if they click the red button set that cookie with the value "red" page2.html - 'onload' i want to read that cookie and load up the main image to match, something like this maybe?... document.mainimage.src='img/main_' + variable + '.png' so that the path would be for example 'img/main_red.png' Any help please? Preferably javascript only and as simple as possible. If you think this would be easier sending that variable in the URL instead of as a cookie please explain. I'm having a very hard time searching for tutorials that are any good and that do exactly this kind of thing. I few sites said to (in the js file) put the varible in <%= %> these tags but thats not doing any good. Is there some other part needed to this I'm missing. The javascript I'm using is in a file I included in my VS project.
I have two versions of this document. The first version uses only JavaScript and the standard PROMPT(). It works very well, but I would like to insert the name prompt into the page using the input command. For some reason the variable loaded in the HTML statement doesn't get passed to the JavaScript. Any ideas would be appreciated! This is only a small test page. Sorry I don't know about the [code] tag... <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)"> <meta name="created" content="Sat, 10 Sep 2011 19:40:31 GMT"> <meta name="description" content=""> <meta name="keywords" content=""> <title>Enter golfers name</title> <!--[if IE]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <SCRIPT LANGUAGE="JavaScript" type="text/javascript" src="script1.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript"> function GetPage(){ document.write("OK") var lab = ""; var result = fullname.toUpperCase(); var word=result.split(" "); fname = word[0] lname = word[1] alpha = lname.slice(0,1); lab = fname.concat("_") lab = lab.concat(lname) if(word[2]){ ext = word[2] lab = lab.concat("_") lab = lab.concat(ext) } var intro = "./Stats_"; page = intro.concat(alpha); page = page.concat("_golfers.html#"); page = page.concat(lab) document.write(page) <!-- window.location.pathname = page } </script> </head> <body> <center> <form action="form_action.asp" method="get"> You can enter the golfersname or select him from the above list.<br><br> <input type="text" name="fullname" /> <button type="submit" onclick="GetPage()">GO</button> </form> </center> <BR><BR><BR> This is the end </body> </html> Hi all, I'm having some trouble with the this... I have a PHP based calendar where the cells will change color depending on the number of clicks.. this all works fine, but is pointless if I can't send the outcome along in an email. I can do this with PHP but first need to get the values into a hidden field. This is what I have: Code: <script type="text/javascript">
function countClicks (obj){
if (!obj.count) {
obj.count = 0;
}
obj.count++;
if (obj.count > 4) {obj.count = 1};
if(obj.count == 1){
obj.style.color='#FFFFFF';
obj.style.backgroundColor='#66CC33';
obj.parentNode.style.backgroundColor='#66CC33';
document.getElementById("availability").value='Available';
}
if (obj.count == 2){
obj.style.color='#FFFFFF';
obj.style.backgroundColor='#FF0000';
obj.parentNode.style.backgroundColor='#FF0000';
document.getElementById("availability").value='Not Available';
}
if (obj.count == 3){
obj.style.color='#FFFFFF';
obj.style.backgroundColor='#FFCC33';
obj.parentNode.style.backgroundColor='#FFCC33';
document.getElementById("availability").value='Working';
}
if (obj.count == 4){
obj.style.color='#000000';
obj.style.backgroundColor='#FFFFFF';
obj.parentNode.style.backgroundColor='#FFFFFF';
document.getElementById("availability").value='Not Set';
}
}
</script>
and... Code: echo "<input type=\"hidden\" name=\"availability\" id=\"availability\" value=\"\">"; All I'm trying to do is populate value with either 'available', 'not available', 'working' or 'not set'... however, it is worth noting that each cell may have a different value, e.g. 1 cell might be working while the other is not available... so i need to pass the values of all the cells. Can anyone help me out here. Many thanks, Greens85 Hi, I have a simple page and a javascript that measure the time the user has spent on a page and I want that variable to pass as a link to another page (php). I'm stuck (rookie) with how to actually pass that on in the link. Here's my code: Code: <?php session_start();?>
<html>
<head>
<script type="text/javascript">
/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: Cody Shaffer :: http://codytheking313.byethost11.com */
var time=1;
function timeHere() {
time = time + 1;
finalTime = time / 10;
}
</script>
</head>
<body>
<div id="container">
<form id="form1" method="post" action="">
<label>Fill this Data
<input type="text" name="1" id="1" />
</label>
<p>
<label>
<input type="submit" name="2" id="2" value="Submit" />
</label>
</p>
</form>
<a href="go/index.html">ads</a>
</div>
</body>
</html>
Thanks for the help I'm trying to make it so when you click a cell in a table it runs a function based on the value within that cell. With the current code, no matter what cell is clicked, the alert box displays the same number, which is the last number in my array. The variable, princ, is just being overwritten rather than writing code to each the cell with the proper value. Help is appreciated. Thanks. Code: for(i=0;i<=3;i++){
document.writeln('<tr>');
document.writeln('<th>'+(periodArray[i])+'</th>');
for(j=0;j<=2;j++){
princ = principleArray[j][i];
document.writeln('<td onclick="(calculateInterest(princ,1,1))">$'+principleArray[j][i]+'</td>');
}
document.writeln('</tr>');
}
function calculateInterest(principle,rate,period){
totalInterest = principle * rate * period;
totalLoanCost = principle + totalInterest;
alert('Total Interest: '+totalInterest+'\n'+'Total Loan Cost: '+totalLoanCost);
}
On my main page, I have a list of item ID's which are assigned variables, the list is concatenated and so the variables are always different. So another thing that gets concatenated is a link, which uses javascript/jquery to open a popout modal window which is another php file called sharepost.php. I want to be able to transfer the php variables from the main page to append them on the end of the sharepost.php URL so I can use $_GET to grab them for use. Here's what I have... not working, but I figured I'd give it a try. Code: <?php
//use mysql to loop through some variables
$post_id = $setvalue;
$member_id = $anothersetvalue;
$list .= '
<div>
' . $post_id . '
</div>
<div>
' . $member_id . '
</div>
<div>
<a href="#" class="button" onClick="openup(); return false">Share This Post</a>
</div>
$the_link = " http://sharepost.php?post_id=' . $post_id . '&member_id=' . $member_id . ' ";
';
?>
<HTML>
<head>
<script>
// Displays an external page using an iframe
function openup(){
var src = "<?php echo $the_link;?>";
$.modal('<iframe src="' + src + '" height="450" width="830" style="border:0">', {
closeHTML:"",
containerCss:{
height:150,
padding:0,
width:350
},
overlayClose:true,
});
}
</script>
</head>
<body>
<?php echo $list;?>
</body>
</HTML>
Hi all, I am new to JS and usually learn by studying code posted online and modify it to have it do what I need. Recently, I used a totaling plugin for an online ordering form which does the below: item1 qty(user input text) * preset price = total price item2 qty(user input text) * preset price = total price item3 qty(user input text) * preset price = total price -------------------------------------------------------- grand total -------------------------------------------------------- The JS code which passes the grandTotal variable is as below: Code: function ($this){
// sum the total of the $("[id^=total_item]") selector
var sum = $this.sum();
$("#grandTotal").text(
// round the results to 2 digits
"₹" + sum.toFixed(2)
);
}
The problem I have is the above grandTotal displays the final value when put into a table like below: Code: <td align="right" id="grandTotal"></td> But I am unable to make it work by passing it into a variable within the form fields. I would like to do something like this: Code: <input type="text" name="grandTotal" id="grandTotal" readonly="readonly" /> Can somebody please help me fix this? Any help will be greatly appreciated. Thank you. I am developing a site that adds multiple dynamic buttons. I would be ideal if the event these buttons trigger could pass a 'variable' (the passed variable is constant with respect to each button). My attempt... myButton.setAttribute("onClick", "myFunction(" + myVar +")"); ...doesn't seem to work. Can anyone help out? So i have a form with fields (30+), and about 5 of them are fields that need to pass into my dropdown (actually a dynmaic dropdown, select SOURCE, then whatever source u select it'll show options that are mysql source=$source), so it can go into my mysql query, and filter out the best results. (i.e date_of_birth, min_credits, state, etc). Needs to be done without submitting, hence javascript. Im echo'ing my query and its saying the variables i'm trying to pass are UNDEFINED. Am I not passing the vars correctly? do i need to prep the vars to "grab" them in the current field? this is what i have in my <head> Code: <script language="javascript" type="text/javascript">
function getXMLHTTP() { //fuction to return the xml http object
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
}
}
}
return xmlhttp;
}
function getSchool(id,hs_grad_year,dob_day,dob_month,dob_year,min_credits,state) {
var strURL="findSchool.php?source="+id+"&hs_grad_year="+hs_grad_year+"&dob_day="+dob_day+"&dob_month="+dob_month+"&dob_year="+dob_year+"&min_credits="+min_credits+"&state="+state;
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('schooldiv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
function getSub(id,cid) {
var strURL="findSub.php?source="+id+"&cid="+cid;
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('subdiv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
</script>
The only var that is passing is SOURCE, and that's because its the name of the first dropdown I'm VERY new to javascript, do i need to set up like a GET method on my RECEIVING page? or can i just pass variables through? Do i need to get the "existing" data in the fields first? Thanks in advance, JT Hi, I have a choice of three market items and I want the value of the selected one to be sent to my form. My code is: Code: <script type="text/javascript">
function loadXMLDoc2(File,ID,Msg){
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
try{
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(ID).innerHTML=xmlhttp.responseText;
}
}
var params=Msg;
xmlhttp.open("POST",File,true);
xmlhttp.setRequestHeader("Pragma", "Cache-Control:no-cache");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);
}
</script>
</head>
<body>
<input type="radio" name="myitem" id="myitem" value="All;" onclick="OtherFunction()" />All
<br /><br />' <input type="radio" name="myitem" id="myitem" value="Shirts" onclick="OtherFunction()" />Shirts
<br /><br />
<input type="radio" name="myitem" id="myitem" value="Trousers" onclick="OtherFunction()" />Trousers
<br /><br />
<br /><br />
<input type="button" class="indent" name="submitB" id="submitB" value="Submit" onclick="loadXMLDoc2('insertMarket.php','txtHint', 'md='+encodeURI(document.getElementById('myitem').value))" />
<div id="txtHint"></div>
This doesn't work. I have tried giving them different ids, I have tried replacing the id with checked="id=\'myitem\'", I have tried getElementById(\'myitem.checked\'), I have tried getElementbyName. In my full page I have far more radio buttons, so I don't want to do a getElementById(\'myitem[0].checked || myitem[1].checked etc. I think the solution must be along these lines. But I have run out of alternatives to try. Needless to say as it currently stands it gives the last radio button's value, which means it doesn't like them having the same id, but when I tried changing how the id was applied, or called - ElementByName, FF gives the error message as id is null. I'm trying to pass the following variables.
Code: var hours; var mins; in the below code, however I can't get the value but keep getting values don;t exist. here is all the code Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Classic Example</title>
<script type = "text/javascript">
var totalhrs = (2* 3600);
var totalmin = (180* 60);
var totaltime = (totalhrs + totalmin);
var timeInSecs;
var ticker;
var p = true;
function pauseTimer() {
if (p) {p=false}
else {
p = true;
tick();
}
}
function startTimer(secs){
timeInSecs = parseInt(secs);
ticker = setInterval("tick()",1000);
}
function tick() {
var secs = timeInSecs;
if (p) {
if (secs>0) {
timeInSecs--;
}
else {
document.getElementById("but1").disabled = false;
clearInterval(ticker); // stop counting at zero
}
}
var hours= Math.floor(secs/3600);
secs %= 3600;
var mins = Math.floor(secs/60);
secs %= 60;
var result = ((hours < 10 ) ? "0" : "" ) + hours + ":" + ( (mins < 10) ? "0" : "" ) + mins
+ ":" + ( (secs < 10) ? "0" : "" ) + secs;
document.getElementById("countdown").innerHTML = result;
}
</script>
</head>
<body onload="startTimer(totaltime);">
<script type="text/javascript">
document.write('<a href="another_page.php?mins='+mins+'&hrs='+hours+'">test link</a>');
</script>
<p><span id="countdown" style="font-weight: bold;"></span></p>
</body>
</html>
I'm trying to capture the 2 noted variables above in the simple link, Code: <script type="text/javascript">
document.write('<a href="another_page.php?mins='+mins+'&hrs='+hours+'">test link</a>');
</script>
I think this is what I am trying to do, I am pretty new to javascript so I'm not sure... but here is my question... I got this function below. Code: function getProductInfo(id) {
var sku = window.document.InvoiceForm.Item0Sku.value;
alert(sku);
}
when I use the 0 I get the right value back, however whenever I try to pass it the id variable with a value of '0' I can't seem to compose the concatenation correct in order to recieve the correct value. I either recieve errors or the whole window.document.InvoiceForm.Item0Sku.value string back in the alert, what am I doing wrong? Hey there, I'll explain what I'm trying to do. I have a back-to-top button on my website that will only appear after the user is 500px down the page. I'd like to be able to change that 500px value to whatever the users window height is. I have a code that retrieves the users window height and will echo it wherever I place the script on my page: Code: <script>
var winW = 800, winH = 600;
if (document.body && document.body.offsetWidth) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
document.documentElement &&
document.documentElement.offsetWidth ) {
winW = document.documentElement.offsetWidth;
winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
winW = window.innerWidth;
winH = window.innerHeight;
}
document.writeln(+winH);
</script>
I'll also post the script for the back-to-top button: Code: <script type="text/javascript" src='<?php bloginfo('template_url'); ?>/js/jquery.min.js'></script><script>
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 500) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>
In that first code, it seems like the value +winH is what I need to use. The line document.writeln(+winH); merely prints the value as text on my page. Now in this second piece of code there's two numeric values. The second, 800, is the speed that the page scrolls back to the top. The first value, 500, is the value I want to replace. Can anyone guide me through how I might combine these two scripts to work together? I have a function which is currently called twice on the same page. Part of the function is to apply an onkeyup event to a created element. The problem is that when the function is called twice the first created element calls the onkeyup function of the second element! table_JD.length-1 = 0 for first element table_JD.length-1 = 1 for second element updateSearch_TC_JD(1) is somehow called from first element! Code: newSearchBox.onkeyup = function() {updateSearch_TC_JD(table_JD.length-1)}
Thanks for any help you can provide! google is not my friend on this one if I wanted to set a variable with radio buttons to decide whether a function adds or subtracts, I know I can't do this: Code: <body>
<input type="radio" name ="op" onclick="op='-'">count up: <input type="radio" name ="op" onclick="op='+'">
<script type="text/javascript">
var op;
function calc() {
start=start op 1000;
}
</script>
</body>
but is there something I can do, without getting all if/elsey? |
|||||||