I need to change this code to make it valid for React
<script src="https://securepay.tinkoff.ru/html/payForm/js/tinkoff_v2.js"></script>
<form name="TinkoffPayForm" onsubmit="pay(this); return false;">
<input class="tinkoffPayRow" type="hidden" name="terminalkey" value="TinkoffBankTest">
<input class="tinkoffPayRow" type="hidden" name="frame" value="true">
<input class="tinkoffPayRow" type="hidden" name="language" value="ru">
<input class="tinkoffPayRow" type="text" placeholder="Сумма заказа" name="amount" required>
<input class="tinkoffPayRow" type="text" placeholder="Номер заказа" name="order">
<input class="tinkoffPayRow" type="text" placeholder="Описание заказа" name="description">
<input class="tinkoffPayRow" type="text" placeholder="ФИО плательщика" name="name">
<input class="tinkoffPayRow" type="text" placeholder="E-mail" name="email">
<input class="tinkoffPayRow" type="text" placeholder="Контактный телефон" name="phone">
<input class="tinkoffPayRow" type="submit" value="Оплатить">
</form>
I added <script> to index.html, created <form> in React Component and add ref to form
I created const w = window as any and added
const onSubmit = () => {
w.pay(form.current);
}
But it didn't work
What I need to pass as argument to w.pay function?
I solved the problem by adding dangerouslySetInnerHTML
Related
I'm using this jQuery script to focus onto next input when enter pressed:
$(function() {
$(".form >input").on('keyup', function(e) {
if (e.which === 13) {
$(this).next('input').focus();
}
});
});
It does work with this basic skinny HTML form
<div class="form">
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
</div>
But not with this one
<div class="form">
<input name="cislo1" type="text" class=cislo1 placeholder="" id="cislo1" autofocus /><br>
<input name="cislo2" type="text" class=cislo2 placeholder="" id="cislo2" /><br>
<input name="cislo3" type="text" class=cislo3 placeholder="" id="cislo3" /><br>
<input name="cislo4" type="text" class=cislo4 placeholder="" id="cislo4" /><br>
<input name="cislo5" type="text" class=cislo5 placeholder="" id="cislo5" /><br>
<input name="cislo6" type="text" class=cislo6 placeholder="" id="cislo6" /><br>
<input name="cislo7" type="text" class=cislo7 placeholder="" id="cislo7" /><br>
<input name="cislo8" type="text" class=cislo8 placeholder="" id="cislo8" /><br>
<input name="cislo9" type="text" class=cislo9 placeholder="" id="cislo9" /><br>
<input name="cislo10" type="text" class=cislo10 placeholder="" id="cislo10" /><br>
<input name="cislo11" type="text" class=cislo11 placeholder="" id="cislo11" /><br>
</div>
What seems to be the problem here? Help me please, I'm stuck
The issue here is you are using direct child selector like:
$(".form > input")
This only matches any direct input element inside form class, but in your next example input is not the direct child. So, you need to descent sector instead like:
$(".form input")
This will match any input inside the form class where it is a direct child or not.
Also, you need to replace
$(this).next('input').focus();
with this:
$(this).nextAll('input:first').focus();
This is needed because .next() will get the immediately following sibling of each element, but here input is not the immediate sibling. We also have some <br> in between which are causing the issue. This can be resolved using .nextAll('input:first') instead.
Demo:
$(function() {
$(".form input").on('keyup', function(e) {
if (e.which === 13) {
$(this).nextAll('input:first').focus();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form">
<p class="cislo">
<input name="cislo1" type="text" class=cislo1 placeholder="" id="cislo1" autofocus onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" oninput="cislo1.value=cislo1.value.slice(0,2)" /><br>
<input name="cislo2" type="text" class=cislo2 placeholder="" id="cislo2" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" oninput="cislo2.value=cislo2.value.slice(0,2)" /><br>
<input name="cislo3" type="text" class=cislo3 placeholder="" id="cislo3" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" oninput="cislo3.value=cislo3.value.slice(0,2)" /><br>
<input name="cislo4" type="text" class=cislo4 placeholder="" id="cislo4" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" oninput="cislo4.value=cislo4.value.slice(0,2)" /><br>
</p>
</div>
I am trying to pre-populate all the fields in the paypal page, but the phone is not populating.
Here is my code:
<INPUT TYPE="hidden" NAME="first_name" VALUE="John">
<INPUT TYPE="hidden" NAME="last_name" VALUE="Doe">
<INPUT TYPE="hidden" NAME="address1" VALUE="9 Elm Street">
<INPUT TYPE="hidden" NAME="address2" VALUE="Apt 5">
<INPUT TYPE="hidden" NAME="city" VALUE="Berwyn">
<INPUT TYPE="hidden" NAME="state" VALUE="PA">
<INPUT TYPE="hidden" NAME="zip" VALUE="19312">
<INPUT TYPE="hidden" NAME="lc" VALUE="US">
<INPUT TYPE="hidden" NAME="email" VALUE="buyer#domain.com">
<INPUT TYPE="hidden" NAME="night_phone_a" VALUE="610">
<INPUT TYPE="hidden" NAME="night_phone_b" VALUE="555">
<INPUT TYPE="hidden" NAME="night_phone_c" VALUE="1234">
What am I missing?
This is a bug in PayPal and the PD team has been working towards a fix.
Hi I have problem with open thankyoupage in new tab. How I can fix it please ? Because When I use iframe plugin that I must use it only open in iframe window. THANKS
I have this HTML code :
<div id="sideOpt">
<form method="post" name="email" action="http://www.gogvo.com/subscribe.php">
<div>
<input id="sideInput" type="email" name="Email" onblur="javascript: if(this.value==''){this.value='Vložte Vaši Emailovou Adresu';}" onfocus="javascript:this.value=''" value="Vložte Vaši Emailovou Adresu" title="Vložte Vaši Emailovou Adresu">
<input id="sideSend" type="submit" value="">
</div>
<div>
<input type="hidden" name="Campaign" value="8e89d34ffa27" />
<input type="hidden" name="AffiliateName" value="ErikPiovarci" />
<input type="hidden" name="ThankyouPage" value="http://www.simplemoneysystem.cz/rs/APkKib" />
<input type="hidden" name="OptIn" value="" />
<input type="hidden" name="FirstName" value="Odběratel">
<input type="hidden" name="AL" value="1">
<input type="hidden" name="LS" value="10">
</div>
</form>
Add target="_blank" to your form tag.
<form method="post" name="email" target="_blank" action="http://www.gogvo.com/subscribe.php">
I have a form that I want to submit to paypal. When I submit the form I don't get to the overview for the submitted product but I end up on the default page for paypal.
I started with http://sandbox.paypal.com but I tried the non-sandbox site too.
<form action="http://sandbox.paypal.com/cgi-bin/webscr" id="paypal_form" method="post" name="paypal_form">
<input name="cmd" type="text" value="_xclick">
<input name="business" type="text" value="some#email.com">
<input name="lc" type="text" value="CH">
<input name="item_name" type="text">
<input name="item_number" type="text">
<input name="amount" type="text">
<input name="currency_code" type="text" value="CHF">
<input name="no_note" type="text" value="1">
<input type="text" name="return" value="http://google.com">
<input name="address_override" type="text" value="1">
<input name="country" type="text" value="CH">
<input name="first_name" type="text">
<input name="last_name" type="text">
<input name="address1" type="text">
<input name="zip" type="text">
<input name="city" type="text">
<input name="email" type="text">
</form>
Since I don't get an error at all, I have no idea what is going wrong. I had cases when Paypal told me that I have to provide a city or something like that but now I just get forwarded.
Note: The Charles Proxy tells me that the form was submitted with these values:
The issue is with the action address in your form. You are posting to "http://sandbox.paypal.com/cgi-bin/webscr". Try using "https://www.sandbox.paypal.com/cgi-bin/webscr" instead.
I'm trying to post two different sets of mixed values. Each form will share some user submitted text like name and email.
<form method="post" action="url1">
<input type="hidden" name="donate" value="food">
<input type="hidden" name="days" value="30">
<input type="text" name="cans" value="5">
<input type="text" name="full_name" value="">
<input type="text" name="email" value="">
<input type="submit" name="submit" value="join1"/>
</form>
<form method="post" action="url1">
<input type="hidden" name="donate" value="shoes">
<input type="text" name="pairs" value="">
<input type="text" name="style" value="">
<input type="text" name="full_name" value="">
<input type="text" name="email" value="">
<input type="submit" name="submit" value="join2"/>
</form>
<possible dropdown>
It would be ideal to have Dropdown select between the two forms and submit.
Well, using only html you will get a problem as a submit button only submit its own form.
It's also not valid to have forms in other forms.
However, is a trick to accomplish your goal using javascript!
With a little function you can e.g. hide all other forms than one:
function showform(index){
var forms = document.forms;
for(var i=0;i<forms.length;i++)
forms[i].style.display=(i==index?"block":"none");
}
Then you only need to add the onchange-event on your dropdown-list and hide one of the forms by default.
This would result in something like this:
<html>
<head>
<style language="css" type="text/css">
form input{display:block;width:100px;}
</style>
<script language="javascript" type="text/javascript">
function showform(index){
var forms = document.forms;
for(var i=0;i<forms.length;i++)
forms[i].style.display=(i==index?"block":"none");
}
</script>
</head>
<body>
<select onchange='showform(this.selectedIndex);'>
<option>form1</option>
<option>form2</option>
</select>
<form method="post" action="url1">
<input type="hidden" name="donate" value="food"/>
<input type="hidden" name="days" value="30"/>
<input type="text" name="cans" value="5"/>
<input type="text" name="full_name" value=""/>
<input type="text" name="email" value=""/>
<input type="submit" name="submit" value="join1"/>
</form>
<form id='form2' style='display:none' method="post" action="url2">
<input type="hidden" name="donate" value="shoes"/>
<input type="text" name="pairs" value="2"/>
<input type="text" name="style" value=""/>
<input type="text" name="full_name" value=""/>
<input type="text" name="email" value=""/>
<input type="submit" name="submit" value="join2"/>
</form>
</body></html>
If you don't like javascript, you would need to do that in php by using an additional form for the select-element and insert only the wanted form (or hide the others).
I already see some design issues with the way you have planned your multi-form setup, there are much better techniques to handle this - but I will try to help you using your own technique.
By using your own example, this should work for you:
<form id="join1" method="post" action="url1">
<input type="hidden" name="donate" value="food">
<input type="hidden" name="days" value="30">
<input type="text" name="cans" value="5">
<input type="text" name="full_name" value="">
<input type="text" name="email" value="">
</form>
<form id="join2" method="post" action="url1">
<input type="hidden" name="donate" value="shoes">
<input type="text" name="pairs" value="">
<input type="text" name="style" value="">
<input type="text" name="full_name" value="">
<input type="text" name="email" value="">
</form>
<select id="formList">
<option value="">Select form..</option>
<option value="join1">Join1</option>
<option value="join2">Join2</option>
</select>
<button id="submitBtn">Submit</button>
And this is the javascript for making it happen (using jQuery):
$('#submitBtn').on('click',function(){
var selectedForm = $('#formList').val();
if(selectedForm){
$('#'+ selectedForm).submit();
}
});
the example is also available as a jsfiddle:
https://jsfiddle.net/k1jf4b4L/
Hope it helps a bit