Jump to content

Search the Community

Showing results for tags 'input'.

  • 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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








  1. I had 2 INPUT boxes and one BUTTON. I want to take the control back to the current INPUT after BUTTON is clicked. That part is working fine with the HTML file shown below: <!DOCTYPE html> <html> <head> <script> var last; function Focus(input) { last = input; } function Blur(input) { } function Click(button) { if (typeof last != "undefined") last.focus(); } </script> </head> <body> <input id="I1" onfocus="Focus(this)" onblur="Blur(this)"> </input> <input id="I2" onfocus="Focus(this)" onblur="Blur(this)"> </input> <button id="B" onclick="Click(this)"> Click </button> <script> </script> </body> </html> But I wanted to code onblur function Blur to incorporate check whether the input is exited with a blank string and to return control to the blank INPUT field after displaying an alert to that effect. This displays the alert box continuously. Can you suggest how this can be avoided. Here is my code: function Focus(input) { if (typeof last != "undefined") if (last.value.length == 0) alert("Blank!"); last = input; }
  2. HI, I'm sure I've seen on a websites somewhere the ability to either select an option from a dropdown list or enter an alternative. Can anyone give me any pointers in how to achieve this? Thanks Phil
  3. Hello & Thanks ,When typing into <input> field , I prefer its behavior . It has a nice smooth scrolling effect . The other examples have jumpy , stacking or stretching behavior . How can I 'Duplicate <input> behavior for <p> or <span> ?' . The reason I don't use <input> is because I need the "contenteditable="true" ability so that I can I can 'SaveAs' htmlPage and all is entered data . Thanks I tried to save this code from https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_input but it's not working . <!DOCTYPE html> <html> <style> p { display: inline-block; height: 20x; font-size: 12px; min-width: 100px } input { width: 100px; } div { display: inline-block; // width: 300px; // border: 1px solid black; height: 20px; font-size: 12px; } span.a { display: inline-block; overflow: hidden; text-align:right; width: 50px; height: 20px; font-size: 12px; } #inputColor { border: 1px solid black; background: #ffe9cc; } span.b { display: inline-block; overflow: hidden; width: 100px; height: 20px; font-size: 12px; border: 1px solid black; background: #ffe9cc; } </style> <body> <br> Input example: <br> Enter your name: <input style="background: #ffe9cc;" name="firstname" type="text" placeholder="First name"> <br><br> span example: <br> <span class="a">Name:</span> <span class="b" contenteditable="true" style="background: #ffe9cc; border: 1px solid black;">&nbsp;&nbsp;&nbsp;&nbsp;</span> <br><br> Paragraph example: <br> <p>Enter your name: </p> <p contenteditable="true" style=" min-width: 100px; border: 1px solid black; background: #ffe9cc;"> </p> <br><br> Div-Paragraph example: <br> <div> <p>Enter your name: </p> <p contenteditable="true" style="background: #ffe9cc; border: 1px solid black;"> </p> </div> </body> </html>
  4. SET-UP: Please find below three items including; one, the relevant form elements of a much larger form; two, the Javascript that determine what data will be sent to a PHP processing page via a $_POST variable, and three, The actual implementation of the code. The question follows the presentation of the code. The HTML <div id='language_options' style='clear:both;'> <label for='nl_tongue'>Native Tongue:<span class="formlabel">*</span></label> <span class="rightfloat"> <select id="nl_tongue" name="language" style="width:150px;"> <option selected value="0">Select Language</option> <optgroup label='africa [east]'> <option value='mg'>Malagasy</option> <option value=sw>Swahili</option> </optgroup> <optgroup label='africa [central]'> <option value=ny>Chichewa</option> <option value=sn>Shona</option> </optgroup> <optgroup label='Not found?'> <option value='other_tongue'>Click and enter!</option> </optgroup> </select> </span> </div><!-- end div#language_options --> <div id='nl_other'> <span class="rightfloat"><input id='nl_other_input' type='text' name='other' value=''></span> </div><!-- end div#nl_other --> <label id="nl_tongue_error" class="error" for="nl_tongue">This field is required.</label> The JAVASCRIPT $.get('./newsletter_filler.html', function(data) { $('#main').html(data); $('#nl_other').hide(); var tongue = ''; $('#nl_tongue').change(function() { if ($('#nl_tongue').val() == 'other_tongue') { $('#nl_other').show(); } }); }).done(function(){ $('.error').hide(); $(".button").click(function() { --- Other Code --- /********************************* The language Variable *********************************/ var language = $("select#nl_tongue").val(); if (language == "0") { $("label#nl_tongue_error").html("<p style='line-height:1.3em'>Please select your first language! Or, click on the <span style='font-weight:bold;'>\"Not found?\"</span> option at the bottom of the list of languages.</p>").show().css('float','left'); $("select#nl_tongue").focus().focusout(function() { $("label#nl_level_error").hide(); }); return false; } if (language == 'other_tongue') { language = $("#nl_other input").val(); if($("#nl_other input").val() == '') { $("label#nl_tongue_error").html("<p style='line-height:1.3em'>Please enter your first language.</p>").show().css('float','left'); $("nl_other_input").focus().focusout(function() { $("label#nl_tongue_error").hide(); $("#nl_other_input).hide(); }); return false; } } }); --- More Code --- }); IMPLEMENTATION: Sequence of Events Go to the Grammar Captive mainpage and do the following: Click on the word Subscribe under the heading Info/Newsletter. Click on the final <option> Click and enter! under the Not Found? <optgroup> at the bottom of the Select Language list. Enter a language of some sort. Click where it says Not found? and select a different language. Submit the form. The Outcome: The selected language takes precedence over the entered language, and the former is sent to the data base. DILEMMA: In order to correct this problem I have experimented in a variety of ways, but to know avail. What would you recommend and why? Roddy
  5. I am trying to use the example contact form in the w3-ccs examples. The submit form processes but there is no data sent with the form. Can some one set me on the right path on how to get the data into php processing page? php process code: <?php $EmailFrom = "email@greengardensdesign.com"; $EmailTo = "email@greengardensdesign.com"; $Subject = "Possible New Job"; $Name = Trim(stripslashes($_POST['Name'])); $Address = Trim(stripslashes($_POST['Address'])); $City = Trim(stripslashes($_POST['City'])); $Email = Trim(stripslashes($_POST['Email'])); $Phone = Trim(stripslashes($_POST['Phone'])); $Message = Trim(stripslashes($_POST['Message'])); // validation $validationOK=true; if (!$validationOK) { print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">"; exit; } // prepare email body text $Body = ""; $Body .= "Name: "; $Body .= $Name; $Body .= "\n"; $Body .= "Address: "; $Body .= $Address; $Body .= "\n"; $Body .= "City: "; $Body .= $City; $Body .= "\n"; $Body .= "Email: "; $Body .= $Email; $Body .= "\n"; $Body .= "Phone: "; $Body .= $Phone; $Body .= "\n"; $Body .= "Message: "; $Body .= $Message; $Body .= "\n"; // send email $success = mail($EmailTo, $Subject, $Body, "From: <$EmailFrom>"); // redirect to success page if ($success){ print "<meta http-equiv=\"refresh\" content=\"0;URL=contactthanks.php\">"; } else{ print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">"; } ?> input form code: <form action="/contactengine.php" method="post" class="w3-container w3-card-4 w3-light-grey w3-text-blue w3-margin"> <h2 class="w3-center">Contact Us</h2> <div class="w3-row w3-section"> <div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-user"></i></div> <div class="w3-rest"> <input class="w3-input w3-border" name="Name" type="text" placeholder="Full Name"> </div> </div> <div class="w3-row w3-section"> <div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-car"></i></div> <div class="w3-rest"> <input class="w3-input w3-border" name="Address" type="text" placeholder="Street Address"> </div> </div> <div class="w3-row w3-section"> <div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-car"></i></div> <div class="w3-rest"> <input class="w3-input w3-border" name="City" type="text" placeholder="City and State"> </div> </div> <div class="w3-row w3-section"> <div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-envelope-o"></i></div> <div class="w3-rest"> <input class="w3-input w3-border" name="Email" type="text" placeholder="Email"> </div> </div> <div class="w3-row w3-section"> <div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-phone"></i></div> <div class="w3-rest"> <input class="w3-input w3-border" name="Phone" type="text" placeholder="Phone"> </div> </div> <div class="w3-row w3-section"> <div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-pencil"></i></div> <div class="w3-rest"> <input class="w3-input w3-border" name="Message" type="text" placeholder="Message"> </div> </div> <button class="w3-button w3-block w3-section w3-blue w3-ripple w3-padding">Send</button> </form>
  6. Dear W3schools community, I want to check if a required input is empty (has more then 0 characters). You guys have any idea what I'm doing wrong? Thanks in advance! If there is no character in input (id="vname") I still get a red "bar" Here's my code: function foobar() { var vname = document.getElementById('vname').value; if (vname.length > 0 && vname != '' && vname != null) { document.getElementById('contact-response').style.color = 'green'; document.getElementById('contact-response').innerHTML = "foo"; } else { document.getElementById('contact-response').style.color = 'red'; document.getElementById('contact-response').innerHTML = "bar"; } } I also tried length, null and '' separately. I also tried doing it with isEmpty(). Also I tried using || instead of &&. Nothing worked yet. Heres my HTML: <div id="wrapper-contact"> <form> <input type="text" id="vname" placeholder="*Vname" required="yes"> <input type="button" onclick="foobar()" value="Senden"> <p id="contact-response"></p> </form> </div>
  7. 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.
  8. 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?
  9. 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
  10. 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.
  11. 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
  12. 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.
  13. 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>
  14. 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!
  15. 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;}
  16. 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]
  17. 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
  18. 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.
  19. 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
  20. <!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.
  21. 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.
  22. 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.
  23. 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.
  24. 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!
  25. 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
  • Create New...