Jquery copy whole page with form values - javascript

I want to save the whole page in the background at certain intervals in order not to lose the existing form values in case of any problem (power outage etc.) for a project.
However, the html() method does not receive the values entered in the existing forms.
How can I output the entire page with the values entered in the forms?
Example
<html>
<body>
...
<form>
<input type="text" name="eq" value="XX">
</form>
...
</body>
</html>

Related

pass variable between two .html pages

I basically have a search box, I am trying to get the value inserted and use on a separate /results.htm screen via the submit button. I've been able to get and process the results within the same page; but I am trying to do this after redirecting to a new page
/search.html
<script>
jQuery(document).ready(function() {
jQuery("#submit").click(function() {
var ZipSearch = jQuery("#Zipcode").val();
});
});
</script>
<div class="search_bar">
<form action=""><input type="text" name="Zipcode" id="Zipcode" value="" maxlength="5" placeholder="Zipcode">
<input type="button" name="submit" id="submit" value="Submit"/></form>
</div>
Want to keep input value content from /search.htm within a variable on next page, separate, /results.htm
How can I keep the user input value and use on my separate 'results' page?
Remove all the JavaScript from search.htm. There's no point in writing custom software to do things HTML has built-in.
Set the action of the form to the URL of the second page (action="/results.htm").
Change the button to a submit button (type="submit")
Read the data from the query string (location.search in JavaScript or $_GET in PHP).

Getting "Invalid URL Exception" on submit due to multiple form tags in Lotus Domino

I'm getting the error, "Invalid URL Exception" on submit of a button. I am assuming that this issue is coming from three form tags I have in the web page.
In the body, the first form tag is for "post" of the fields and redirection. The second one, which is inside of the first form tag, is for the search bar as part of company header.
The third one is a form class for the input fields, which is also inside the first form tag.
I tried placing an end form tag in the first line of my code, it closes the form tag which now looks like this:
<form method = "post" action="/sample/sampleweb.nsf/myForm?OpenForm&Seq=1" enctype="multipart/form-data" name=_myForm">
<input type="hidden" name="__Click" value="0">
</form>
Then the search form tag comes in after as also part of body. Upon clicking the submit button, I'm getting such error. When I tried searching by clicking the search, search functionality working as expected.
When I tried removing the form tag and end form tag for the search, and I click on Submit, it's working as expected.
I notice that domino is still creating end form tag at the last part of the page, right before the end of body tag. Could it be because of this?
To give you a better idea, here is the structure of it:
<html>
<body>
<form method = "post" action="/sample/sampleweb.nsf/myForm?OpenForm&Seq=1" enctype="multipart/form-data" name=_myForm">
<input type="hidden" name="__Click" value="0">
</form> //This comes out when I add end form tag in the first line of code.
<form class="searchbox">
<input id="searchtxt" class="searchbox-submit">
<input type="submit" class="searchbox-submit">
</form>
<form class="form-horizontal">
//Rest of the code go here having the input fields.
<button type="submit" onclick="return validatefields(event)">Submit</button>
</form>
</form> //This part is the generated form tag.
</body>
</html>
Any help would be appreciated.
Domino creates the form tags for you because it assumes you are doing data entry if the form is in edit mode. To prevent this use the setting on the form properties second tab (propeller head) for "On Web Access" "HTML". With that you can do anything you want in HTML but as Richard suggested you need to define where to go when the form is submitted.
Once created this way you need to use the ?ReadFrom url parameter rather than the ?OpenForm parameter

How to retain value of text input while navigating to back page in PHP?

I want to retain entered value in text box after navigation. I am explaining my code here.
**main.php**
<html>
<head></head>
<body>
<input type="text" id="myname" value="">
Next
</body>
</html>
**next.php**
Back
I don't want to use 'button' field here. On link navigation I want to retain the entered value in text box field. I am using php, html
you should save it in a cookie/session.
Or you can use localStorage too. Here's a link to read more
<form id="myform" name="myform" method="POST" action="next.php">
<input type="text" name="query" id="query">
Submit
</form>
<script type="text/javascript">
function submitform(){
// alert('form submit');
document.forms["myform"].submit();
} </script>
And in next.php
$_SESSION['last_search_term'] = $_REQUEST['query'];
echo $_SESSION['last_search_term'];
This will work . I have check it
I would use cookies. Note sessions and Opera back button do not work well together.
However if you want a cookieless solution you can use "window.name" string which is persistent i.e. its value is retained on navigation between pages. No need for a button as you required.
Just add this code before the closing </body> tag.
<script>
// on navigation to, or back: load users input from previous page (if any)
document.getElementById("myname").value = window.name;
// save value on navigation out
window.onbeforeunload = function() {
window.name = document.getElementById("myname").value;
return;
}
</script>
Assuming you give your text field the same id you can use the same js without modification on both/all pages.
The basic example code above should work with all modern browsers and most old browsers (even Opera since 2013). Modify it to use an event listener sanitize/check for empty values etc as required

How to submit two forms on 2 different .htm files to the same place

