Jump to content

Search the Community

Showing results for tags 'input'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH


  • Community Calendar




Website URL








Found 29 results

  1. Changing the place of input and label

    The html code is this : <div class="form-group"> <label class="col-sm-4 control-label">Checkbox inputs</label> <div class="col-sm-8"> <div class="checkbox check-transparent"> <input type="checkbox" value="1" id="opt01" checked> <label for="opt01">Option 1</label> </div> <div class="checkbox check-transparent"> <input type="checkbox" value="1" id="opt02"> <label for="opt02">Option 2</label> </div> <div class="checkbox check-transparent"> <input type="checkbox" value="1" id="opt03"> <label for="opt03">Option 3</label> </div> </div> </div> I attached the results photo : I want to change the place of checkbox and label I mean I want first be label and then checkbox. It had bootstrap too I uploaded the bootstrap files too : https://www.dropbox.com/s/kc8ytkkd5dxcmc1/assets.zip?dl=0 Who can say that how can I change the place of checkbox and label I will be thank.
  2. Contact Form 7 styling

    This is my page, where i have 2 contact forms, i need to fix the one in the bottom: http://ciudadcapital.agencialosnavegantes.cl/contacto/ I want the input-type file to have a black background, so i do this: div.wpcf7 input[type="file"] { cursor: pointer; padding-bottom: 50px; background-color: #0000 !important; } But it doesn't work, it's still white. Is something missing?
  3. The syntax <input type="file"> is used to create a file open button and dialog box. What can I use to create a file save dialog box? Using HTML5, CSS3, and JavaScript (no libraries). Thank you
  4. What is the best way to delete empty input fields, should I use php or javascript or another language? In the script the user can fill 3 or 5 input fields in the browser by html. The data will be stored in the database. But empty fields shouldnt be stored. Finally I also want to stop other crappy input, like mistakes etc. Im not sure which language is used for this matter. Is it possible to use php or is javascript better? My first focus is deleting empty input fields.
  5. onpaste raises error

    I am using the onpaste even in an <input> tag. According to the W3 website, this is a valid tag. (http://www.w3schools.com/jsref/event_onpaste.asp) Yet when I pass the html through the W3 html validator, I receive this error: ================ Line 287, Column 26: there is no attribute "onpaste" onpaste="return false;" ✉ You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead). This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information. How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash. ================= This is the <input> tag: ================= <p>Uw e-mailadres herhalen</p> <p><input class="tekstopmaak" type="text" name="contactmailadresHerhalen" id="contactmailadresHerhalen" size="40" maxlength="50"onpaste="return false;"onblur="validateContactMailadresHeralen('contactMailadresHerhalen');" value="" /></p> =================== This is the page's heading: =================== <!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" /> =================== In spite of the error, it works as expected, but why does the validator produce the error on a W3 documented event? Thanks for your help, Andynic
  6. Hi, I was looking for a topic related to customizing an input type="date" to only select days from weeks, but I could not find something related to it. Could you please help me with this one ? Thanks. PD: I did this with JS, but I don't know if it is possible to set it directly in the input tag.
  7. Dynamically change video SRC path and file

    Warning: Noob alert. I was a complete noob 8 or 10 years ago and could fumble my way around Javascript, but I haven't touched it since. It's coming back to me, but slowly I have a web page where I play a video. Everything is working fine (with lots of snippets taken from this site). Below is both a sampling of the HTML and Javascript code used. At the bottom of this post I've pasted the contents of the whole page in case it is helpful. Body Snippet: <div> <video id="video"> <source src="myfile.mp4" type="video/mp4"> <!--I WANT THE PAGE USER TO BE ABLE TO CHANGE THE SRC FILE--> Your browser does not support HTML5 video. </video></div> Script Snippet: var vvid = document.getElementById("video"); function playPause() { if (vvid.paused) vvid.play(); else vvid.pause();}//...and lots, lots, more video control functions. However, I want to allow a user to change the video file being played. I would be nice for them to be able to click on a button that opens the file dialog where they would navigate to and select the video to be played. But if that's too complicated to implement then just placing the path and file name in an input text box for submission &/or reading by the script is fine too. I don't have need to implement playlists or anything fancy. This is for my where the page and files are on a local machine and XAMPP is being used as the server. I can do it with loading the text blob, but I've tried for hours and just can't figure out how to allow the user to select the video source (src). I'd be very appreciative if someone would show me how to do it. Thanks in advance, Andrew CODE FOR THE WHOLE PAGE, IN CASE IT IS HELPFUL: <!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 content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>Video Viewer</title><style>#title { font-family:Arial, Helvetica, sans-serif; font-size:xx-large; font-weight:bold; color:black; text-align:center;}#video { margin-top: 10px; margin-bottom: 2px; background: gray; background-position: center;}#speeds { width: 40px; margin-bottom:10px; font-size: xx-large; background: #808080; background-position:center; border:medium; border-color:black; border-style:solid; font-weight: bold; font-family: Arial, sans-serif;}/* STYLES FOR THE TEXT BLOBS */ #byte_content { margin: 5px 5px; max-height: 300px; overflow-y: auto; overflow-x: hidden; } #byte_range { margin-top: 5px; }/* END OF STYLES FOR THE TEXT BLOBS */</style></head><body onload="pageLoad()"> <div id="title">Video Viewer</div> <table cellpadding="0" cellspacing="0" align="center"> <tr align="center"> <td> <div style="text-align:center"> <button onclick="playPause()">Play/Pause</button> <button onclick="muteUnmute()" type="button">Mute/Unmute</button> <br/> <button onclick="size50()">Smallest</button> <button onclick="size75()">Smaller</button> <button onclick="size100()">Normal</button> <button onclick="size150()">Larger</button> <button onclick="size200()">Largest</button> <br/> Playback Speeds: <button onclick="speed10()">10%</button> <button onclick="speed25()">25%</button> <button onclick="speed50()">50%</button> <button onclick="speed75()">75%</button> <button onclick="speed100()">100%</button> <button onclick="speed125()">125%</button> <button onclick="speed150()">150%</button> <button onclick="speed175()">175%</button> <button onclick="speed200()">200%</button> <button onclick="speed400()">400%</button> <br/> Set Time: <button onclick="timeStart()">Start</button> <button onclick="timeValue('txt1')">Set Time</button> <input type="text" name="txt1" size="4" value="0" id="txt1"/> <button onclick="timeback10()">-10</button> <button onclick="timeback8()">-8</button> <button onclick="timeback6()">-6</button> <button onclick="timeback4()">-4</button> <button onclick="timeback2()">-2</button> <button onclick="timeforward2()">+2</button> <button onclick="timeforward4()">+4</button> <button onclick="timeforward6()">+6</button> <button onclick="timeforward8()">+8</button> <button onclick="timeforward10()">+10</button> <button onclick="timeforwardEnd()">End</button> Pause After Changes: <input type="text" name="txt2" size="4" value="1" id="txt2"/> </div> </td> </tr> <tr align="center"> <td> <div> <video id="video"> <source src="oceans.mp4" type="video/mp4"> <!--I WANT THE PAGE USER TO BE ABLE TO CHANGE THE SRC FILE--> Your browser does not support HTML5 video. </video> </div> </td> </tr> <tr align="center"> <td> <div> [Current Playback Speed: <span id="speed"></span>] <button onclick="speedSlower()" id="speeds"><img alt="slow" height="25" src="images/slow.png" width="25" /></button> <button onclick="backIt(this)" id="speeds"><img alt="slow" height="25" src="images/back.png" width="25" /></button> <button onclick="playPause()" id="speeds">II</button> <button onclick="forwardIt(this)" id="speeds"><img alt="fast" height="25" src="images/forward.png" width="25" /></button> <button onclick="speedFaster()" id="speeds"><img alt="fast" height="25" src="images/fast.png" width="25" /></button> [Playback position: <span id="elapsed"></span> of <span id="duration"></span>] </div> </td> </tr> <tr align="center"> <td> <input type="file" id="files" name="file" /> Read bytes: <span class="readBytesButtons"> <button data-startbyte="0" data-endbyte="60">01-60</button> <button data-startbyte="61" data-endbyte="120">60-120</button> <button data-startbyte="121" data-endbyte="180">121-180</button> <button>All</button> </span> <div id="byte_range"></div> <div id="byte_content"></div> </td> </tr> </table> <!-- ---------- JAVASCRIPT ------------ --><script> // ------------ HELP SOURCES ------------ //http://www.w3schools.com/js/js_examples.asp // ------------ MAIN VARIABLES ------------ var vvid = document.getElementById("video"); // ------------ PLAY PAUSE ------------ function playPause() { if (vvid.paused) vvid.play(); else vvid.pause(); } // ------------ SOUND ------------ function muteUnmute() { if (vvid.muted) vvid.muted = false; else vvid.muted = true;}// ------------ RESIZE VIDEO ------------ function size50() { vvid.width = 360; } function size75() { vvid.width = 540; } function size100() { vvid.width = 720; } function size150() { vvid.width = 1080; } function size200() { vvid.width = 1440; } // ------------ PLAYBACK SPEED ------------ function speedSlower() { vvid.playbackRate = vvid.playbackRate-0.1;} function speed10() { vvid.playbackRate = 0.1;} function speed25() { vvid.playbackRate = 0.25;} function speed50() { vvid.playbackRate = 0.50;} function speed75() { vvid.playbackRate = 0.75;} function speed100() { vvid.playbackRate = 1;} function speed125() { vvid.playbackRate = 1.25;} function speed150() { vvid.playbackRate = 1.5;} function speed175() { vvid.playbackRate = 1.75;} function speed200() { vvid.playbackRate = 2;} function speed400() { vvid.playbackRate = 2;} function speedFaster() { vvid.playbackRate = vvid.playbackRate+0.1;} // ------------ SET TIME POSITION ------------ function pageLoad() { vvid.currentTime=0; vvid.pause(); muteUnmute();}function timeStart() { vvid.currentTime=0; var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function timeValue(id) { var txtbox1 = document.getElementById(id="txt1"); var txt1value = txtbox1.value; vvid.currentTime=txt1value var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function timeback10() { vvid.currentTime=vvid.currentTime-10; var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function timeback8() { vvid.currentTime=vvid.currentTime-8; var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function timeback6() { vvid.currentTime=vvid.currentTime-6; var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function timeback4() { vvid.currentTime=vvid.currentTime-4; var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function timeback2() { vvid.currentTime=vvid.currentTime-2; var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function timeforward2() { vvid.currentTime=vvid.currentTime+2; var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function timeforward4() { vvid.currentTime=vvid.currentTime+4; var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function timeforward6() { vvid.currentTime=vvid.currentTime+6; var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function timeforward8() { vvid.currentTime=vvid.currentTime+8; var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function timeforward10() { vvid.currentTime=vvid.currentTime+10; var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function timeforwardEnd() { vvid.currentTime=vvid.duration;}function backIt(x) {vvid.currentTime=vvid.currentTime-1;}function normalIt(x) {//this would do something when then mouse leaves the + or - boxes}function forwardIt(x) {vvid.currentTime=vvid.currentTime+1;}// Get the video playback position element (time value) and ending time value with id="video" var vid = document.getElementById("video"); // Assign an ontimeupdate event to the video element, and execute a function if the current playback position has changed vid.ontimeupdate = function() {myFunction()}; function myFunction() { // Display the current position of the video in an element with id="elapsed" document.getElementById("elapsed").innerHTML = (Math.round(vid.currentTime*100)/100).toFixed(2); document.getElementById("duration").innerHTML = (Math.round(vid.duration*100)/100).toFixed(2); document.getElementById("speed").innerHTML = (Math.round(vid.playbackRate*100)/100).toFixed(1); } // --------- SCRIPTS FOR THE TEXT BLOBS ----------- function readBlob(opt_startByte, opt_stopByte) { var files = document.getElementById('files').files; if (!files.length) { alert('Please select a file!'); return; } var file = files[0]; var start = parseInt(opt_startByte) || 0; var stop = parseInt(opt_stopByte) || file.size - 1; var reader = new FileReader(); // If we use onloadend, we need to check the readyState. reader.onloadend = function(evt) { if (evt.target.readyState == FileReader.DONE) { // DONE == 2 document.getElementById('byte_content').textContent = evt.target.result; document.getElementById('byte_range').textContent = ['Read bytes: ', start + 1, ' - ', stop + 1, ' of ', file.size, ' byte file'].join(''); } }; var blob = file.slice(start, stop + 1); reader.readAsBinaryString(blob); } document.querySelector('.readBytesButtons').addEventListener('click', function(evt) { if (evt.target.tagName.toLowerCase() == 'button') { var startByte = evt.target.getAttribute('data-startbyte'); var endByte = evt.target.getAttribute('data-endbyte'); readBlob(startByte, endByte); } }, false);// --------- END OF SCRIPTS FOR THE TEXT BLOBS --- </script> </body> </html>
  8. Hello world! I am new to programming, and I need help with an assignment. I do not think my professor left us intentionally in the dust, but I believe he just hasn't covered this yet. Anyways, we are creating a text adventure with html5/javascript and one of the objectives is to keep score when you click on an option. My options are go north, south, east, and west. On the first click to these areas you get 5 points, otherwise you only get 1 point. So far I only have this part of the code for score done: function displayScore() { alert ("Score"); } document.write('<span id="score">Your score is '+score+'</span>'); This was in thanks to a fellow classmate, but I want to know how to finalize the code and know what each of these lines do. I do not necessarily need a popup to show the score, it could even be in a text field tag. I'm sorry if I'm not using correct terminology, but the help would be greatly appreciated! Thanks!
  9. What i am trying to do is create a text box to enter in a Frequency (122.25mhz). Then on a button press have it call a function to store as a variable, drop the 2 decimal places and convert the number. And return another variable after it is all done. I can figure out how to move the decimal, and convert it. My testing is that I want to display the number to see if the conversions are working right but i cant get it to display. Here is the code. Here is the jsfiddle for it. http://jsfiddle.net/2xz6un9b/ Example 122.25 FREQE = 122.25 FREQE1 = 12225 FREQE2 = 2225 FREQE3 = 4261 FREQO = FREQE3 html <input type="text" id="FREQB"> <button onclick="FREQ()">Frequency</button><p id="FREQO"></p> Javascript function freq(){ //get value from entery var FREQE = document.getElementById("FREQB").value; //dropping 2 decimal places var FREQE1 = FREQE*100; //removing the 1 from the front var FREQE2 = FREQE1 - 10000; //converting to oct var FREQE3 = FREQE2.toString(8); document.getElementById("FREQO").innerHTML = FREQE3;}
  10. I try to create an Upload with javascript nad progress bar. i found this code in the internet, but i can't change the code for my idea. This is the script sample: var client = null; function uploadFile(){ //Wieder unser File Objekt var file = document.getElementById("fileA").files[0]; var formData = new FormData(); client = new XMLHttpRequest(); if(!file) return; formData.append("datei", file); client.onerror = function(e) { alert("onError"); }; client.open("POST", "upload.php"); client.send(formData);} my first problem is, that the autor used ONE input tag an set no MULTIPLE. I have a multiple input tag. I think it's enoug to change: var file = document.getElementById("fileA").files[0]; to var file1 = document.getElementById("file1").files; //dlete [0] for all files and formData.append("datei", file); to formData.append("file1[]", file);// add [] to create an array is this correct? AND MY IMPORTANT PROBLEM is, that i have more input tags: <form> <input type="file" name="file1"> <input type="file" name="file2"> <input type="file" name="file3"> </form> How can i pass the code for mulitple tags with different names??????? I search since 4 days for an idea. It will be perfect, if i can send all input with ONE clinet. IT's really important to read the files with $_FILES[file1], $_FILES[file2]
  11. Hello, MyProject I am having a hard time making the form inputs align with the localstorage table. The forms will have to fit in between the ID and ACTIONS columns and align with where the data is being inputted. I also am having a hard time setting the widths for the table columns. Adjusting the padding is not a problem, but setting a set width is a problem. Any help would be greatly appreciated. Also, is there any way to change the local storage ID something like GW-"DATE"-"TIME" rather than numerically going up 1-2-3-4-5-etc.? Thank you, I SIDEARM I
  12. I'm trying to validate a form at submittal. The code for my web page is written in php (i.e. server-side). The php file consists of a body file (i.e., body.php) included in a header file (i.e. tool.php). The included body file contains the html code for the body with form. The following php code is inserted at the top of the body file (i.e., before the html <body> and <form> fields: <?php //Check the validity of the data entered $activity01 = ""; if ($_SERVER["REQUEST_METHOD"] == "POST") { $activity01 = $_REQUEST[activity01]; include($_SERVER['DOCUMENT_ROOT'].'included_filesincPHP1.inc'); $cxn=mysqli_connect($host,$user,$password,$database) or die ("Couldn't connect to the server."); $result = mysqli_query($cxn, "SELECT counter, Activity_Task FROM jsaheader WHERE Activity_Task = '$activity01'"); $counter = mysqli_num_rows($result); $row = mysqli_fetch_assoc($result); if ($counter == 0) { mysqli_close($cxn); } else { mysqli_close($cxn);?> <SCRIPT type="text/javascript"> window.alert("The 'Activity / Task' that you have selected is not unique. There is already another JSA with the name '<? echo $activity01 ?>.' As each 'Activity / Task' must be unique, you will now be returned to the previous page so that you can select a unique 'Activity / Task.'");</SCRIPT> <? } } ?> The problem input field is a text field located within the included body file. The input field content looks like this: <INPUT type='text' size=75 id='activity01' name='activity01' value='<? echo $activity01;?>'> When the form is submitted, the php code shown above queries a SQL database to verify that the activity is unique. I've verified that this is actually working. If it is not unique, the user is informed of this through a popup alert and returned to the form. They actually never leave the form. Because of the code within the value attribute, the previously entered activity is supposed to be shown in the input field as it was originally entered. It doesn't but when I look at the source code it shows up there as "value='Test JSA 1'." Got any ideas why that is? The only thing I can think of is that this is happening because the form (and body) is contained within a php file included in the header file. Any help you can give will be very much appreciated.
  13. Custom Checkbox & Radio without labels

    Hi! I'm new to W3C School forum, even if I read meny things about CSS in the main website. I'm trying to customize checkbox and radio inputs... I read many tutorials concerning input customization and I successfully customized buttons, password, text, etc and select, textbox, etc... My problem is the compatibility with browsers. I'm trying to develop a web-app (asp.net) in which I customized everything. Checkbox and Radio buttons are my "bête noire": I can't make them run on FireFox and iExplorer. I choose the "sprite" method, avoiding the use of labels, because my web-app can't use labels. So, this is the CSS code I'm currently using: input[type='checkbox'], input[type='radio']{ background-image: url('http://s28.postimg.org/oggskkn6x/controls.png'); background-repeat: no-repeat; width: 16px; height: 16px; margin: 0; padding: 0; -moz-appearance: none; /* not working */ -webkit-appearance: none; -ms-appearance: none; /*not working */ -o-appearance: none; appearance: none;}/* not checked */input[type='radio']{background-position: -32px 0; }/* checked */input[type='radio']:checked { background-position: -48px 0;}input[type='checkbox']:checked { background-position: -16px 0; }input[type='checkbox']:hover:checked, input[type='checkbox']:focus:checked { background-position: -16px -16px; }input[type='radio']:hover:checked,input[type='radio']:focus:checked { background-position: -48px -16px; }/* focus */input[type='checkbox']:hover,input[type='checkbox']:focus { background-position: 0 -16px; }input[type='radio']:hover,input[type='radio']:focus { background-position: -32px -16px; }/* active */input[type='checkbox']:active { background-position: 0 -48px; }input[type='radio']:active { background-position: -32px -48px; }input[type='checkbox']:active:checked { background-position: -16px -48px; }input[type='radio']:active:checked { background-position: -48px -48px; }/* disabled */input[type='checkbox']:disabled { background-position: 0 -32px; }input[type='radio']:disabled { background-position: -32px -32px; }input[type='checkbox']:disabled:checked { background-position: -16px -32px; }input[type='radio']:disabled:checked{ background-position: -48px -32px; }input[type='checkbox']:hover:disabled,input[type='checkbox']:focus:disabled { background-position: 0 -32px; }input[type='radio']:hover:disabled ,input[type='radio']:focus:disabled { background-position: -32px -32px; }input[type='checkbox']:hover:disabled:checked ,input[type='checkbox']:focus:disabled:checked { background-position: -16px -32px; }input[type='radio']:hover:disabled:checked,input[type='radio']:focus:disabled:checked { background-position: -48px -32px; } Here, a JSFiddle in order to have a look on how it works: http://jsfiddle.net/Kztwn/5/ If you open it on Opera, Safari or Chrome everything works great (as expected) but, if you use iExplorer (v. 10/11) or Firefox...not! How can I make it work on Firefox, without lables and java? Just to summarize, this is the result I obtain on iExplorer (IE), FireFox (FF), Opera (O), Chrome ( C), and Safari (S): I can accept IE isn't working, but FireFox...how can I hide the default input style? Any ideas? Can anyone help me in finding the right solution? Thanks in advance! Nick
  14. How do you clear input text box?

    <!DOCTYPE html><html lang = "en-US"> <head> <meta charset = "UTF-8"> <style type = "text/css"> fieldset { width: 850px; margin: auto; text-align: center; } #txtField { text-align: center; } #tryAgainBtn { display: none; } </style> <script type = "text/javascript"> window.onload = myFunction; var randomNumber; var outPut; function myFunction() { randomNumber = Math.floor(Math.random()*1000); document.getElementById("checkBtn").onclick = checkAnswer; document.getElementById("tryAgainBtn").onclick = tryAgain; } function checkAnswer() { outPut = document.getElementById("outPut"); outPut.innerHTML = ""; var myInput = document.getElementById("txtField"); if (myInput.value < 0 || myInput.value > 1000) { return outPut.innerHTML += "I said between 0 and 1000."; } if (myInput.value == "") { return outPut.innerHTML += "Please enter a number between 0 and 1000!!!"; } if (myInput.value > randomNumber) { outPut.innerHTML += "Too High !!!"; } if (myInput.value < randomNumber) { outPut.innerHTML += "Too low !!!"; } if (myInput.value == randomNumber) { outPut.innerHTML += "Yay, you are awesome !!!"; document.getElementById("tryAgainBtn").style.display = "inline"; } document.getElementById("txtField").onclick = reset(); } function tryAgain() { document.getElementById("txtField").value = ""; outPut.innerHTML = ""; document.getElementById("tryAgainBtn").style.display = "none"; randomNumber = Math.floor(Math.random()*1000); } </script> </head> [attachment=1390:MyGame.png]<body> <form action = " " id = "myForm"> <fieldset> <p>Let's play a guessing game, I am thinking about a number between 0 and 1000. Enter your guess in the box, I'll tell you if it's correct or not. </p> <div id = "outPut"> </div> <input type = "text" id = "txtField"/> <br/> <button type = "button" id = "checkBtn"> Check your guess!!! </button> <br/> <button type = "button" id = "tryAgainBtn"> Try again ??? </button> </fieldset> </form> </body></html> Hi guys, I am building this text-based guessing game(please don't judge, I'm just a starter), everything is working correctly, just one thing I can't find the answer anywhere at all, but I sure know you guys do know the answer, my question is, btw, I've attached a picture so you can conjure up what I am trying to say, ok, so, after the user entered a value, and they are gonna enter another value, so when the user clicks on the box, what do I do to make the previously entered value removed, like when they click on the box, the previous value disappears, I've tried using the reset() method as you can see in the code, but every time the "Check your answer" button is clicked, the value disappears right away, and that is not I want, I really don't know method to use? any suggestions are greatly appreciated. Thank you very much for your time and help.
  15. I would swear I have seen an input type that was somewhere between a plain ol' text box and a select. In other words, the user could choose from the drop-down list or, if their choice was not found in the list, they could type in whatever they wanted. Is there such a control? I spent some time on http://w3schools.com looking for this, but found nothing.
  16. I have a page in which users are an employee of a charity. They can / should enter information about their organization including phone numbers. It occurs to me that some organizations may have dozens or even hundreds of phone numbers. I do NOT want to have to place that many <input> tags on the page since most users will never need them. I thought it would be nice if there were some sort of input device that can be expanded as needed like a spreadsheet.If there is no such control, I want one. I want it very similar to an <input type=text> control because I want to limit the length of the user's input and even the content, if possible. Also, the cells need to be named as they are created so the server can know they exist and can extract their value.
  17. Href to checked input radio

    I have an Input form type radio, and I have a link to this form in another page; What i'd ilke to do, is that when people press this outside link and go to the form, one of the options be checked.
  18. Hi! I'm new to the whole form-making business and currently beating my way though the basics. Right now i'm clueless about what seems to be a pretty simple and straightforward function. I want my visitor to be able to add values from two different <input-type>-fields into a <textarea>. These two values (being name and e-mail) should become a single row in the <textarea>. The visitor should also be able to remove desired generated rows with a simple click on the "remove selected"-button. The result should look like this: This part of my form looks like this thus far: <div class="deltagare-rubrik">Namn:</div> <input type="text" size="45" name="deltagare-namn" value""> <div class="deltagare-rubrik">E-post:</div> <input type="text" size="45" name="deltagare-epost" value""> <br /> <input type="button" name="deltagare-add" value="Add" class="button"> <br /> <textarea name="deltagare-list" class="deltagare-list" readonly="true"></textarea> <input type="button" name="deltagare-remove" value="Remove selected" class="button"> Very grateful for help, thanks!
  19. I've created a simple application (CGI) to display a .PDF document on a web page (using iframe) and an input field (or two). The PDFs are scanned documents that need a number assigned to them based on what is hand written on the document. The annoyance is: When I display this on the web page, the only way for the user to be able to access the input field is to click on it with the mouse. I know this might sound really simplistic, but is there any way to force the cursor to the input field so the user doesn't have to click it? The really annoying part of this is that you can't even use the tab key to get to the input field (because of adobe). The user typically has to do 100 or more at a time and bouncing back and forth between the mouse and keyboard gets old really fast. -Rick
  20. I'd like to disable certain input boxes, but without changing the HTML code manually. For example:I'd like to disable the input boxes with the following id's:id="first_field"id="fourth_field"id="sixth_field" <div> <form action=""> <fieldset> <input type="text" id="first_field"/> <input type="text" id="second_field"/> <input type="text" id="third_field"/> <input type="text" id="fourth_field"/> <input type="text" id="fifth_field"/> <input type="text" id="sixth_field"/> </fieldset> </form> </div> Anyone know a Javascript that can do this?
  21. I'd like to hide the corresponding button when an input value is empty or has a value="n/a". In the following example, the input box "first_field" is corresponding with the button "first_button", and the input box "second_field" with the button "second_button", and so on... In this case the second and fifth button will be hidden: <!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Hide Button When Input Value Is Empty</title></head><body> <div> <form action=""> <fieldset> <input type="text" id="first_field" value="1"/> <input type="text" id="second_field" value=""/> <input type="text" id="third_field" value="3"/> <input type="text" id="fourth_field" value="4"/> <input type="text" id="fifth_field" value="n/a"/> <input type="text" id="sixth_field" value="5"/> </fieldset> </form> </div> <div> <form action=""> <fieldset> <div id="first_button"><input type="button" value="First Button"/></div> <div id="second_button"><input type="button" value="Second Button"/></div> <div id="third_button"><input type="button" value="Third Button"/></div> <div id="fourth_button"><input type="button" value="Fourth Button"/></div> <div id="fifth_button"><input type="button" value="Fifth Button"/></div> <div id="sixth_button"><input type="button" value="Sixth Button"/></div> </fieldset> </form> </div></body></html> Anyone know a Javascript that can do this?
  22. Alternative way of aligning?

    I have a form that looks like this. I currently have it set up using two div tags. The left side is one and the right side is another. If I have my cursor in the Email Address input and press TAB, it goes to Password input. I want to set it up where it looks exactly the same, but when I press TAB, it goes to Confirm Email Address input. Basically, I am wondering how I could align my page without using separate tags, so when I press TAB, it goes to the next one.
  23. Function to check for undefined?

    <form name="form" action="enter.php" method="post"> First Name: <input type="text" name="first" /><br /> Last Name: <input type="text" name="last" /><br /> <input type="checkbox" name="c1" value="1" onclick="showSubmit()" /> <input type="checkbox" name="c1" value="1" onclick="showSubmit()" /> <input type="checkbox" name="c3" value="1" onclick="showSubmit()" /> <!-- SUBMIT BUTTON HERE --> </form> If I only check the 1st and the 3rd checkbox and press the submit button, but in my enter.php, I made it check print out each of the inputs like so: <?php echo $_POST["first"];echo $_POST["last"];echo $_POST["c1"]; echo $_POST["c2"]; echo $_POST["c3"];?> I will get a warning/error claiming that the c2 is undefined. Is there a built in function that checks if something is undefined ? That way I can use a if and else statement: if is it undefined, it will print something, and if it is checked (defined), make it print something else.
  24. I'm working on a site and i want to use icons to select travel modes,i have an working function but it only works with a selection input.Is there a way to modify it to be used with buttons? Thanks in advance! Function: function calcRoute() { var selectedMode = document.getElementById("mode").value; var request = { origin: thuis, destination: kabk, // Note that Javascript allows us to access the constant // using square brackets and a string value as its // "property." travelMode: google.maps.TravelMode[selectedMode] }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } }); HTML - Select input <select id="mode" onchange="calcRoute();"> <option value="DRIVING">Driving</option> <option value="WALKING">Walking</option></select> HTML - Button input (?) <form id="mode"> <input type="button" onchange="calcRoute();" value="DRIVING"> <input type="button" onchange="calcRoute();" value="WALKING"></form>
  25. Input to end of url

    Hello everyone, well I'll give you a quick run down about myself so you can best help me or straight up ignore me :-)I have learnt most of the stuff I know from w3schools and just from viewing the source of websites and putting 2 and 2 together. I'm not going to pretend I am smart or a quick learner, I learn best in reverse. I understand codes etc.. more by reading the full code and seeing what each part does rather then putting it all together myself, I'm sure people like me are frustrating for people who are smart, but guess what I frustrate myself.Anyway what I am trying to do is basically make a tool to help people index their websites with "whois" style websites. I have found some php codes for this but I am unable to use php on the server I use, so I can only do it with javascript.What I need to do is have users enter their website and it is input onto the end of serveral urls and opens the pages. Example: I type mysite.com and press submit And several pages open http://tools.whois.com.au/whois/mysite.com http://www.checkpagestats.com/www/mysite.com http://www.alexa.com/siteinfo/mysite.com etc... etc.. etc... I did have the code below but it just opens the website you input :-( SO please HELP ME, can I edit the code below to do what I want or am I way off track? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Link Insertion</title></head><body><form style="margin-top: 10px;"><fieldset><label>Url </label><input type="text" name="url" id="url" /><br/><label>Caption </label><input type="text" name="cap" id="cap" /></fieldset><input type="button" name="insert" value="INSERT LINK" id="insert" /></form><script type="text/javascript">document.getElementById("insert").onclick = function(){if(document.getElementById('url').value !== ""){var a = document.createElement('a');var br = document.createElement('br');a.href = document.getElementById('url').value;var c = document.getElementById('cap').value || new Date().getTime();a.innerHTML = c;var container = document.getElementById('linkcontainer');container.appendChild(a);container.appendChild(br);}}</script></body></html>