I am trying to build a simple html app getting some basic customer information and storing the information in database.
After capturing the information, when the customer logs in his profile, he can see 3 buttons.
button 1= print
button 2= delete
button 3= edit
Special requirement:
Unless button 1 is clicked,
Then button 2 and 3 should be disabled for the first time user logs in.
For the next subsequent logins
All buttons should be enabled.
So far I have done the below thing:
<html>
<head>
<script>
function enableButton() {
document.getElementById("button2").disabled = false;
document.getElementById("button3").disabled = false;
}
</script>
</head>
<body>
<input type="button" id="button1" value="print" onclick="enableButton()" />
<input type="button" id="button2" value="delete" disabled />
<input type="button" id="button3" value="edit" disabled />
</body>
</html>
But this doesn't take care of the requirement described above. Any help would be appreciated
use HTML5 localStorage or Javascript cookie to fulfill the requirement as it is totally based on user login.
Steps you have to follow :
When user login first time create a fresh cookie or setItem in localstorage as new.
When user login second time set a cookie value or setItem in localstorage as old.
By doing this you can identify which one is new user and which one is older and do functionality according to that.
Assuming you already have stored the information when the user logged in you can access this using $.cookie('varible_name'); if you used cookies.
You can also send a post request and using rpc $.post(...) and check if the user has logged in. If subsequent log ins means separate log in rather than persistent you can keep a counter on the login table in the database and update/fetch this as required.
Using localStorage might be a workaround since you did not described any use of a server-side session retrieval
var trueOnFirstVisit = window.localStorage.firstVisit || "true";
$("#button2, #button3").prop("disabled", trueOnFirstVisit);
window.localStorage.firstVisit = "false";
So, if we have a localStorage value of "false" means the user already visited the page.
https://developer.mozilla.org/en/docs/Web/API/Window/localStorage
http://api.jquery.com/prop/
Related
I am trying to pick up some user data from a HTML page by having the user type it in. I want to retain the data, (they are ID numbers of sorts) display it back to the user on any subsequent section they go to (currently different href sections on one page), collect more data from them and eventually present the data to the user as a review. I thought this would be a little like HTML “Hello World”, but it’s proving to be more than that. . I found out that document.write() is the wrong way to go about it, but no good answer on how to accomplish this. Collecting this data is the first thing I need from the user, and then I will collect more data, so I have to be able to get data and let the user move around.
I have spent a day and a half on this site and others, pulled out two books (yes, paper!) looking for answers, but not reaching a usable solution. Nothing seems to work. When complete, I want to give the user a chance to correct the data before submitting, most likely to post at the moment, but would be a server if implemented.
Here’s how I am collecting, simplified as much as possible:
<form name="getNPIandTIN">
<p> Please enter NPI and TIN</p>
Provider NPI: <input type="number" name="Provider_NPI">
<p>
Provider TIN: <input type="number" name="Provider_TIN">
<input type="submit" value="Submit NPI and TIN">
</form>
...
<p id="demo"></p>
Inner HTML action
<script> document.getElementById"demo").innerHTML=
document.getNPIandTIN.Provider_NPI.value
</script>
No error messages; things just don't work. I want to ask the user to enter field 1, have them type it in, click for acceptance, store the data in a variable and echo the information back to them. Sounds pretty simple, but it isn't.
The form is going to get in your way, you don't need it unless you want to post the data somewhere. Since you just want to grab the data directly from the input fields and store it yourself you can just do something like this:
<div>
Provider NPI: <input type="number" id="providerNPI" name="Provider_NPI" value="">
<br>
Provider TIN: <input type="number" id="providerTIN" name="Provider_TIN" value="">
<br>
<button onclick="captureNumbers()">Submit NPI and TIN</button>
</div>
<p id="demo"></p>
<script>
function displayNumbers() {
// get the stored values and show them to the user
var providerNPI = sessionStorage.getItem('providerNPI');
var providerTIN = sessionStorage.getItem('providerTIN');
document.getElementById("demo").innerHTML = "NPI: " + providerNPI + ", TIN: " + providerTIN;
}
function storeNumbers(numbersObject) {
// store the values locally so you can access them wherever you need them
sessionStorage.setItem('providerNPI', numbersObject.providerNPI);
sessionStorage.setItem('providerTIN', numbersObject.providerTIN);
}
function captureNumbers() {
// first get the values from the input fields as a javascript object so you don't have to pass a ton of individual variables
var providerNumbers = {};
providerNumbers.providerNPI = document.getElementById("providerNPI").value;
providerNumbers.providerTIN = document.getElementById("providerTIN").value;
// then pass the object variable to the storage function
storeNumbers(providerNumbers);
// then call the display function
displayNumbers();
}
</script>
There are many different ways, you can use ajax to save all data to a database and show them to user when ever you want.
Or you could use localStorage to save the data temporarily and save them later in certain circumstances...
I performed a shopping cart integrated to my website and now I am trying to use only one form to be filled by customer (personal information) but I am facing a issue because I would like to use two different submit button depending on the payment platform chosen by customer. Does anybody know a simple solution for that? I appreciate in advanced.
you have to pass name attribute with different value of name attribute in button tags like that --
<button type="submit" name="button1">Button 1</button>
<button type="submit" name="button2">Button 2</button>
In php code --
<?php
if(isset($_POST['button1]))
{
// here we will add code of button 1
}
if(isset($_POST['button2]))
{
// here we will add code of button 2
}
?>
please try this .....
Use multi step form pattern.You can find huge of examples by searching on google.
i was working on a program that i wrote in php, all is fine, the problem is the html page:
it has 1 textbox and 1 button.
In the textbox i have to write a link
when i load the page it clicks the button automatically, so i can use the php program, then it return back to the html page..
$(document).ready(function(){$('#printbuttoncustomer').trigger('click');});
The links that i need to use are always the same, except the number, example:
http://www.wowhead.com/npc=56843 --- http://www.wowhead.com/npc=56844 etc..
the problem is that everytime the page is loaded, it start to use always the link and can't go on with the next link with the new value
how can i solve this problem?
I think that i could use a txt file to save the last link i used, so in the html i can check the last link in the txt file and set the next value in the textbox.. But don't know how to do.
the code to start is this
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="jquery-2.0.2.js"></script>
</head>
<body>
<form method="POST" action="parser.php">
<input type="text" id="testo" name="testo">
<input type="submit" id="button" >
</form>
<script>
$(document).ready(function(){
$('#button').trigger('click');
});
</script>
</body>
</html>
convert the html page to php. When returning to this page from "parser.php", send back a response with next link and save that in the text field.
You can save the link in a session and not a file :
$_SESSION['URL'] = "Your URL HERE"
next time you read it like this:
var $MyUrl = $_SESSION['URL'];
Please check this link for more on PHP Sessions.
Since you have to persist the information of your last clicked page so that next time you load the page it goes to next page.
You can do this by two ways:-
*Server Side Change:-
You can implement sessions to store the information, where you store the last URL.
*Client Side Change:-
After HTML5 there are a lot of browser storage is available. So you can use local storage, it stores site specific data in browsers persistent memory. Also there is session storage available.Check this page for HTML5 Web Storage.
Here's my script tag:
<script src="/data/js/paypal-button.min.js?merchant=MERCHANT_CODE"
data-button="subscribe"
data-name="Product - 1 Year Subscription"
data-amount="49.99"
data-recurrence="1"
data-period="Y"
data-callback="http://url"
data-cancel_return="http://url"
data-env="sandbox"
></script>
I don't know why and how I should properly do it but I tried with several of PayPal's data attributes like notify, return, return_url and more but nothing seems to work.
I pay and then get on this page:
But no redirect to the callback page, what am I doing wrong please?
Thanks and have a nice day!
Try this:
<script src="/data/js/paypal-button.min.js?merchant=MERCHANT_CODE"
data-button="subscribe"
data-name="Product - 1 Year Subscription"
data-amount="49.99"
data-recurrence="1"
data-period="Y"
data-callback="http://url"
data-cancel_return="http://url"
data-callback="http://yourdomain"
data-return="http://yourdomain"
data-env="sandbox"
></script>
You have to enable Auto Return in your PayPal account. Otherwise it will ignore the return field.
From the documentation:
To set up Auto Return:
Log in and click the Profile subtab under My Account.
Click the Website Payment Preferences link under Selling Preferences.
Click the On radio button to enable Auto Return.
Enter the Return URL. Note: You must meet the Return URL requirements
in order to set up Auto Return. Learn
more
about Return URL.
IPN stands for Instant Payment Notification. It will give you more reliable/useful information than what you'll get from auto-return.
Here is the link to the documentation: https://www.paypal.com/cgi-bin/webscr?cmd=p/mer/express_return_summary-outside
How do I make one of those hyperlinks where when you click it, it will display a popup asking "are you sure?"
<INPUT TYPE="Button" NAME="confirm" VALUE="???" onClick="message()">
I already have a message() function working. I just need to know what the input type for a hyperlink would be.
<a href="http://somewhere_else" onclick="return confirm()">
When the user clicks the link, the confirm function will be called. If the confirm function returns false, the link traversal is cancelled, if true is returned, the link is traversed.
try to click, I dare you
with the function
function confirmAction(){
var confirmed = confirm("Are you sure? This will remove this entry forever.");
return confirmed;
}
(you can also return the confirm right away, I separated it for the sake of readability)
Tested in FF, Chrome and IE
As Nahom said, except I would put the javascript:message() call directly in the href part (no need for onclik then).
Note: leaving the JavaScript call in the onClick has a benefit: in the href attribute, you can put a URL to go to if the user doesn't have JavaScript enabled. That way, if they do have JS, your code gets run. If they don't, they go somewhere where they are instructed to enable it (perhaps).
Now, your message routine must not only ask the question, but also use the answer: if positive, it must call submit() on the form to post the form. You can pass this in the call to ease the fetching of the form.
Personally, I would go for a button (input tag as you show) instead of a simple link to do the process: it would use a more familiar paradigm for the users.
[EDIT] Since I prefer to verify answers I give, I wrote a simple test:
<script type="text/javascript" language="JavaScript">
function AskAndSubmit(t)
{
var answer = confirm("Are you sure you want to do this?");
if (answer)
{
t.form.submit();
}
}
</script>
<form action="Tests/Test.html" method="GET" name="subscriberAddForm">
<input type="hidden" name="locationId" value="2721"/>
<input type="text" name="text" value="3.1415926535897732384"/>
<input type="button" name="Confirm" value="Submit this form" onclick="AskAndSubmit(this)"/>
</form>
Yes, the submit just reload the page here... Tested only in FF3.
[EDIT] Followed suggestion in the comments... :-)
???
This answer would be OK only when the click need NOT navigate the user to another page.