|
JavaScript - Change Function Of Button On Form Depending On Item
I'm still a relative noob and i'm wondering if anyone can help.
items use a structured form, so any item in that category will display on the same form when selected i want to have the save button run its normal save on all items except 1 specific item - on the 1 item i want to have it function as a save as copy (while still having "save" as its visible text), the current code set in a drop down list is $options[] = array( 'text' => 'JSAVE', 'task' => $this->getName() . '.save'); $options[] = array( 'text' => 'Save as new project', 'task' => $this->getName() . '.save2copy', 'options' => array('access' => ($this->item->id > 0))); can anyone offer any suggestions? really stuck on this one Similar TutorialsHello everyone Background I have an electronics site on which I have a code generator. Im an stuck on how to acheive something. I will simplify what I want to do, so I can then adapt it to my code. I have a paragraph of text on the web page, on which I want to change some words with in the paragraph depending on 2 radio buttons. Example (radio buttons & short paragraph): (Radio Button) Apples (checked) (Radio Button) Bananas "Welcome to jakes fruit shop. You have selected apples today" (apples being the word that would change if the banana radio button is checked) Here is the code generator if your interested. http://www.jakeselectronics.net/conf...erator877A.php What I actually want to do is put other 'fixed' text in the input text area (near botton of page) with only the config line changing. And If I can be shown how to do the short example above, i think I will be able to edit my generator and get it to do what i want it to do. Hello 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! I have recently installed google custom search on a page- using the iframe selection, so I can have control over the look of the page and it isn't a google branded page. The problem is- with JS disabled, this form doesn't work. However, the option to display results on a google hosted page does work. This is very important for accessibility for this site, so what I am wanting to do is have the basic search show ONLY if there is no JS enabled. But for everyone else- it displays as I intended. JS isn't my bread and butter, but I think it's the tool to use here. Could someone offer some guidance? Main Form Code: <div style="float:right">
<script type="text/javascript" src="/js/main.js"></script>
<div id="searchBox" class="searchBoxTopLevelNav">
<form name="search" id="search" action="search.php?">
<label for="q" style="display:none";>Site Search</label>
<input onclick="javascript:SearchClear(this);" onkeypress="javascript:OverrrideForms(this);" name="q" id="q" autocomplete="off" class="GoogleSearchTextBox" value="Search" />
<input name='btnG' onclick="javascript:SearchGoogle($(this).prev('input.GoogleSearchTextBox:first'));return false;" type='image' value='Search' src='../img/icons/search-gray.gif' alt='Go' align="top"/>
</form>
</div>
Form to display only if JS is not enabled Code: <form action="http://www.google.com/cse" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="#" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Search" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script>
i'm still a relative noob and this has me stuck - i have a save button with a "save as copy" in the save dropdown list. add new item directs to a premade/formatted project that is used as a template, so on that item i only want/need the "save as copy" but on all other items that use the form i need to only have the "save" function. is there any way to either change the function of the button depending on item that is being viewed in the edit screen OR hide the "save" button and only show the button associated with "save as copy - and vis versa for the rest of the items?? current button code is - protected function getToolbar() { $options = array(); $user = JFactory::getUser(); $create_ms = $user->authorise('core.create', 'com_pfmilestones'); $create_task = $user->authorise('core.create', 'com_pftasks'); $options[] = array( 'text' => 'JSAVE', 'task' => $this->getName() . '.save'); $options[] = array( 'text' => 'Save as new project', 'task' => $this->getName() . '.save2copy', 'options' => array('access' => ($this->item->id > 0))); PFToolbar::dropdownButton($options, array('icon' => 'icon-white icon-ok')); item used as template is id=8 any help or suggestions would be greatly appreciated.. I have the one javascripts button code and the functions is on "text area" .. but how do I change the function of this button to go to google.com website ..? how to make it.. the javascripts button code : Code: <input type="image" src="tesdt-copy-1.gif"
onmouseover="this.src='file:///C:/Documents%20and%20Settings/Administrator/Desktop/test/main%20test%20scripts/test2-copy-2.gif';"
onmouseout="this.src='file:///C:/Documents%20and%20Settings/Administrator/Desktop/test/main%20test%20scripts/test2-copy-1.gif';"
onclick="CB(document.getElementById('output').value); return false;"
</form name="I5" width="38" height="38">
The below script keeps a running total dollar tab. It uses the "name" of the elements but I would like it to use the "ID" instead. Can somebody pretty please adjust the function to look at the id. I've changed the first 2 form elements to id. Tracy Code:
<script language="JavaScript" type="text/javascript">
<!--
function CalculateTotal(frm) {
var order_total = 0
// Run through all the form fields
for (var i=0; i < frm.elements.length; ++i) {
// Get the current field
form_field = frm.elements[i]
// Get the field's name
form_name = form_field.name
// Is it a "product" field?
if (form_name.substring(0,4) == "PROD") {
// If so, extract the price from the name
item_price = parseFloat(form_name.substring(form_name.lastIndexOf("_") + 1))
// Get the quantity
item_quantity = parseInt(form_field.value)
// Update the order total
if (item_quantity >= 0) {
order_total += item_quantity * item_price
}
}
}
// Display the total rounded to two decimal places
frm.TOTAL.value = round_decimals(order_total, 2)
}
function round_decimals(original_number, decimals) {
var result1 = original_number * Math.pow(10, decimals)
var result2 = Math.round(result1)
var result3 = result2 / Math.pow(10, decimals)
return pad_with_zeros(result3, decimals)
}
function pad_with_zeros(rounded_value, decimal_places) {
// Convert the number to a string
var value_string = rounded_value.toString()
// Locate the decimal point
var decimal_location = value_string.indexOf(".")
// Is there a decimal point?
if (decimal_location == -1) {
// If no, then all decimal places will be padded with 0s
decimal_part_length = 0
// If decimal_places is greater than zero, tack on a decimal point
value_string += decimal_places > 0 ? "." : ""
}
else {
// If yes, then only the extra decimal places will be padded with 0s
decimal_part_length = value_string.length - decimal_location - 1
}
// Calculate the number of decimal places that need to be padded with 0s
var pad_total = decimal_places - decimal_part_length
if (pad_total > 0) {
// Pad the string with 0s
for (var counter = 1; counter <= pad_total; counter++)
value_string += "0"
}
return value_string
}
//-->
</script>
<FORM>
<TABLE BORDER =3>
<TR><TD ALIGN="CENTER"><B>Please <BR>
enter <BR>
quantity:</FONT></TD>
<TD ALIGN="CENTER"><B>Description</TD><TD ALIGN="CENTER"><B>Price<BR>
(each)</B></TD></TR>
<TR>
<TD ALIGN="CENTER"><INPUT TYPE=TEXT ID="PROD_SP_4.99" SIZE=3 MAXLENGTH=3 onkeyup="CalculateTotal(this.form)"></TD><TD>Spelt Bread 24 oz</TD><TD ALIGN="RIGHT">$4.99</TD>
</TR>
<TR><TD ALIGN="CENTER"><INPUT TYPE=TEXT ID="PROD_SPMG_4.99" SIZE=3 MAXLENGTH=3 onkeyup="CalculateTotal(this.form)"></TD><TD>Spelt Multi-Grain Bread* 24 oz</TD><TD ALIGN="RIGHT">$4.99</TD>
</TR>
<TR><TD ALIGN="CENTER"><INPUT TYPE=TEXT NAME="PROD_SPCR_4.99" SIZE=3 MAXLENGTH=3 onkeyup="CalculateTotal(this.form)"></TD><TD>Spelt Cinnamon-Raisin Bread 24 oz</TD><TD ALIGN="RIGHT">$4.99</TD>
</TR>
<TR><TD ALIGN="CENTER"><INPUT TYPE=TEXT NAME="PROD_SW_3.99" SIZE=3 MAXLENGTH=3 onkeyup="CalculateTotal(this.form)"></TD><TD>Spelt White Bread* 18 oz</TD><TD ALIGN="RIGHT">$3.99</TD>
</TR>
<TD>TOTAL</TD>
<TD ALIGN="RIGHT"><INPUT TYPE=TEXT NAME=TOTAL SIZE=10 onFocus="this.form.elements[0].focus()"></TD>
</TABLE>
<P>
</FORM>
I'm trying to use javascript to have my webpage black at night and bright blue (#2A7FFF) in the day time. How would I go about this? :/ I have also tried to use javascript to change a picture depending on the time of day, this is what I have used. IN THE <head> Code: <script type="text/javascript">
var hourofday = thedate.getUTCHours();
function sun()
{
// return TRUE if it's day
if (hourofday > 7 && hourofday < 10) {
return true;
}
return false;
}
</script><script type="text/javascript">
var hourofday = thedate.getUTCHours();
function sun()
{
// return TRUE if it's day
if (hourofday > 7 && hourofday < 10) {
return true;
}
return false;
}
</script>
IN THE <body> Code: <div id="layer1" style="position:absolute; top:5px; left:5px; width:190px; height:190px; z-index:1; padding:5px; border:#000000 2px solid;background:color:#000000;">
<script type="text/javascript">
if (sun()) {
document.write("<img src="www.oliverbinns.webs.com/images/sun.png" />");
} else {
document.write("<img src="www.oliverbinns.webs.com/images/moon.png" />");
}
</script>
</div>
I want to have a button in a form that only calls a Javascript function, but not refresh the page, how do I do this?
I am working on a project where I have 5 XML files that I bring into HTML and display the tables on one browser page. I would like for the row of the tables to change depending on what is in the "status" field. There will only be the following inputs in that column - "IS" which is in stock(green), "OS" which is out of stock(red), and "PO" which is Pre-Order(blue). 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=iso-8859-1" />
<title>ABC Book Store</title>
<style type="text/css">
<!--
.style1 {
font-size: 10pt;
}
-->
</style>
<script>
function ld_fiction()
{
var doc=nb_fiction.XMLDocument;
doc.load("fiction.xml");
document.getElementById("head_id").innerHTML="Fiction ";
}
function Id_nfiction()
{
var doc_s=nb_nfiction.XMLDocument;
doc_s.load("nfiction.xml");
document.getElementByID("head_id_d").innerHTML="NonFiction";
}
function ID_selfhelp()
{
var doc_t=nb_selfhelp.XMLDocument;
doc_t.load("selfhelp.xml");
document.getElementByID("head_id_e").innerHTML="SelfHelp";
}
function ID_reference()
{
var doc_u=nb_ref.XMLDocument;
doc_u.load("ref.xml");
document.getElementByID("head_id_f").innerHTML="Reference";
}
function ID_mags()
{
var doc_v=nb_mags.XMLDocument;
doc_v.load("mags.xml");
document.getElementByID("head_id_g").innerHTML="Mags";
}
</script>
<XML id="nb_fiction" src="fiction.xml"></XML>
<XML id="nb_nfiction" src="nfiction.xml"></XML>
<XML id="nb_selfhelp" src="selfhelp.xml"></XML>
<XML id="nb_ref" src="ref.xml"></XML>
<XML id="nb_mags" src="mags.xml"></XML>
<object id="nb_fiction" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39"
width="0" height="0"></object>
<object id="nb_nfiction" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39"
width="0" height="0"></object>
<object id="nb_selfhelp" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39"
width="0" height="0"></object>
<object id="nb_ref" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39"
width="0" height="0"></object>
<object id="nb_mags" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39"
width="0" height="0"></object>
<body>
<table width="30%" border="0" align="left" cellspacing="1" font size="10">
<tr bgcolor="#CCCCCC">
<td colspan="2">
<table id="FICTIONTABLE" table width="100%" datasrc="#nb_fiction" font size="1" border="0" align="center" bordercolor="#FFFFFF">
<caption>
<span>Fiction </span>
</caption>
<thead>
<tr>
<th span class="style1">Stock No.</th></span>
<th span class="style1">Title</th></span>
<th span class="style1">Author</th></span>
<th span class="style1">Status</th></span>
<th span class="style1">Price</th></span>
<th span class="style1">Publisher</th></span>
<th span class="style1">Year of Release</th></span>
</tr>
</thead>
<tbody>
<tr>
<td><span class="style1" datafld="stock"></td></span>
<td><span class="style1" datafld="title"></td></span>
<td><span class="style1" datafld="author"></td></td></span>
<td><span class="style1" datafld="status"></td></span>
<td><span class="style1" datafld="price"></td></span>
<td><span class="style1" datafld="publisher"></td></span>
<td><span class="style1" datafld="year"></td></span>
</tr>
</tbody>
</table>
</td>
</tr>
</body>
</html>
I only included the first part of the html code along with the first table, but there is a table for each xml file. You can also probably tell how the XML files are structured by looking at the way they are displayed in the tables. I think what I want to do can be accomplished with JavaScript, but I have no idea how to do it and it's the only thing I have left before I'm done. Any help would really be appreciated and thanks in advance. 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!! Hello all, I am having a problem, and since I am quite new in the Javascript code I hope somebody can help me here. This is my current code: Code: <select class="Form" name="opties"> <option value="AAA">AAA</option> <option value="BBB">BBB</option> <option value="SLX" selected>Selecteer optie</option> </select> Now my intention is the following: When the option with value SLX gets selected it needs to get a special css style. It is not a problem to give the option this style in the list itself, but once selected it always changes to the original style (standard font and color) in Chrome and Mozilla. Now I searched on the net and sometimes I find things like this: Code: function displayOption(divName)
{
document.getElementById(divName).innerText=document.form1.select1.options[document.form1.select1.selectedIndex].value;
}
<select class="Form" name="opties" onChange="displayOption('div1');">
<option value="AAA">AAA</option>
<option value="BBB">BBB</option>
<option value="SLX" selected>Selecteer optie</option>
</select>
But I suppose this always changes the style of the selected item? It only needs to change when the option SLX is chosen... Anyone knows how to solve this problem? Dear Javascript programmers, Do you have an example of a Javascript something like this: A dropdownlist with values "one" and "two". The radio button is not visible (as a start). - If you have selected "one" from the dropdown list, then a radio button will appear. - If you have selected "two" from the dropdown list, then a radio button will NOT appear. Thanks, Cornelis Gouda - The Netherlands Hi I'm new to javascript, so this is probably very simple. I've created a form with combobox with different values (this is for my website). What I want is when the user clicks 'submit' that it goes to a different page on the website depending on the value the person has selected in the combobox. Values are numerical, for example 1000, 2000, 5000 etc. I've been trying this for a couple of days now without success! Thanks in advance hi again hi i want to create a form Form have 2 submit buttons also have one drop down list when selecting dropdown list item disable the one submit button plzzzzzz help m for do this with sample code needed. This function is part of a page that will delete a product that a customer has selected. The question I have is what is the line line that actually removes the item from the list of products chosen? From my understanding, in order to establish an array, new array = elements[i] has to be added but Im thinking that elements[i] is the array that holds the product. Does the "0" in this line actually delete the item? document.template.elements[i].value = 0 ; Code: function del_item(X,msg) {
// var msg = "Are you sure you want to delete this line item?"
resp = confirm("Are you sure you want to " + msg + "?") ;
if (resp) {
var len = document.template.elements.length
//loop to put into arrays
for (var i = 0; i < len; i++) {
var lname = document.template.elements[i].name ;
if(lname == X) {
document.template.elements[i].value = 0 ;
process_order(0) ;
document.template.loginpath.value = "CO" ;
document.template.submit() ;
}
}
} else {
return ;
}
}
Hello, I have a form that works out some basic math questions e.g. area etc. I run a function when a form field is updated to do the calculations, however I'd like to run a different calculation depending on which form element was updated. Is there a way to say something like: if (area1 was updated) { work out this calculation } if(area2 was updated) { work out this calculation } and so on? Thanks, Nicola Hi, I am not entirely sure what I am doing wrong here, and I have been looking at this for ages, so apologies in advance if I have become so bleary eyed I can't see something simple. I use php to create buttons based on values pulled for a table. The problem I have is when you click on the first button the javascript function works great, when you click on the next button you get the same output even though it should be different results. I am working in ff and I can see on my firebug console that the javascript function is being called, but it is not passing the new value of the second or third button, it just keeps repassing the value of the first button. So not entirely sure where I am going wrong here. My page 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>
<?php
$con = mysql_connect("localhost","user","password");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("mydb", $con);
$result = mysql_query("SELECT DISTINCT theme FROM goods WHERE category='{$_POST['category']}'
ORDER BY theme DESC");
while($row = mysql_fetch_array($result)){
echo '<input type="text" class="hidden" name="theme" id="theme" value="' . $row['theme'] . '" ><input type="button" class="button3" name="product" id="product" value="' . $row['product'] . '" onClick="loadXMLDoc2(\'getShow.php\',\'txtHint\',\'theme=\'+encodeURI(document.getElementById(\'rtheme\').value))" > ';
}
echo '<br /><br />
<div id="txtHint"><div>
<br />
<br />';
mysql_close($con);
?>
And getShow.php produces a table with a list of product images, names and prices, based on theme. So basically not sure where I am going wrong here? From my main page, I have a dropdown-login box. Is it possible login form go to my user's control panel if the login was successful, or go to the login page if it's not? Ideally, I don't want to use a re-direct. Do I need to use ajax? Thank you! Hi Peers, i have a Drop down list with 10 choices (skillset). users must choose one skillset and the corresponding level (beginer/intermediate/master). ( they have to do this 10 times for all the sillsets) what i want is : 1 - i need to show up only one record (dropdowanlist) with level then have a button to add new skill and level if required 2- then when they choose the 1st skill from the dropdown , this one will not show up on the 2nd choice dropdown. is it possible any help ? thanks guys |
|||||||