First part of new input form works
This commit is contained in:
7u83
parent
346fd821a8
commit
bf63ec1774
2 changed files with 96 additions and 259 deletions
220
ka.html
220
ka.html
|
|
@ -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
109
kaform.js
|
|
@ -88,113 +88,34 @@ 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();
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue