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 ...
|
||||
</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-col is-70">
|
||||
|
|
@ -64,60 +64,85 @@
|
|||
<div class="is-row">
|
||||
<div class="is-col">
|
||||
|
||||
<input class="screen" type="radio" id="eu"
|
||||
name="bank" value="EU" checked>
|
||||
<label class="screen radio" for="eu">EU-Banküberweisung</label>
|
||||
<nav class="tabs" data-kube="tabs" data-equal="false">
|
||||
<a href="#tab1" class="is-active">Banküberweisung</a>
|
||||
<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>
|
||||
<input class="screen" type="radio"
|
||||
id="noneu" name="bank" value="Non-EU">
|
||||
<label class="screen radio" for="noneu">
|
||||
Non-EU-Banküberweisung</label>
|
||||
|
||||
<div class="is-row">
|
||||
<div class="is-col">
|
||||
<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>
|
||||
<input class="screen" type="radio" id="paypal"
|
||||
name="bank" value="PayPal">
|
||||
<label class="screen radio" for="paypal">PayPal</label>
|
||||
<input type="input" size="32" id="bic" name="purpose" placeholder="Verwendungszweck" />
|
||||
|
||||
</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>
|
||||
<input class="screen" type="radio" id="bar"
|
||||
name="bank" value="Bar">
|
||||
<label class="screen radio" for="bar" lang="de">
|
||||
Bargeld</label>
|
||||
<br><br>
|
||||
|
||||
<div class="is-row">
|
||||
<div class="is-col">
|
||||
<input type="input" size="32" id="iban" name="IBAN" placeholder="Kontonummer*" />
|
||||
|
||||
|
||||
<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" />
|
||||
</div>
|
||||
<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>
|
||||
<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" />
|
||||
<textarea class="nonEU" name="bankaddress" id="bankaddress" style="resize:both;" cols="32" rows="4" placeholder="Adresse der Bank (Strasse und Hausnummer/Postleitzahl/Land)"></textarea>
|
||||
<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)
|
||||
"></textarea>
|
||||
<br>
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
<input type="input" size="32" id="bic" name="purpose" placeholder="Verwendungszweck" />
|
||||
|
||||
|
||||
<label class="paypal" for="accountnumber">
|
||||
PayPal account</label>
|
||||
</section>
|
||||
<section id="tab3">
|
||||
<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> <!-- is-row -->
|
||||
|
|
@ -133,116 +158,7 @@ Grund für abweichende Kontoinhaberin"></textarea>
|
|||
</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" />
|
||||
</form>
|
||||
|
||||
|
|
|
|||
109
kaform.js
109
kaform.js
|
|
@ -89,112 +89,33 @@ function addTableRow(){
|
|||
|
||||
|
||||
$K.add('module', 'kaform', {
|
||||
init: function(app,context){
|
||||
init: function(app, context)
|
||||
{
|
||||
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: {
|
||||
alert: {
|
||||
closed: function(sender)
|
||||
tabs: {
|
||||
opened: function(sender)
|
||||
{
|
||||
alert(sender);
|
||||
// caught
|
||||
}
|
||||
console.log('Tab box is ',sender.getActiveBox());
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
// startup is here
|
||||
|
||||
$K.init({
|
||||
observer: true
|
||||
});
|
||||
|
||||
|
||||
|
||||
// startup is here
|
||||
|
||||
|
||||
|
||||
// on startup clear session on server
|
||||
$K.ajax.get({
|
||||
url: 'clear.php',
|
||||
|
|
@ -205,4 +126,4 @@ $K.ajax.get({
|
|||
});
|
||||
|
||||
// add on table row
|
||||
addTableRow();
|
||||
//addTableRow();
|
||||
|
|
|
|||
Loading…
Reference in a new issue