I am wondering if there's a good way to take a variable built in Javascript and then insert it into a form that's on another page.
My application is a survey: I've got it so that at the end of the survey, all the results are displayed so they can look over their answers. Now I want to have the user click a link and have the answers of the survey show up automatically in the body of the form where they'll then add their email and contact info and click "send."
Any ideas?
Knowing that this ISN'T possible is fine too...if not, what alternate methods might I accomplish the end result?
You can create a hidden field in first page and change that value from javascript variable. When you post that page it can be another page where you need to display in form element.
EDIT
If you need without form in first page you need to link with hyperlink like below.
<a href='#' onClick='OpenPage()'> Go To Result </a>
<script>
var val=20 ; // say this is the value you want to pass to second page
function OpenPage ()
{
window.location.href = "resultpage.php?param=" + val;
}
</script>
After you need to read that param in resultpage either with javascript through URL string or from server side (in PHP $_GET).
Hope it helps.
Related
I need to write new text in a p tag on the 'cart' page when I click on the 'submit' button on the 'index' page. How can I do this with JavaScript. I have already tried with this
HTML page index :
<button onclick="myFunction()"> click me </button>
HTML page cart :
<p id="id"> </p>
Js code :
function myFunction() {
document.getElementById('id').innerHtml = 'mytext';
}
but it does not work. How I can solve this? Thank you
index page and cart page in this reference, are different documents.
Accordingly, when you call your function on the index page, it can't find an element with the mentioned id in that document.
function myFunction() {
document.getElementById('id').innerHtml = 'mytext';
}
The only way to perform this trick with only Javascript, is to use Cookies.
You can create a Cookie in the client's browser and save 'mytext' as an object, then retrieve it on another page.
See this page https://www.w3schools.com/js/js_cookies.asp
If you're not using a SPA structure with a framework like React or Vue this could be difficult - however its not impossible.
What you can do to circumvent the issue is that you can save a variable in sessionStorage or localStorage depending on whether or not you want it to remain between different browser sessions, then in your other page check if this variable exists and if it does make the required changes.
Then when it should change back you remove the variable from your localStorage again.
It's a bit of a hacky way, and the best way would be to either do this server side or to have a SPA and share the variable through global state.
Got a page where users make comments on any desired post. Each post has a form with just one textarea field created dynamically from js and I'm wondering if anyone has an idea on how to save and restore the comment being typed by a user (i.e save whatever a user has typed so far before ajax refreshes the div holding all the post and comments and then restore back after the div refresh)
Tried creating something around this but not getting it to work:
<textarea id="comment_field" onKeyUp="return saveAndRestoreTypedStrings(this)"></textarea>
or
<textarea id="comment_field" onchange="saveAndRestoreTypedStrings(' + id + ');"></textarea>
The function:
function saveAndRestoreTypedStrings(id){
document.getElementById("post_comment").onchange = function() {
localStorage['post_comment'] = document.getElementById(id).value;
}
window.onload= function(){
if(localStorage['post_comment'])
document.getElementById(id).value = localStorage['post_comment'];
}
}
To identify the form a user is on, a unique id for that form had to be passed to the saveAndRestoreTypedStrings(id) function.
For clarity, ajax only refreshes the div holding all the posts and comments made on each post. So, that div is refreshed for latest posts and comment every 3 seconds and if a user is typing to make a comment on a post and ajax reloads the div content, the user loses whatever is being typed.
Would be pleased to get ideas around this....
window.onload fires up when the page is completly loaded soo i dont think this would apply for your case.
why dont you try using a callback function after AJAX is complete so you can "restore" the info by calling localStorage ?
Note: sorry, i cant comment yet.
Goal: User enters one item in text box that has autofill, after clicking button they are taken to a second page that has other corresponding items already filled out in form.
Problem: Autofill works but becomes erased/wiped out when second page opens (in other words the form is blank.
Question: I suspect I am not properly associating the actions of "form auto fill" and "open second page" with the one button. Any ideas?
$("#nextbutton").click(function () {
$("#favorite_appetizer").trigger("meals");
window.location.href = 'dinner-ideas.html';
});
Well probably problem is already solved, but try adding $_GET into javascript href, like:
window.location.href = '/index.php?first=1&second=2';
Part in part after you declare variable names and values that you can catch in second php page, like:
$_GET['first'];
$_GET['second'];
Ofcourse you need to get values from form elements with .val() or .text() and etc.
And ofcourse this has drawbacks, best used for numbers and words but not texts with symbols. Knowing more about type of form content would help, like if its data to be saved to database, you could AJAX half filled form, then retrieve its data from database with a query. If you are just filtering data, you can URL $_GET database ids of form elements, then query in second page by those ids. So again, depends on data in your forms that you want to pass to second page.
I am brushing up on my HTML while in the process of learning django and am wanting to create a form (single field and button). The button, when pushed should redirect to a page with the value in the form as a query string. For example, if the user types in "test", then pushes the button, they should be redirected to "webpage.com?test".
Am I correct in thinking the best way to do this is with javascript? If so, would anyone mind providing an example?
Thanks!
document.forms[0].addEventListener('submit', function() {
window.location.href = 'webpage.com?fieldname='
+ document.getElementById('yourfieldid').value;
}, false);
since you haven't posted any code i just took the first form on the page and found a fictitious field to use as the query string parameter.
You can do the redirection directly with javascript:
location.href = "webpage.com?" + your_variable
Or make a form that is targeted at webpage.com which has an input area named test. in this way, when it is submitted the test value will automatically be added to the url.
When you click on the button change that value and submit the form:
$('#button').click(function() {
$('#your_test_field').val(your_variable);
$('#your_form').submit();
}
window.location.href="mypage.php?arg="+variable
I have a form which is using a select list to jump around my site. This is currently using onclick window.location so user selects the page and presses go and it goes to that page.
I now need to add a small text box for the user to type in a code (say 123456) and then when they click go, it should go to the url selected, but with the [CODE] being the number entered in the box. I discovered jquery replaceAll so it gave me the idea to have this in the select html:
http ://jumptothispage.com/parts/p[CODE]/edit
http ://jumptothispage.com/jobs/j[CODE]/edit
When you press go, it would replace all [CODE] in that html with the code entered and then jump to that page selected, e.g.
http ://jumptothispage.com/parts/p123456/edit
http ://jumptothispage.com/jobs/j123456/edit
I am already using jquery on my site so makes sense to try and utilize that again. I'd appreciate a pointer and or other suggestions instead.
Thanks,
Paul.
A workaround: Store the code in a cookie, so at least it's not visible to every person who looks at the URL bar. Then in every onclick, fit it into the URL to send the user to the "right" page.
Or, have your select option's value literally read CODE, which your onclick interprets to mean "The user hasn't set the code yet." When the user types in the code, store it in a variable (in the example below, realcode), and you can then do this:
$('select#navigation option').each(function(idx, el) {
$(el).attr('value', $(el).attr('value').replace(/CODE/, realcode));
});