|
JavaScript - 'addnew' Input Box Error :(
Okay, so I have this code;
Code: <html>
<head>
<title>test</title>
<script type="text/javascript">
var counter = 0;
function addNew() {
// Get the main Div in which all the other divs will be added
var mainContainer = document.getElementById('mainContainer');
// Create a new div for holding text and button input elements
var newDiv = document.createElement('div');
// Create a new text input
var newText = document.createElement('input');
newText.type = "input";
// Create a new button input
var newDelButton = document.createElement('input');
newDelButton.type = "button";
newDelButton.value = "Remove ingredient";
// Append new text input to the newDiv
newDiv.appendChild(newText);
// Append new button input to the newDiv
newDiv.appendChild(newDelButton);
// Append newDiv input to the mainContainer div
mainContainer.appendChild(newDiv);
counter++;
// <strong class="highlight">Add</strong> a handler to button for deleting the newDiv from the mainContainer
newDelButton.onclick = function() {
mainContainer.removeChild(newDiv);
}
}
</script>
</head>
<body >
<strong>Date and time:</strong> <?php $date=date("d-m-Y H:i"); echo $date; ?>
<p>
<strong>Ingredients</strong>
<div id="mainContainer">
<div><input type="text" size="4">
<select>
<option>oz</option>
<option>lb</option>
<option>g</option>
<option>kg</option>
<option>slice(s)</option>
<option>portion(s)</option>
<option>tsp</option>
<option>tbsp</option>
<option>ml</option>
<option>clove(s)</option>
<option>fl oz</option>
<option>free-range</option>
<option>handful(s)</option>
<option>litre(s)</option>
</select> of
<input type="text" ><input type="button" value="Add another ingredient" onClick="addNew();"></div>
</div>
<p>
<strong>Method</strong>
<p><br />
<input type="button" value="Add recipe!">
</body>
</html>
And it generates this; http://runearena.com/recipe/ But when I click 'add another ingredient', I can only get one singular text box to appear, not 2 and a dropdown like the first. How can I do this? I also want the 'of' to dissappear when 'free-range' is selected from the drop down. Help is much appreciated. Similar TutorialsHi all and hope you can help. I have a form validication function that checks a variety of form inputs which appears to be working fine. Trouble is that if I deliberately throw it some non-valid entries it clears the form with the data I've already supplied. Can anyone suggest a method for preserving the input the user has already made so that this doesn't need to be re-input when the user has input invalid data? My thanks Rog Here's my validation code. which checks.. Whether a user has input their full name - entering full name is optional and if not true will negate subsequent checks, i.e. doesn't bother checking any other inputs. Whether a user has supplied both first and last names, fail message pops up if not. Whether a user has suppllied a full name but not an email or telephone number, fail message pops up if not. Whether a user has supplied a valid email address, fail message pops up if not. Whether a user has supplied a valid telephone number, fail message pops up if not. If we've passed all these tests, O.K. - submit. Code: function check_id(){
var status = false;
var emailRegEx = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
var telRegEx = /^\s*\(?(020[7,8]{1}\)?[ ]?[1-9]{1}[0-9{2}[ ]?[0-9]{4})|(0[1-8]{1}[0-9]{3}\)?[ ]?[1-9]{1}[0-9]{2}[ ]?[0-9]{3})\s*$/;
// 1st test, are the name fields blank, this is valid if the user doesn't want to enter the draw?
if (document.feedback.first.value =="" && document.feedback.second.value =="") {
status=false;
confirm("You will not be entered in our free prize draw unless you supply your full name and email address or telephone number. Is that O.K?");
return status;
}
// 2nd test, has the user supplied both a first name and surname?
else if (document.feedback.first.value =="" || document.feedback.second.value =="") {
status=false;
alert("You need to supply your full name to enter the draw.");
}
// 3rd test, has the user supplied a full name but not supplied an email address or tel number, this isn't valid.
else if (document.feedback.email.value =="" && document.feedback.tel.value ==""){
status=false;
alert("You need to supply either a valid email address or telephone number to enter the draw.");
}
// 4th test, user has supplied an email address and / or an email address and tel, check each.
else if(document.feedback.email.value !=""){
// 4th test part 1, user has supplied an email address, check it is valid.
if (document.feedback.email.value.search(emailRegEx) == -1) {
alert("Please enter a valid email address.");
status=false;
}
else {
alert("Thank you. You will be entered into our free prize draw. Good luck!");
status = true;
}
return status;
}
// 4th test part 2, has the user supplied a tel number, this is a valid option, check it.
else if (document.feedback.tel.value !="" ) {
if (document.feedback.tel.value.search(telRegEx) == -1) {
alert("Please enter a valid telephone number.");
status=false;
}
else {
alert("Thank you. You will be entered into our free prize draw. Good luck!");
status = true;
}
return status;
}
}
I'm having trouble figuring out this code. I have a isInitialsTextValid function that checks to see if the user enters their initials in the correct format. Then I have a function checkInitials. In the checkInitials function I am supposed (1)to declare a variable to be used for the boolean value returned by the isInitialsTextValid function.(2)call the isInitialsTextValid function.(3)If the value returned is false, place focus back on initials textbox.(4)If the value return is true call the submit function. I'm not sure what I am doing wrong, but I get a checkInitials is no defined error from firefox and it is pointing to my xhtml file. Here is the relevant code. XHTML FILE 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>
<title>Form Example</title>
<script type = "text/javascript" src= "Lab17.js"> </script>
</head>
<body onload="giveInitFocus();">
<form name = "form1" action = "">
<p>
<input type = "button" value = "Total Cost" onClick = "checkInitials();" />
<input type = "reset" value = "Reset Order Form" name = "reset" />
</p>
<hr />
<p>
Please Enter the Cashier's Initials.
</p>
<p>
<label> Cashier's Initials: <input type = "text" name = "initials" id = "initials" /></label>
</p>
<p>
JAVASCRIPT FILE Code: function isInitialsTextValid()
{
var init = document.form1.initials;
var position = init.value.search(/^[A-Z]{2,3}$/);
if(position !=0)
{
alert("Initials must be 2 or 3 capital letters" + "\n Please re-enter");
return false;
}
else
return true;
}
function checkInitials()
{
var returned;
isInitialsTextValid();
if(returned == false)
{
document.form1.initials.focus();
}
else if(returned == true)
{
handleSubmitClick();
}
}
I have a problem with adding new inputs to a form (if and when required), Internet Explorer is fine but in Firefox if any previous input fields are filled when the more button is clicked they get reset to blank. JS: Code: fields = 0;
function addInput() {
if (fields != 100) {
document.getElementById('input').innerHTML += "<input type='text' name='input[]' size='30' />";
fields += 1;
} else {
document.getElementById('input').innerHTML += "<br />Maximum 100 fields allowed.";
document.form.add.disabled=true;}
}
form: Code: <form action="index.php" method="post"> <div id="input"> <input type="text" name="input[]" size="30" maxlength="15" /> </div> <!-- button --> <div id="more"> <input type="button" onclick="addInput()" name="add" value="More" /> </div> <!-- // button --> <input type="submit" name="submit" value="Submit" /> </form> as usual any help is appretiated .. 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 Hi, i have an input value array for customer ids, i also need to make a copy of that array into another input element on submit to use for another process. So far here is what i have come up with regarding the js the current html is this Code:
<!-- original input -->
<input id="cb<?php echo $i;?>" name="cid[]" value="<?php echo $commissions[$i]['id'];?>" onclick="isChecked(this.checked);" type="checkbox" />
<!-- this is new html input which is outside the $i loop that i need a copy of cid[] stored on submit
<input type="hidden" name="ids[]" onsubmit="valueTovalue();" />
<!-- here is the js so far -->
<script type="text/javascript">
function valueTovalue()
{
var valin = document.adminForm.cid.value; //cid is the array cid[]
document.adminForm.ids.value = valin; //copy the array to the new input element array ids
}
</script>
so basically if they click 1 cid then ids will also show 1, if they click all cid then ids will show all as well. will that work the way i have it, am i even close here.. thanks update: what i have seems to work fine for text values or string values but not for arrays, what am i missing that it wont copy an array? Array ( [cid] => Array ( [0] => 1 ) [task] => remarksonly [remark] => hhhyyy [boxchecked] => 1 [ids] => Array ( [0] => ) ) am i getting closer lol Code:
function valueTovalue()
{
var valin = cid.concat;
document.adminForm.ids.value = valin.concat;
return(true);
this has to be close i hope Code: document.adminForm.ids.value = [].concat(document.adminForm.cid); Hi all can someone guide me (total JS newbie) on this presumably pretty easy task? I have a "parent" page with some text inputs in it (a form). This is what I am after: -when the user clicks a link it pops open a new window via JS - "child" (this is working). -in the "child" window there are also some text inputs (another form) (done). -when the user changes the value for 'testChild_textInput_4' in the child window, then I want it to automatically set this same value, to effectively overwrite, what is currently in 'testParent_textInput_2' in the parent window. Presumably this involves an onChange event, but it is also OK with me if the needful (the text input's value in the parent window being overwritten) happens upon the child window's form submit. If anyone can show me either trick, I would be thrilled! I set up a test page to make this all easy to talk about: http://www.yellow-turtle.com/testDumpMe_parent.html Please let me know! Thanks! -John (just started JS 2 weeks ago) -- this is also my first time posting here, if my post isnt following the proper template let me know and Ill fix it .. Thanks so much for taking the time to check this out in advance Im trying to make the first ul tag in the each slideMenus[] array index values have a position of left = 0px I keep recieving this error however ____________________________________________________ Error: slideMenus[i].getElementsByTagName("ul").style is undefined Line: 63 ------------------------------------------------------------------ the script in question is in [code]. Could someone tell me if I am just making a syntax error if not ill try redoing the whole thing. window.onload = makeMenus var currentSlide = null var timeID = null leftPos = 0 function makeMenus(){ var slideMenus = new Array() var allElems = document.getElementsByTagName("*") var slideListArr = new Array() for(var i=0 ; i < allElems.length ; i++){ if(allElems[i].className = "slideMenu") slideMenus.push(allElems[i]) } for(var i=0 ; i < slideMenus.length ; i++){ slideMenus[i].onclick = showSlide; Code: slideMenus[i].getElementsByTagName("ul")[0].style.left = "0px";
} document.getElementById("head").onClick = closeSlide document.getElementById("main").onClick = closeSlide } function showSlide(){ var slideList = this.getElementsByTagName("ul")[0] // mess with this if((currentSlide != null) && (currentSlide.id == slideList.id)) {closeSlide()} else{ closeSlide(); var currentSlide = slideList; currentSlide.style.display = "block"; timeID = setInterval('moveSlide()', 1); } } function closeSlide(){ if(currentSlide){ clearInterval(timeID); currentSlide.style.left = "0px" currentSlide.style.display = "none"; var currentSlide = null } } function moveSlide(){ var leftPos = leftPos + 5; if(leftPos <= 220) {currentSlide.style.left = leftPos + "px"} else{ clearInterval(timeID); var leftPos = 0} } 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! Strange problem here... I'm implementing google's JS tracking code verbatim which determines whether or not the current site is using HTTP or HTTPS. It builds a dynamic URL used as the "SRC" parameter in the SCRIPT statement. On browsers I'm testing with(FF, IE, Chrome) there's no problem running the code. However, there are some people in the office who get an FF or IE error (same versions as mine) on the URL as the SRC parameter. The error, in the FF Error Console, is this: Quote: illegal character http://www.google-analytics.com/ga.js ? ? ? ? --> question marks appear in console I can't figure it out since I can't create this error on any of my browsers. Could this be related to something like browser security settings or add-ons? How can I ask the user for two different numbers and add them?
How can you get a input box to expand as you type if you exceed X amount of characters?
Hello Everyone, I am trying to set the value of a Input tag with a value retrieved from the cookies. However, it is not working. Here is the script: Code: <html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
document.cookie = "username=John";
var user = get_cookie("username");
document.write ( "Hi " + user + ", welcome to my website!" );
oFormObject.elements["name"].value = user;
</script>
<center> <br><br><br><br>
<form name="register_complaint" action="#">
User Name: <input type="text" size="5" name="name" > <br>
<input type="checkbox" name="remeber">Remember Me <br>
<input type="button" name="submit" value="Submit Complaint">
</form>
</center>
<script type="text/javascript">
function get_cookie ( cookie_name )
{
var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)' );
if ( results )
return ( unescape ( results[2] ) );
else
return "";
}
</script>
</body>
</html>
Please help me, I've been struggling with this issue for a long time. Cheers I'm guessing this question will be one of the easiest questions ever posted but I'm just not getting this fix. I have a simple Javascript program that calculates a users pace for their run. The inputs are done through an HTML Form. The user can input hours, minutes, & seconds of their run. Then the distance number & measurment. Then finally the pace desired. I am having some trouble with null values in this program. If I input a 0 in hours and then fill everything out the program works great. 100%! But, if I leave the field blank and hit calculate I get a NaN. I'm guessing I need some kind of statement like if this value is null set it to zero but I am not having any luck with exactly what kind of syntax I need. So here is the code, again not very complex, any help would be greatly appreciated! function calculateTime(){ var time_hour = parseInt(document.getElementById("time_hour").value); var time_min = parseInt(document.getElementById("time_minute").value); var time_sec = parseFloat(document.getElementById("time_second").value); var dist_num = parseFloat(document.getElementById("dist_num").value); var pace_choice = document.getElementById("pace_choice").selectedIndex; var dist_choice = document.getElementById("dist_choice").selectedIndex; var total_sec = (time_hour * 3600) + (time_min * 60) + (time_sec); // Then I'm guessing my if statement would go here somewhere? Hello everyone! I have searched everywhere for a bit of script to do this but I cant find anything. I am in urgent need of a mask to create a comma separated string. The user will be inputing multiple 5 digit numbers and I need them to be organized in a proper fashion. Unfortunately this is not being done... The user will enter 00003 then 00008 etc etc. I want the output to be 00003, 00008, 00019, and so on. Can we create a mask to keep this formatting? Code: <textarea name="Tags" rows="7" cols="46" maxlength="200"></textarea> Thank you all! Not sure how to describe this. I've been tasked with the responsibility of creating a web form. That's not the problem and I can do that. The trick is, each field needs to be incased in it's own box that flies in from the left. So, the first box that flies in from the left would be email address, when you click enter, it flies off to the right and the next box flies in from the left asking for the persons name. Is it possible to do this and where might I go to learn more about doing this type of coding. Basically, I have 3 inputs: Code: enter your employee's job position <input type="text" name="position" /> describe the position <textarea name="description" /> enter your employee's initial daily wage <input type="text" name="wage" /> What I want to do is have a button that lets you "add another employee". I was thinking I would have an array for each field and then it could get the values from the text boxes, and add the values to the arrays, however the problem is I need to insert this data into a database at some point. How should I go about this? how do i put a red border around an input box with a class of .input1 if it goes into this loop?? Code: if(firstName=='' || firstName.length < 3 || firstName=='First Name:' ){
error = 'Please enter your first name';
$j('#errormsg').html('<p class="errors">'+ error +'</p>');
return false;
}
like, for user and password on a site I'm still pretty new to this Hello. Good day, I'm having a problem with my input text.. I made a button that will increase the value of my input text by 1.. I used this code : Code: document.someForm.someInput.value += 1; the input will display 1111111, why is that? I also tried.. Code: document.someForm.someInput.value + 1; still, it won't work.. |
|||||||