I have a form on page 1:
<form method="post" action="request-form">
<input
type="text"
id="amzQry"
name="item"
placeholder="What do you need?"
autocomplete="on"
/>
<input
id="autocomplete"
name="destination"
placeholder="where? (e.g. Buenos Aires)"
onfocus="geolocate()"
type="text"
required=""
aria-required="true"
autocomplete="off"
/>
<button type="submit" value="">
Submit
</button>
</form>
I want this information to be held in a persistent way so that even if a user subsequently logs in (to joomla in this case) the cookie data is persistent and can be called. That is why i have used cookies rather than sessions in this case. Correct me if this is not the right way of doing this.
I have some code to set and retrieve the cookie on page 2:
<?php
$itemcookie = $_POST['item'];
$detsinationcookie = $_POST['destination'];
setcookie("itemcookie", $itemcookie, strtotime('+30 days'));
setcookie("destinationcookie", $detsinationcookie, strtotime('+30 days'));
?>
But the cookie data is not appearing on the second page when it loads after form submit. If I refresh the second page the data appears in the right places, i.e. where I have called it with e.g.
<?php
echo $_COOKIE["itemcookie"];
?>
How to get the cookie data available immediately on page 2?
You can't.
If you check the manual:
Once the cookies have been set, they can be accessed on the next page load with the $_COOKIE or $HTTP_COOKIE_VARS arrays.
^^^^^^^^^^^^^^
This means your cookies will not be available on the page / script where you set them.
You could use another variable to show the value though, for example like:
$itemcookie_value = isset($_POST['item']) ? $_POST['item'] : $_COOKIE["itemcookie"];
Apparently you have some output before you call setcookie()
If you have some output (even one single space character) BEFORE session_start(), setcookie() or, say, header(), the browser will not recognize the cookie and they won't be available right after the script starts.
You can.
All you have to do is set the cookie with a AJAX request that way the cookie is set while you are still on the page then when you refresh the page ONE time the cookie will be available to you.
Related
I need to get a cookie created in parent page.
I need get a spesific cookie (example) who was cread on modiface--locatelcolomia.myvtex.com and used this on my child page modiface.locatelcolobmia.com (this one is called by vtex iframe)
You cannot directly get cookies from other pages.
You can send a request to that page to send the cookies.
getCookies.php (put on parent page)
window.onload = function(){document.getElementById('submitpost').submit();}
<?php if(!isset($_COOKIE['COOKIE_NAME_HERE']) {die('set cookie');} ?>
<h3>Please wait</h3>
<form id="submitpost" action="PUT_PREVIOUS_PAGE_URL_HERE" method="post">
<input type="hidden" name="cookie" value="<?php echo $_COOKIE['COOKIE_NAME_HERE']; ?>">
</form>
Then set the cookie to that.
Redirect users without the set cookie to the getCookies.php page.
This form can be intercepted and changed, but cookies can as well. Never put account details in cookies.
This answer requires a web server with PHP, chances are that your host does support PHP.
Thanks for the help, this is the answer: I got the cookie by Jquery and save on a input type hidden at the end send to my iframe calling a php page and send this value by URL (GET).
jQUERY
let cartId = $('#idCartInput').val();
IFRAME
("#idCartBtn").html("<iframe src='http://localhost:81/projectExample/modiface/index.php?cartId="+cartId+"' class='frameModiface' id='pruebasId' allow='camera' name='iframe_a'></iframe>");
I declare a variable at the beginning of my .js file:
var option="blabla";
On page 1.html I click on a link to page 2.html where I have
<script>document.write(option);</script>
No text is displayed on 2.html. When I refresh the browser while I am on 2.html I get undefined as an output.
What do I have to do to have the text displayed straight after I click the link?
Alternatively, how can I get the following code work to output strUrl on 2.html:
on 1.html I have a link:
<a href="2.html" onclick="function1("item")">
on 2.html I have a div:
<div id="display">document.write(strUrl);</div>
then I have in my .js file:
function1(searchitem)
{
strUrl = 'http://blabla.com/'
+ '?key=' + searchitem;
}
You try to create a Javascript variable on a page and then use it on another page. This is a more-or-less broad problem, since you want to maintain values across pages. First of all, you need to decide where is this value going to be defined and where is it going to be used. If this is more like a server-side variable, then you need to define it on server-side and then generate it into your Javascript code. If you are using PHP, then you can do it like this:
<script type="text/javascript>
var foo = '<?php echo $bar; ?>';
</script>
Naturally, you need to initialize $bar to be able to do that. If the variable should be a client-side variable, then you need to use localStorage, like this on 1.html:
localStorage.setItem("option", "blablabla");
and then load it on 2.html:
localStorage.getItem("option");
Or, if you need to use it both on server-side and client-side, then you can use a cookie for this purpose. Using cookies i slightly more complex, but my answer to another question should get you going.
Let's focus on the cause this did not work for you. A Javascript variable will cease to exist when the page is unloaded, so you will not be able to use its value after that. So, you need to persist it somehow, storing it either on the server or the computer where the browser is being run.
As a side-note, I should mention that you can use Javascript variables accross pages if you load some pages inside iframes of a page, but that is a different scenario.
This is what FORMS and AJAX were invented for. If your server has a PHP processor (virtually ALL of them do), then you can rename your .html files to .php and use a bit of PHP to accomplish your goal.
A web page ending with .PHP works exactly the same as one ending in .html, except that you can now add snippets of PHP code where desired. It is not necessary to have any PHP code, but if you have some it can do stuff.
Method One: FORMs
If you want to switch to page2.html and see a value sent from page1.html, you can use a FORM construct and post the data from page1 to page2:
page1.php
<form action="2.html" method="post">
<input name="option" type="text" />
<input type="submit" name="sub" value="Go" />
</form>
page2.php
<?php
$p1 = $_POST['option'];
?>
<div>On page1 of this website, you typed: <?php echo $p1; ?>. That's what you did.</div>
Note how a <form> uses the name= attribute for the name of the variable that is sent to the other side.
Example Two: The AJAX method
HTML:
<div id=nonForm">
<input id="option" type="text" />
<input type="button" id="myButt" value="Go" />
</div>
<div id="results"></div>
jQuery:
$('#myButt').click(function(){
var opt = $('#option').val();
$.ajax({
type: 'post',
url: 'page2.php',
data: 'option='+opt,
success: function(john){
if (d.length) alert(john); //display result from Page2 in a pop-up box
$('#results').html(john); //Or, display it right on the page
}
});
});
PAGE2.PHP -- The AJAX processor file
<?php
$opt = $_POST['option'];
//Now, you can do something with the data in $opt, and then send back a result
$rtn = 'Hey, you sent: ' .$opt;
echo $rtn;
The primary (and most important) difference between the two methods is that the FORM will change pages on you. The user will be sent from Page1 to Page2, and the screen will flash as this happens.
What's exciting about AJAX is it sends data to Page2, where Page2 can do something with it (for example, a database lookup), and then Page2 sends different data back to Page1. This new data can then be displayed on the page WITHOUT the page refreshing.
Here are a couple of very basic AJAX examples, to get you going:
AJAX request callback using jQuery
I am creating a website, that has many pages. You can change the number of posts shown in each page through a drop down menu. My problem starts if i change the amount of posts move to the next page it comes back to default.
e.x default posts shown is 30, and then i change it to 40. The moment i change page it comes down to 30 again on the next page.
I have tried something like that but unfortunately doesn't work.
<form method="get" name="SkipPage">
<select name="results_no" onChange="document.forms['SkipPage'].submit()"> `
<?php
....
?>
</select>
</form>
$reults_no = isset($_GET['results_no']) ? $_GET['results_no'] : 30;
try to use hidden intput
<input type="hidden" name="myHiddenVar" value="<?php echo $myVar ?>"
Then you can use your var with $_POST["myHiddenVar"];
But if you want a persistent choice use sessions.
session_start(); on each page and access/edit your var with $_SESSION['myVar'];
If you want to make a user choice persistent, the usual solution is to save it in a cookie.
EDIT: or in SESSION but my point is that you don't have to pass the value as a GET parameter for each link followed by the user. You set it once and test if set on each page that need it.
I have an ajax based login form for my site and have noticed that browsers are not recognising it as a login form and are not remembering passwords for it to ease the user's login.
When the submit button is pressed the values and sent to serverside to check and a response is sent back. If the check passes the the session is set and the page performs a javascript redirect into the members area. The html is very simple and could be the cause of the problem.
HTML:
<input type='text' class='email'>
<input type='password' class='password'>
<a class='submitBtn'>SUBMIT</a>
Thanks guys!
I think I'll do it in another way.
Using a form to submit to a hidden iframe , so the window will act like ajax post(do not refresh the window) and the password remember feature will works
like
<form method="post" id="" action="checkDetail.php" target="myIframe">
<input type='text' class='email'>
<input type='password' class='password'>
<input type="submit" name="" value="" id="Submit"/>
</form>
<iframe name="myIframe" id="myIframe"></iframe>
in this way you have to change a little bit of your response code to notice iframe parent the submit result.
update
it will done automatically by browser. If a form specify 'target' attribute , and there is a iframe has a name attribute that exactly the same as the target attribute of the form, the form action will submit to the iframe.
so when your request is success , your response will appear in the iframe content. Try code like this in the response.
<?php
//php checks database here
?>
<script>
parent.formSuccess({
//your response infomation
});
</script>
and define a formSuccess method in the outer page to handle the submit callback
Found answer on stack : How can I get browser to prompt to save password?
My Version:
<form id='loginForm' target="passwordIframe" method='POST' action="blank.php">
<input name='email' type='text' st='Email'>
<input name='pass' type='password' st='Password'>
<button type='submit'>LOGIN</button>
</form>
<iframe id="passwordIframe" name="passwordIframe" style='display:none'></iframe>
I can confirm that this triggers the password remember features for Chrome (other browsers not yet tested). It is important that the action attribute points to a blank.php. I chose a blank php page and echoed out the $_POST array just to make sure that the values were being submitted via the form.
I will now implement this with my old code that simply uses javascript to pull the values out of the field and checks them via an ajax call. I wonder if I can do away with the submit button all together and just use javascript to submit the form?
I have a javascript form where I am using innerHTML to set some text.
When the form submits that information is lost.Is there anyway I can make it "sticky".I was thinking a cookie but that's about all I know.
Thanks
<form "action="" name="myform">
<input type="text" name='name">
<div id="theName"></div>
</form>
Quick example I am capturing the name and need the div to show the name after the form submits.
You will need to persist the data somehow. There are several options:
Store it on the server. When the form is submitted, your server-side script will receive the data; it can persist it in a database, session variable, or some other form of storage that's appropriate for your application. Whenever the client re-visits the page with the form, have the server generate the form's HTML with the persisted data.
Use HTML5's local storage. While not supported in legacy browsers, all modern ones provide the local storage API. When the user submits the form (attach an event listener to the form's "submit" event), you can store the form data by making calls to localStorage[key] = value and retrieving it with localStorage[key].
Store it in a cookie. Although I don't recommend this approach, you can create a cookie with the form data. The only restriction is that the data needs to be represented as a string, but I recommend JSON. However, you probably should not use this approach since cookies are sent to the server for each request; if the form fields contain a lot of data, then you're also unnecessarily sending a lot of data to the server.
Using HTML5's local storage gives you a self-encapsulated approach that requires no server-side configuration:
<form action="" name="myform">
<input type="text" name="name">
<div id="theName"></div>
</form>
<script type="text/javascript">
(function() {
var form = document.getElementsByName('myform')[0];
if (localStorage['name'] !== undefined) {
var displayArea = document.getElementById('theName');
displayArea.textContent = localStorage['name'];
}
form.addEventListener('submit', function() {
var nameField = document.getElementsByName('name')[0];
localStorage['name'] = nameField.value;
}, false);
})();
</script>
Are you setting the "value" attribute of the input tags to something or blank? you can just remove (remove the attribute itself) that so that the last value set will be used (true only for non-password type inputs. also, haven't tried it in all browsers.).
Or better yet, you can use serverside script like (PHP, ASP, RUBY, etc) to set the attribute value to the previously submitted.
<form method="post">
<input type="text" name="txtinput" id="txtinput" value="<?php echo $_POST['txtinput']?>"/>
<input type="submit" value="submit">
</form>
doing it in js only is much more complicated and unreliable since your going to use cookies.
PS: I'm assuming your not using XHR(AJAX) to submit your forms since XHR's don't refresh pages or re-initializes inputs unless you told them to.
This should be happening server-side. Javascript is for enhancing a page, it's not to be depended on for data manipulation.
Your script, converted to PHP, would look like
<form action="" method="post" name="myform">
<input type="text" name='name">
<div id="theName"><?php
if(isset($_POST['name'])) { echo $_POST['name']; }
?></div>
</form>
...and it would work every time, without having to call any JS.
You'll have to handle the form data somehow anyway - how were you intending to retrieve the data without a server-side script?