|
JavaScript - Refresh A Form From A Drop Down
Hey everyone, I am trying to create a form that changes depending on the selection from a drop down.
I found this thread: http://codingforums.com/showthread.php?t=20516 but rather then hiding all other options it just shows a certain amount of options. I am looking for a drop down that has (for example) 10 options and each option displays a different form while hiding all other forms. I am also wondering if the form can change automatically when the user selects the option without reloading the page. Thanks for everyones help. Similar TutorialsThis is hopefully my last jquery question. I have a slight issue with my buttons and dropdown menu. What happens is lets say user chooses option type "ABCDE" in first dropdown menu and then second dropdown menu chooses the value "4" for the number of answers and then clicks on the buttons "A","B","C" and "E", well if the user then decides to change the option type to "ABC", the buttons "A", "B" and "C" are still selected from the last time they have been selected. What I want is that if the Option Type (OptionDropId) changes, then buttons selected is refreshed so no buttons are selected from the last time they have been selected. This did used to work but when I included my change() event handler in my code which I need, the buttons do not refresh whenever a new dropdown option (OptionDropId) is selected. So I think the edit of the code may need to happen in the code below: Code: $(document).ready(function ()
{
var OptDrop = new Array();
OptDrop.abc = ["",1,2];
OptDrop.abcd = ["",1,2,3];
OptDrop.abcde = ["",1,2,3,4];
OptDrop.trueorfalse = [1];
OptDrop.yesorno = [1];
$("#optionDropId").change(function ()
{
var selectedValue = $(this).val();
$("#numberDropId").html("");
$.each(OptDrop[selectedValue], function (x, y)
{
$("#numberDropId").append($("<option></option>").attr("value", y).html(y));
});
});
$("#optionDropId").change();
});
My code is in JSfiddle, (the second dropdown menu and buttons may not appear in JSFiddle but the code does work properly, I feel it is better displaying code in JSfiddle then in my questions as it will take up a lot of space. If you want to see working version then post code in your web document and it should work). My Code: [click below][1] [1]: http://jsfiddle.net/XZ7um/10/ All my parameters will not work after my first form submission unless I refresh my page. Is there a way to refresh the page after the page loads without a continuous loop of refreshes?
I'm trying to submit a form without refreshing the page and I'm not having much luck. The form just resets and nothing is added to the database. The php script works fine as when I use form action - everything is added to the db. Here's the html form: Code: <div id="form">
<form method="post" action="" id="form">
<label for="sections" id="wybierz">Wybierz sekcje</label>
<select id="sections" name="sections">
<option value="sekcjaA">Sekcja A</option>
<option value="sekcjaB">Sekcja B</option>
</select>
<!-- Chose font & background color -->
<label for="fontcolor1" id="colorsLabel">Wybierz kolor czcionki/ tla </label>
<input class="color" id="fontcolor" name="fontColor" value="F0000F" /> <input class="color" id="bgcolor" name="bgcolor" value="ebebeb" />
<!-- Chose font -->
<label for="font" id="choseFontLabel">Wybierz typ/ rozmiar czcionki<abbr title="Wybierz typ oraz rozmiar czcionki">(?)</abbr></label>
<select id="font" name="font">
<option value="Arial" id="arial">Arial</option>
<option value="Comic Sans Ms">Comic Sans MS</option>
<option value="Courier New">Courier New</option>
<option value="Georgia">Georgia</option>
<option value="Impact" id="impact">Impact</option>
<option value="Tahoma">Tahoma</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Verdana">Verdana</option>
<option value="Geneva">Geneva</option>
<option value="Trebuchet MS">Trebuchet MS</option>
</select>
<!-- End chose font -->
<!-- Chose font size -->
<select id="fontSize" name="fontSize">
<option value="9">9px</option>
<option value="10">10px</option>
<option value="11">11px</option>
<option value="12">12px</option>
<option value="13">13px</option>
<option value="14">14px</option>
<option value="15">15px</option>
<option value="16">16px</option>
<option value="17">17px</option>
<option value="18">18px</option>
<option value="19">19px</option>
<option value="20">20px</option>
</select>
<!-- End chose font size -->
<!-- Chose line height -->
<label for="lineHeight" id="lineHeightLabel">Wybierz wysokosc interlini/ odstep miedzy znakami</label>
<select id="lineHeight" name="lineHeight">
<option value="8">8px</option>
<option value="10">10px</option>
<option value="11">11px</option>
<option value="12">12px</option>
<option value="13">13px</option>
<option value="14">14px</option>
<option value="15">15px</option>
<option value="16">16px</option>
<option value="17">17px</option>
<option value="18">18px</option>
<option value="19">19px</option>
<option value="20">20px</option>
<option value="21">21px</option>
<option value="22">22px</option>
<option value="23">23px</option>
<option value="24">24px</option>
<option value="25">25px</option>
<option value="26">26px</option>
<option value="27">27px</option>
<option value="28">28px</option>
<option value="29">29px</option>
<option value="30">30px</option>
</select>
<!-- End chose line height -->
<!-- Chose letter spacing -->
<select id="letterSpacing" name="letterSpacing">
<option value="1">1px</option>
<option value="2">2px</option>
<option value="3">3px</option>
<option value="4">4px</option>
<option value="5">5px</option>
<option value="6">6px</option>
<option value="7">7px</option>
<option value="8">8px</option>
<option value="9">9px</option>
<option value="10">10px</option>
</select>
<!-- End chose letter spacing -->
<select id="fontStyle" name="fontStyle">
<option value="Normal">Normal</option>
<option value="Italic">Italic</option>
<option value="Bold">Bold</option>
</select>
<label for="tekst" id="wprowadz">Wprowadz tekst</label>
<input type="button" value="PL" id="PL" onclick="readyTextPL();" />
<input type="button" value="ENG" id="ENG" onclick="readyTextENG();" />
<input type="button" value="Lorem..." id="lorem" onclick="readyTextLorem();" />
<textarea cols="45" rows="5" name="tekst" id="tekst" onclick="clearTextarea();"></textarea>
<label for="add" id="addLabel">Dopisz <abbr title="Dopisz do wybranej sekcji">(?)</abbr></label>
<input type="checkbox" value="Dodaj" id="add" />
<input type="button" value="Wykonaj" id="wykonaj" onclick="copyText();" />
<input type="button" value="Wyczysc Formularz" id="clear" onclick="clearAll();" />
<input type="submit" value="Zapisz" id="save" class="save" /> <span class="success" style="display:none"> Registration Successfully</span>
</form>
here's the script file I'm using: Code: // JavaScript Document
$('.save').click(function(){
var sections = $('#sections').val();
var fontColor = $('#fontcolor').val();
var bgcolor = $('#bgcolor').val();
var font = $('#font').val();
var fontSize = $('#fontSize').val();
var lineHeight = $('#lineHeight').val();
var letterSpacing = $('#letterSpacing').val();
var fontStyle = $('#fontStyle').val();
//Datastring to pass through
var dataString = 'sections=' + sections + '&fontColor' + fontColor + '&bgcolor' + bgcolor + '&font' + font + '&fontSize' + fontSize + '&lineHeight' + lineHeight + '&letterSpacing' + letterSpacing + '&fontStyle' + fontStyle;
$.ajax({
type: "POST",
url: "update.php",
data: dataString,
success: function(){
$('#success').fadeIn(200).show();}
});
});
any ideas what's wrong? I am running into a problem, that no one else in the world seems to have. When I make a form and submit the page is refreshed, or rather redirected to a state with the values filled after the ? (i.e. http://localhost/comp-267/lab15.html -> http://localhost/comp-267/lab15.html?cardNUm=). I have found solutions that have worked for other people, none of them work for me. I have tested my forms on multiple browsers on multiple systems and the problem persists. Here is one example of my code where this happens. Code: <script type="text/javascript">
function checkCC(myForm)
{
var ccType;
var ccLength;
var ccNum = myForm.cardNum.value;
if (myForm.cardType.selectedIndex == 0)
{
ccType = "Visa";
}
else if (myForm.cardType.selectedIndex == 1)
{
ccType = "MasterCard"
}
else if (myForm.cardType.selectedIndex == 2)
{
ccType = "AmericanExpress"
}
switch(ccType)
{
case "Visa":
valid = /^4[0-9]{12}(?:[0-9]{3})?$/;
if (valid.test(myForm.cardNum.value))
{
alert("This is a Valid Visa Card");
return true;
}
else
{
alert("This Card Number is Invalid For Visa");
return false;
}
break;
case "MasterCard":
valid = /^5[1-5][0-9]{14}$/;
if (valid.test(myForm.cardNum.value))
{
alert("This is a Valid MasterCard Card");
}
else
{
alert("This Card Number is Invalid For MasterCard");
}
break;
case "AmericanExpress":
valid = /^3[47][0-9]{13}$/;
if (!valid.test(myForm.cardNum.value))
{
alert("This is a Valid American Express Card");
return true;
}
else
{
alert("This Card Number is Invalid For American Express");
return false;
}
break;
default:
valid = /^$/;
alert("Card type not found");
return false;
}
}
</script>
</head>
<body>
<h1>Credit Card Validator</h1>
<form name="creditCard" onsubmit="return checkCC(this)">
<span class="labels">Card Type:</span>
<select name="cardType" size="3">
<option name="visa">Visa</option>
<option name="mc">Master Card</option>
<option name="amex">American Express</option>
</select>
<br />
<span class="labels">Card Number:</span>
<input name="cardNUm" type="text" size=30 value="" />
<br />
<br />
<input type="submit" value="Death to All"
style="background-color:#666666 !important; border:thick groove !important; border-color:#333333 !important"
onclick="javascript:return checkCC(this.form)" />
</form>
</body>
</html>
you can find the page he Form Example How do I get this to not happen? I've tried almost every fix I could find that worked for other people none have worked for me. I want to refresh the calculations on a form without submitting the form. I have tried two different JavaScript button codes, and I'm wondering if there is a reason for using one over the other, and if there is something else better for cross-browser use. 1) [ICODE] _doClick('$Refresh', this, '_self') 2) [ICODE] _doClick('$Refresh', this, null, null) Sorry if I missed the answer to this by searching, but I did try. Advice is welcome. Hello Friends In my jsp,Struts project i am using the javascript calendar control for selecting the date and by using function calcage() i am calculating the age of the user but problem occurs when the page refreshes OR when user updated the other values such as name ,contact no. Then the value of the age is set as 0 in the textfield as 0 So can you please tell me why this problem occurs And please give me solution Thanks Hey guys, I'm working on a user website and have got the upload form working and the cropping working, also got the image in my profile, all works great. A few things I need tho and wondering if you could help. I need to stop the form from resubmitting the image when I refresh the upload.php page below upload.php PHP Code: <?php define('INCLUDE_CHECK',true); require 'connect.php'; session_start(); $session_id ='1'; $username = $_SESSION['user']; $upload = $_POST['upload']; $new_name = "small".$username.".jpg"; $path = "uploads/"; ?> <html> <head> <title>My Network</title> </head> <link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.imgareaselect.pack.js"></script> <script type="text/javascript"> function getSizes(im,obj) { var x_axis = obj.x1; var x2_axis = obj.x2; var y_axis = obj.y1; var y2_axis = obj.y2; var thumb_width = obj.width; var thumb_height = obj.height; if(thumb_width > 0) { if(confirm("Do you want to save image..!")) { $.ajax({ type:"GET", url:"ajax_image.php?t=ajax&img="+$("#image_name").val()+"&w="+thumb_width+"&h="+thumb_height+"&x1="+x_axis+"&y1="+y_axis, cache:false, success:function(rsponse) { $("#cropimage").hide(); $("#thumbs").html(""); $("#thumbs").html("<img src='uploads/"+rsponse+"' />"); } }); } } else alert("Please select portion..!"); } $(document).ready(function () { $('img#photo').imgAreaSelect({ aspectRatio: '1:1', onSelectEnd: getSizes }); }); </script> <?php $valid_formats = array("jpg", "png", "gif", "bmp"); if(isset($_POST['submit'])) { $name = $_FILES['photoimg']['name']; $size = $_FILES['photoimg']['size']; if(strlen($name)) { list($txt, $ext) = explode(".", $name); if(in_array($ext,$valid_formats) && $size<(1024*1024)) { $actual_image_name = time().substr($txt, 5).".".$ext; $tmp = $_FILES['photoimg']['tmp_name']; if(move_uploaded_file($tmp, $path.$actual_image_name)) { mysql_query("UPDATE user SET profile_image='$actual_image_name' WHERE id='$username'"); $image="<h1>Please drag on the image</h1><img src='uploads/".$actual_image_name."' id=\"photo\" style='max-width:500px' >"; $profile_image="<img src='uploads/".$new_name."' style='max-width:500px' >"; } else echo "failed"; } else echo "Invalid file formats..!"; } else echo "Please select image..!"; } ?> <body> <div style="margin:0 auto; width:600px"> <?php echo $image; ?> <div style="padding:5px; width:600px"> <?php echo $profile_image; ?> </div> <div style="width:600px"> <form id="cropimage" method="post" enctype="multipart/form-data"> Upload your image <input type="file" name="photoimg" id="photoimg" /> <input type="hidden" name="image_name" id="image_name" value="<?php echo($actual_image_name)?>" /> <input type="submit" name="submit" value="Submit" /> </form> </div> </div> </body> </html> ajax_image.php PHP Code: <?php define('INCLUDE_CHECK',true); require 'connect.php'; session_start(); $username = $_SESSION['user']; $upload = $_POST['upload']; $t_width = 100; // Maximum thumbnail width $t_height = 100; // Maximum thumbnail height $new_name = "small".$username.".jpg"; // Thumbnail image name $path = "uploads/"; if(isset($_GET['t']) and $_GET['t'] == "ajax") { extract($_GET); $ratio = ($t_width/$w); $nw = ceil($w * $ratio); $nh = ceil($h * $ratio); $nimg = imagecreatetruecolor($nw,$nh); $im_src = imagecreatefromjpeg($path.$img); imagecopyresampled($nimg,$im_src,0,0,$x1,$y1,$nw,$nh,$w,$h); imagejpeg($nimg,$path.$new_name,90); mysql_query("UPDATE user SET profile_image_small='$new_name' WHERE username='$username'"); echo $new_name."?".time(); exit; } ?> And I also need a live preview of cropping. So when the user is selecting what area of the Large image they want as there final thumb image, they can see the thumb change to that selection at the same time. The thumb is below the uploaded image, and without refreshing, which I cannot yet do because of the form resubmit, you can't see the final image until you go back to your profile. If I didn't make the above clear enough, please tell me. Thanks for any help and suggestions. Hi, I have the below code: Code: <script type="text/javascript">
function loadQuickMessageCheck(File,ID){
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(ID).innerHTML=xmlhttp.responseText;
eucalyptus = setInterval(function(){loadQuickMessageCheck(File,ID)},20000);
}
}
xmlhttp.open("POST",File,true);
xmlhttp.send();
}
</script>
But I am overloading the server and crashing it. I've googled the issue and have found people with similar problems who talk about the need to cancel the last refresh request before they send the next refresh. I even found this nice piece of code which worked for someone else. Quote: try{window.clearTimeout(tRefresh)} catch(err) {} tRefresh = setInterval(setContext, varInterval*60*1000); } I am not sure if this is the solution that I am looking for but if it is all my attempts at applying this code has been a bit of a disaster. hi im new to scripting so apologies if this is a basic question. I have a form which has javascript validation which triggers hidden divs if certain input boxes are left blank. I have it working with text fields and text areas, but im having trouble with a drop down menu. This is the code for my drop down: Code: <select name="department" size="1" id="department"> <option value="" selected>Please select</option> <option value="1">Personal Injury</option> <option value="2">ULR & Credit Hire</option> <option value="3">Consumer Credit</option> <option value="4">Health & Safety</option> <option value="5">Property</option> </select> And this is the code currently for the Javascript validating: Code: if(department.selectedIndex == 0){
var error = true;
$('#department_error').fadeIn(500);
}else{
$('#department_error').fadeOut(500);
If i leave the drop down on the 'Please Select' value, the error message should show, but at the moment it doesnt show up. I have a feeling the syntax is wrong in the javascript? Any help very much appreciated Thanks Hi everyone, I am converting a program that displays the payment options as a list of check boxes to a drop down list. I have tried using onBlur(), etc. but the program is displaying my error that says I didn't select a payment method. Here is the code, thanks for any hints or help! Code: <html>
<head>
<title>Order form</title>
<meta http-equiv="Content-Type" content="text/javascript">
<script type="text/javascript">
function total()
{
var subtotal=0;
var total=0;
var adjustment=1;
payment=false;
var elmnts=document.payform.elements;
for (var x=0; x<(document.payform.elements['item[]'].length); x++)
{
if (document.payform.elements['item[]'][x].checked)
{
subtotal=subtotal+parseFloat(document.payform.elements['item[]'][x].value);
}
}
for (var x=0; x<(document.payform.pay.length); x++)
{
if (document.payform.pay[x].checked)
{
adjustment=document.payform.pay[x].value;
payment=true;
}
}
if (payment)
{
total=subtotal*adjustment;
total = total.toFixed(2);
document.payform.display.value="subtotal: "+subtotal+"\rAdjustment: "+adjustment+"\rTotal: "+total;
}
else
{
window.alert("Please choose payment type.");
}
}
</script>
</head>
<body>
<form name="payform">
<table border="0" cellpadding="5">
<tr>
<td width="250" valign="top">
<b>Please buy some stuff!</b><br />
<input type="checkbox" name="item[]" value="14.99" />Chang $14.99<br />
<input type="checkbox" name="item[]" value="12.99" />Chartreuse verte $12.99<br />
<input type="checkbox" name="item[]" value="13.99" />Gnocchi di nonna Alice $13.99<br />
<input type="checkbox" name="item[]" value="14.99" />Gudbrandsdalsost $14.99<br /><br />
<b>Choose payment methods</b><br />
<select name = "pay" size = 0>
<option value = "0"></option>
<option value = "1.2">Monday order (20% service charge)</option>
<option value = "1.1">Personal check (10% service charge)</option>
<option value = ".8">Visa (preferred -- 20% discount)</option>
<option value = "1.2">MasterCard (10% discount)</option>
<option value = "1.2">Discover (10% discount)</option>
</select>
<br /><br />
<input type="button" value="Process Order" onClick="total()" />
<input type="reset" value="Reset Form" />
</td></tr>
<tr>
<td width="200" valign="bottom">
<textarea name="display" rows="5" cols="35"></textarea></td>
</tr>
</table>
</form>
</body>
</html>
Hi there, I need help in form validation! I want this to be validated upon selection of the drop down list (not when it comes to submit button) I have 2 drop down lists: Starting date (June 5th, 6th 7th) Ending date (June 5th, 6th 7th) I want to write a script that would NOT ALLOW one to choose: - Starting date June 6th and Ending date June 5th - Starting date June 7th and Ending date June 6th - Starting date June 7th and Ending date June 5th I appreciate your help I have the perfect form for a client - but its missing one thing. She sells hair clips in various colors. A user can select a hair clip color and quantity quite easily (as seen in the code below). My issue is that she wants to be able to give the user a 'special price' based on the quantity ordered by the user. Contrary to simply adding the default price of $7 over and over again based on the quantity selected. To Reiterate The way I want it to work... 1 clip is $7 2 clips are $12 3 clips are $22 5 clips are....etc. ...however, with the way that the javascript is set up now I'm only able to select one default price. This means that whatever quantity is selected -- it's simply multiplied by the number 7 to provide a total. 1 clip is $7 2 clips are $14 3 clips are $21 5 clips are....etc. If some kind soul can give their advice or point me in the right direction I would appreciate it. Code: <script type="text/javascript" src="_inc/orderform04.js"></script>
<script type="text/javascript">
//<![CDATA[
window.onload = setupScripts;
function setupScripts()
{
var anOrder1 = new OrderForm();
}
//]]>
</script>
<form id="frmOrder">
<p>
<input type="checkbox" id="chk0" />
Black Hair Clips
$<span id="txtPrice0">10</span>
<select id="sel0">
<option value="val0">0</option>
<option value="val1">1</option>
<option value="val2">2</option>
<option value="val3">3</option>
</select>
</p>
<p>
<input type="checkbox" id="chk1" />
Red Hair Clips
$<span id="txtPrice1">10</span>
<select id="sel1">
<option value="val0">0</option>
<option value="val1">1</option>
<option value="val2">2</option>
<option value="val3">3</option>
</select>
</p>
<p>
<input type="text" id="txtTotal" size="8" />
</p>
</form>
orderform04.js is located he http://www.mredkj.com/javascript/orderform04.js I have a drop down form which submits the form onchange. Code: <form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" >
<label for='selectboxvalue'>Sort by:</label>
<select name="selectboxvalue" onchange="this.form.submit();" >
<option value="name">Popular</option>
<option value="pricelow">Price Lowest First</option>
<option value="pricehigh">Price Highest First</option>
<option value="datenew">Newest</option>
<option value="dateold">Oldest</option>
</select>
</form>
everything is working nicely except I think it makes sense if after the form submits, the last option value clicked is still selected. Is there anyway to do this with some code that says something like: after submit, initially selected = last clicked? I have been searching for a long time but have been unsuccessful on how to develop a drop down menu but have the menu items show in a list above the main nav. Not below. I really like the way this functions: http://www.sohtanaka.com/web-design/examples/toggle/ But I would like the item in the list to appear above the main nav so it animates up not down. Can anyone help me on how to alter this js code to perform this task? Here is the jQuery file link: http://code.jquery.com/jquery-latest.js I tried going through this js file but it very complex. Can anyone tell me what I need to change to have the animation roll up instead of down? Any help would be most appreciated. Hello everyone! So, what it does: You can successfully drag something anywhere, but when you click it again, it resets to its original position (I don't know why), and when you try to drag it again, as soon as your cursor touches the object it disappears (I don't know why). I'm hoping someone can tell me why it is happening and how to fix it! Code: // JavaScript Document
var posX;
var posY;
var element;
function drag(event) {
element = document.getElementById("square");
posX = event.clientX;
posY = event.clientY;
element.addEventListener("mousemove", move, false);
}
function move(event) {
if (typeof(document.getElementById("square").mouseup) == "undefined")
element.addEventListener("mouseup", drop, false);
//Prevents redundantly adding the same event handler repeatedly
element.style.left = event.clientX - posX + "px";
element.style.top = event.clientY - posY + "px";
}
function drop() {
element.removeEventListener("mousemove", move, false);
element.removeEventListener("mouseup", drop, false);
}
the html is a simple (position is set to relative): <p id="square" onmousedown="drag(event)">meep</p> Lastly, and most importantly, thank you all for your time =] EDIT: This is the first time I've written javascript code and would like to learn the basics, which is why I am not using a library. Hi I need some help. I have a link that opens in a new window which allows the user to perform an update to a record. On submit I want it to obviously update (which it does), then close the page and update the main page (where we opened the link from initially). I seem to have this working using an function which is called off the submit button using onclick........the function is: <script type="text/javascript"> function windowclose() { window.opener.location.href = window.opener.location.href; window.close() } </script> Now, the update happens as I say, and the page closes, and the main page looks like it refreshes but the update is not reflected....if I hit f5 the update appears. Is it to do with the speed of writing to the database and updating the screen? I have also been playing around with trying to add a settimeout to add a delay between update and close/refresh but couldnt get it to work. Any help would be appreciated. Cheers! Hi Frnds, I have faced some problem i.e I have 2 jsp pages.In that I want to go one jsp to another jsp.In 2nd jsp i can show my captcha code,but unfortunately it is not visible first page is reloaded in IE6.Once you refresh the page it's visible in IE6.So please help me to avoid this problem. Thanks, I am trying to submit a hidden text area from a WYSIWYG editor. Its submitting the subject line which is a standard text input but its not submitting the text area. I can only think its because there are html tags in the submitted data. Is there a way to compensate for this or will I have to give up trying. hi i have a table with some document.write statements inside that write inside the cells. i need to refresh the table from a function so the statements will execute again. but i only want the table to refresh not the whole page document.location.reload() this does the page but can i put the tables id in the brackets or something. thanks |
|||||||