Can anyone explain why i can not use oninput inside a table and how i can get it to work?
For example this works:
<form onsubmit="return false" oninput="o.value = parseInt(a.value) + parseInt(b.value)">
<input name="a" type="number" step="any"> +
<input name="b" type="number" step="any"> =
<output name="o"></output>
</form>
And this does not:
<table>
<form onsubmit="return false" oninput="o.value = parseInt(a.value) + parseInt(b.value)">
<input name="a" type="number" step="any"> +
<input name="b" type="number" step="any"> =
<output name="o"></output>
</form>
</table>
<form onsubmit="return false" oninput="o.value = parseInt(a.value) + parseInt(b.value)">
<table>
<input name="a" type="number" step="any"> +
<input name="b" type="number" step="any"> =
<output name="o"></output>
</table>
</form>
Related
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
I would like to use one input field that is referenced by multiple forms on one page. or I would like to use <input form="form1,form2,form3,form4" type="text" name="name" required autocomplete="off"/><br> or call the input field every time i submit each of the forms
<table align="center">
<tr>
<td colspan="5" align="center">Group Name:
<input form="form1,form2,form3,form4" type="text" name="name" required autocomplete="off"/><br>
</td>
</tr>
<tr>
<td>
<form id="form1" action="plan.php" method="post">
<input type="hidden" name="number" value="0"><br>
<input type="hidden" name="priceplan" value="25"><br><br>
<input type="submit" value="10 PAX" style="width:100%; margin-top:0px;" class="button">
</form>
</td>
<td>
<form id="form2" action="plan.php" method="post">
<input type="hidden" name="number" value="0"><br>
<input type="hidden" name="priceplan" value="2"><br><br>
<input type="submit" value="10 People" style="width:100%; margin-top:0px;" class="button">
</form>
</td>
<td>
<form id="form3" action="plan.php" method="post">
<input type="hidden" name="number" value="0"><br>
<input type="hidden" name="priceplan" value="3"><br><br>
<input type="submit" value="20 People" style="width:100%; margin-top:0px;" class="button">
</form>
</td>
<td>
<form id="form4" action="plan.php" method="post">
<input type="hidden" name="number" value="0"><br>
<input type="hidden" name="priceplan" value="4"><br><br>
<input type="submit" value="30 People" style="width:100%; margin-top:0px;" class="button">
</form>
</td>
<td>
<form id="form5" action="plan.php" method="post">
<input type="hidden" name="number" value="0"><br>
<input type="hidden" name="priceplan" value="5"><br><br>
<input type="submit" value="40 People" style="width:100%; margin-top:0px;" class="button">
</form>
</td>
</tr>
</table>
I would like to use <input form="form1,form2,form3,form4" type="text" name="name" required autocomplete="off"/><br> or call the input field every time i submit each of the forms
You can achieve this using Javacsript here is an example using jQuery:
first you give ur unique input an ID (id="uniqueInput")
then on the submit you append it to the form
$('form').submit(function(e){
e.preventDefault();
$('<input>').attr({
type: 'hidden',
id: 'foo',
name: 'bar',
value: $('#uniqueInput').val()
}).appendTo($(this));
})
I have a problem with a html5 output. Using autosum, when I remove a number, the output shows not a number in the textbox NaN.
How do I remove it?
<form method="POST" oninput="result.value=parseInt(value1.value)+parseInt(value2.value)">
<input type="number" id="value1" value="0"> +
<input type="number" id="value2" value="0"> =
<output name="result" for="value1 value2"></output>
</form>
I've had a play on JSfiddle, is this what you're after? If the value for parseInt is not an int then it uses 0.
<form method="POST" oninput="result.value=(parseInt(value1.value) || 0)+(parseInt(value2.value) || 0)">
<input type="number" id="value1" value="0"> +
<input type="number" id="value2" value="0"> =
<output name="result" for="value1 value2"></output>
</form>
https://jsfiddle.net/5acLpxqs/
Use this it fixes the issue
<form method="POST" oninput="result.value=parseInt(value1.value?value1.value:0)+parseInt(value2.value?value2.value:0)">
<input type="number" id="value1" value="0"> +
<input type="number" id="value2" value="0"> =
<output name="result" for="value1 value2"></output>
</form>
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'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