First part of new input form works

This commit is contained in:
7u83 2020-02-24 15:54:42 +00:00
parent 346fd821a8
commit bf63ec1774
2 changed files with 96 additions and 259 deletions

220
ka.html
View File

@ -24,7 +24,7 @@
Bitte fülle dieses Formular aus ... Bitte fülle dieses Formular aus ...
</p> </p>
<form name="theform" id="theform" action="submit.php" method="POST"> <form data-kube="kaform" name="theform" id="theform" action="submit.php" method="POST">
<div class="is-row"> <div class="is-row">
<div class="is-col is-70"> <div class="is-col is-70">
@ -64,60 +64,85 @@
<div class="is-row"> <div class="is-row">
<div class="is-col"> <div class="is-col">
<input class="screen" type="radio" id="eu" <nav class="tabs" data-kube="tabs" data-equal="false">
name="bank" value="EU" checked> <a href="#tab1" class="is-active">Banküberweisung</a>
<label class="screen radio" for="eu">EU-Banküberweisung</label> <a href="#tab2">Banküberweisung(Non-EU)</a>
<a href="#tab3">PayPal</a>
<a href="#tab4">Barauszahlung</a>
</nav>
<section id="tab1">
<div class="is-row">
<div class="is-col">
<input type="input" size="32" name="Owner" placeholder="Kontoinhaber" />
</div>
<div class="is-col">
</div>
</div>
<br> <br>
<input class="screen" type="radio"
id="noneu" name="bank" value="Non-EU"> <div class="is-row">
<label class="screen radio" for="noneu"> <div class="is-col">
Non-EU-Banküberweisung</label> <input type="input" size="32" id="iban" name="IBAN" placeholder="IBAN*" />
</div>
<div class="is-col">
<input type="input" size="32" id="bic" name="BIC" placeholder="BIC*" />
</div>
</div>
<br> <br>
<input class="screen" type="radio" id="paypal" <input type="input" size="32" id="bic" name="purpose" placeholder="Verwendungszweck" />
name="bank" value="PayPal">
<label class="screen radio" for="paypal">PayPal</label> </section>
<section id="tab2">
<div class="is-row">
<div class="is-col">
<input type="input" size="32" name="Owner" placeholder="Kontoinhaber" />
</div>
<div class="is-col">
</div>
</div>
<br> <br>
<input class="screen" type="radio" id="bar"
name="bank" value="Bar"> <div class="is-row">
<label class="screen radio" for="bar" lang="de"> <div class="is-col">
Bargeld</label> <input type="input" size="32" id="iban" name="IBAN" placeholder="Kontonummer*" />
<br><br>
<label class="EU nonEU" for="owner" >Kontoinhaber</label> </div>
<input class="EU nonEU" type="input" size="32" id="ownerDe" name="Owner" placeholder="wenn abweichend vom Realnamen" /> <div class="is-col">
<input type="input" size="32" id="bic" name="BIC" placeholder="BIC/SWIFT*" />
</div>
</div>
<br>
<input class="EU nonEU" type="input" size="32" id="bank" name="Bankname" placeholder="Name der Bank*" />
<br>
<label class="EU nonEU" for="iban" >IBAN</label> <textarea class="nonEU" name="bankaddress" id="bankaddress" style="resize:both;" cols="32" rows="4" placeholder="Adresse der Bank (Strasse und Hausnummer/Postleitzahl/Land)"></textarea>
<input class="EU nonEU" type="input" size="32" id="iban" name="IBAN" placeholder="DE0123…" /> <br>
<textarea name="address" lang="de" class="nonEU" id="address" style="resize:both;" cols="32" rows="4" placeholder="Deine Anschrift (Srtasse und Hausnummer/Postleitzahl/Land)
<label class="EU nonEU" for="bic">BIC / SWIFT</label> "></textarea>
<input class="EU nonEU" type="input" size="32" id="bic" name="BIC" placeholder="LBMU…" /> <br>
<label class="EU nonEU" for="bank" >Name der Bank</label>
<input class="EU nonEU" type="input" size="32" id="bank" name="Bankname" placeholder="Banky McBankface" />
<label class="nonEU" for="bankaddress" >Bankanschrift</label> <input type="input" size="32" id="bic" name="purpose" placeholder="Verwendungszweck" />
<textarea class="nonEU" name="bankaddress" id="bankaddress" style="resize:both;" cols="32" rows="4" placeholder="Straße und Hausnummer
Postleitzahl und Ort
Land"></textarea>
<label class="nonEU" for="address" >Deine Anschrift</label>
<textarea name="address" lang="de" class="nonEU" id="address" style="resize:both;" cols="32" rows="4" placeholder="Straße und Hausnummer
Postleitzahl und Ort
Land"></textarea>
<label class="EU nonEU" for="comments" lang="de">Weitere Anmerkungen</label>
<textarea class="EU nonEU" id="comments" name="comments"
style="resize:both;" cols="32" rows="4" placeholder="z.B. intermdiäre Bank,
Grund für abweichende Kontoinhaberin"></textarea>
<label class="paypal" for="accountnumber"> </section>
PayPal account</label> <section id="tab3">
<input class="paypal" type="input" size="32" <input class="paypal" type="input" size="32"
id="paypal" placeholder="paypal@example.com" /> id="paypal" placeholder="Dein PayPal Account (paypal@example.com)" />
</section>
<section id="tab4">
</section>
</div> <!-- i-col --> </div> <!-- i-col -->
</div> <!-- is-row --> </div> <!-- is-row -->
@ -133,116 +158,7 @@ Grund für abweichende Kontoinhaberin"></textarea>
</div> </div>
</div> </div>
<fieldset>
<legend>Deine Ansprechperson bei Wikimedia</legend>
<input required type="input" size="32" id="wmdecontact"
name="wmdecontact" placeholder="John Doe" />
</fieldset>
<fieldset>
<legend>Deine Kontaktdaten</legend>
<label for="realname" >Dein Realname</label>
<input required type="input" size="32"
name="realname" placeholder="Corinna Commonsuser" />
<label for="email">E-Mail-Adresse</label>
<input required type="email" size="32" id="email"
name="email" placeholder="name@example.org" />
<label for="phone" >Telefonnummer</label>
<input required type="tel" size="32" "phone" name="phone"
placeholder="0123-456789" />
</fieldset>
<fieldset id="bankdetails">
<legend>Auszahlungsweg</legend>
<input class="screen" type="radio" id="eu"
name="bank" value="EU" checked>
<label class="screen radio" for="eu">EU-Banküberweisung</label>
<br>
<input class="screen" type="radio"
id="noneu" name="bank" value="Non-EU">
<label class="screen radio" for="noneu">
Non-EU-Banküberweisung</label>
<br>
<input class="screen" type="radio" id="paypal"
name="bank" value="PayPal">
<label class="screen radio" for="paypal">PayPal</label>
<br>
<input class="screen" type="radio" id="bar"
name="bank" value="Bar">
<label class="screen radio" for="bar" lang="de">
Bargeld</label>
<br><br>
<label class="EU nonEU" for="owner" >Kontoinhaber</label>
<input class="EU nonEU" type="input" size="32" id="ownerDe" name="Owner" placeholder="wenn abweichend vom Realnamen" />
<label class="EU nonEU" for="iban" >IBAN</label>
<input class="EU nonEU" type="input" size="32" id="iban" name="IBAN" placeholder="DE0123…" />
<label class="EU nonEU" for="bic">BIC / SWIFT</label>
<input class="EU nonEU" type="input" size="32" id="bic" name="BIC" placeholder="LBMU…" />
<label class="EU nonEU" for="bank" >Name der Bank</label>
<input class="EU nonEU" type="input" size="32" id="bank" name="Bankname" placeholder="Banky McBankface" />
<label class="nonEU" for="bankaddress" >Bankanschrift</label>
<textarea class="nonEU" name="bankaddress" id="bankaddress" style="resize:both;" cols="32" rows="4" placeholder="Straße und Hausnummer
Postleitzahl und Ort
Land"></textarea>
<label class="nonEU" for="address" >Deine Anschrift</label>
<textarea name="address" lang="de" class="nonEU" id="address" style="resize:both;" cols="32" rows="4" placeholder="Straße und Hausnummer
Postleitzahl und Ort
Land"></textarea>
<label class="EU nonEU" for="comments" lang="de">Weitere Anmerkungen</label>
<textarea class="EU nonEU" id="comments" name="comments"
style="resize:both;" cols="32" rows="4" placeholder="z.B. intermdiäre Bank,
Grund für abweichende Kontoinhaberin"></textarea>
<label class="paypal" for="accountnumber">
PayPal account</label>
<input class="paypal" type="input" size="32"
id="paypal" placeholder="paypal@example.com" />
</fieldset>
<label>Dein Projekt / Zweck der Reise</label>
<input type="text" name="projekt"/>
<br>
<h2>Bitte trage deine einzelnen Kostenpositionen ein.</h2>
<p>
Bitte trage nur eine Ausgabe pro Zeile ein, lege den
Originalbeleg dem Antrag bei und kennzeichne den Beleg
mit der entsprechenden Zeilennummer. Aus der Beschreibung
soll zu ersehen sein, ob es sich um Transport, Dienstleistung,
Materialien, Verpflegung oder ähnliches handelt.
</p>
<table id="tabtab" class="is-bordered">
<thead>
<tr>
<th>Pos.</th>
<th>Beschreibung</th>
<th>Belegdatum</th>
<th>Betrag</th>
<th>Beleg</th>
</tr>
</thead>
<tbody id="tabbody">
</tbody>
</table>
<input type="submit" style="display:none" name="submitButton" /> <input type="submit" style="display:none" name="submitButton" />
</form> </form>