I'm trying to essentially have the submit button of search.htm be able to create a pop up with a text area which the users are required to enter a comment describing their actions and click the submit button in the pop up to effectively submit both forms to the same processing page. Both the forms in search.htm and frm_comment.htm will submit both sets of data back to search.htm which calls cfinclude on the server processing logic (server.htm).
In the below code I'm having the the "createPeriod" button submit everything that is in the "srch" form. It is also creating a pop up window which has a html textarea that allows the user to enter a comment. There is a reason that I need to split up the main form from the comment form (frm_comment.htm) but it's very specific to the task I'm trying to accomplish.
search.htm is structured roughly as such:
//include the template here to process the forms
<cfinclude template="../server.htm">
<cfform method = "post" action = "search.htm" name="srch" format="html">
<table>
//bunch of form fields here
.
.
.
.
//bunch of form fields here
<cfinput type="submit" name="createPeriod" value="Create"
onClick="ColdFusion.Window.create('comment', 'CommentBox',
'frm_comment.htm', {center:true,modal:true})">
</table>
</cfform>
I've tried to change the submit button in search.htm to just a cfinput type="button" because keeping it as a submit will make it so that the comment box will appear for a brief moment while the page reloads and disappear as soon as the page reloads. However, I was unable to preserve the form data from search.htm when changing the submit button to a regular button.
I've also tried to have my comment form's submit button's onClick function call a javascript function to submit both forms (to no avail) like so:
submitForms = function(){
document.forms["srch"].submit();
document.forms["srch1"].submit();
}
<cfinput type="button" name="submitComment" value="Submit" onClick="submitForms()"/>
Please advise on the best way to accomplish this task, sorry about the messy code.
This a very basic example, on how to have your 2 forms in one. The JavaScript will just show the comment form when the user clicks on "Search".
<!DOCTYPE html>
<html>
<head>
<style>
#hiddenStuff {
display: none;
}
</style>
</head>
<body>
<form action="...">
// search fields here
<input type="button" value="Search" onclick="document.getElementById('hiddenStuff').style.display='block';">
<div id="hiddenStuff">
// comment form stuff here
<input type="submit" value="Submit">
</div>
</form>
</body>
</html>
I also made a fiddle, if you want to see the result in action.
Sorry I'm not familiar with ColdFusion, but it shouldn't be too hard for you to translate :)

how to solve this particular case in jquery?

I am not a Javascript Guru. But I found myself in a very tricky situation while writing a Jquery for one of Application.
Situation:
I have a form with different field. One of the field containing multiple values, say phone numbers. I am filling those numbers in a pop up - lightbox. Now, the problem I am facing is that I want to click the form button to submit my form but My numbers are coming from popup box. Ok let me try to describe the whole flow in points:-
Form has mutiple fields. For One field - number, I am showing the popup box.
I click a button on the popup box which sends me to the form. But I am not able to find those numbers in the form.
Final click is on the form button which sends all the information to the server side.
But I am not getting those value of numbers here on the form. So, Can any one suggest me the best way to resolve this issue?
Note: - I tried my best to put my question in a clear way. But If you guys could not find my words very clear, Sorry!
I'm not entirely sure I understand but I'll take a stab:
Option 1) Write all the values from the lightbox from back to the first form using $(selector).val();
Option 2) Copy the entire lightbox form into a hidden div inside the first form.
The popup box element is probably being added outside your form, so any input elements in the popup won't be submitted when you submit the form. To check this use a DOM Inspector (i.e. firebug in firefox or the dev tools in ie8 or chrome) to see where the element containing the lightbox is (it's usually at the end of the page).
To solve this you might be able to configure the lightbox to add it's div within the form, or else just use a bit of javascript to grab the value of the input element on the popup and populate a hidden input that's actually within the form before submitting.
Hi does this help
. It creates a popup there you can edit data then populate back into the main page which is referenced by opener just before closing the popup.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script type="text/javascript">
<!--
function fn() {
var popupwin = window.open("","","width=500,height=300");
popupwin.document.open();
popupwin.document.write("<html><head><script>function onOk(){opener.parent.document.getElementById('txtnumberfield').value=document.getElementById('txtpopup').value; window.close();}</script></head><body>Here are some popup values <input type='text' value='value from popup' name=txtpopup id=txtpopup />"+
"<input type=button onclick='onOk()' value='Done editing' /></body></html>");
popupwin.document.close();
}
//-->
</script>
<BODY>
<form action="#">
Number <input type="text" id="txtnumberfield" /> <input type="button" value="open popup" onclick="fn();" /><br/>
<input type="submit" />
</form>
</BODY>
</HTML>
If I understand your question correctly, one solution would be to set the control that closes your popup/lightbox to first populate some hidden fields on the underlying form. Grab the values from the form elements within the lightbox window:
$('#the_lightbox').find('.multiple_phone_fields')
.each( function(i,e){ // for each field
$('<input name=' + $(this).attr('name') + 'type="hidden"/>') // new, hidden
.val(this.value) // set hidden field value from this field
.appendTo('#the_main_form'); // and add to the underlying form
});
When you then submit #the_main_form, those hidden fields and values will come along. Obviously, you'll need to adjust the selectors for the specifics of your popup window or lightbox.

Categories