Passing variables in URL - javascript

I have an address book widget that shows if there are contents.
If there are no contents, an add button will show up. Upon pressing the add button, it will redirect to another page which will show the form.
The initial design of my website is as follows:
When the user click the add button, it will direct to a page using javascript function:
document.location.href="address?addOnly=true";
The form will display.
If successful, there are $.post that will change the div only that will enable user to do CRUD in the address book.
The problem with the variable inside the url which is address?addOnly=true is that when the user refresh it, it will always shows the add form.
That's why i've decided to hide the implementation using $.post
$.post('address', {"listEmty":true}, function (data) {
window.location = "address";
});
The problem with this is that it can't pass the variable at all.
My questions are:
How to handle the page refresh if using the get method, which passes the paramater in the URL,
Are there anyways in javascript/jquery to pass the variable using post method then refresh the page?
Thank you.

<FORM method="post" action="address" id="refresh" style="display: none;">
<DIV>
<INPUT type="hidden" name="addOnly" value="true">
</DIV>
</FORM>
<SCRIPT type="text/javascript">
document.getElementById('refresh').submit();
</SCRIPT>
What this does is create an invisible form, then immediately submits it. You can of course call the submit from within your other javascript code.

Related

Php Go back to previous page form resubmit

I have the following three php files:
reports.php, bwdates-reports-details.php and visitor-detail.php
reports.php contains my form which inputs the from and to date (erased some parts for brevity):
<form method="post" action="bwdates-reports-details.php">
...
<input type="date" id="fromdate" name="fromdate">
...
<input type="date" id="todate" name="todate">
<button type="submit" name="submit">Submit</button></p>
</form>
bwdates-reports-details.php outputs whatever parameters inputted in "fromdate" and "todate" of reports.php, see image below
As you can see in the image, there is an option to view the details of a transaction by clicking the "View Details" icon - i class="fa fa-edit fa-1x".
In view details (visitor-detail.php), There is a "Go Back" button.
<div align="center">
<button onclick="goBack()">Go Back</button>
</div>
There is also a goBack javascript function:
<script>
function goBack() {
window.history.back();
}
</script>
But when the go back button is clicked, I am getting Confirm Form Resubmission error. What I wanted to achieve with the "go back" button is to be able to go back to bwdates-reports-details.php with all the variables I passed through in reports.php. How do I achieve what I wanted to do? Please take note that this isn't a purchase related website. php or javascript will do. Thanks!
If a form is submitted (probably with the POST method), you send this data to the new page that is then opened. This page is also added to the history not only with the URL but also the sent data.
If you then leave this page and want to navigate back to this previous page you will get an "Resubmission" error, because the browser would need to send the data again to do so, but that is probaby a bad thing to do, because the data of the form would be sent twice. (Imagine that was a purchase form and the client would buy everything again.)
To make your goBack function work there are no other ways than get rid of that form submission page somehow or put a page in between that is not a form-data-receiver.
The best way would be to not go back in the browser history if you don't know from what pages the user navigated to this. Instead just navigate to an overview or dashboard.
Edit:
If that page your working on is only accessible by that response page of the form, maybe going two pages back will fix your error: history.back(2);
Because your form is using POST method and when you click on goBack button, it goes on previous page without variables. You may use put dates variable with goBack button and also use
if(isset($_GET['your variable name'];
{`fetch your variables`}
on your previous page.
Desired result was achieved by using the GET method instead of POST method (see https://www.tutorialspoint.com/php/php_get_post.htm). reports.php form code was replaced from:
<form method="post" action="bwdates-reports-details.php">
to:
<form method="get" action="bwdates-reports-details.php">
In bwdates-reports-details.php where I have the following variables:
$fdate=$_POST['fromdate'];
$tdate=$_POST['todate'];
Instead I replaced it with:
$fdate=$_GET['fromdate'];
$tdate=$_GET['todate'];
The goback javascript function I have in visitor-detail.php stays the same. And works like a charm. Thanks and cheers!

How to run a PHP function due to a button click (with button 'data' passed)?

I know that AJAX could solve my issue. I need help how I can solve it in my specific case however. I manage some sortiment items on a page, they get displayed with a PHP script (checks the database, if the item is available, and if so, it gets displayed). I now want an admin page where I can kind of "toggle" via a sortiment table to display or not display an item (set it as available or non available.
What I need is: if the button is clicked, I would like to start a php-skript. There should be an value passed to that script (the button id). The script itself should open an SQL connection, change a DB value based on the passed ID of the button. Then close the connection. Optionally also refresh the table (or one value) from where the button was clicked.
Can someone help me, at least telling me what I need to do this? (jQuery, Ajax?). The passing of the ID would be important, else I'd need to do function for every button.
An table entry looks like this:
<tr>
<td>Himbeerhonig</td>
<td id="himbeerhonig">Ja</td>
<td><button type="button" id="himbeerhonig" onclick="function()">press me to execute function</button></td>
</tr>```
(possible PHP pseudocode)
open SQL connection
look for database entry based on the passed ID
change the value of the found entry (!currentValue)
close SQL connection
*optionally*
refresh the <td id="himbeerhonig"> with the updated value.
I appreciate any help very much! Just need some hints as to how to do it properly. It's just a concept that currenty is hard to grasp for me so far.
1- If you want to do this with ajax (without browser refresh), you should create a separate php file, and put your php scripts in there. it's called api (api has special format for output, so search create api in php if you want to do this). then on javascript, you should do an ajax call to that php address, on onclick event of button. and then javascript will return data and you can create elements based on that data.
2- however you can do this without ajax(it will refresh browser). just write your inline phps as you wrote :
<html>
<!-- your html codes-->
<?php
if($_GET['buttonClicked']){
//put your php codes here to run when button clicked
?>
<!-- you can even put html here, even it can be on php loop. -->
<?
}
<!-- your html codes-->
<!-- turn your button to a form-->
<form action="/" method="get">
<input name="buttonClicked" hidden value='1'>
<input type="submit" value="Submit">
</form>
</html>
it's as easy as this. when button clicked, a get request will send to current page, and php will handle it, for example it will render additional html elements to the page.

Add hidden form variable to the end of the URL

I have searched Unbounce and Google for documentation, but can't find a way to make this work. Any help is greatly appreciated!
Use case:
I have a test page setup in Unbounce and it would be great when a user lands on the page and submits the form that the value being generated through the script below in the hidden field is added to the current URL upon submission.
It's important that if the user lands on the page from an advertising campaign that the value is added to URL and does not replace it.
Example:
User lands on testpage.com or testpage.com?qs=3134728&pcd=THANKS20&dclid=CNi4wvCv39cCFZdFNwodE_wALA
Unique ID is created with the following JavaScript and added to a hidden field:
<script type="text/javascript">
$(document).ready(function() {
var id = new Date().toISOString().replace(/[-tTzZ:.]/g, '');
$('#lead_id').val(id);
});
</script>
User clicks submit and and is redirected to a thankyou page with the value of the hidden field passed in the URL:
testpage.com/thank-you?lead_id=1234
testpage.com/thankyou?qs=3134728&pcd=THANKS20&dclid=CNi4wvCv39cCFZdFNwodE_wALA&lead_id=1234
I should also mention that I can not edit the html of the form so this would need to happen with JavaScript as Unbounce provides a space to add custom code.
Is the form method get? If it is post it wont append that to the URL for the hidden field.
Your approach seems right however if this is the HTML on page:
<form action="http://example.com" method="get" id="theForm">
<input type="hidden" value="xyz" />
<button type="submit">Send</button>
</form>
You can use some JS code like one of the following to modify this...however you'll want to verify that everything still works as expected:
document.getElementById('theForm').action = "http://another.example.com";
document.getElementById('theForm').method = "get";

Is there a way I can prevent a function to be restored on page refresh?

I know how to send a form without page refresh with jQuery. That is not what I'm about here. I just wanted to point that out. I have a button when onclick() will display a form and a hidden link. The problem I'm facing is when the form is being submitted the page refresh so the hidden link returns to initial state which is hidden.
Is there a way I can prevent a function to be restored on page refresh? That's what I'm interested to know. But if the best way to do this is by preventing the form to refresh I will do it. I just wanted to know if I could do it another way for knowledge sake. I'm trying to learn new ways instead of always doing same old jQuery stuff.
html
<button id="showOwn" type="button" onclick="showHiddenForm();" >
I'm a returning client</button>
<div id="hiddenForm" style="display:none;">
<form method="POST" action="form.php">
<input type="submit" name="validate_customer" value="Confirm Identity">
</form>
<a id="hiddenLink" href='other_page.php>Continue as Roger Rabbit</a>
</div>
script
function showHiddenForm(){
//show hidden form
document.getElementById("hiddenForm").style.display='block';
}
Use localStorage:
window.onload = () => {
if( localStorage.getItem("show") )
showHiddenForm();
};
function showHiddenForm(){
localStorage.setItem("show",true);
//show hidden form
document.getElementById("hiddenForm").style.display='block';
}
I just wanted to know if I could do it another way for knowledge sake.
Store a flag in local storage (or session storage) (spec | MDN) and on page load, use the presence/absense of that flag to determine whether to hook up the function (or generally, to do whatever it is you want to do differently, differently).

Redirect the website URL Form to a particular Page

My Form Works Successfully But in website URL it only Shows the address to a Form.I have multiple Pages in which the Form button shown.All I want when a user click on The Form for Page A for that Particular page it should shown as
"www.form.com?test=page A" - this should displayed on website URL
or when the Form is submitted the receiver should view that this form coming from Page A..In the Form field I hidden this fields name 'Test' so the user cannot see it but only the receiver can view it that its coming from Page A
On my Html code I have redirected to the Build in Form.
Here is my java script code
<script type="text/javascript" src="http://test.com/form/y.php/test2"></script><no1script>Online Form - </no1script>
How to show it to my Website URL
I understand your question as "How can I redirect with a specific GET parameter?", correct me if I'm wrong.
The solution for that would be quite simple: Append the GET parameter to the forms action:
<form action="target.php">
gets
<form action="target.php?test=page_a">
so that on target.php if you evaluate the GET values, test has the value page_a.
If you're trying to hide the post data, you can try something like:
<form action="https://test.com/forms/discount" style="display:none">
<input type="text" name="couponCode" value="secret">
<input id="myform" type="submit">
</form>
<script>
document.querySelector("#myform").click();
</script>
Note: This won't stop any web ninjas, so you should think of something else, like web tokens that function sortta like private public keys.

Categories

Resources