109
kaform.js
View File

@ -89,112 +89,33 @@ function addTableRow(){
$K.add('module', 'kaform', { $K.add('module', 'kaform', {
init: function(app,context){ init: function(app, context)
{
this.app = app; this.app = app;
// getting context and the module element
this.context = context;
this.$element = context.getElement();
},
hello: function(){
alert ("hello function of kaform");
},
start: function()
{
/*this.$element.on('keydown.kube.editable', this._hui.bind(this));
this.$element.on('paste.kube.editable', this._hui.bind(this));
this.$element.on('blur.kube.editable', this._hui.bind(this));
*/
// alert(this.$element);
// this.$element.on('click', this.addRow.bind(this));
this._build();
},
addRow: function()
{
var $node = $K.dom('#tabbody');
// create a new table row with id
var element = document.createElement('tr');
element.setAttribute("id", "trow"+nextRowId);
var e="";
// add column for position no
e += '<td></td>';
// add coluemn for description
e += '<td><textarea rows="2"></textarea> </td>';
// add column for date
e += '<td style="overflow:visible;"><input type="date"/></td>';
// add column for num
e += '<td style="overflow:visible;"><input type="num"/></td>';
// add column for file upload
e+= `
<td data-kube="">
<form action="">
<div class="form-item">
<div class="upload"
data-kube="upload"
data-type="file" data-multiple="true"
data-target="#upload-target${nextRowId}"
data-url="upload.php" data-url-remove="delete.php"
data-progress="true">
</div>
<div id="upload-target${nextRowId}" class="upload-target"></div>
</div>
</form>
</td>
`;
// add delete bnutton
e +=
`<td><span
onclick="deleteTableRow('trow${nextTableRow}'"
class="close is-large">
</span></td>`;
$node.append(element);
element.innerHTML=(e);
renumberTableRows();
nextRowId++;
},
// private
_build: function()
{
}, },
// catch event
onmessage: { onmessage: {
alert: { tabs: {
closed: function(sender) opened: function(sender)
{ {
alert(sender); console.log('Tab box is ',sender.getActiveBox());
// caught
}
} }
} }
},
}); });
// startup is here
$K.init({ $K.init({
observer: true observer: true
}); });
// startup is here
// on startup clear session on server // on startup clear session on server
$K.ajax.get({ $K.ajax.get({
url: 'clear.php', url: 'clear.php',
@ -205,4 +126,4 @@ $K.ajax.get({
}); });
// add on table row // add on table row
addTableRow(); //addTableRow();