|
JavaScript - Save Multi-input Form Using Webstorage
I've been searching for how to do this, what seems simple, task. I have a form with multiple inputs and I want to be able to save them onchange, using the html5 function localStorage. Does anybody have an idea how I could go about doing this? It seems simple but I'm not very familiar with coding.
Any help is appreciated! Similar TutorialsI need help using javascript cookies to save the input users will fill in to many inputs within one form. I've never worked with cookies and I was wondering if someone could help me out here - the answers I've found searching the web do not work for me. Any help is appreciated, Thanks. Hello there, I want to build a form which invokes an ajax-function and therefore the page shouldn't reload. The problem is I don't want to avoid the autocompletion of the browser. But to save the input i have to submit the form regularly, which means 'onSubmit="return false;"' doesn't work. Is there any possibility or is this technique just impossible? Thx for reading and thinking about it! This is the current code, which works fine, but the browser doesn't save the (non-)submitted input. (The submit will be invoked by the "getSuggests()"-function.) Code:
<form id="mytaste-selection" name="mytaste-selection" autocomplete="on" onSubmit="return false;">
<fieldset>
<legend>
Search
</legend>
<div style="padding: 0px 0px;">
<label class="standard">Artist:</label>
<input id="mytaste-artist" name="mytaste-artist" class="standard text" type="text" autocomplete="on"/>
<label class="standard">Title:</label>
<input id="mytaste-title" name="mytaste-title" class="standard text" type="text" autocomplete="on"/>
</div>
<div class="button" onclick="getSuggests(urlEncode(getElementById('mytaste-artist').value),urlEncode(getElementById('mytaste-title').value),(getElementById('top').checked)?'top':'similar');">
Search
</div>
<div>
<label class="standard">Top Tracks</label>
<input class="standard radio" name="method_type" id="top" type="radio" checked="checked"/>
<label class="standard" style="margin: 2px 2px 2px 20px;">Similar Tracks</label>
<input class="standard radio" name="method_type" id="similar" type="radio"/>
</div>
</fieldset>
</form>
PS: If anything isn't clear please inform, if you also think that this issue is tricky, just answer with "Tricky" PPS: you can have a look at the page at http://mytaste.alitility.com Hi, I am a beginner to javascript , I wish to learn how to create a .txt in local machine and store the data input in the textarea with the current data & time updated too. I am wondering is it possible to do so ? Please provide me a website or tutorial that I can learn about this. I tried to search it over the net but I just can't find a suitable tutorial for beginners like me. Thanks for the help. I appreaciate a lot. If I have post this thread in a wrong section, please kindly move it to a correct section as I can't find the suitable section to ask about this. 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. I have a long survey form and once its submitted it gets recorded into a database. I would love to be able to save a PDF version of the HTML form with all their radio buttons and textfields filled out at the same time its submitted. It would need a unique name that matches their record in the database (maybe it pulls the data that was entered into one of the form fields for the name). Whether it gets uploaded to an ftp or just emailed to a mailbox doesn't really matter. The purpose of this is to basically have a visual interpretation of the data by a single user. Is something like this even possible? Afternoon guys, wonder if I can get some assistance with some JavaScript I need, unfortunately my worst language. I have a large form that needs to prompt the user to save before leaving the page, if they have edited any of the fields inside it. Here is what I have thus far, and would like to keep it in the same format if possible: Code: function do_unload(){
if() {
confirm('Changes have been made to this page. Do you wish to save them?');
document.forms.frmlog.pAction.value='SAVE';
document.forms.frmlog.submit();
}
}
Code: <body onUnload="do_unload()"> </body> Basically, I just want to determine what inputs and selects have been changed since the page loaded, and have the logic for this in the IF statement, if that makes sense. Thanks in advance. 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 Hello, I'm working on a cryptogram game for an educational site. The cryptogram will be displayed like scrabble tiles, and letter will have a corresponding text box. So for a five-letter word, there will be five scrabble tiles with five small text boxes beneath for students to fill in individual letters. At the end there will be a validate button that tells them if they have all the letters right or not. I found a reference to this solution in the forum: http://www.clickfind.com.au/javascri...tion/index.cfm. It looks to me like this will work but I can't figure out how to modify it to check for specific values. I've posted an example of my table below in case it's useful to a helpful person out there. I realize it's not much of a start. Thanks in advance for your help, ransomcat Code:
<form>
<table id="cryto_one" class="crypto" cols="15">
<tr>
<td><img src="tiles/20wide/4.gif" /></td> <td> </td> <td><img src="tiles/20wide/!.gif" /></td> <td><img src="tiles/20wide/3.gif" /></td>
</tr>
<tr>
<td><input name="four" type="text" class="crypto_letter" /></td> <td></td> <td><input name="exclam" type="text" class="crypto_letter" /></td> <td><input name="3" type="text" class="crypto_letter" /></td>
</tr>
</table>
<input type="submit" value="Submit" />
</form>
Site in question: www.yourvancouvermortgagebroker.ca/apply On the 3rd step of this form, I want to add a "SKIP" button that will send the user to the 5th step. No clue how to do this, as someone else helped me code. Thank You! Relevant code javascript file: Code:
//step 3
$('#submit_third').click(function(){
//remove classes
$('#third_step input').removeClass('error').removeClass('valid');
//ckeck if inputs aren't empty
var fields = $('#third_step input[type=text]');
var error = 0;
fields.each(function(){
var value = $(this).val();
if( value.length<1 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='cemail' && !emailPattern.test(value) ) ) {
$(this).addClass('error');
$(this).effect("shake", { times:3 }, 50);
error++;
} else {
$(this).addClass('valid');
}
});
if(!error) {
//update progress bar
$('#progress_text').html('60% Complete');
$('#progress').css('width','204px');
//slide steps
$('#third_step').slideUp();
$('#fourth_step').slideDown();
} else return false;
});
//step 4
$('#submit_fourth').click(function(){
//remove classes
$('#fourth_step input').removeClass('error').removeClass('valid');
var fields = $('#fourth_step input[type=text]');
var error = 0;
fields.each(function(){
var value = $(this).val();
if( value.length<1 || value==field_values[$(this).attr('id')]) {
$(this).addClass('error');
$(this).effect("shake", { times:3 }, 50);
error++;
} else {
$(this).addClass('valid');
}
});
if(!error) {
//update progress bar
$('#progress_text').html('80% Complete');
$('#progress').css('width','272px');
//slide steps
$('#fourth_step').slideUp();
$('#fifth_step').slideDown();
}
});
// step 5
$('#submit_fifth').click(function(){
//remove classes
$('#fifth_step input').removeClass('error').removeClass('valid');
I need to figure out the on page button code, what I need to add to the javascript file AND what I need to add in the CSS. (css is here) Thank you SO much to whoever can help. Hi, I've devised a javascript to guess what a user is typing in. That all works, but I'm stuck on how to take that value the user has submitted and put it back into the form. At the moment my form is: <form method="post" action="/bin/openathenssp_isapi.dll?type=ukfed&dir=req&requestURL=index.php" onsubmit="send_sso('login_form', 'loading', '<?=SITE_URL?>'); return false;"> <input type='text' name='uni_name' id='uni_name' value='' autocomplete="off"> <input type="hidden" name="entityID" id="entityID" /> //Where the name is guessed <script>actb(document.getElementById("uni_name"),customarray);</script> <input type='submit' name='submit' value='submit'> </form> So basically I'm trying to put uni_name into the entityID. Here's my javascript: function send_sso(ajax_div, loading_div, site_url) { replace_this_div = ajax_div; replace_loading_div = loading_div; var entityID = document.getElementById("entityID").value; if (uni_name == "Bournemouth University"){ document.getElementById('entityID').value = "https://idp.bournemouth.ac.uk/shibboleth"; ...MORE INSTITUTIONS GO HERE... } else { alert("Sorry, the institution '" +uni_name+ "' was not recognised or does not have access to this service."); } } But this does not seem to be working - any ideas? 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. Hey guys, have a bit of an issue/question... Not sure what I am doing wrong...i do not know javascript at all lol I have a URL stucture which needs to be changed according to the input fields https://sls.example.com/Spc/viewUserProfile.do?source=search&UserId=J-DOE123&vgroupName1=Dealer-jcode-USA-P4038P0122&adminflag=Y This part stays the same at all times https://sls.example.com/Spc/viewUserProfile.do?source=search&UserId= after the "=" sign, I want it to input text from a input box "J-JOE123", so if I put J-DOE123 in the first input box and run the search, I want it to pull up https://sls.example.com/Spc/viewUserProfile.do?source=search&UserId= J-DOE123 after the "J-DOE123", the next part "&vgroupName1=Dealer-" remains the same at all times https://sls.example.com/Spc/viewUserProfile.do?source=search&UserId=J-DOE123 &vgroupName1=Dealer- the next input box would have a drop down with 2 selections (jcode and lcode) so depending on which one is chosen, that is how it would populate the URL https://sls.example.com/Spc/viewUserProfile.do?source=search&UserId=J-DOE123&vgroupName1=Dealer- jcode next, i would need for it to put a "-" after the chosen jcode or lcode in the URL, which will also be there at all times https://sls.example.com/Spc/viewUserProfile.do?source=search&UserId=J-DOE123&vgroupName1=Dealer-jcode - the next input box would have a drop down with 2 selections (USA or CAN) so depending on which one is chosen, that is how it would populate the URL https://sls.example.com/Spc/viewUserProfile.do?source=search&UserId=J-DOE123&vgroupName1=Dealer-jcode- USA next, i would need for it to put a "-" after the chosen jcode or lcode in the URL, which will also be there at all times https://sls.example.com/Spc/viewUserProfile.do?source=search&UserId=J-DOE123&vgroupName1=Dealer-jcode-USA - next, i will have a drop down box containing several hundred codes such as "P0122" and many more. for this, I would need for the display value to be "P0122" but when the URL gets populated, it would have to be "P4038P0122" https://sls.example.com/Spc/viewUserProfile.do?source=search&UserId=J-DOE123&vgroupName1=Dealer-jcode-USA- P4038P0122 The reason why the entire code must change is because P0122 would be P4038P0122, but if it is P0165, it would be N1534P0165, so each code would have its own first part and second part, but in the drop down box, i want it to only display the 2nd part P0122/P0165/etc.. because that is what I go by, but the system only reads full codes. I do have a spreadsheet with the entire list of FULL codes and can do an extract from each cell in order to get the SHORT code. and finally, the URL would have to end with "&adminflag=Y" and will remain the same at all times. https://sls.example.com/Spc/viewUserProfile.do?source=search&UserId=J-DOE123&vgroupName1=Dealer-jcode-USA-P4038P0122 &adminflag=Y So, all together I would have 4 input fields in the form. UserID, jcode/lcode, USA/CAN, and Code. Please help who ever can. If you need more info, please let me know and I shall try my best to explain further. Thanks in advance guys Allright, so i got index html, and on the head of the document i got jquery already, and what i got is a form, and what i want it to do is that once the input is sumbmited, to post it on a list. BUt something is missing here or maybe im doing it wrong, i need some guidance plz. here is my table: Code: <form name="postbar_add_post" id="postbar_add_post" method="post">
<fieldset>
<legend>Write text here ...</legend>
<input type="text" name="addcontentbox" id="addcontentbox" />
<input type="button" name="addpost" value="Submit" class="submit" />
</fieldset>
</form>
and heres is the function that i have on the head, where what i try is to make it post on the list: Code: <script type="text/javascript">
$(document).ready(function(){
$("form#postbar_add_post").submit(function() {
var message_wall = $('#addcontentbox').attr('value');
$.ajax({
type: "POST",
data:"addcontentbox="+ addcontentbox,
success: function(){
$("ul#wall").prepend("<li>"+addcontentbox+"</li>");
$("ul#wall li:first").fadeIn();
}
});
return false;
});
});
</script>
But is just not working :S .... any ideas/guidance? xD . Btw, on the body, theres only that table above, and a " <ul id="wall"></ul> " , wich is where im trying the content to be posted on. Any ideas where the flaw is ? =\ Using .htaccess i have a password protected folder online containing 7 files with one single user/pass combination. User is not allowed to see that 7 files are available. User enters 1 of 7 "Access Keys" in a simple HTML Form text input which is then processed (script?) User is then redirected automatically to the related file (for download) e.g. Access Key #1 redirects user to Protected File #1 Access Key #4 redirects user to Protected File #4 etc. What's the best way to implement this? Perl/CGI? PHP? Javascript? Hi, I have a registration form with the following input field: textbox -name textbox -surname textbox -phone listbox - country listbox - state Am populating my country & state listbox from my database, state depends on the country. However when i select my country&state the page refreshes & all my other values i.e name, surname, phone & others disappears i have to retype all again, any suggestion? thanks this is my javascript used to validate form.having problem when one selection is made and submit button is clicked.the checked button becomes unchecked. i've to check all the radio button in order to proceed with submission. here is the code...anyone pls help how to solve this..tq <script type = "text/javascript"> function validate_form ( ) { valid = true; if ( ( document.myform.gender[0].checked == false ) && ( document.myform.gender[1].checked == false ) ) { alert ( "Please choose your Gender: Male or Female" ); gender.focus(); valid = false; } if ( ( document.myform.nationality[0].checked == false ) && ( document.myform.nationality[1].checked == false ) ) { alert ( "Please choose your Nationality" ); nationality.focus(); valid = false; } if ( document.myform.age.selectedIndex == 0 ) { alert ( "Please select your Age." ); age.focus(); valid = false; } return valid; } </script> Hello guys, Could you please help me with JavaScript that updates input by onKeyUp event. By updating input name products_data[XXXXXX][purchase_price] or input name products_data[XXXXXX][av_factor] shoul be updates input name products_data[XXXXXX][price] by formula: products_data[XXXXXX][purchase_price] * products_data[XXXXXX][av_factor] = products_data[XXXXXX][price] Because form has alot of integer values for each id: XXXXXX it need to be changes price for exactly id, not all. Code: function updatePrice() {
var purchase_price = 100
var av_factor = 3;
price = purchase_price * av_factor
}
<form name="product">
<input type="text" name="products_data[29796][purchase_price]" onKeyUp="updatePrice()" />
<input type="text" name="products_data[29796][av_factor]" onKeyUp="updatePrice()" />
<input type="text" name="products_data[29796][price]" />
<input type="text" name="products_data[29797][purchase_price]" onKeyUp="updatePrice()" />
<input type="text" name="products_data[29797][av_factor]" onKeyUp="updatePrice()" />
<input type="text" name="products_data[29797][price]" />
<input type="text" name="products_data[29798][purchase_price]" onKeyUp="updatePrice()" />
<input type="text" name="products_data[29798][av_factor]" onKeyUp="updatePrice()" />
<input type="text" name="products_data[29798][price]" />
...
</form>
Thank you for any suggestion Best Regards Hi guys, I am new to Javascript and I'm trying to set up a form to make simple calculation based on user inputs. I have set up the form and am unable to get the calculation to work despite what I try (this is based on an online tutorial I found though). Is there any where I am going wrong? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" language="javascript">
function kanban()
{
//variables
A = document.frmone.annualdemand.value;
B = document.frmone.demandVariability.value;
C = document.frmone.weeksHold.value;
D = document.frmone.ContainerSize.value;
E = document.frmone.totalStock.value;
//calculation
F = A/240;
double G = (b/100)+1;
H = g*F;
c = c*5;
i = c*H;
j = i/d;
document.frmone.totalStock.value = i;
document.frmone.noKanBans.value = j;
}
</script>
<title>Insert Title Here</title>
</head>
<body>
<form name="kanban" id="frmone">
Annual Demand: <input type="text" name="annualDemand" value=""/> </br>
Demand Variation: <input type="text" name="demandVariability" value=""/> </br>
Stock to Hold (weeks): <input type="text" name="weeksHold" value=""/> </br>
Size of Container: <input type="text" name="containerSize" value=""/> </br>
</br>
<input type="button" name="calculate" value="Calculate"
onclick="kanban()"/> </br>
</br>
Total Stock: <input type="text" name="totalStock" value=""/> </br>
Qty of Kan Bans: <input type="text" name="noKanBans" value=""/> </br>
</form>
</body>
</html>
Thanks guys. Hello, Working With a touch screen, have created HTML page that has a custom keyboard for password input, no mouse or keyboard connected. Is there a way to enter keystrokes from the HTML into a (my form) text area (password) using Java. From the example below I am trying to put (1) into myform. <td><a class="Keys" type="password" target="myform">1</a></td> <!-- This Did not Work--> Thank You for any Info. Hi everyone, im new to javascript and I have created two forms.. a value will be put in the first field and the second field should display either $20 or $35 depending on the value of the first field. Im doing something wrong here.. but I cant see what. Any help is appreciated. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>Distance from Depot</title> </head> <body> <form id="distanceform"> <ul> <li> <label for="Distance from EverWarm Depot">Distance from Depot (km):</label> <input type="text" id="distance" class="large"/> </li> </ul> </form> <input name="Button1" type="button" value="calculate" onclick="deliverycost()"/> <form id="deliverycostform"> <ul> <li> <label for="Delivery Cost" >Delivery Cost:</label> <input type="text" id="deliverycost" class="large"/> </li> </ul> </form> <script> function deliverycost() { /* Here is the delivery cost: less than or equal to twenty kilometres is $20.00 greater than twenty kilometres is $35.00 */ var distance = document.forms["neworder"]["distance"].value; if(distance<20) { document.getElementById('deliverycost').innerHTML="$20"; } else { document.getElementById('deliverycost').innerHTML="$35"; } } </script> </body> </html> |
|||||||