|
JavaScript - Input Button To Text Link
Hi all,
I am working with a php code that I am trying to edit a bit. The last part I am trying to change I cannot figure out. Essentially I want to change the "Login" submit button to just a text link that says "Login" instead. Quote: <form action="<?php echo JRoute::_( 'index.php', true, $params->get('usesecure')); ?>" method="post" name="login" id="form-login" > <?php echo $params->get('pretext'); ?> <input id="modlgn_username" type="text" name="username" class="inputbox" alt="username" size="15" value="<?php echo JText::_('Username') ?>" onclick="login.username.value='';" /> <input id="modlgn_passwd" type="password" name="passwd" class="inputbox" size="15" alt="password" value="<?php echo JText::_('Password') ?>" onclick="login.passwd.value='';" /> <?php if(JPluginHelper::isEnabled('system', 'remember')) : ?> <label for="modlgn_remember"><?php echo JText::_('Remember me') ?></label> <input id="modlgn_remember" type="checkbox" name="remember" class="inputbox" value="yes" alt="Remember Me" /> <?php endif; ?> <input type="submit" name="Submit" class="button" value="<?php echo JText::_('LOGIN') ?>" /> <?php I am hoping this is just a minor change. Would someone mind showing me what I have to do? Thanks very much. Similar TutorialsI'm trying to reduce the height of input buttons, but am unable to center the text vertically. Tried every css trick I know, but the text is still too low (I can make it lower :P). Any way to do this?
Hello there, I am having trouble with a javascript snippet that adds text to a textarea when you click on the link. Problem is that when you regularly type into the textarea, the links no longer add text. Here is the links: Code: <a href="javascript:insertText('<b></b> ','textIns');" onClick="void(0)">Bold</a>
Here is the javascript Code: <script type="text/javascript">
function insertText(val,e) {
document.getElementById(e).innerHTML+=val;
}
</script>
Any ideas or suggestions? 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 .. 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 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. What I want is when the button 'Total' is pressed, the total frame the pictures and frames appears in the textbox. Here is the code (sorry, it's long): <!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=utf-8" /> <script language="javascript" src="jquery-1.3.2.js"></script> <title>Ivis's Picture Gallery</title> <script language="javascript"> var price1, price2, price3, price4, price5, price6, price7, price8, price9, price10; function price() { price1 = document.getElementById("price1").innerHTML=price1; price2 = document.getElementById("price2").innerHTML=price2; price3 = document.getElementById("price3").innerHTML=price3; price4 = document.getElementById("price4").innerHTML=price4; price5 = document.getElementById("price5").innerHTML=price5; price6 = document.getElementById("price6").innerHTML=price6; price7 = document.getElementById("price7").innerHTML=price7; price8 = document.getElementById("price8").innerHTML=price8; price9 = document.getElementById("price9").innerHTML=price9; price10 = document.getElementById("price10").innerHTML=price10; } function total() { var text = document.getElementById("txt1").value; text = bigImage + bigFrame; } function changeImageZebra() { $("#bigImage").hide(); $("#bigImage").attr("src", "ZooZebra.gif"); $("#bigImage").fadeIn(3000); } function changeImageTiger() { $("#bigImage").hide(); $("#bigImage").attr("src", "tiger.jpg"); $("#bigImage").fadeIn(3000); } function changeImageGraff() { $("#bigImage").hide(); $("#bigImage").attr("src", "graff.jpg"); $("#bigImage").fadeIn(3000); } function changeImageBDog() { $("#bigImage").hide(); $("#bigImage").attr("src", "boys with dog.jpg"); $("#bigImage").fadeIn(3000); } function changeImageSeal() { $("#bigImage").hide(); $("#bigImage").attr("src", "seal.jpg"); $("#bigImage").fadeIn(3000); } $(document).ready(function(){ $("#zebPic").mouseover(changeImageZebra); $("#tigPic").mouseover(changeImageTiger); $("#graffPic").mouseover(changeImageGraff); $("#bdogPic").mouseover(changeImageBDog); $("#sealPic").mouseover(changeImageSeal); }); function changeFrame1() { $("#bigFrame").hide(); $("#bigFrame").attr("src", "square.png"); $("#bigFrame").fadeIn(3000); } function changeFrame2() { $("#bigFrame").hide(); $("#bigFrame").attr("src", "square2.png"); $("#bigFrame").fadeIn(3000); } function changeFrame3() { $("#bigFrame").hide(); $("#bigFrame").attr("src", "square3.png"); $("#bigFrame").fadeIn(3000); } function changeFrame4() { $("#bigFrame").hide(); $("#bigFrame").attr("src", "square4.png"); $("#bigFrame").fadeIn(3000); } function changeFrame5() { $("#bigFrame").hide(); $("#bigFrame").attr("src", "square5.png"); $("#bigFrame").fadeIn(3000); } $(document).ready(function(){ $("#frame1").mouseover(changeFrame1); $("#frame2").mouseover(changeFrame2); $("#frame3").mouseover(changeFrame3); $("#frame4").mouseover(changeFrame4); $("#frame5").mouseover(changeFrame5); }); </script> </head> <body><h1>Frames</h1> <p> </p> <p><img src="ZooZebra.gif" id="zebPic" alt="" width="50" height="50" /><div id="price1">$100</div></p> <p><img src="tiger.jpg" id="tigPic" alt="" width="50" height="50" /><div id="price2">$110</div></p> <p><img src="graff.jpg" id="graffPic" alt="" width="50" height="50" /><div id="price3">$120</div></p> <p><img src="boys with dog.jpg" id="bdogPic" alt="" width="50" height="50" /><div id="price4">$130</div></p> <p><img src="seal.jpg" id="sealPic" alt="" width="50" height="50" /><div id="price5">$140</div></p> <p> </p> <hr /> <p> </p> <div id="sq1"><img src="square.png" id="frame1" width="100" height="100" /> Frame1</div><div id="price6">$50</div> <div id="sq2"><img src="square2.png" id="frame2" width="100" height="100" /> Frame2</div><div id="price7">$60</div> <div id="sq3"><img src="square3.png" id="frame3" width="100" height="100" /> Frame3</div><div id="price8">$70</div> <div id="sq4"><img src="square4.png" id="frame4" width="100" height="100" /> Frame4</div><div id="price9">$80</div> <div id="sq5"><img src="square5.png" id="frame5" width="100" height="100" /> Frame5</div><div id="price10">$90</div><hr /> <p> </p> <p><img src="ZooZebra.gif" name="bigImage" align="top" id="bigImage" /><img src="square.png" name="bigFrame" id="bigFrame" /></p> <p> <label> <input type="button" name="btn1" id="btn1" value="Total" onclick="total()" /> </label> <label> <input type="text" name="txt1" id="txt1" /> </label> </p> <p> <input type="button" name="btn2" id="btn2" value="To Checkout" /> </p> <p> </p> [<a href="galleryindex.htm">Back</a>] </body> </html> I'm trying to use an onclick function in a radio button to change the value of a hidden input in another form. What I want to happen is, when the user changes the value of the radio button (0 or 1), the value of the input named 'repeat' is set to 0 or 1 accordingly. The goal being that when I submit the form with input name='repeat' it will send the number indicated by the radio button. (Due to the structure of my page the radio button and the hidden input need to be two separate forms, but I don't think that should be a problem.) The code below isn't working -- the alert("changerepeat called") never even appears. It seems like the problem is that the onclick isn't even activating at all. Any ideas? Code: <script type="text/javascript">
function changerepeat(theval) {
alert("changerepeat called");
document.forms[0].elements[0].value = theval;
}
function tellme() {
alert("repeat = "+document.forms[0].elements[0].value);
}
</script>
<form>
<input type='hidden' name='repeat' value=''>
<input type='button' value='tellme' onclick='tellme()'>
</form>
<form>
<input type='radio' name='changerepeat' onclick='changerepeat(\'0\')'> 0
<input type='radio' name='changerepeat' onclick='changerepeat(\'1\')'> 1
</form>
Thanks very much for reading! MY PROBLEM: The problem is with 3 radio buttons - each of which changes the view of the current page by passing parameters to the end of the page url. Code: <td>
<input id="vall" tabindex="0" type="radio" name="sortview" value="all" onClick=" changeView(''); "></input>
</td>
function changeView(viewNumber) {
// First, we break the current URL into variables
var hurl = window.location.hostname;
var purl = window.location.pathname;
var surl = window.location.search;
// Then we reconstruct them
var url = hurl+purl;
// If there are parameters on the end of the URL
if (surl.indexOf("?") != -1) {
// And we are requesting a specific view of the "Opt In" field
if (viewNumber) {
// Strip the ? from the front of the parameters
var oldParam = surl.split("?");
// If any of the parameters are "opt"
if (surl.indexOf("opt") != -1){
// Then reconstruct the parameters with the requested view (how??)
}
url = "http://" + url + "?opt=" + viewNumber + oldParam[1];
}
else {
url = "http://" + url;
}
alert("opt found in url: " + surl);
window.location.href = url;
}
else{
if (viewNumber) {
url = "http://" + url + "?&opt=" + viewNumber;
}
else {
url = "http://" + url;
}
alert("opt not found: " + url);
window.location.href = url;
}
}
Is this even the most efficient way of doing this? I feel like there must be a better way. Hi guys, I'm trying to add a php string to some javascript: document.getElementById("button").value = mygetrequest.responseText; basically there are a load of buttons on one page. So i need to add a value at the end of button. Basically the ID of each row so button<? echo $row['ID']; ?> but i'm not too sure how i would do this in javascript. Any help Thanks in advance Hello everyone, I'm new to the programming world so please be kind I'm trying to find a code which would take the input value entered in a form field and on click direct you to a page which corresponds with what was entered. So for example: Enter "5" in field. Click Submit. Page opens up (which in fact would be an html file on my server called... 5.html) ( i would want to create 10 pages for values entered from 1-10... each value having a unique result when entered and clicked) I have no idea how to put this all together, i've been searching everywhere. Any kind of help would be appreciated. Hey I'm trying to create a function which when my "other address" radio button is checked, the "address2", "suburb2" and "postcode2" fields MUST be filled out by the user. I think I need to be using a for loop to determine which button is checked , but I don't know how to apply this checked button to prompt my client that the remaining fields must be completed (as seen in red)? Here is what I have come up with so far... Many thanks in advance for advice or pointers [CODE][ICODE] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Order Form for Joe's Fruit Shop</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="author" content="Cherie_ONeill"> <style type="text/css"> body {font-family:arial;color:#000000;font-size:10px;} h4 {font-style:italic;} .input {font-size:10px;color:#483D8B;} </style> <script type='text/javascript'> function formValidator() { // Make quick references to our fields var fullname = document.getElementById("fullname"); var stnumber = document.getElementById("stnumber"); var address = document.getElementById("address"); var suburb = document.getElementById("suburb"); var state = document.getElementById("state"); var postcode = document.getElementById("postcode"); var phone = document.getElementById("phone"); var email = document.getElementById("email"); // Check each input in the order that it appears in the form! if(isAlphabet(fullname, "Please enter letters only for your name")){ if (isNumeric(stnumber, "Please enter numbers only for your house number")){ if(isAlphanumeric(address, "Please enter your street name")){ if(isAlphabet(suburb, "Please enter letters only for your suburb")){ if(madeSelection(state, "Please Choose a State")){ if(isNumeric(postcode, "Please enter a valid postcode")){ if(lengthRestriction(postcode, 4, 4)){ if(isNumeric(phone, "Please enter a valid phone")){ if(lengthRestriction(phone, 10, 10)){ if(emailValidator(email, "Please enter a valid email address")){ return true; } } } } } } } } } } return false; } //ensure all fields are filled but this funtion may not be required on this form function notEmpty(elem, helperMsg) { if(elem.value.length == 0) { alert(helperMsg); elem.focus(); // set the focus to this input return false; } return true; } //ensures a field is numeric only function isNumeric(elem, helperMsg) { var numericExpression = /^[0-9]+$/; if(elem.value.match(numericExpression)) { return true; } else { alert(helperMsg); elem.focus(); return false; } } //ensures a field contains letters only function isAlphabet(elem, helperMsg) { var alphaExp = /^[a-zA-Z _]+$/; if(elem.value.match(alphaExp)) { return true; } else { alert(helperMsg); elem.focus(); return false; } } //ensures a field has both numbers & letters function isAlphanumeric(elem, helperMsg) { var alphaExp = /^[A-Za-z0-9 _]*[A-Za-z0-9][A-Za-z0-9 _]*$/; if(elem.value.match(alphaExp)) { return true; } else { alert(helperMsg); elem.focus(); return false; } } //restricts the amount of digits required in a numeric field function lengthRestriction(elem, min, max) { var uInput = elem.value; if(uInput.length >= min && uInput.length <= max) { return true; } else { alert("Please enter between " +min+ " and " +max+ " characters"); elem.focus(); return false; } } //validates a selection has been made from the select lists function madeSelection(elem, helperMsg) { if(elem.value == "Please Choose") { alert(helperMsg); elem.focus(); return false; } else { return true; } } //validates the email address function emailValidator(elem, helperMsg) { var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/; if(elem.value.match(emailExp)) { return true; } else { alert(helperMsg); elem.focus(); return false; } } //resets the form function formReset() { document.getElementById("orderForm").reset(); } </script> </head> <body> <h2>Order Form</h2> <h4>* Indicates required fields.</h4> <h4>Your details:</h4> <form name="orderForm" id="orderForm" onsubmit="return formValidator()"> <p>* Name: <input id="fullname" name="fullname" class="input"></p> * Number: <input id="stnumber" size="5" class="input"> * Address: <input id="address" name="address" class="input"></p> <p>* Suburb or Town: <input id="suburb" name="suburb" class="input"> * State: <select class="input"id="state"><option>Please Choose</option><option>ACT</option><option>NSW</option><option>NT</option><option>QLD</option><option>SA</option><option>VIC</option><option>WA</option></select> * Postcode: <input id="postcode" name="postcode" maxlength="4" size="4" class="input" ></p> <p>* Home phone: <input name="phone" id="phone" maxlength="10" size="10" class="input"></p> <p>* Email: <input name="email" id="email" value="enter your current email address" class="input"></p> <br> <h4>Purchase details</h4> <p>* Basket choice: <select class="input"><option>Fruit Deluxe</option><option>Vege Deluxe<option>Fruit & Vege Deluxe</option><option>Tropical Treat</option><option>Vege Basics</option></select> Quantity: <select class="input"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></p> <p>* Deliver to:</p> <input type="radio" id="deliverhome" name="delivery" value="home" checked="checked"><label for="deliverhome">Home address</label><br> <input type="radio" id="deliverother" name="delivery" value="other"><label for="deliverother">Other address</label> <br> <br> <input type="text" name="address2" id="address2" class="input"> (Street) <input type="text" name="suburb2" id="suburb2" class="input"> (Suburb/Town) <select class="input"><option>ACT</option><option>NSW</option><option>NT</option><option>QLD</option><option>SA</option><option>VIC</option><option>WA</option></select> (State) < input type="text" name="postcode2" id="postcode2" maxlength="4" size="4" class="input"> (Postcode) <br> <input type="submit" value="Submit"> <input type="button" onclick="formReset()" value="Reset"> </form> </body> </html> Below is a script I found at http://bytes.com/topic/javascript/an...cookie-problem The idea is a like button, like on fb, in a form which updates a db field I can use to display the number of likes, and my goal is to disable the like button for the rest of the session, or a day, or whatever. This script disables it onclick, the problem is I can't figure out how to get it to submit the form as well. I have found it does submit if the input type is 'submit', but then it doesn't call the disable function. I tried writing another function to submit the form but no go. Code: <html>
<head>
<title>Vote Button</title>
<script type="text/javascript">
function checkForVote()
{
// If there is a cookie...
if(document.cookie != "")
{
if(getCookie("voted") == 1)
{
// Disable the button again if user already voted.
disableButton();
}
}
}
function disableButton()
{
var submitvote = document.getElementById("submitvote");
submitvote.disabled = true;
submitvote.value = "You Already Voted.";
}
function setCookie(name, value, days)
{
if(days)
{
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires = " + date.toGMTString();
}
else
{
var expires = "";
}
document.cookie = name + "=" + value + expires + "; path=/";
// Disable the button as soon as the user clicks it.
disableButton();
}
function getCookie(name)
{
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0; i < ca.length; i++)
{
var c = ca[i];
while (c.charAt(0)==' ')
{
c = c.substring(1,c.length);
}
if (c.indexOf(nameEQ) == 0)
{
return c.substring(nameEQ.length,c.length);
}
}
return null;
}
</script>
</head>
<body>
<form name="voteform" id="voteform" action="foo.php" method="post">
<input type="button" name="submitvote" id="submitvote" onclick="setCookie('voted', 1, -1);" value="Submit Vote"/>
</form>
</body>
<script type="text/javascript">
// Run checkForVote() at end of document so that form and contents can be referenced
window.onload = checkForVote();
</script>
</html>
Hi, I am trying to link the <input type="range" min="450" max="800" value="500" /> to a CSS style for an AP box so when you move the slider it then changes the Css style (top:--px). allowing the Ap box to move with the slider. (important to work in Chrome) Here is the code: [CODE] <!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=utf-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- #apDiv1 { position:absolute; left:214px; top:34px; width:141px; height:164px; z-index:1; background-color:#3FF } --> </style> </head> <body> <div id="apDiv1"><p>have an image in here. Need to make this box move up and down with the slider.</p></div> <input type="range" min="450" max="800" value="500" /> </body> </html> [CODE] I have tried a number of way but can't get it, I am sure it is simple. I wrote a function, to change a input value to show a key, which PHP later recognizes and makes addition changes too. However I can't seem to get this simple function to work, can you see anything wrong with it? Code: function quote(id) {
var shout = document.getElementById('shout');
var currentShout = '; '.shout.value;
var prefix = '@'.id;
shout.value = prefix.currentShout;
}
I call it by Code: <a href="#" onclick="javascript: quote('2');">Comment</a>
the input that changes is written as Code: <input id="shout" name="shout" type="text" onKeyPress="return submitenter(this,event);"> Hi Guys, I'm fairly new to Javascript and would be grateful for any help you can give me. I've had a search on Google and found a couple of potential solutions but nothing seems to work quite right for what I need. Basically I have a form with several questions followed by Yes/No radio buttons. Dependent on which answer is given, I want to display a different message above the text box. For example, if you answered 'no' to a certain question then the message above the text box would change to say "Please fill in additional information" or something along those lines. Below is the HTML to give you an idea of what I mean. Code: <table> <tr> <td> </td> <td><label class="bold">Yes</label></td> <td><label class="bold">No</label></td> </tr> <tr> <td><label for="property_q1"> - Is this your house?</label></td> <td><input name="property_q1" id="property_q1" type="radio" value="Yes" /></td> <td><input name="property_q1" id="property_q1" type="radio" value="No" /></td> </tr> </table> <br /> <div id="fine">It's fine, don't worry about filling it in.</div> <div id="fill" style="display:none">Please fill in the form below.</div> <table> <tr> <td> </td> </tr> <tr> <td><textarea name="info" id="info" cols="60" rows="5"></textarea></td> </tr> </table> <input type="submit" /> It seems like it should be simple, but I don't see what I'm missing. Right now, the search button displays directly under my input field. I've gone through the CSS, but can't figure out where my code is forcing the button onto its own line. What am I missing? How can I bring it up to the same line?? Code: <form role="search" method="get" id="searchform" action="http://www.centerpie.com/" > <div> <input type="text" value="" maxlength="100" name="s" id="s"><input type="submit" id="searchsubmit" value="Search"> </div> </form> I need the code for if the user enters in a code into the field for example E1 and clicks submit it'll redirect them to a certain form. And if another user entered in E2 it would redirect them to a DIFFERENT form. I hope this is the correct category of the site for me to post this. Wasn't sure if it should be here or PHP.
Hi, I am wanting to insert text into a text area when a button or link is clicked. I know how to replace the whole lot in the text area, but I want it to insert text where the flashing cursor is in the text box. (Like Wikipedia) If any one can help, Then I will be very, very greatfull. Thank You. Hello. I have looked everywhere and I absolutely cannot find a method that works. I'm making an html website with flash. This is all I want...... A swf "this will be the default flash you see" underneath that flash I want 3 text links named..... Flash1 Flash2 Flash3 when you click flash1, 2, or 3 I want it to swap out the Current flash video with a different one. This way The user can watch all the flash vids on the same page, rather than a separate page for each flash. I found a way to swap them out using iframe, however that requires me to make a separate html page for each of my swf's themselves. I dont want to do that. Plz if someone could help me I would greatly appreciate it! I hope I am posting this in the correct section, I know swfobject involves javascripting so thats why I'm posting here. Not that your method HAS to involve swfobject to embed. If someone can give me code that I can just copy/paste into a blank page in dreamweaver (and I would adjust the embded swf file name and size etc obviously) and have it work that would be fantastic. thank you |
|||||||