|
JavaScript - Form Textbox Changing To Value
Looking to create a text box in a form that will automatically change value when a certain value is entered.
IE: User entering 11111 in to the text box changes text box automatically to 22222. I haven't had much success searching the internet for a code that would do this. Thanks for the help. Similar TutorialsHi All, i have an autosuggest function which i am trying to make the textbox value to change to the represent the value of the highlighted auto suggestion. i am trying to do this so that when i submit the form the correct value is passed to the next page where as at the moment only the text which is typed in the textbox is passed. here is my index.php PHP Code: <?php include("config.php");?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Ajax Auto Suggest </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <link href="css/style.css" rel="stylesheet" type="text/css"> <!--[if gte IE 6]> <link rel="stylesheet" type="text/css" href="i_hate_IE.css" /> <![endif]--> <SCRIPT LANGUAGE="JavaScript" src="js/jquery.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript" src="js/script.js"></SCRIPT> <script type="text/javascript"> window.onload = function() { document.getElementById('keyword').setAttribute('autocomplete','off'); } </script> </HEAD> <BODY> <center> <div class="main"> <form id="test" name="form1" method="post" action="search.php"> <input type="hidden" name="mode" id="mode" value="1"/> <div id="holder"> <input type="text" name="keyword" id="keyword" tabindex="0"><img src="images/loading.gif" id="loading"> </div> <div id="ajax_response"></div> </form> </div> </center> </BODY> </HTML> here is my search.php PHP Code: <?php include("config.php"); $keyword = $_POST['keyword']; $sql = "select storeName,storeLink from ".$db_table." where ".$db_column." like '".$keyword."%' limit 0,1"; $result = mysql_query($sql) or die(mysql_error()); if(mysql_num_rows($result)) { #echo '<ul class="list">'; while($row = mysql_fetch_array($result)) { $link = $row['storeLink']; header('Location: '.$link.''); } } ?> and here is my script.js file Code: $(document).ready(function(){
$(document).click(function(){
$("#ajax_response").fadeOut('slow');
});
$("#keyword").focus();
var offset = $("#keyword").offset();
var width = $("#keyword").width()-2;
$("#ajax_response").css("left",offset.left);
$("#ajax_response").css("width",width);
$("#keyword").keyup(function(event){
//alert(event.keyCode);
var keyword = $("#keyword").val();
if(keyword.length)
{
if(event.keyCode != 40 && event.keyCode != 38 && event.keyCode != 13)
{
$("#loading").css("visibility","visible");
$.ajax({
type: "POST",
url: "ajax_server.php",
data: "data="+keyword,
success: function(msg){
if(msg != 0)
$("#ajax_response").fadeIn("slow").html(msg);
else
{
$("#ajax_response").fadeIn("slow");
$("#ajax_response").html('<div style="text-align:left;">No Matches Found</div>');
}
$("#loading").css("visibility","hidden");
}
});
}
else
{
switch (event.keyCode)
{
case 40:
{
found = 0;
$("li").each(function(){
if($(this).attr("class") == "selected")
found = 1;
});
if(found == 1)
{
var sel = $("li[class='selected']");
sel.next().addClass("selected");
sel.removeClass("selected");
}
else
$("li:first").addClass("selected");
}
break;
case 38:
{
found = 0;
$("li").each(function(){
if($(this).attr("class") == "selected")
found = 1;
});
if(found == 1)
{
var sel = $("li[class='selected']");
sel.prev().addClass("selected");
sel.removeClass("selected");
}
else
$("li:last").addClass("selected");
}
break;
case 13:
$("#ajax_response").fadeOut("slow");
$("#keyword").val($("li[class='selected'] a").text());
break;
}
}
}
else
$("#ajax_response").fadeOut("slow");
});
$("#ajax_response").mouseover(function(){
$(this).find("li a:first-child").mouseover(function () {
$(this).addClass("selected");
});
$(this).find("li a:first-child").mouseout(function () {
$(this).removeClass("selected");
});
$(this).find("li a:first-child").click(function () {
$("#keyword").val($(this).text());
$("#ajax_response").fadeOut("slow");
});
});
});
i'd really appreciate some help with this please... thanks Luke So I have a little calendar widget on my site, for people to choose their dates for a reservation system. They then click a 'Book Now' button which creates a dynamic url (using their start date and the number of dates) to the booking engine. The problem is, the way it accomplishes this (window.location.href=), breaks cross-domain tracking on Google Analytics. And I'm not smart enough to figure out how to do it any other way. What I'd like to do is have clicking the Book Now button change the URL in the form action within the form with ID resForm, and then submit the form. I'm hoping someone can help me edit the form so that it accomplishes this. I'd be incredibly thankful. This is what I currently have: Code: <script>
jQuery(document).ready(function($) {
$(".book-now").click(function() {
if($('#check-in').length > 0 && $('#DepartureDate').val() != '') {
var data = $('#check-in').val();
var arr = data.split('/');
var datac = $('#DepartureDate').val();
var arr2 = datac.split('/');
var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds
var firstDate = new Date(arr[2],arr[0] -1,arr[1]);
var secondDate = new Date(arr2[2],arr2[0] -1,arr2[1]);
var diffDays = Math.round((firstDate.getTime() - secondDate.getTime())/(oneDay));
if ((diffDays) < 0)
{
diffDays = Math.abs(diffDays);
var link = "https://res.windsurfercrs.com/bbe/page1.aspx?propertyID=13841&checkin=" + arr[0] + "/" + arr[1] + "/" + arr[2] + "&nights=" + diffDays;
console.log(link);
window.location.href= link;
}
else
{
alert ('Please fill in correct Check-In and Check-Out dates. The Check-In date must be before the Check-Out date.');
}
} else {
alert ('Please fill in a Check-In and Check-Out date, thanks!');
}
});
});
</script>
The form looks like this: Code: <form action="#" onSubmit="_gaq.push(['_linkByPost',this]);" method="post" id="resForm"> <input type='text' name="checkin" id="check-in" readonly="readonly" style="cursor: text" data-default="MM/DD/YYYY" class='arrivaldate'/> <input name="checkout" id="DepartureDate" readonly="readonly" style="cursor: text" data-default="MM/DD/YYYY" class='departuredate'/> <input type="button" value="BOOK NOW" class='book-now' /> </form> Reply With Quote 01-25-2015, 12:46 AM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,310 Thanks 82 Thanked 4,754 Times in 4,716 Posts Just call the _gaq() function manually. Code: _gaq.push(['_linkByPost',document.getElementBy("resForm")])
window.location.href= link;
Good day all: I want to get the value of a textbox into php without clicking the submit button. Any advice... Here is what I have My form field: Code: #1 <input type="text" style=background:transparent; border:0px; name='clientid' > This field is populated dynamically by its name with another php script in this way Code: #2
echo "formObj.clientid.value = '".toSafeString($inf["clientID"])."';\n";
Now I want to take the value in code#1 (name='clientid') and pass it to a php code that is in the same file as the form. Here is the php code PHP Code: <?php $name=$_POST['name'];//this is where the value of the text box mentioned is defined include 'datalogin.php'; error_reporting(0); error_reporting(E_ERROR | E_WARNING | E_PARSE); //test //get image details $uploaddir = "images/clientsimages/"; $get_data = "SELECT i.uploadedfile, i.clientid " . " FROM images AS i, ajax_client AS a " . " WHERE i.clientid = a.clientID " . " AND a.clientID = $name"; $get_data_res = mysql_query($get_data) or die(mysql_error() . '<br>sql : '.$get_data); if (mysql_num_rows($get_data_res) > 0) { while ($get_data_info = mysql_fetch_array($get_data_res)) { $uploadedfile = $uploaddir . $get_data_info["uploadedfile"]; } } ?> I know this may require js, but I appreciate any help! Hello folks, I have a content form. It has a textbox and a checkbox control (both are asp server controls and not HTML controls). When the user checks on the checkbox control, the textbox control has to become invisible. If unchecked the textbox control has to become visible. The following code works on a regular webform (meaning not as a content form). toggleVisibility is the function name that does the actual work. I am guessing I am not passing the textbox control ID properly to toggleVisibility function. Can someone guide me please? Following is the code: Code: <asp:TextBox ID="TextBoxPeriod"
runat="server" Width="97px"></asp:TextBox>
<asp:CheckBox ID="CheckBoxFromArchive" runat="server" Visible="true"
Onclick="toggleVisibility('<%=TextBoxPeriod.ClientID %>');" />
function toggleVisibility(controlId) {
var control = document.getElementById(controlId);
if (control.style.visibility == "visible" || control.style.visibility == "") {
control.style.visibility = "hidden";
}
else {
control.style.visibility = "visible";
}
}
Okay I have searched google for hours literally without luck so hopefully someone here can help. What I am trying to do is when someone submits the form if there are empty textboxes change the textbox's style from class="input" to class="inputreq". Someone please help, the formname is "signup" and the textboxes are "domain" and "username". Please help. Thanks. Hello guys (and girls) I am messing with this whole day, 'cos I wanted to try and figure this out by myself instead of going on forums. I failed, as you may see. So, to cut it short: I needed to calculate my prices on-the-fly and display it in textbox with javascript. Well I did succeed with values of radio button an checbox, but as i know very little javascript, I don't know how to expand the code i got from he http://javascript.internet.com/forms...e-refresh.html So what I would LOVE to know, is how can I make this happen: I have a textbox: Code: <input type="text" name="podstranice" size="19" class="podstr" onkeyup="this.form.total.value=calculateTotal(this);"> and when a user inputs a number in it, javascript multiplies it with some other number, say 10 (its a price*quantity thing) and adds it to the total price along with data from checkboxes and radio buttons. And so, this is my javascript. It is basically identical to one on the link, but you can view it better this way I think. Code: // Calculate the total for items in the form which are selected.
function calculateTotal(inputItem) {
with (inputItem.form) {
// Process each of the different input types in the form.
if (inputItem.type == "radio")
{ // Process radio buttons.
// Subtract the previously selected radio button value from the total.
calculatedTotal.value = eval(calculatedTotal.value) - eval(previouslySelectedRadioButton.value);
// Save the current radio selection value.
previouslySelectedRadioButton.value = eval(inputItem.value);
// Add the current radio button selection value to the total.
calculatedTotal.value = eval(calculatedTotal.value) + eval(inputItem.value);
}
else
{ // Process check boxes.
if (inputItem.checked == false)
{ // Item was uncheck. Subtract item value from total.
calculatedTotal.value = eval(calculatedTotal.value) - eval(inputItem.value);
}
else { // Item was checked. Add the item value to the total.
calculatedTotal.value = eval(calculatedTotal.value) + eval(inputItem.value);
}
}
elseif
// Total value should never be less than 0.
if (calculatedTotal.value < 0) {
InitForm();
}
// Return total value.
return(formatCurrency(calculatedTotal.value));
}
}
// Format a value as currency.
function formatCurrency(num) {
num = num.toString().replace(/\$|\,/g,'');
if(isNaN(num))
num = "0";
sign = (num == (num = Math.abs(num)));
num = Math.floor(num*100+0.50000000001);
cents = num%100;
num = Math.floor(num/100).toString();
if(cents<10)
cents = "0" + cents;
for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
num = num.substring(0,num.length-(4*i+3)) + ',' + num.substring(num.length-(4*i+3));
return (((sign)?'':'-') + num + '.' + cents + ' kn');
}
// This function initialzes all the form elements to default values.
function InitForm() {
// Reset values on form.
document.selectionForm.total.value='$0';
document.selectionForm.calculatedTotal.value=0;
document.selectionForm.previouslySelectedRadioButton.value=0;
// Set all checkboxes and radio buttons on form to unchecked.
for (i=0; i < document.selectionForm.elements.length; i++) {
if (document.selectionForm.elements[i].type == 'checkbox' | document.selectionForm.elements[i].type == 'radio') {
document.selectionForm.elements[i].checked = false;
}
}
}
I don't want to overspam my post with more code, so I hope this is all you need, at least for now. THANK YOU very much in advance. Hi.. I have form and i want to input data using barcode and it will display on textbox and after input on the first textbox the focus will go to next textbox untill it will go on the last textbox and on the last textbox it will automatically save the data's on the database. How is it possible? here is my sample code: Code: <?php
error_reporting(0);
date_default_timezone_set("Asia/Singapore"); //set the time zone
$con = mysql_connect('localhost', 'root','');
if (!$con) {
echo 'failed';
die();
}
mysql_select_db("mes", $con);
?>
<html>
<head>
<script type="text/javascript">
function ini()
{
// Retrieve the code
var code =document.getElementById ("code_read_box1").value;
var code =document.getElementById ("code_read_box2").value;
var code =document.getElementById ("code_read_box3").value;
var code =document.getElementById ("code_read_box4").value;
var code =document.getElementById ("code_read_box5").value;
var code =document.getElementById ("code_read_box6").value;
// Return false to prevent the form to submit
return false;
}
</script>
</head>
<body onLoad="document.barcode.code_read_box1.focus()">
<form name=barcode onsubmit = "return ini()">
<input type="text" id="code_read_box1" value="" /><br/>
<input type="text" id="code_read_box2" value="" /><br/>
<input type="text" id="code_read_box3" value="" /><br/>
<input type="text" id="code_read_box4" value="" /><br/>
<input type="text" id="code_read_box5" value="" /><br/>
<input type="text" id="code_read_box6" value="" /><br/>
</form>
</body>
</html>
Hello. I've been teaching myself HTML and CSS for a while, and now I've moved into the world of Javascript (but I'm still very much a beginner). For practice, I've been building a sample sign up form for a mock website, and I'm having problems with the birthdate section. The idea I had was to have MM, DD, and YYYY be the default values of my 3 textboxes (as an example for users), then set the value to nothing when the box gained focus. That all works fine, but I ran into problems when I tried to write an if statement to set the value back to MM, DD, or YYYY if the value was still nothing when the user clicked away. As it is now it just replaces the text inputted into the textbox (which of course is not good). Any ideas for what the problem might be? Code: <form name="signup" action="javascript:void(0);" method="post">
<table>
<tr>
<td>Date Of Birth:</td>
<td>
<input name="DOBmonth" type="text" value="MM" size="2" style="color: #555555;" onFocus="clearDOBmonth()" onBlur="restoreDOBmonth()" />
<input name="DOBday" type="text" value="DD" size="2" style="color: #555555;" onFocus="clearDOBday()" />
<input name="DOByear" type="text" value="YYYY" size="4" style="color: #555555;" onFocus="clearDOByear()" /></td>
</tr>
<tr>
<td></td>
<td><button name="Submit" type="submit" style="font-size: 1em;">Sign Up</button></td>
</tr>
</table>
</form>
<script type="text/javascript" language="javascript">
<!--
document.signup.DOBmonth.value="MM";
document.signup.DOBday.value="DD";
document.signup.DOByear.value="YYYY";
function clearDOBmonth() { document.signup.DOBmonth.value="";}
function clearDOBday() { document.signup.DOBday.value="";}
function clearDOByear() { document.signup.DOByear.value="";}
function restoreDOBmonth()
{
if ('document.signup.DOBmonth.value = ""')
{
document.signup.DOBmonth.value = "MM";
// alert(document.signup.DOBmonth.value);
}
}
//-->
</script>
Another side question, if I set a variable equal to the value of a textbox, then change the value of the variable, does that also change the value of the textbox? or is the variable no longer associated with the textbox. Example: Code: var a = document.form.textbox.value; a = blue; does document.form.textbox.value = blue? or is var a now completely independent of the textbox value? Thanks! I want to have button2 populate form fields in a separate form with certain data I choose. The challenge is that the name of each text box is the same ("inputbox") and the id is dynamic, the first part only staying the same. So, the form element id would be "idb_4555557805340560...". There would only be one form element that begins with "idb." The following code works, but doesn't address the dynamic id. How can I do this? Code: <HTML>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
function writeText (form) {
document.getElementById('ida').value = "Have a nice day!";
document.getElementById('idb').value = "Have a nice day!!";
document.getElementById('idc').value = "Have a nice day!!!";
}
</SCRIPT>
<form name="one"><INPUT TYPE="button" NAME="button2" Value="Write" onClick="writeText(document.myform)"></form>
<FORM NAME="myform" ACTION="" METHOD="GET">
<INPUT TYPE="text" NAME="inputbox" id="ida" VALUE="">
<INPUT TYPE="text" NAME="inputbox" id="idb" VALUE="">
<INPUT TYPE="text" NAME="inputbox" id="idc" VALUE="">
</FORM>
</BODY>
</HTML>
CHANGE XX to TT CHANGE zero in c0m to O becoming com CHANGE YYY to WWW hxxps://yyy.yousendit.c0m/download/dklxb2VIcVg1aWF4dnc9PQ first an example of what im trying to do: when logging in to a forum, you enter your info at the top right corner. thts where the login info txt boxes are usually located. under these you'll find a menu bar. if you're logged in, the menu commands/items arent the same as when you're not logged in. example of logged in is search. example of not being logged in is register. anyways under the menu there's the forum itself. u no, sections and topics. the table basically. this is wht im trying to do. even if im doing it wrong plz indulge me I know that ppl dont use frames much anymore. but just go with it. It DOES help to no how to do something in different ways. Ok, assuming you setup my pages, press submit. All 3 frames SHOULD go to 1.php BUT what happens is that the lower two frames go to 1.php. the first frame doesnt. It's the frame that has the form which has the button. If i put the button outside the form and press submit, it works. all 3 frames change. so i'm guessing it's got to do with the form itself. How do I fix it? Thank you!!!! I have the following form working with on onsumbit function, but I would like to change it so that instead of having to click the purchase button to see total price, you only have to change the quanity text box input. I would welcome any help. I just can not seem to get it to work. Code: <script language="javascript" type="text/javascript">
function checkQuantity(frm) {
var succesful = false;
var numQuantity;
numQuantity = parseInt(frm.Quantity.value);
var numTotalPrice;
if (numQuantity != 0) {
numTotalPrice = numQuantity * 4;
frm.TotalPrice.value = numTotalPrice; //new String(numTotalPrice);
successful = true;
}
else {
alert("Sorry must order more than 0");
successful = false;
}
return succesful;
}
</script>
Code: <form action="" onsubmit="return checkQuantity(this)" style="width: 193px">
<table cellpadding="4" style="width:111%">
<tr>
<td class="style1">
Quanity:</td>
<td class="formInputCell">
<input name="Quantity" type="text" style="width: 55px" /></td>
</tr>
<tr>
<td class="style1">
Total Price $
</td>
<td class="formInputCell">
<input name="TotalPrice" type="text" style="width: 55px" /></td>
</tr>
<tr>
<td class="style2"></td>
<td><input id="Submit1" type="submit"
value="Buy Now" class="buttonstyle" /></td>
</tr>
</table>
</form>
Hi, i got a textbox with a submit button but when submit button is clicked it works but it reloads the page. is possible to submit without reload the page? thanks Hi, I have a text-box where you enter the phone nos. On key-press, i have written a validation code to enter only nos and "-". I have disabled Ctrl+v, but my customer want to enable ctrl+v for that text-box only. My requirement is after pasting the value it should automatically check for validation.. How to do it? Thanks... Hi there, I have two textboxes and I want some images to be displayed in my textboxes randomly if randomNumber==1 let textbox1/textbox2 backgroundimage change and if randomnumber==2 let textbox1 backgroundimage change again. I think I need some fixing in the following lines: document.getElementById("txtbox1").Attributes.Add("this.style.backgroundImage = 'url(1.jpg)';"); Thanks for any help.. PHP Code: <script> setInterval("showimages()",500); function showimages() { var rno=Math.floor(Math.random()*2)+1; document.getElementById("box1").value=rno; if(rno==1){ document.getElementById("txtbox1").Attributes.Add("this.style.backgroundImage = 'url(1.jpg)';"); document.getElementById("txtbox2").Attributes.Add("this.style.backgroundImage = 'url(2.jpg)';"); } if(rno==2){ document.getElementById("txtbox1").Attributes.Add("this.style.backgroundImage = 'url(3.jpg)';"); document.getElementById("txtbox2").Attributes.Add("this.style.backgroundImage = 'url(4.jpg)';"); } } </script> <input type="text" id="txtbox1" style="position:absolute;top:200px;left:200px;height:150px"> <input type="text" id="txtbox2" style="position:absolute;top:200px;left:500px;height:150px"> <input type="text" id="box1" style="position:absolute;top:100px;left:100px;width:40px;"> <input type="button" onclick='location.reload()' style="position:absolute;top:20px;left:100px;"> Hey guys, I recently found a small code in internet which use option value in select tag to insert value in text box, so text box has the exact same value as selected option: Code: <form name="theform" onsubmit="CheckForm()"> <select name="myOptions" onchange="document.theform.showValue.value=this.value"> <option name="(some dynamic text)" id="(some dynamic text)" value="I am the first option">I am the first option</option> <option name="(some dynamic text)" id="(some dynamic text)" value="I am the second option">I am the second option</option> <option name="(some dynamic text)" id="(some dynamic text)" value="I am the third option">I am the third option</option> <option name="(some dynamic text)" id=""(some dynamic text)" value="I am the third option">I am the fourth third option</option> </select> <input type="text" name="showValue"><br> </form> Now what I want is simple and a little different from this one, I want the text box value to be as exact as selected option name or id (doesn't matter which one) which means if an option selected, text box value has to follow that option name or id. Thanks folks. Hi, I am having a very difficult time trying to get my text box to validate. I successfully validated my first program using prompts but now when I am using a HTML form I cannot get it to work. I have spent hours upon hours trying to get this working, any help would be greatly appreciated. Code: <html>
<head>
<title></title>
<script type="text/javascript">
function validateform()
{
var temp = document.forms["inputform"]["temperature"].value
while ((isNaN(temp)) || (temp == ""))
{
alert("Please enter a number");
return false;
}
if (parseFloat(temp) > 35)
{
alert("Wow, it's really hot!");
}
else if (parseFloat(temp) <= 35) && (parseFloat(temp) >= 18))
{
alert("It's a comfortable temperature right now");
}
else if (parseFloat(temp) < 18)
{
alert("Brrr, it's a little bit cold for my liking");
}
else
{
alert("Goodbye, and thanks for using TempReader");
}
}
</script>
</head>
<body>
<form name="inputform" method="post" action="">
<table>
<tr><td>What Is The Temperature?</td><td><input type="text" name="temperature"></td></tr>
<!-- Below is submit button that when pressed validates the form -->
<tr><td></td><td><input type="submit" value="Submit Details" onclick = validateform()></td></tr>
</table>
</form>
</body>
</html>
Hello How am I able to add a a cross to the right of a textbox which once click it clears the text from the textbox, sort of like the way Google do it, I have been trying to do this for ages now and can't seem to find a way to do it. Any help welcome, thank you. - DJCMBear I would like to type something into my textbox and then press ENTER, it will execute a function. I tried onFocus, onChange and onBlur but it doesn't do what I want it to. Here's an example I use for onChange. Code: Application: <input type="text" onchange="execProg(0);"> Any comments or suggestions is greatly hi, I am tring to display some texts in a textbox using \n to create a new line but it does not work. PHP Code: <script> document.getElementById("txtbox1").value=" this is my firstline \n This is my second line \n this is my third line" </script> <input type="text" id="txtbox1"> thanks |
|||||||