I'm using the Stripe payment gateway in my WordPress store. When you choose that payment option you will be redirected to another page and have to click a button there. This buttons opens an Iframe so the user can enter his credit car details. I want that button to be clicked automatically, so the Iframe opens after the page loaded.
Here's the HTML of that button:
2nd (noob) question: How can I change the style of that button with CSS? I tried targeting the class .wc-stripe-checkout-button but that didn't work...
Hope you can help :)
</li>
<li class="method">
Payment method: <strong>Credit Card (Stripe)</strong>
</li>
</ul>
<form method="post" class="woocommerce-checkout" action="https://xxxxx.com/wc-api/WC_Gateway_Stripe/">
<div id="stripe-payment-data" data-panel-label="" data-description="g" data-email="xxxxxxxxx" data-verify-zip="false" data-billing-address="false" data-shipping-address="false" data-amount="695" data-name="xxxxxxx" data-currency="eur" data-image="" data-locale="en" data-three-d-secure="true" data-allow-remember-me="true">
<input type="hidden" name="order_id" value="78464" />
<input type="hidden" name="stripe_checkout_order" value="yes" />
<input type="hidden" id="stripe_checkout_process_nonce" name="stripe_checkout_process_nonce" value="e48208f479" />
<input type="hidden" name="_wp_http_referer" value="/checkout/order-pay/78464/?key=wc_order_Rj87dWBlEAIN3" />
<button type="submit" class="wc-stripe-checkout-button">Place Order</button>
</form>
</div>
<div class="clear"></div>
</div>
</div>
</div></div></div>
</div>
Related
I've got a small form where I store information regarding some user choices. I'm not sure though how I can pass href links that are different for each user.
Here is a small example of the code:
<form method="post" action="save.php" class="form">
<fieldset>
<input type="checkbox" name="checkthing" value="g1">
<label>Option 1</label>
</fieldset>
<fieldset>
<input type="checkbox" name="checkthing" value="g2">
<label>Option 2</label>
</fieldset>
<fieldset>
<input type="checkbox" name="checkthing" value="e1">
<label>Option 3</label>
</fieldset>
<fieldset>
<input type="checkbox" name="checkthing" value="e2">
<label>Option 4</label>
</fieldset>
<a data-column="1" href="link here" style="color: green;">Text</a> <br>
<a data-column="2" href="link here">Text</a> <br>
<a data-column="3" href="link here" style="color: green;">Text</a> <br>
<a data-column="4" href="link here">Text</a> <br>
<button type="submit" name="save">
<i class="ft-check"></i> Save
</button>
</form>
When href got a style, it means that is customized for the user. What I want is to store the data-column ID for that user but I am not sure how I can achieve that through PHP.
So for the above example I would store the checked checkboxes + data-column 1 + 3.
You could create a hidden form element with javascript like this, and pull it off when the form is submitted as $_POST['style_ele']
$("form.form").find("a").each(function(){
if($(this).attr("style")!==undefined){
$("form.form").append("<input type='hidden' name='style_ele[]' value='"+$(this).data('column')+"'/>");
}
});
But, if you are generating that style attribute from server-side code like php, you could just create additional hidden input along with the a tag
I want to add text without reloading the page.
Here I have 2 TField (each with button POS and NEG) and 2 TArea (1 TArea POS and 1 TArea NEG).
when i input some text in first TField and then press POS button, the text added to TArea POS, and vice versa, if there is input in second TField then i hit POS, then my input append to TArea POST too.
In pure php with using FORM I could do it. but here I want page without reloading.
<div id="retrain" >
<input type="text" id="tweet" name="tweet" title="Teks retrain" />
<input type="submit" id="pos" name="pos" value="POS"/>
<input type="submit" id="neg" name="neg" value="NEG"/>
</div>
<div id="retrain" >
<input type="text" id="tweet" name="tweet" title="Teks retrain" />
<input type="submit" id="pos" name="pos" value="POS"/>
<input type="submit" id="neg" name="neg" value="NEG"/>
</div>
<div id="box" >
<textarea style="width:420px" name="posbox" rows="4" cols="70"></textarea>
<textarea style="width:420px" name="negbox" rows="4" cols="70"></textarea>
</div>
<?php
if (isset($_POST['pos'])) {
}
if (isset($_POST['neg'])) {
}
?>
Can you help my case?
Thanks for the help.
note : here i using same ID for all my input.
You cant do asynchronous requests with php. It is server compiled, not like javascript that is compiled by the browser..
learn how the internet works!
You can change fields in html with Javascript. The problem of your code is that your buttons are "submit" and thus a form has to be submitted (the page reloaded, etc). With these small changes you can get what you want:
<html>
<head>
<script>
function changeField()
{
document.form1.tweet.value=document.form0.tweet.value;
}
</script>
</head>
<form name='form0' id='form0'>
<div id="retrain" >
<input type="text" id="tweet" name="tweet" title="Teks retrain" />
<input type="submit" id="pos" name="pos" value="POS"/>
<input type="submit" id="neg" name="neg" value="NEG"/>
</div>
</form>
<form name='form1' id='form1'>
<div id="retrain" >
<input type="text" id="tweet" name="tweet" title="Teks retrain" />
<input type="submit" id="pos" name="pos" value="POS"/>
<button type="button" id="neg" name="neg" value="NEG" onclick="changeField();">NEG</button>
</div>
</form>
</html>
Logically, the only button including the new functionality is "neg" in form1: when it is clicked, the text in the "tweet" textbox above is written into the one below.
SO..i have this project that is totally backwards, but basically i have to give a working form that adds a quantity of some item_ID and then redirects to the cart page of a framework i use.
Of course rather than me just skin my framework, and customize its functionality for him. This guy has some hacked up php pages that he "wrote himself" that he insists on hard coding forms into.
anyways, i have a form that submits to my cart.php in the action
<form name="orderform" method="post" action="http://s429036015.onlinehome.us/cart.php" id="orderform">
<input type="hidden" name="mode" value="add" />
<input type="hidden" name="productid" value="140" />
<input type="hidden" name="cat" value="" />
<input type="hidden" name="page" value="" />
Qty <input type="text" id="product_avail" name="amount" />
<button class="button main-button list-button add-to-cart-button" type="submit" title="" onClick="location.href='cart.php'">
<span class="button-right"><span class="button-left">Add to cart</span></span>
</button>
</form>
The above form submits properly, with the quantity entered, session stores the data and the items are in the cart just fine....however, that onclick event on the <button> doesn't work!
I've even tried this
<button class="button main-button list-button add-to-cart-button" type="submit" title="" onClick="GotoPage(); return:true;">
with this script ahead of the form
<script type="text/javascript">
function GotoPage() {
window.location = "http://s429036015.onlinehome.us/cart.php";
}
</script>
anyone have any ideas? driving me nuts...
In PHP, after you process data from form, try this:
header('location: http://s429036015.onlinehome.us/cart.php');
Hi having a problem with this code even if i clicked on cancel it will still proceed to use the action of my form even though the CANCEL button is not part of the form, Would appreciate any help.
Here is the code.
<form method="post" action="input_enroll.php" >
<div id="overlay1">
<div>
<h1> Enter Educational Level Entry</h1>
<input type="text" name="level" >
<input type="submit" value="Proceed To Enroll" '>
</form>
<input type="submit" value="Cancel" onclick='overlay()'>
</div>
</div>
EDIT: Any suggestions what would be a better idea? I'm thinking putting the cancel outside the div.
You are having form started, then divs started, then form closed..start form after divs..
as your markup is not correct, browsers will change it as thier parser suggest,
In chrome </form> tag is postponed after </div>s..
<div id="overlay1">
<div>
<form method="post" action="input_enroll.php" >
<h1> Enter Educational Level Entry</h1>
<input type="text" name="level" />
<input type="submit" value="Proceed To Enroll" />
</form>
<input type="submit" value="Cancel" onclick='overlay()' />
</div>
</div>
I have a 3 page registration page. After the user selects an option on the first page and clicks submit, the form transforms into the next form using jquery's animate method, meaning it stays on the same page. The question I have is how to get the data from the first form because the content of the 2nd forms is dependent on that information. Here's my html:
<div id="Registration" style="display:none;">
<div class="box">
<form id="frmtype1" action="#" name="frmtype1" method="post">
<header>Registration Options</header><br/>
<label for="Reg_type1"><input type="radio" name="Reg_type" id="Reg_type1" value="1"/> Option 1</label> <br/><br/>
<label for="Reg_type2"><input type="radio" name="Reg_type" id="Reg_type2" value="2"/> Option 2</label><br/><br/>
<label for="Reg_type3"><input type="radio" name="Reg_type" id="Reg_type3" value="3"/> Option 3</label><br/><br/>
<p id="error_message" style="display:none">Please choose an option</p><input type="submit" class="button" name="Submit" value="Submit"/>
</form>
<form name="everything" id="everything" action="#" method="post">
<header>Registration Information</header><br/>
<label>First Name<font color="red">*</font>: <input type="text" name="fname" id="fname" /> </label><br/>
Last Name*: <input type="text" name="lname" id="lname" /> <br/>
Address*: <input type="text" name="address" id="address" /> <br/>
</form>
</div>
</div>
So once an option is selected, the first form disappears and the next one appears. So how do I get the data of which option they selected? Thanks
Since they depend on information on one form, the "pages" should really be the same form. You use the jQuery/JavaScript to show/hide the "current page". This will allow you to submit all the data in one go.
Wrap all the input elements in one html form tag
For each form "segment" you will need to use your js to hide/show the wrapping HTML container. The default being "page 1" of the form and the rest hidden.
Change your submit button to just a button and have a on click event on it. When the user clicks the button the input is validated and then the jQuery unhides "page 2".
On your last "page" have a normal submit button and then all the form data is posted in one.
For example, the html might look like this:
<script type="text/javascript">
$(document).ready(function{
$(".next-page").click(function(){
$(".box-wrapper").hide();
$("#page-" + $(this).data("page")).show();
});
});
</script>
<div class="registration">
<form name="regform" action="" method="post">
<!-- Page 1 -->
<div class="box-wrapper" id="page-1">
<div class="box">
<!-- form inputs go here -->
<input type="button" name="next-page" class="next-page" value="Continue" data-page="2"/>
</div>
</div>
<!-- Page 2 -->
<div class="box-wrapper" id="page-2" style="display: none;">
<div class="box">
<!-- form inputs go here -->
<input type="button" name="next-page" class="next-page" value="Continue" data-page="3"/>
</div>
</div>
<!-- Page 3 -->
<div class="box-wrapper" id="page-3" style="display: none;">
<div class="box">
<!-- form inputs go here -->
<input type="submit" name="submit" class="submit" value="Complete Registration"/>
</div>
</div>
</form>
</div>
Using jquery --- $('input[name=Reg_type]:checked').val() this will give you the selected value.