|
JavaScript - Textbox Onclick Manipulation
I have the following code for a textbox that is supposed to change itself to 20 if the entered value is over 20, to 1 if it's less than 1, and round itself to the nearest integer
Code: <input type="text" size="1" name="blevel" value="1" onchange='
document.unitselect.blevel.value++;
document.unitselect.blevel.value--;
document.unitselect.blevel.value = document.unitselect.blevel.value / 1
Math.floor(document.unitselect.blevel.value);
if(document.unitselect.blevel.value > 20){
document.unitselect.blevel.value = 20
}else if(document.unitselect.blevel.value < 1){
document.unitselect.blevel.value = 1
}
'>
The textbox is in a form named "unitselect". For some reason, it just ignores the Math.floor line. After experimenting for a bit, I found out that it was treating the textbox value as a string. I tried both using the increment/decrement operators and dividing it by 1. Although the operations executed properly, it still treated it as a string after the operations. Does anyone know what I can do to round this value? Similar TutorialsI'm trying to update a freemarker template to do the following. Currently, there is a text input area on the page defined as: <input id="ne-tags" type="text" name="tags" value="${tags!?html}" size="50" class="ne-form-textinput"/> All I'm trying to do is add a few different keywords at the top of the page. i.e.: <div onclick=""> add this text! </div> <div onclick=""> add more text! </div> When the user clicks on the keyword, it should append it to the text already in the text input area. I tried to write and call a function, write it directly into the onclick area etc, but nothing ever happens on the page. Seems very simple, but I haven't worked with JS in many years. Can anybody give me a quick sample of how to build this? hi there, im totally noob at this. my page has the following code: Code: <td><ul id="seatplan">
<li class="seat_01 A"><a href="javascript:seat()" id="01A">01A</a></li>
<li class="seat_01 B"><a href="javascript:seat()" id="01B">01B</a></li>
<li class="seat_01 C"><a href="javascript:seat()" id="01C">01C</a></li>
<form name="popupForm">You have Selected: <input type="text" id="seatid"></form>
as you can see, i need a javascript code that if the above links are clicked, its sends the link "id" to the <textbox id="seatid"> this is what i have so far Code: <script type="text/javascript">
function seat() {
document.getElementById('id').value = document.getElementById('seatid').value;}</script>
now i know i havent assigned any variable here or onclick function..but seriously need help in this! thanks to any replies and help!! Hi.. I have form and i want to input data using barcode and it will display on textbox and after input on the first textbox the focus will go to next textbox untill it will go on the last textbox and on the last textbox it will automatically save the data's on the database. How is it possible? here is my sample code: Code: <?php
error_reporting(0);
date_default_timezone_set("Asia/Singapore"); //set the time zone
$con = mysql_connect('localhost', 'root','');
if (!$con) {
echo 'failed';
die();
}
mysql_select_db("mes", $con);
?>
<html>
<head>
<script type="text/javascript">
function ini()
{
// Retrieve the code
var code =document.getElementById ("code_read_box1").value;
var code =document.getElementById ("code_read_box2").value;
var code =document.getElementById ("code_read_box3").value;
var code =document.getElementById ("code_read_box4").value;
var code =document.getElementById ("code_read_box5").value;
var code =document.getElementById ("code_read_box6").value;
// Return false to prevent the form to submit
return false;
}
</script>
</head>
<body onLoad="document.barcode.code_read_box1.focus()">
<form name=barcode onsubmit = "return ini()">
<input type="text" id="code_read_box1" value="" /><br/>
<input type="text" id="code_read_box2" value="" /><br/>
<input type="text" id="code_read_box3" value="" /><br/>
<input type="text" id="code_read_box4" value="" /><br/>
<input type="text" id="code_read_box5" value="" /><br/>
<input type="text" id="code_read_box6" value="" /><br/>
</form>
</body>
</html>
Hello. I've been teaching myself HTML and CSS for a while, and now I've moved into the world of Javascript (but I'm still very much a beginner). For practice, I've been building a sample sign up form for a mock website, and I'm having problems with the birthdate section. The idea I had was to have MM, DD, and YYYY be the default values of my 3 textboxes (as an example for users), then set the value to nothing when the box gained focus. That all works fine, but I ran into problems when I tried to write an if statement to set the value back to MM, DD, or YYYY if the value was still nothing when the user clicked away. As it is now it just replaces the text inputted into the textbox (which of course is not good). Any ideas for what the problem might be? Code: <form name="signup" action="javascript:void(0);" method="post">
<table>
<tr>
<td>Date Of Birth:</td>
<td>
<input name="DOBmonth" type="text" value="MM" size="2" style="color: #555555;" onFocus="clearDOBmonth()" onBlur="restoreDOBmonth()" />
<input name="DOBday" type="text" value="DD" size="2" style="color: #555555;" onFocus="clearDOBday()" />
<input name="DOByear" type="text" value="YYYY" size="4" style="color: #555555;" onFocus="clearDOByear()" /></td>
</tr>
<tr>
<td></td>
<td><button name="Submit" type="submit" style="font-size: 1em;">Sign Up</button></td>
</tr>
</table>
</form>
<script type="text/javascript" language="javascript">
<!--
document.signup.DOBmonth.value="MM";
document.signup.DOBday.value="DD";
document.signup.DOByear.value="YYYY";
function clearDOBmonth() { document.signup.DOBmonth.value="";}
function clearDOBday() { document.signup.DOBday.value="";}
function clearDOByear() { document.signup.DOByear.value="";}
function restoreDOBmonth()
{
if ('document.signup.DOBmonth.value = ""')
{
document.signup.DOBmonth.value = "MM";
// alert(document.signup.DOBmonth.value);
}
}
//-->
</script>
Another side question, if I set a variable equal to the value of a textbox, then change the value of the variable, does that also change the value of the textbox? or is the variable no longer associated with the textbox. Example: Code: var a = document.form.textbox.value; a = blue; does document.form.textbox.value = blue? or is var a now completely independent of the textbox value? Thanks! Hi i was wondering if anyone might be able to help me here as i hve an idea but not quite sure how to impliment it. I want to be able to create 2 Divs, 1 for my navigation button and a second for an image to be placed in. i ant to be able to have the 2nd div move position to underneath Div 1 when i hover over the navigaton(div 1). Ive attached a link to a diagram of what i mean Any help would be very much apreciated http://spark-box.co.uk/images/ideaz.jpg Hi I have a given url and want to back up a level. So for example if start with: url = "test/level1/level2/level3/" I would like to it remove the "level3/" to become url="test/level1/level2/" I have created a simple webpage that allows users to search multiple comparison shopping sites at once. This is just a side project that I am working on. At the current time, the webpage has the sites listed with checkboxes. The user can put in a search term in the box and then select which sites they want to search. The sites then open in a new window or on different tabs depending on which browser they are using. What I would like to do is find out if there is a way to have the same thing, but the sites open in the same window below the search box, like in tabbed frames. I tried doing something with the tabbed viewer script from dynamic drive: http://www.dynamicdrive.com/dynamici...bdocviewer.htm, but was unable to figure out how to get the search parameter into the url. My page can be found at http://www.imarkinteractive.com/tools/onesearch.html and all of the javascript is on the page. Does anyone know if this can be accomplished and if so, how would I go about doing it. I can run a php script on my server if that would be easier, but I would really appreciate the assistance. Thanks. Greetings. It has been a long while since I have needed to code and a lot has changed. I am looking for resources on how to use JavaScript to When a button is pressed it moves the playhead of a single video to an assigned frame or timestamp in the video and begin playing. Then when the playhead reaches its destination it stops. I have done this in Flash before using AS1 and simple keyframe based commands and buttons for goToandPlay and stop. Is there any good reading to be had on the interwebs on this topic? Thanks in advance!! Hello, I am trying to get an image to change based on a date range within an array, then display that image on a webpage, if there is no corresponding date, then display a default image. I have NEVER coded in JavaScript and need some assistance with this. Here is the array example: Code: var holiday = new Array() holiday[0] = "images/bronc.jpg" holiday[1] = "0210, 0214, images/Valentines_Pic.jpg" holiday[2] = "0317, 0317, images/St-Patrics_Day.jpg" holiday[3] = "0701, 0704, images/4th_Of_July.jpg" holiday[4] = "1015, 1031, images/Halloween.jpg" holiday[5] = "1111, 1130, images/Thanks_Giving.jpg" holiday[6] = "1201, 1227, images/Christmas.jpg" holiday[7] = "9999, 9999, images/New_Years_Pic.jpg" holiday[0] would be the default image that would display if no other images fall in the date range at the begining of each array element. Then something like get date alter date to be mmdd if date >= firstarraydate and date <= secondarraydate then set image to ********.jpg else set image to *******.jpg loop then in the body display the correct image <p><img src="image" /></p> Or something simple like that. I have searched and cannot find anything simple like that. I have tried a few available scripts for rotating banners but they always either do not work at all or they use one specific date or time and since I am not too swift with javascript, any help would be greatly appreiated. Thanks Kel Hi, I'm looking for some help, or perhaps an explaination in regards to "click & rotate" an image using your cursor with Javascript. I've seen this a couple of times on various websites and I'm wondering how difficult/expensive it is to develop such an image. I own a clothing company and what I'm looking to do is to create images on my website of a product in which the customer can click on and "rotate" to see a 360 degree view of the product. Think autocad to a degree... Is Javascript the best language to pursue for this function? I'm quite new to this department, so any help/advice is greatly appreciated. I code through Greasemonkey using Firebug on Firefox. I'm trying to write my first script using a simple function to change the appearance of my email address in Gmail. My current email address is formatted like this example: Code: firstlast@gmail.com I want the script to manipulate the text to resemble this: Code: first.last@gmail.com I've posted my script below. The Mozilla error console shows no syntax errors or warnings. JavaScript IS allowed to run and there are no restrictions of any kind that should hinder this script's ability to run. What am I doing wrong in the code? Any help would be greatly appreciated! Code: (function () {
var loadOldName = window.document.body.getElementById('loading').getElementsByClassName('msg').textContent('\nLoading+ firstlast@gmail.com…\n');
var topLeftName = window.document.getElementsByClassName('cP').getElementsByClassName('bB').getElementsByTag('u').innerHTML('<b>firstlast@gmail.com</b>');
var topLeftDrop = window.document.getElementsByClassName('cP').getElementsByClassName('J-N-Jz').innerHTML('<span class="Qu L4">firstlast@gmail.com (default)</span>');
function changeName() {
if(loadOldName) {
window.document.body.getElementById('loading').getElementsByClassName('msg').removeChild(textContent('\nLoading+ firstlast@gmail.com…\n')).appendChild(textContent('\nLoading+ first.last@gmail.com…\n'));
};
if(topLeftName) {
window.document.getElementsByClassName('cP').getElementsByClassName('bB').getElementsByTag('u').removeChild(innerHTML('<b>firstlast@gmail.com</b>')).appendChild(innerHTML('<b>first.last@gmail.com</b>'));
};
if(topLeftDrop) {
window.document.getElementsByClassName('cP').getElementsByClassName('J-N-Jz').removeChild(innerHTML('<span class="Qu L4">firstlast@gmail.com (default)</span>')).appendChild(innerHTML('<span class="Qu L4">first.last@gmail.com (default)</span>'));
};
};
changeName();
});
I have tried to manipulate attributes in a specific class & am successful by using jquery. Now for the purpose of learning I want coders to look at my simple snippet & tell me how can I use functions namely getElementsByTagName & For loop instead of each. http://jsfiddle.net/defencedog/Zz7cX/ [My snippet adds 'fullscreen' functionality to youtube vids, which unfortunately isn't present in default phpBB3 forum engine] regards;; Hello everyone, I am trying to make a canvas element display an image with some text on using canvas.drawImage and canvas.fillText. Only problem is my code is generating a very odd and hard to debug error. Thanks in advance, Alex Code(JS): Code: function runstuff() {
canvasthing = document.getElementById('1');
context = canvasthing.getContext('2d');
purple = new Image();
purple.src = 'img/buttonpurple.png';
purple.onload = function() {
context.drawImage('purple', 0, 0);
};
context.font = '16px Vani';
context.textBaseline = 'top';
context.fillText('Test', 26, 24);
}
Code(html): Code: <!doctype html> <html lang="en"> <head> <title>POB.G</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="script.js"> </script> </head> <body onload="runstuff()"> <canvas id="1" width="127" height="128"></canvas> </body> </html> Error: Code: Error: uncaught exception: [Exception... "Could not convert JavaScript argument arg 0 [nsIDOMCanvasRenderingContext2D.drawImage]" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: file:///C:/Users/*BlahBlahBlah/script.js :: <TOP_LEVEL> :: line 7" data: no] Ok, first off I would like to say hi to everyone as this is my first post! Now that we have been introduced, here is my problem. I am trying to create a billing system in which you generate invoices. The way I am going about this is using a table with rows for each item the user is placing on the invoice. I have a script that adds new rows to the table when the user wants to place more than one item on the invoice, thats all fine and dandy. The problem is that I also want to be able to delete any row of the table at any time so that the user can remove items as well. When the user presses the attached "delete" button on the row they wish to remove the delete script gets the table length and changes the id and name of every item in the rows below the one being deleted so that when I submit the data as a form it will have a predictable pattern for getting the post variables. At the moment the script runs fine the first time and does exactly what it is supposed to. The issue is that the second time you run it after it has changed the id and name values for the delete button elements on the lower rows it only makes it to the first alert() call! I have been pulling my hair out for days!!!!! Here is the Code: Code: function getEl(element)
{
var object = null;
if (document.layers)
{
object = document.layers[element];
}
else if (document.all)
{
object = document.all[element];
}
else if (document.getElementById)
{
object = document.getElementById(element);
}
return object;
}
function addRow()
{
var tbl = getEl('invTbl');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
var cellqty = row.insertCell(0);
var qty = document.createElement("<input type='text' name='qty_"+iteration+"' id='qty_"+iteration+"' size='4' value='1' onChange='javascript:updatePrice();' />");
cellqty.appendChild(qty);
var cellitm = row.insertCell(1);
var itm = document.createElement('input');
itm.type = 'text';
itm.name = 'itm_' + iteration;
itm.id = 'itm_' + iteration;
itm.size = 30;
cellitm.appendChild(itm);
var celldsc = row.insertCell(2);
var dsc = document.createElement('input');
dsc.type = 'text';
dsc.name = 'dsc_' + iteration;
dsc.id = 'dsc_' + iteration;
dsc.size = 50;
dsc.value = iteration;
celldsc.appendChild(dsc);
var cellprc = row.insertCell(3);
var prc = document.createElement("<input type='text' name='prc_"+iteration+"' id='prc_"+iteration+"' size='9' value='1.00' onChange='javascript:updatePrice();' />");
cellprc.appendChild(prc);
var celldel = row.insertCell(4);
var del = document.createElement("<input type='button' name='"+iteration+"' id='"+iteration+"' value='Delete' onClick='javascript:removeRow(this.id);' />");
celldel.appendChild(del);
}
function removeRow(row)
{
alert("you are deleting row " + parseInt(row));
tbl = getEl('invTbl');
rowTotal = tbl.rows.length;
alert("there are " + rowTotal + " rows!");
tbl.deleteRow(parseInt(row));
for ( i = 1; i < rowTotal; i++ )
{
if ( i > parseInt(row) )
{
place = i - 1;
alert(i + " becomes " + place);
qtycontainer = "qty_" + i;
itmcontainer = "itm_" + i;
dsccontainer = "dsc_" + i;
prccontainer = "prc_" + i;
delcontainer = i.toString();
buttonchange = place.toString();
getEl(qtycontainer).name = 'qty_' + place;
getEl(qtycontainer).id = 'qty_' + place;
getEl(itmcontainer).name = 'itm_' + place;
getEl(itmcontainer).id = 'itm_' + place;
getEl(dsccontainer).name = 'dsc_' + place;
getEl(dsccontainer).id = 'dsc_' + place;
getEl('dsc_'+place).value = getEl('dsc_'+place).id;
getEl(prccontainer).name = 'prc_' + place;
getEl(prccontainer).id = 'prc_' + place;
getEl(delcontainer).name = buttonchange;
getEl(delcontainer).id = buttonchange;
alert("del button changed to " + getEl(i).id);
}
}
// updatePrice();
}
The button element for each row calls javascript:removeRow(this.id); Please help me figure out what I am doing wrong! I'm currently working on a project and I am doing a bunch of image switching. I'm having a problem with the following... I have seven medium image objects and one small one. One is at the top and the other 7 are below. When one of the 7 is clicked, it then becomes the one up top and the one up top then takes the place of the image clicked. This needs to be able to happen no matter which of the seven i click. Also when you click one of the seven it runs a script to change 9 other images in the center of the page. this isnt too important because i have it working already. What i have is, each of the seven images run their function that changes the 9 center images and then it runs another function. What i need is for that function to determine which company for example(shaws, lowes, target) the top image belongs to and replace the image that was clicked with the top one. But i also need to replace the NAME="" and ONCLICK="function()" with the proper ones for the original company up top. Please if you can understand what im trying to do let me know, if you need further clarification i can do so. i can draw a picture of what im trying to do or the layout if needed but i cant necessarily show anyone the project due to a non-disclosure. Is it possible disable an onclick after clicking it and then enable it from another onclick by id Code: <img id="one" href="images/homepage/sliders/bonus_button.jpg" style="position:relative; top:30px; left:50px; height:30px; width:70px; float:left;"> This code runs when it is clicked: Code: $("#one").click(function() {
runEffectB();
return false;
});
What I would like to happen is for either runEffectB() to not run if it was just run or to disable the #one.click once it has run. I am assuming I will be able to re-enable it from another onclick running a similar function. This is jquery and jquery ui if that helps. Any ideas much appreciated. Hi, i got a textbox with a submit button but when submit button is clicked it works but it reloads the page. is possible to submit without reload the page? thanks My code is not validating the textboxes..if someone could help me figure this out. Thank you <script type="text/javascript"> function validate() { with (document.form1) { var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; var alertMessage = "The following fields\nare REQUIRED:\n\n"; if (realname.value == "") { alertMessage += "Name\n" } if(reg.test(email.value) == "") { alertMessage += "Email\n" } if (phone.value == "") { alertMessage += "Phone\n" } if (security_code.value == "") { alertMessage += "Security Code\n" } if (alertMessage != "The following fields\nare REQUIRED:\n\n") { alert(alertMessage); return (false);} return (true) } } </script> <form action="formmail.php" method="post" enctype="multipart/form-data" name="form1" id="form1" onsubmit="return validate()" > Reply With Quote 01-31-2015, 09:12 AM #2 Philip M View Profile View Forum Posts Supreme Master coder! Join Date Jun 2002 Location London, England Posts 18,371 Thanks 204 Thanked 2,573 Times in 2,551 Posts Have you tried using your error console (F12 key)? if(reg.test(email.value) == "") { should be if(!reg.test(email.value) { as test returns true or false. But form validation of the pattern if (document.formname.formfield.value == "") - that is blank or empty- is barely worthy of the name, and virtually useless, as even a single space, an X or a ? will return false, that is pass the validation. A proper name may only contain letters, hyphen, space and apostrophe. Numeric values, such as zip codes, phone numbers and dates, should be validated as such. Ditto email addresses (as you have done). This topic has been covered many times before in this forum. The use of with is strongly deprecated and is forbidden in strict mode, and alerts are long obsolete as a way of displaying a message to your users. And so is assigning a name to a form - it is allowed only for the sake of backwards compatibility. In short - you should rewrite your code to modern standards. I would like to type something into my textbox and then press ENTER, it will execute a function. I tried onFocus, onChange and onBlur but it doesn't do what I want it to. Here's an example I use for onChange. Code: Application: <input type="text" onchange="execProg(0);"> Any comments or suggestions is greatly |
|||||||