|
JavaScript - Is Input Type=image A Form's Element?
In fact: does input type=image belong to the form's elements collection, in ECMAScript ? It looks like not.
When traversing the form's elements collection with classical javascript (document.forms[formname].elements), an input type="image" is not included. Is this an inheritance from old browsers interpretors? Does anyone know the reason for this omission? Similar TutorialsHate 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! I need to change input type="text" to input type="password" via JavaScript Code: <form id="login" action="#" method="post"> <input id="username-field" type="text" name="username" title="Username" onmousedown="javascript:this.value=''; javascript:this.focus();" value="Username" tabindex="1" /> <input id="password-field" type="text" name="password" title="Password" onmousedown="javascript:this.value=''; javascript:this.type='password'; javascript:this.focus();" value="Password" tabindex="2" /> <input type="submit" name="submit" value="sign in" tabindex="3" /> </form> This works in Firefox and Safari but not IE So then I tried this code Code: <script type="text/javascript">
function passit(ip){
var np=ip.cloneNode(true);
np.type='password';
if(np.value!=ip.value)
np.value=ip.value;
ip.parentNode.replaceChild(np,ip);
}
</script>
<form id="login" action="#" method="post">
<input id="username-field" type="text" name="username" title="Username" onmousedown="javascript:this.value=''; javascript:this.focus();" value="Username" tabindex="1" />
<input id="password-field" type="text" name="password" title="Password" onmousedown="javascript:this.value=''; passit(this.form[0]); javascript:this.focus();" value="Password" tabindex="2" />
<input type="submit" name="submit" value="sign in" tabindex="3" />
</form>
This does what I need but turns the username type to password field not the password box Please can somone help! This was climbing up the tree strructure, where on top and only on very top is one input of type text Now I inserted (inside tree) some inputs of type hidden , which needs to be ignored while below while operates. How to do that ? Getting nowhere with this. Code: function doit(tmpObj)
{
while (!tmpObj.getElementsByTagName('input')[0])
{
tmpObj.style.visibility = 'hidden';
tmpObj = tmpObj.parentNode;
}
...
I am trying to add a pulldown menu with a button to my website. I have successfully done this with a javascript I found online here to give credit: http://www.blazonry.com/javascript/js_menu.php I tried to modify the form so it will use an image file instead of the default button. To troubleshoot I took the relevant code and put into a seperate html file. This one is using the default code from the site referenced above. This is the page published online: http://www.keylimecomputerservice.com/test/default.html Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<SCRIPT LANGUAGE="JavaScript"><!--
function openURL()
{
// grab index number of the selected option
selInd = document.theForm.aaa.selectedIndex;
// get value of the selected option
goURL = document.theForm.aaa.options[selInd].value;
// redirect browser to the grabbed value (here a URL)
top.location.href = goURL;
}
//-->
</SCRIPT>
</head>
<body>
<TABLE SPAN="3" BORDER=1 CELLSPACING=0 CELLPADDING=0 align="center" WIDTH="60%">
<TR>
<TD WIDTH="33%">
<center><font color="black">Choose a connection</font></center><br>
<form name="theForm"> <tt>
<center>
<select name="aaa" size="1">
<option selected value="#"> ---------- </option>
<option value="/remote/connect1.exe">Connection 1</option>
<option value="/remote/connect2.exe">Connection 2</option>
<option value="/remote/connect3.exe">Connection 3</option>
<option value="/remote/connect4.exe">Connection 4</option>
<option value="/remote/connect5.exe">Connection 5</option>
<option value="/remote/connect6.exe">Connection 6</option>
<option value="/remote/connect7.exe">Connection 7</option>
<option value="/remote/connect8.exe">Connection 8</option>
</select>
</center>
</TD>
<TD WIDTH="33%">
<input type="button" value=" GO " onClick="openURL()"> </tt>
</form>
</TD>
<TD WIDTH="33%">
</TD>
</TR>
</TABLE>
</body>
I then tried to change the form to use an image instead of the default button. Obviously I didn't do it right. THIS ONE DOES NOT WORK. When you choose a menu item and then click the image, it just refreshes the page. Published page: http://www.keylimecomputerservice.co.../modified.html This is the modified code.: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<SCRIPT LANGUAGE="JavaScript"><!--
function openURL()
{
// grab index number of the selected option
selInd = document.theForm.aaa.selectedIndex;
// get value of the selected option
goURL = document.theForm.aaa.options[selInd].value;
// redirect browser to the grabbed value (here a URL)
top.location.href = goURL;
}
//-->
</SCRIPT>
</head>
<body>
<TABLE SPAN="3" BORDER=1 CELLSPACING=0 CELLPADDING=0 align="center">
<TR>
<TD WIDTH="33%">
<center><font color="black">Choose a connection</font></center><br>
<form name="theForm"> <tt>
<center>
<select name="aaa" size="1">
<option selected value="#"> ---------- </option>
<option value="/remote/connect1.exe">Connection 1</option>
<option value="/remote/connect2.exe">Connection 2</option>
<option value="/remote/connect3.exe">Connection 3</option>
<option value="/remote/connect4.exe">Connection 4</option>
<option value="/remote/connect5.exe">Connection 5</option>
<option value="/remote/connect6.exe">Connection 6</option>
<option value="/remote/connect7.exe">Connection 7</option>
<option value="/remote/connect8.exe">Connection 8</option>
</select>
</center>
</TD>
<TD WIDTH="33%">
<input type="image" src="connectbutton.jpg" onClick="openURL()"> </tt>
</form>
</TD>
<TD WIDTH="33%">
</TD>
</TR>
</TABLE>
</body>
Any and all help is appreciated. Runout74 Newbie here. I could not find the syntax how to set initial value he Code: var indat = window.clipboardData.getData ("Text");
.
.
.
.
.
<input type="text" name="q" value="xxxxxx" size="40" />
I would like the value to be the indat var value I saw lot of samples with value="xxxxx" (hard coded value) but could not find sample for var value thanks for help !! I have an input element of type=text. It has a fixed width, but I want to expand that width as the user is typing if the text doesn't fit inside. I did something similar to this with <textarea> and the vertical height. PHP Code: // javascript in mootools textarea.addEvent('keyup', function(){ textarea.setStyle('height', this.getScrollSize().y ); }); Does anyone know of a way to do this with <input type='text'>? Howdy I have a <input type="File"> in my html, I need it because the user can select a jpg image and when they click submit it will post that image to a webservice. My question... Is their a way to load the file they selected so that I can draw it on a canvas? Sounds simple but I cannot figure it out! Thanks in advance Eckythump <script type="text/javascript"> function showhide(divid) { thediv = document.getElementById(divid); if(thediv.style.display == 'none' || thediv.checked=='true' ){ thediv.style.display='block' }else{ thediv.style.display='none' } } </script> This part its working: <input type=checkbox name=type value='1' onclick="return showhide('div1');">Submit - 1 <input type=checkbox name=type value='2' onclick="return showhide('div2');">Submit - 2 This part its not working <input type=checkbox name=type value='1' checked="checked" onclick="return showhide('div1');">Submit - 1 <input type=checkbox name=type value='2' onclick="return showhide('div2');">Submit - 2 how i can make if its already check input value 1 to show div1 but if i remove the checked to dont show anymore div1 thanks Below is a script I found at http://bytes.com/topic/javascript/an...cookie-problem The idea is a like button, like on fb, in a form which updates a db field I can use to display the number of likes, and my goal is to disable the like button for the rest of the session, or a day, or whatever. This script disables it onclick, the problem is I can't figure out how to get it to submit the form as well. I have found it does submit if the input type is 'submit', but then it doesn't call the disable function. I tried writing another function to submit the form but no go. Code: <html>
<head>
<title>Vote Button</title>
<script type="text/javascript">
function checkForVote()
{
// If there is a cookie...
if(document.cookie != "")
{
if(getCookie("voted") == 1)
{
// Disable the button again if user already voted.
disableButton();
}
}
}
function disableButton()
{
var submitvote = document.getElementById("submitvote");
submitvote.disabled = true;
submitvote.value = "You Already Voted.";
}
function setCookie(name, value, days)
{
if(days)
{
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires = " + date.toGMTString();
}
else
{
var expires = "";
}
document.cookie = name + "=" + value + expires + "; path=/";
// Disable the button as soon as the user clicks it.
disableButton();
}
function getCookie(name)
{
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0; i < ca.length; i++)
{
var c = ca[i];
while (c.charAt(0)==' ')
{
c = c.substring(1,c.length);
}
if (c.indexOf(nameEQ) == 0)
{
return c.substring(nameEQ.length,c.length);
}
}
return null;
}
</script>
</head>
<body>
<form name="voteform" id="voteform" action="foo.php" method="post">
<input type="button" name="submitvote" id="submitvote" onclick="setCookie('voted', 1, -1);" value="Submit Vote"/>
</form>
</body>
<script type="text/javascript">
// Run checkForVote() at end of document so that form and contents can be referenced
window.onload = checkForVote();
</script>
</html>
Hello all, I have in my application input type file for uploading files. How can i do javascript validation to check if filename has special characters in it?? Thanks I have a page with a customizable background. The user can choose a picture to set as the background by finding the picture file they want after clicking the upload input. The path of the file they select is saved into a cookie, and the page then switches backgrounds. This all works perfectly, but the value that the upload input returns is only the file name, not the full path. For example, let's say I wanted to choose a picture named "bg.jpg" in the "Windows" folder of the C drive. The full path would be "C:/Windows/bg.jpg". However, the value that the input returns is just "bg.jpg". How would I have the input return the entire path of the file using JavaScript? This has been bothering me for a while...any help would be much appreciated. hi guyz i do have a problem in passing javascript variable to <input type=hidden value=""> here's my code: <?php while ($row = mysql_fetch_array($result)) { ?> <script type="text/javascript"> function viewcodec(){ var randomValueCodec = randomString(5, 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'); document.getElementById('commentMarkCodeCompCodec-'+<?php echo $row['p_id'];?>).innerHTML = randomValueCodec; document.getElementById('commentMarkCodeComp-'+<?php echo $row['p_id'];?>).innerHTML = randomValueCodec; } </script> <form action="" method="post" name="postsForms"> <div class="commentBox" align="right" id="commentBox-<?php echo $row['p_id'];?>" <?php echo (($comment_num_row) ? '' :'style="display:none"')?>> <input type=text id="commentMarkname-<?php echo $row['p_id'];?>" name="commentmarkname" class="commentMarkname" size="35" maxlength="20"> <textarea class="commentMark" id="commentMark-<?php echo $row['p_id'];?>" name="commentmark" cols="60"></textarea> <input type=text id="commentMarkcode-<?php echo $row['p_id'];?>" name="commentmarkcode" class="commentMarkcode" size="35" maxlength="20"> <br clear="all" /> <span id='commentMarkCodeCompCodec-<?php echo $row['p_id'];?>'><b><script type="text/javascript">viewcodec();</script></b></span> <input type="hidden" id="commentMarkCodeComp-<?php echo $row['p_id'];?>" name="commentMarkCodeComp" value=""> <br clear="all" /> <br clear="all" /> <a id="SubmitComment" style="float:right" class="small button comment"> Comment</a> </div> </form> <?php } ?> Hi guys, Let me explain simply what I do and what I'm trying to achieve: I got a couple of comboboxes were the user selects a series of numbers. Once a selection is made, the value is appended to an input box. The idea is that the appended values form a telephone number, or at least part of one, that will then be used to search trough a database to look for a matching number. The code below is what I have done so far: Code: <script type="text/javascript">
function displayIndicatif(){
var sel = document.getElementById("indicatif");
var text = sel.options[sel.selectedIndex].value;
var out = document.getElementById("blabla");
out.value += text+"\n";
}
function displayBloc(){
var sel1 = document.getElementById("bloc");
var text1 = sel1.options[sel1.selectedIndex].value;
var out1 = document.getElementById("blabla");
out1.value += text1+"\n";
}
</script>
[...]
<input type="text" id="blabla"/>
[..]
<select id="indicatif" onChange="displayIndicatif();">
<option value="021">021</option>
<option value="022">022</option>
<option value="031">031</option>
</select>
<select id="bloc" onChange="displayBloc();">
<option value="555" class="021">555</option>
<option value="666" class="021">666</option>
<option value="777" class="021">777</option>
</select>
Basically what happens now is this: combobox indicatif: 021 | 022 | 031 combobox bloc: 555 | 666 | 777 If I select "021" from indicatif, the script will append 021 to the input "blabla". The problem is, if I now select "022", the input will show "021022" instead of replacing the 021 with 022. What I would like is that, for each combobox, the script replaces the selected value with the new one instead of simply appending it, like instead of say 021022555666 it would show 021555 or 022666 or 021666 depending on what is selected...you get the idea? Is this doable? Needless to say I'm a total noob at javascript...I adapted the code I got now from some other guy who was trying to achieve almost the same thing and adapted it to my needs, or least, tried to, but now I'm stuck. Any help is appreciated! Thanks Javascript (inside a function that everything works except this bit): Code: var uploadedfile = "upload" + ups; document.getElementById(uploadedfile).value= file; The input element its not changing: Code: <input type="text" name="upload[]" id="upload1"/> There are four additional input elements, one for each possible fileupload, they will be set to hidden but in order to see if it was submitting the name I set it to text. Here is the live page so you can see it: http://www.sandcrawler.net/forum/sandnet.php?page=test2 What this is for is an upload script, I have all the upload bit working, but now I need to find a way to pass the filename to my php script, that will then sort the files out into two types, screenshot and compressed. Then insert them into a mysql database. I've gotten this same type of thing to work on a w3school TryIt demo, with the variables set the same way. So I can't figure out where there is an error. Opera isn't giving me one. I can post more code if needed. Thanks print "<Font face=\"calibri, Arial\"><table id=\"rnatable\" border=2px width=100%>"; print "<th></th>"; print "<th>a</th>"; print "<th>b</th>"; print "<th>c</th>"; print "<th>d</th>"; print "<th>e</th>"; print "<th>f</th>"; print "<th>g</th>"; while($array = mysql_fetch_array($sql_query)) { $id=$array['a']; print "<tr id=\"newtr\">"; print "<td><input id=\"check\" type=\"checkbox\" name=\"keyword[]\" value=\"$id\" ></td>"; print "<td>".$array['a']."</td>"; print "<td>".$array['b']."</td>"; print "<td>".$array['c']."</td>"; print "<td>".$array['d']."</td>"; print "<td>".$array['e']."</td>"; print "<td>".$array['f']."</td>"; print "<td> <a href=\"http://localhost/rnasearch/retrieve.php?a=$id\">bla</a> </td></tr></font>"; } print "</table>"; } this is part of a php searchengine script that i wrote to retrieve data from a database and as you can see the last column that is g contains a link which when clicked takes the user to the second php script which retrieves additional information of that entry, but this is done for only single entries so as you can see i introduced checkboxes so that the user can check any number of checkboxes and retrieve information as per their wish now to do this i created a <input type=text where i want the value of these checkboxes i.e. $id to be posted in a delimited format so that the user can then click the corresponding button and retrieve the information this is the code <div id="floatMenu"> <ul class="menu1"> <center><li><form name="senddata" method="POST" action="http://localhost/retrieve.php" style="display:inline;"><input id="fasta" type="text" class="multitext"><input name="Fasta" type="Submit" value="Retrieve Fasta"></form> this is a css floating menu....so far so good....everything went fine.... after this i had to write a javascript to do this and i've been stuck there searching forums for the last 4 days! this is the javascript i found from somewhere which came close to doing wht i wanted it to do window.onload = function () { var cb = document.getElementById('check'); var fasta = document.getElementById('fasta'); cb.onclick = function () {fasta.value = cb.value + ","; };}; this script only sends the value of the first checkbox in the table, the others are not found by it, mind you its not the first checkbox selected its the first checkbox that is present in the table how can i resolve this problem so that even if i have n number of checkboxes in my table, if the user chooses to do so they can retrieve n number of information....please help i've almost lost hope in this! I have an idea for a little script.....I'm just stuck on one little part: When a user changes the value in a input or textarea box, I want it to change the value of a certain hidden input tag too. Here's what I have so far: function getNewValue(inputhidden, textinput) { var data = document.getElementById(inputhidden); var text = document.getElementById(textinput); data.value = text.value; } <input type= "text" name= "name" id= "name" onChange="getNewValue('detail', 'name')"> <input type= "hidden" name= "detail" id="detail" value= ""> However, this is not working and I'm not sure why I am thinking this should be fairly easy but yet I am not getting far. I want to have a form with a single text imput field for a zip code. Depending on which zip code the user enters will determine which url they will be sent to. If they enter a zip code which is not in the script, they would be sent to a default url. I am also assuming this can be accomplished with javascript. Any help is greatly appreciated. Hi, i want to set an input value to the same value as the input selected from another input on the same form so when the user selects input 1 i want the hidden input2 to get the same value im guessing i use onsubmit because its hidden so there wont be a focus or blur this would be part of the input Code: onsubmit="(this.value = this.othervalue)" othervalue being the other input name="othervalue" is that the correct syntax I am wanting to enable a file to be uploaded and attached to an email form. I however wish to only limit this to picture files with a size no larger than 1MB. Is there a way to do this with javaScript. My Html code: Code: <!-- Add a picture file --> <tr><td align="left">Upload your favourite Yorkie photo for the Picture of the Month.<br /> <input type="file" name="upload" accept="image/gif" size="30" style="margin-left: 15px; margin-top:5px; color: #0000; background-color: #00FF77;" /></td></tr> Just need to know if this can be validated with javascript to ensure the conditions are as per above. I am trying to have it so that when someone choose a value from the select box, it then displays it in the html. The problem is im not very good with javascript, and my error keeps coming up as undefined where as before it was coming up as "[object HTMLSelectElement]". Can anyone tell me whats up? PHP Code: <html> <head> <script type="text/javascript"> function moveValue() { var no=document.getElementById("no"); var option=no.options[no.selectedIndex].numberr; document.getElementById('numberr').innerHTML = option; } </script> </head> <body> <form> Select numbers:<br /> <select id="no"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> </select> <input type="button" onclick="moveValue()" value="-->"> <i id="numberr">Testing</i> </form> </body> </html> and now that i look at it, i suspect that the reason that it is not working is that i should have "ID"'s or value's on each of the options but i do not know for certain |
|||||||