HTML form split to two different submissions - javascript

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.

Related

When a link is clicked, I want to show a value/price on the next page

I have this code on page 1. All a tags have the same link. If the user clicks on one link, the next page 2 is loaded. I want to display the price of that id specific to that link to show on page 2.
example: If the user clicks a link with id="saloon_price", the price on page 2 should appear Saloon: £50.
If the user clicks the link with id="mpv_price", the price on page 2 should appear MPV: £70.
Please help me to achieve this on page 2.
I am very new to coding. And using Javascript. Kindly help me with a simpler solution. Thanks
<a id="saloon_price" href="/quotes/details"> Saloon: £50</a>
<a id="estate_price" href="/quotes/details">Estate: £60</a>
<a id="mpv_price" href="/quotes/details">MPV: £70</a>
In the web, we pass values mainly using the URL, and read them again in the loaded page.
<a id="saloon_price" href="/quotes/details?label=Saloon&value=£50"> Saloon: £50</a>
<a id="estate_price" href="/quotes/details?label=Estate&value=£60">Estate: £60</a>
<a id="mpv_price" href="/quotes/details?label=MPV&value=£70">MPV: £70</a>
And read this post for more details:
How to get the value from the GET parameters?
You will propably need to use PHP or other server-side languages. You can do this easily with forms. But you will need to run this on some kind of server.
This will echo (type to document) the value of value attribute on the button...
index.php:
<form action="/quotes/details.php" method="post">
<button type="submit" name="price" value="£50" id="saloon_price"> Saloon: £50 </button>
...other buttons...
</form>
/quotes/details.php:
...
<?php
$price = $_POST["price"];
echo "MPV: " . $price;
?>
...
You can use method="get" and $_GET["price"] if you want to see these values in url.

Enable/disable button using javascript

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/

Adding stripe button to the pricing table

I'm using marketers delight 3 wp child theme, their pricing tables. I want to replace the standard "order now" button with the stripe script button. I can only put URL's in that field. What can I do in this case?
Here is the stripe script itself:
<form action="/charge" method="POST">
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="xxx"
data-image="/square-image.png"
data-name="xxxx"
data-name="Silver Package"
data-label="Buy the Silver Package - $29.99"
data-description="Silver Package ($29.99)"
data-amount="2999">
</script>
</form>
How can I add this button to the pricing table if that Order Now field can be filled only with an URL?
Edit the theme. Open up the template for that specific part, remove or comment the button with php so it does not show up in devtools and place this stripe code.
Might not be the best approach, pick the one you like the most
Try to inject it into the href field like this:
$injection= ' ">'.$stripe_button_code.' <a style="display:none';
<a href="<?=$injection;?>"> title
Try to put an onclick action on the link that clicks on the stripe
button somewhere on the page
Same as 2 but if you can't use onclick maybe you can use
javascript:function(){ } for the href
Edit the theme file and do it without work arounds [Reccomended]

Disabling a button when clicked

I have a form which users can use to send an ecard.
This is an example URL:
http://jimpix.co.uk/ecards/normal-ecard.asp?id=5480
At the bottom of the form there is this HTML (covering the send buttons):
<div class="col-lg-6">
<legend>Next bit...</legend>
<button type="button" id="BtnPrev" class="btn btn-info" onclick="return valFormPrev(theForm,'preview');"/>Preview Your Ecard</button>
<button type="button" id="BtnGo" class="btn btn-success" class="preview" onclick="return valFormGo(theForm,'process');"/>Send Now</button>
<p class="top10">Reset buttons so you can use them again</p>
</div>
Because the page can take a while to process when users click on a button, I added this to the end of the JS used to validate the forms (located at http://jimpix.co.uk/dist/js/ecard.js)
Say a user clicks the "Send Now" button, it calls the "valFormGo" function.
That contains this code near the end:
document.getElementById("BtnGo").disabled = 'true';
That disables the button if the user click on it, so they can't click it many times and send the same ecard many times.
That seems to work okay, but if, once they have sent the ecard, they press the back button to e.g. send again to someone else, the button remains disabled, even if the page is refreshed.
I had to set up a function to allow them to make the buttons active again via:
function ResetBtns()
{
document.getElementById('BtnPrev').removeAttribute("disabled");
document.getElementById('BtnGo').removeAttribute("disabled");
}
That works, but it is clunky.
I just wondered if anyone knows of a more elegant solution I might be able to follow to disable the button when pressed, or maybe have the button change the text to say "processing..." when it is waiting for the next page to process the data.
Basically I have made a hack job of this and it would be much appreciated if anyone might be able to advise please on possible alternatives.
Any advice would be much appreciated.
Thanks
Why not process the ecard on the same page using ajax method, then on success you can un-disable the submit button.
Can't really offer any code at this time as not sure of your current flow / method being used.
Try this:
//to disable buttons
$('BtnPrev').click(function(){
this.prop('disabled', true);
});
$('BtnGo').click(function(){
this.prop('disabled', true);
});
//to enable buttons
function ResetBtns() {
$('BtnPrev').prop('disabled', false);
$('BtnGo').prop('disabled', false);
}
Just make the function run like this:
<button onclick="myfunction()" id="activate"></button>
<script>
function myfunction(){if(unrun==true){unrun=false;
document.getElementById("activate").innerHTML="Processing....";
code goes here;}}
</script>

Comment reply procedure using jquery and php?

I have Commenting system in my app. For a single video entry anyone can post a comment and someone else can post reply to that comment and replies, cannot have thier further reples, similar to StackOverflow is doing (1 Answer, and thier 1 or more replies).
I want the similar functionality what SO has, Let's I have the following HTML
<div class="comment" id="comment-908">
First comment
</div>
<div class="reply">
<div id="reply-909>
reply 1
</div>
<div id="reply-910>
reply 2
</div>
<div id="reply-911>
reply 3
</div>
</div>
<form id="reply-form">
<textarea id="replycomment" name="replycomment"></textarea>
<input type="submit" name="submit-reply" value="add reply" />
</form>
Now above HTML is a sample which I have created, When someone will click on "add reply" button then I am using jquery to post there reply.
Now I want to know that there will be multiple comment and multiple add reply forms. So who clicks on which button and for which comment someone wants to post a reply, how will i know that?
The above HTML is not in correct way, please suggest me the correct HTML flow which I can use and how to work with jquery?
now I want to know when soe
Change the HTML form to something similar first:
<form class="reply-form" action="url/to/submit/123456" method="post">
...
</form>
The reason behind this is, you cannot have same id for more than one element, so, to simplify the problem, you can just make all reply form to be in class reply-form (which is straightforward). Adding the form action with the id is also a good practice so that even your client don't have javascript/ajax enabled, it can still functional when clicking on the submit button.
And then, the rest of the work would be (suppose your form is ajax submit):
$(".reply-form").each(function(){
var form = $(this);
var submitUrl = form.attr("action");
$("input:submit", form).click(function(){
// implement the submit logic here.
});
});

Categories