|
JavaScript - Multiple Buttons Without Nested Forms?
fyi, I have limited experience with web programming (even less with javascript).
I am trying to search a database of molecules and display several columns for each returned molecule in a table in a new page (view_all.cgi). Within this table I have a button for each molecule from the database which I would like to be able to click it and view all of it's information in a new page (view_one.cgi) However, I also have a column in my table in view_all.cgi filled with check boxes so that only some of the returned molecules can be checked and then downloaded using a script (get_checked.cgi). QUESTION: How can I handle the table data so that one button sends one row of the table to view_one.cgi, while another button sends multiple columns of the table to get_checked.cgi without using nested forms? Thanks, Tom EDIT: A better question. I have the first part of my question working (sending one row of a table to view_one.cgi). So, using javascript, how can I get the status (checked/unchecked) of all the check boxes on a page and send the information to get_checked.cgi? Similar TutorialsHi guys ,, I am new here could you please help me in this: I have multiple divs something like this PHP Code: <div id="div1"> <div id="div2"> <div id="div3"> .... </div> </div> I want JavaScript code to print div1 with all nested divs as well I tried using the following code but it only print div1 content PHP Code: var printContent = document.getElementById('div1'); var windowUrl = 'about:blank'; var uniqueName = new Date(); var windowName = 'Print' + uniqueName.getTime(); var printWindow = window.open(windowUrl, windowName, 'left=50000,top=50000,width=200,height=200'); printWindow.document.write(printContent.innerHTML); printWindow.document.close(); printWindow.focus(); printWindow.print(); printWindow.close(); so please tell me how to do such operation ?? Hey guys, I'm a noob with javascript and I only know simple HTML coding, so I have become stuck. I can program in other languages though, so I understand the principles. That being said, I have become stuck with something. My aim is to have a series of page where text is displayed, and then two or more buttons. Once a button is clicked, I want the screen to clear and it displays the next lot of text, followed by some more buttons. Once they are pushed, it continues on. So basically, each section has its own code that it pushes, plus its own buttons which lead to other sections. I am not trying to make a choose your own adventure book, but the layout is basically one of these. I can do this in another language by simply having a few sections. Inside each section, it retrieves the option and proceeds. However, when I am trying to do this, I am getting confused. The way my other programming experience tells me to write it, I would write a function which is called for each section, and it would display the text, the buttons, and return to the main function in the program. However, because the buttons are in HTML, I cannot put code for the new buttons instead the functions. If I put the code inside the body of HTML, it will automatically be displayed. I cannot write an if statement to determine which buttons are displayed. Can you please give me some advice around this? I hope I have made myself clear enough to be understood!! One other thing I should mention, I really want to be able to do this in a single HTML file instead of calling other files. I think this would work fine by using frames and multiple HTML files, but I would prefer not to unless I really need to. One file would be much better for me. Thanks! Below is the basic code I am working from. It displays the first section with some text, displays two buttons and it goes to the next section on a button click. Code:
<html>
<head>
<script type="text/javascript">
function button1()
{
document.write("Button 1 was pushed. Insert text here. Choose from two new buttons below:");
}
function button2()
{
document.write("Button 2 was pushed. Insert text here. Choose from two new buttons below:");
}
</script>
</head>
<body>
<form>
<input type="button" value="Button1" onClick="button1()" />
<input type="button" value="Button2" onClick="button2()" />
</form>
</body>
</html>
Hi all - I'm having difficulty with the processing of 3 forms on my web page. We'll call my 3 forms A, B, and C. By default my page shows form A. The other 2 forms I have hidden via display:none My issue is when I have form B or C showing. Once I hit submit, say within form B for example, I'd like this form to remain for future entries/submital of data. However, instead what happens is form A appears. How do I get form B to remain, allowing for a user to submit multiple entries of data without going back to form A? Here's my code for form 'B' <div id="branches_info" style=" <?php echo $display_branches; ?> "> form method="post" action="annual_report_main.php" onsubmit="return validateBranches(this);"> <fieldset> <p><strong>Branch Location</strong></p><br /> <label for="branch_address" class="long">Street Address:</label> <input maxlength="50" type="text" name="branch_address" id="branch_address" value="<?php echo htmlentities($_POST['branch_address']);?>" /><br /> <div class="cleaner"></div> <label for="branch_city" class="long">City:</label> <input maxlength="20" type="text" name="branch_city" id="branch_city" value="<?php echo htmlentities($_POST['branch_city']);?>" /><br /> <div class="cleaner"></div> <label for="branch_state" class="long">State:</label> <input maxlength="2" type="text" name="branch_state" id="branch_state" value="<?php echo htmlentities($_POST['branch_state']);?>" /><br /> <div class="cleaner"></div> <label for="branch_zip" class="long">Zip Code:</label> <input maxlength="10" type="text" name="branch_zip" id="branch_zip" value="<?php echo htmlentities($_POST['branch_zip']);?>" /><br /> <div class="cleaner"></div> <div class="content_onecolumn"> <input type="submit" name="Branches" value="Submit to Database" class="inputSubmit" /> </div> <div class="content_onecolumn"> <input type="button" name="Finished" value="Finished" class="inputSubmit" onclick="window.open('https://www.dca.ca.gov/webapps/bppe/thankyou.php');return false" /> </div> </fieldset> </form> </div> Hello all, I am trying to update a site that has a cookie feature enabled so that a certificate can be retrieved later on. I am using a form to collect and put the cookie, but I have to use two buttons to get the information stored and then direct the user on through to the rest of the site. My question is: Can I combine these functions into the same button? I have scoured the web for solutions, but I can't seem to find anyone doing this exact thing. I know that websites do this type of thing all of the time. Here is the code that I am using. I am an html / css person. I am just getting into js. It is ugly, but I'm coping Code: <body>
<div id="header">
</div>
<div id="main"><br>
<h2><SCRIPT LANGUAGE="JavaScript">
cookie_name = "dataCookie";
var YouEntered;
function putCookie() {
if(document.cookie != document.cookie)
{index = document.cookie.indexOf(cookie_name);}
else
{ index = -1;}
if (index == -1)
{
YouEntered=document.cf.cfd.value;
document.cookie=cookie_name+"="+YouEntered+"; expires=Saturday, 31-Dec-2011 23:59:59 GMT";
}
}
</SCRIPT>
<FORM NAME="cf">
Enter Your Full Name as you would like it to appear on the completion certificate: <br> <INPUT TYPE="text" NAME="cfd" size="20">
<INPUT TYPE="button" Value="Enter"
onClick="putCookie()">
</FORM>
<h6>Select Continue to review the information</h6>
<FORM METHOD="LINK" ACTION="cookie_2.htm">
<INPUT TYPE="submit" VALUE="Continue with Training">
</FORM></h2>
</div>
<div id="footer">
</div>
</body>
I have been looking around on the webs but have not found anything. I can find how to add multiple fields, but what if they reside on different forms on the same page? For example, here is my code with two forms: Code: <FORM name="form1"> <b>Size</b><input type="text" size="12" value="" name="size">* <b>Qty</b><input type="text" size="4" value="" name="qty" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)"> <b>-</b> <input type=text size="10" value="" name="a1" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)"><b>mm</b> <input type="text" size="15" value="" name="xtra">* <input type="hidden" size="4" value="304.8" name="b1"> <input type="hidden" value="0" name="ans1" size="10"> <input type="text" size="5" value="0" name="w1" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)"><b>Lbs/Foot</b> <input type="text" size="7" value="0" name="tw1" readonly="readonly"><b>Total Lbs<b> </FORM> <FORM name="form2"> <b>Size</b><input type="text" size="12" value="" name="size">* <b>Qty</b><input type="text" size="4" value="" name="qty" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)"> <b>-</b> <input type=text size="10" value="" name="a1" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)"><b>mm</b> <input type="text" size="15" value="" name="xtra">* <input type="hidden" size="4" value="304.8" name="b1"> <input type="hidden" value="0" name="ans1" size="10"> <input type="text" size="5" value="0" name="w1" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)"><b>Lbs/Foot</b> <input type="text" size="7" value="0" name="tw1"><b>Total Lbs<b> </FORM> In this example, I want to sum the two fields named "tw1" (the last field on each form) into a text box. Is this possible? So I used to do a bit of programming about 100 years ago, and now I know just enough to get myself hurt while trying to do it. I was asked to do a couple of javascript quizzes for a project, and was able to produce them through a combination of sheer luck and a coursebook I still have from ~2001. I'm now working on a new one and have run into a wall, even though I know it should be a simple process. I'm basically looking to make 12 sets of 4 radio buttons, each with a value of 1-4. At the bottom of the page there are 4 text boxes that I would like to keep a running total of all of the 1's, 2's, 3's and 4's as they are selected. I'm not having any luck. Anyone willing to take a stab? Code: <HTML>
<HEAD>
<TITLE>Communication Styles</TITLE>
<SCRIPT type="text/javascript">
</SCRIPT>
</HEAD>
<BODY>
<BR><BR>
<CENTER><H1><U>Communication Styles</U></H1></CENTER>
<BR><BR>
<FORM>
<TABLE>
<TR><TD>
<TR><TD><B><U>1. Do you tire more easily? Feel fatigued rather than energetic?</U></B><BR><BR>
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec11" value="1" type="radio"> 1
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec11" value="2" type="radio"> 2
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec11" value="3" type="radio"> 3
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec11" value="4" type="radio"> 4
<TR><TD><BR>
<TR><TD><B><U>2. Are you annoyed by people telling you that you don't look so good lately?</U></B><BR><BR>
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec12" value="1" type="radio"> 1
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec12" value="2" type="radio"> 2
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec12" value="3" type="radio"> 3
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec12" value="4" type="radio"> 4
<TR><TD><BR>
<TR><TD><B><U>3. Are you working harder and harder and accomplishing less and less?</U></B><BR><BR>
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec13" value="1" type="radio"> 1
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec13" value="2" type="radio"> 2
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec13" value="3" type="radio"> 3
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec13" value="4" type="radio"> 4
<TR><TD><BR>
<TR><TD><B><U>4. Are you increasingly cynical and disenchanted?</U></B><BR><BR>
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec14" value="1" type="radio"> 1
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec14" value="2" type="radio"> 2
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec14" value="3" type="radio"> 3
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec14" value="4" type="radio"> 4
<TR><TD><BR>
<TR><TD><B><U>5. Are you often invaded by a sadness you can't explain?</U></B><BR><BR>
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec15" value="1" type="radio"> 1
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec15" value="2" type="radio"> 2
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec15" value="3" type="radio"> 3
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec15" value="4" type="radio"> 4
<TR><TD><BR>
<TR><TD><B><U>6. Are you forgetting (appointments, deadlines, personal possessions)?</U></B><BR><BR>
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec16" value="1" type="radio"> 1
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec16" value="2" type="radio"> 2
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec16" value="3" type="radio"> 3
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec16" value="4" type="radio"> 4
<TR><TD><BR>
<TR><TD><B><U>7. Are you increasingly irritable? More short-tempered? More disappointed in the people around you?</U></B><BR><BR>
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec17" value="1" type="radio"> 1
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec17" value="2" type="radio"> 2
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec17" value="3" type="radio"> 3
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec17" value="4" type="radio"> 4
<TR><TD><BR>
<TR><TD><B><U>8. Are you seeing close friends and family members less frequently?</U></B><BR><BR>
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec18" value="1" type="radio"> 1
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec18" value="2" type="radio"> 2
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec18" value="3" type="radio"> 3
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec18" value="4" type="radio"> 4
<TR><TD><BR>
<TR><TD><B><U>9. Are you too busy to do even routine things like make phone calls, read reports or send out holiday cards?</U></B><BR><BR>
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec19" value="1" type="radio"> 1
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec19" value="2" type="radio"> 2
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec19" value="3" type="radio"> 3
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec19" value="4" type="radio"> 4
<TR><TD><BR>
<TR><TD><B><U>10. Are you suffering from physical complaints (aches, pains, headaches)?</U></B><BR><BR>
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec110" value="1" type="radio"> 1
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec110" value="2" type="radio"> 2
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec110" value="3" type="radio"> 3
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec110" value="4" type="radio"> 4
<TR><TD><BR>
<TR><TD><B><U>11. Do you feel disoriented when the activity of the day comes to a halt?</U></B><BR><BR>
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec111" value="1" type="radio"> 1
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec111" value="2" type="radio"> 2
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec111" value="3" type="radio"> 3
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec111" value="4" type="radio"> 4
<TR><TD><BR>
<TR><TD><B><U>12. Is joy elusive?</U></B><BR><BR>
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec112" value="1" type="radio"> 1
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec112" value="2" type="radio"> 2
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec112" value="3" type="radio"> 3
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec112" value="4" type="radio"> 4
<TR><TD><BR>
<TR><TD><B>1's: </B><input type="text" name="SecTotal1" id="sectotal1" value="" maxlength="15" size="15" class="textbox"><BR>
<TR><TD><B>2's: </B><input type="text" name="SecTotal2" id="sectotal2" value="" maxlength="15" size="15" class="textbox"><BR>
<TR><TD><B>3's: </B><input type="text" name="SecTotal3" id="sectotal3" value="" maxlength="15" size="15" class="textbox"><BR>
<TR><TD><B>4's: </B><input type="text" name="SecTotal4" id="sectotal4" value="" maxlength="15" size="15" class="textbox"><BR>
</TABLE>
<BR><BR><BR>
<input type="button" name="reset_form" value="Reset Form" onclick="this.form.reset();">
<BR><BR><BR><BR>
</FORM>
</BODY>
</HTML>
I know it should be simple, but I guess it's been too long. Thanks in advance for any help people are willing to give I'm creating a paypal webpage and am having some issues with input values updating based on which item the user has selected. The boxes I need to update are the amount, item number and item name. I have the following code but it only updates the first form. If I make a change to the second set of options it updates the first form instead of the second. Any help would be much appreciated. Code:
function details(val)
{
var info = val.split("|");
document.getElementById('num').value = info[0];
document.getElementById('price').value = info[1];
document.getElementById('package_name').value = info[2];
}
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<select name="dy" Onchange="details(this.value);">
<option value="1|3|Package 1">Package 1</option>
<option value="2|6|Package 2">Package 2</option>
<option value="3|9|Package 3">Package 3</option>
</select>
<input type="text" id="num" name="item_number" value="1">
<input type="text" id="price" name="amount" value="3">
<input type="text" id="package_name" name="item_name" value="Package 1">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"><img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"><input type="hidden" name="add" value="1">
</form>
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<select name="pt" Onchange="details(this.value);">
<option value="4|6|Package 4">Package 4</option>
<option value="5|9|Package 5">Package 5</option>
<option value="6|12|Package 6">Package 6</option>
</select>
<input type="text" id="num" name="item_number" value="4">
<input type="text" id="price" name="amount" value="6">
<input type="text" id="package_name" name="item_name" value="Package 4">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"><img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"><input type="hidden" name="add" value="1">
</form>
Hello, I'm trying to make a simple webpage with two input text boxes that when submitted when empty, I'll get an error pop-up telling me which ones are empty, both, first name, or last name. When there's only one if, the script works. But when there's multiple else ifs, nothing happens if I press submit. Can someone help me? Code: <html>
<head>
<script type="text/javascript">
function validateForm()
{
var x=document.forms["myForm"]["firstname"].value;
var y=document.forms["myForm"]["lastname"].value;
if (x==null || x=="" && y==null || y=="")
{
alert("Please put in your first and last name.");
return false;
}
else if (x==null || x=="")
{
alert("Please put in your first name.");
return false;
}
else if (y==null || y=="")
{
alert("Please put in your last name.");
return false:
}
}
</script>
</head>
<body>
<form name="myForm">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
<input type="submit" value="Submit" onclick="validateForm()">
</form>
</body>
</html>
Normally I would just use document.getElementById to get anything I need but here is my problem: I have a zip code control that I load using AJAX. it has city, state, country, county and zip code. This gets loaded within a business application and at one point you can have both a bill to and ship to address forms on the screen at the same time, loading my zip control with the same fields, same ids and same name. This forced me to now pass in the form name that contains the control. I need to get to divs and spans within this form. Primarily as you type in a city or zip code, I am doing a hot search with a popup div that shows you results you can quickly choose from. The only time this becomes an issue is the situation I mentioned before when the zip code control is on the screen twice. I am not certain how to access the innerHTML of a span or div by way of the form name. Is this possible and if so what is the proper syntax? Here is a very basic example at its simplest form of my problem. Code: <form name="frm_billto" id="frm_billto"> <span id="myspan">Hello</span> </form> <form name="frm_shipto" id="frm_shipto"> <span id="myspan">World</span> </form> In the above example because the control was loaded twice, I now have 2 spans with the same ID. I want the innerHTML of the each span based on the form they are in. We wanted one control that we could use throughout the system that we could update in one place and the entire application be updated. Unfortunately we did not anticipate having it load more than once on the page. Thank you for any help I have a document that contains four forms. I want to run a function only in the form the user is currently in. I keep getting the "document.my_form_name is undefined" error. I've tried all sorts of ways of doing this but can't find a solution. Here's a snippet of the HTML: Code: <form id="my_form_1" name="my_form_1" action="some action" method="POST"> // in here I call the function onchange_display_sel_droplist and // pass through the name of the form </form> <form id="my_form_2" name="my_form_2" action="some action" method="POST"> bla bla </form> Here's the part of the function in question: Code:
function onchange_display_sel_droplist(my_value, my_object, my_text_obj, my_form_name)
{
// create array with all the divs found
var arr = new Array();
arr = document.my_form_name.getElementsByTagName( "div" );
// loop through array
for(var i=0; i < arr.length; i++)
{
var tagId = document.my_form_name.getElementsByTagName( "div" ).item(i).id;
// find all the divs with ID "my_selected_div__"
if ( tagId.indexOf("add_selected_div__") > -1 )
{
// hide all
document.my_form_name.getElementById(tagId).style.display = "none";
}
}
// display selected object (droplist)
document.my_form_name.getElementById(my_object).style.display = "";
}
I posted a thread a few days ago concerning a bit of javascript code to make checking one checkbox clear another one. I got some great, prompt help. However, I just got back to working on that web page, and realized that the functions only work on the first form on my web page. I have many forms and they are actively named using php. Here's are the functions (these works for just the first form on the page): Code: <script type="text/javascript">
function undo_Changes() {
if (document.getElementById("Complete").checked==true) {
document.getElementById("Needs_Change").checked=false;
}
}
function undo_Complete() {
if (document.getElementById("Needs_Change").checked==true) {
document.getElementById("Complete").checked=false;
}
}
</script>
I call them from the checkboxes involved: Code: <input name="Complete" id="Complete" value="Yes" <?php echo($Complete=="Yes") ? "checked" : ""; ?> size="4" type="checkbox" onChange="this.style.color='#FF0000'" onClick="undo_Changes()"> <input name="Needs_Change" id="Needs_Change" value="Yes" <?php echo($Needs_Change=="Yes") ? "checked" : ""; ?> size="4" type="checkbox" onClick="undo_Complete()"> Here's how my forms are named: Code: <?php $DocName = "Schedule".$count; ?>
<form name="<?php echo $DocName; ?>" action="ScheduleCode.php" method="post" id="<?php echo $DocName; ?>">
I've tried the following and it doesn't work at all: Code: <script type="text/javascript">
function undo_Changes(myForm) {
if (myForm.getElementById("Complete").checked==true) {
myForm.getElementById("Needs_Change").checked=false;
}
}
function undo_Complete(myForm) {
if (myForm.getElementById("Needs_Change").checked==true) {
myForm.getElementById("Complete").checked=false;
}
}
</script>
<input name="Complete" id="Complete" value="Yes" <?php echo($Complete=="Yes") ? "checked" : ""; ?> size="4" type="checkbox" onChange="this.style.color='#FF0000'" onClick="undo_Changes(this.form)">
<input name="Needs_Change" id="Needs_Change" value="Yes" <?php echo($Needs_Change=="Yes") ? "checked" : ""; ?> size="4" type="checkbox" onClick="undo_Complete(this.form)">
Thanks for any help. Lisa Hi all, I have multiple forms on one page with the same element name and one of them is the <span>. Below is my sample code for a simple html file for testing purposes. I have no problem accessing the <input> element, but i had problems with the <span> element. Anyone knows why? In this scenario, i won't be able to use the document.getElementById() as both <span> have the same name. Code:
<html>
<head>
Test
<SCRIPT LANGUAGE="JavaScript">
// JavaScript statements go here
function test(tmpForm) {
window.alert(tmpFrm.elements["weight"].value);
window.alert(tmpForm.elements["error"].innerHTML);
}
</SCRIPT>
</head>
<body>
<form id="form_137" name="form_137">
<input id="weight" name="weight" value="" />
<span id="error" name="error">abc</span>
<INPUT TYPE="button" id="btnSubmit" NAME="btnSubmit" VALUE="Submit" onClick="test(this.form);">
</form>
<form id="form_137_down" name="form_137_down">
<input id="weight" name="weight" value="" />
<span id="error" name="error">zzz</span>
<INPUT TYPE="button" id="btnSubmit" NAME="btnSubmit" VALUE="Submit" onClick="test(this.form);">
</form>
</body>
</html>
I made a php page with multiple forms with javascript code in it. The javascript makes an input field for the date. The problem is that the script interfers between other scripts in the other forms and i get wrong orderdate. Code: <form action='dataadd.php' name='$id'>";
$datestime=time();
echo "<input type=hidden name=dateid value='$id'>";
echo "<input type=hidden name=datestime value='$datestime'>";?>
<script type="text/javascript">
DateInput('orderdate', true, 'yyyy-mm-dd')</script>....
Hate to ask this as I know it's an easy one but surprisingly Google turns up no clear/simple answers! I'm modifying some old code and am not JS programmer (I'm a PHP programmer) and this is driving me nuts. The existing code makes sure that when the form is submitted that there isn't a missing value. There's also some hidden input values. The JS starts out function checkform(orderform) and the form tag includes onsubmit="return checkform(this);"> I can add an alert to the form to see varius input values, such as a hidden value for the input name 'description' I can use: alert (orderform.description.value) Eazy peazy. However the form has two different input type=image buttons now and I need to do some branching in the JS depending on which image button they press. I recall IE had an issue where it only sends the x and y coordinates So I figure an easy to determine which image button was pressed is just check to see if the x or y value for each button is non-zero. But I can't for the life of me figure out how to access the value. Example: alert (orderform.button1.x.value) doesn't work. Can someone refresh my memory or suggest an entirely different method for detecting which image button was used to submit a form? THanks in advance! hello everybody! this is my first atempt in writing javascript and i have a problem which I have no idea how to solve. I want to take the values from several dropdown forms and make some calculations whit those in order to display a number. Unfortunately the script responts in a way that i cannot identify what is happening. this is a shorten example of my script. Code:
<html>
<head>
<script type="text/javascript">
function calcul()
{
var pcno = document.plithospc.listplpc.value;
var ndno = document.plithosnd.listplnd.value;
var hotline = document.hotlform.listhotl.value;
var sumhotline = 0;
if (hotline == 2)
{
sumhotline = 8*(1+0.5*pcno) + 2*(1+0.5*ndno);
}
else if (hotline == 3)
{
sumhotline = 16*(1+0.5*pcno) + 4*(1+0.5*pcno);
}
else
{
sumhotline = 0;
}
document.write(sumhotline);
</script>
</head>
<body>
<FORM NAME="plithospc">
<SELECT NAME="listplpc">
<OPTION SELECTED="SELECTED" VALUE=0>choose one</OPTION>
<OPTION VALUE=1>-1-</OPTION>
<OPTION VALUE=2>-2-</OPTION>
<OPTION VALUE=3>-3-</OPTION>
</SELECT>
<FORM NAME="plithosnd">
<SELECT NAME="listplnd">
<OPTION SELECTED="SELECTED" VALUE=0>choose one</OPTION>
<OPTION VALUE=1>-1-</OPTION>
<OPTION VALUE=2>-2-</OPTION>
<OPTION VALUE=3>-3-</OPTION>
</SELECT>
<FORM NAME="hotlform">
<SELECT NAME="listhotl">
<OPTION SELECTED="SELECTED" VALUE=0>choose one</OPTION>
<OPTION VALUE=1>1st selection</OPTION>
<OPTION VALUE=2>second selection</OPTION>
<OPTION VALUE=3>third selection</OPTION>
</SELECT>
<button type="button" onclick="calcul()">click me</button>
</body>
does anyone knows how to fix this? thanks in advance I'm using the autofill forms plugin for firefox which can be found he https://addons.mozilla.org/en-US/firefox/addon/4775 I use it to automatically fill various web forms, duh. But I would like certain values to be chosend randomly from a list I create. I contacted the developer and he said the add on probably does not need a new feature because there is a 'dynamic tags' function to fill certain forms with dynamic values (e.g. the current time or date). He has given over the project to another developer and told me I probably would find a solution in a good javascript programming forum. So here I am! Can anyone help me with this? Basically, I just need a javascript code which chooses on item from an array randomly, I guess? I'm not a programmer myself, so any help would be greatly (!) appreciated. Thanks a lot in advance for any further guidance! Note: Here are sample dynamic tags from the plugin: <datetime> new Date().toLocaleString() <useragent> navigator.userAgent <langcode> navigator.language <resolution> screen.width+'x'+screen.height <clipboard> this.getClipboardText() Hi, I hope someone can help me. I'll be honest and say I don't know much about javascript, but am fairly comfortable in html. I am building a website that will have multiple image swaps on multiple pages. I am building this in wordpress, and I'm guessing that means my approach will be different than if I wasn't using wordpress. Here's how one page would work: There are 10 images shown. 1,2,3,4,5,6,7,8,9,10. When number 1 is clicked on, I want a new image - 1a. When 2 is clicked on, 2a. So there are 20 different images in all on a given page. Also, I want the user to be able to click on the image again to restore the original image. I would prefer onclick to onmouseover. There will be literally dozens of pages like this on the site, managed by wordpress, so hundreds of images to swap. Basically the first image is a question - the second image is the answer. Is this possible? This may be a basic programing problem but I am writing a function to validate a form using a bunch of else-if statements and encounters a problem when I use nested if/else-if statements. It will not continue on to the next else-if, after it returns false. Code: // to check each entry on the form and alert user if entry is invalid.
function checkform(){
var checkssn = /(\d{3})-(\d{2})-(\d{4})/;
var checkphone = /(\d{3})-(\d{4})/;
var checkname = /[a-zA-Z]+(\.|,|\s)*/;
var checkzip = /(^967|^968)\d{2}(-\d{4})?$/;
// check to see if user have selected an Election
if (!document.f1.elections[0].checked && !document.f1.elections[1].checked && !document.f1.elections[2].checked && !document.f1.elections[3].checked) {
window.alert("Please select an Election!")
return false;
// check to see if user entered a valid SSN
} else if ( checkssn.test(document.f1.ssn.value) == false){
window.alert("[1]. Please enter a valid social security number in the format ddd-dd-ddd");
return false;
// check to see if user entered a valid home telephone number or business telephone number
}else if ( document.f1.home_phone.value == '' && document.f1.business_phone.value == '') {
window.alert("[4]. Please enter a Home or Business telephone number!")
return false;
} else if ( document.f1.home_phone.value != ''){
if (checkphone.test(document.f1.home_phone.value) == false){
window.alert("[4]. Please enter a valid home phone number in the format ddd-ddd");
return false;
}
} else if ( document.f1.business_phone.value != ''){
if ( checkphone.test(document.f1.business_phone.value) == false){
window.alert("[4]. Please enter a valid business phone number in the format ddd-ddd");
return false;
}
// check to see if user entered a valid Name
}else if ( checkname.test(document.f1.lastname.value) == false){
window.alert("[5]. Last Name can only consist of letters, periods(.), commas(,) and spaces");
return false;
}else if ( checkname.test(document.f1.firstname.value) == false){
window.alert("[5]. First Name can only consist of letters, periods(.), commas(,) and spaces");
return false;
The problem occurs when it validates the phone numbers. When a valid number is entered, it will not move to the next else-if statement to validate the name. It's been years since I program in Java/C, so I'm a bit rusty. Any help is appreciated. -Alex I'm trying to reuse some code in a different context to do a different job. The code to be reused contains hundreds of lines similar to a = new b.c.d(e,f) with different value for e and f. I need to create a new user defined object with the structure b.c.d. I've made numerous attempts along the lines of: Code: function d (e, f) {
this.e = e;
this.f = f;
}
function c () {
this.d = d (e, f);
}
function b () {
this.c = c;
}
var a = new b.c.d("test", "message");
with various permuations of functional declarations. However I get error message "Object expected" or "b.c.d is null or not an object" at the final line of the example. It works with the test line var a = new d("test", "message") but not when I start to build up the expression. How should I define of b.c.d? Hello codingforums.com! Right, this is probably going but such a stupid newbie thread but here goes.. I've finally got myself into gear to start learning javascript. I've been watching video tutorials, learning from websites and simply learning by error. I understand the concept of for loops, but the whole nested thing doesn't seem to click for some reason. I thought i understood and managed to write a piece of code that constantly writes '*' across the screen. Could someone with some pretty damn good knowledge of javascript be able to walk me through step by step of my script to explain what actually is happening? It would help loads. here is the script, many thanks!! <script type="text/javascript"> var counter = 0; function writeStars(){ for(i=0;i<1;i++){ for(a=0;a<=counter;a++){ document.write("*"); } counter++ document.write("<br />"); } } setInterval("writeStars()", 200); </script> |
|||||||