Ninox übersichtlicher mit HTML & Java

Michi.1
vor 1 JahrFri, September 22, 2023 at 11:43 AM UTC
7Antworten
Answered

Grüßt euch,

ist es möglich über HTML und Java ein Benutzer Formular zu schaffen, was gleichzeitig die schon eingegeben Feldwerte von Ninox anzeigt und Änderungen in Ninox übernimmt?

Bekomm das Mangels wissen nicht hin, jedoch wäre das eine nette optische Überarbeitung.

- Michi.1
- vor 1 JahrSat, September 23, 2023 at 4:53 PM UTC
- Gemeldet - anzeigen
wenn man den pleceholder für die Feldwertanzeige misbracht geht es ja.

<input id='KV' name=KV type='text' onkeyup='myFunction()' placeholder= " +
   'KV-Nr.' +
   " required autofocus>

Weis jemand wie ich mit submits oder mit der Enter Taste die neu geschriebene werte zurück sende?

So geht es nicht jedenfalls nicht

function myFunction() {
let result = document.querySelector('#KV').value;
let idNX = '" +
   raw(Nr) +
   "';
database.update(idNX, 'VE' , result);
}

Michi.1
vor 1 JahrMon, September 25, 2023 at 8:15 AM UTC
Gemeldet - anzeigen

Anrufen geht

vorhandene Daten von Ninox anzeigen geht

Daten falls eingegeben in Ninox übertragen geht.

Wie kann ich die radio`s je nach Auswahl von Ninox anzeigen lassen (Ausgewählt) und bei Änderung zurück zu Ninox übertragen?

<form id=payment>
    <fieldset>
        <legend>Kunden Daten</legend>
        <ol>
            <li>
                <label for=KV>KV-Nr.</label>
                <input id='KV' name=KV type='text' placeholder= " +
    'KV-Nr.' +
    " 'keine Daten' autofocus>
            </li>
            <li>
                <label for=Name>Name</label>
                <input id=Name name=Name type=text placeholder=" +
    Name +
    " 'keine Daten'>
            </li>
            <li>
                <label for=Vorname>Vorname</label>
                <input id=Vorname name=Vorname type=text placeholder=" +
    Vorname +
    " 'keine Daten'>
            </li>
            <li>
                <label for=Vorname>Telefon</label>
                <input id=Telefon name=Vorname type=text placeholder=" +
    Telefon +
    " 'keine Daten'>
<button type=button onclick=html<p><a href='" +
    "tel:" +
    Telefon +
    "'>" +
    "wählen" +
    "</a></p></button>
            </li>
        </ol>
    </fieldset>
<fieldset>
        <legend>Auswahlfeld ausfüllen</legend>
        <ol>
            <li>
                <fieldset>
                    <legend>Auswahlfeld</legend>
                    <ol>
                        <li>
                            <input id=1 name=Auswahl type=radio placeholder=" +
    if Auswahl = 1 then 1 end +
    ">
                            <label for=visa>erster</label>
                        </li>
                        <li>
                            <input id=2 name=Auswahl type=radio>
                            <label for=amex>zweiter</label>
                        </li>
                        <li>
                            <input id=3 name=Auswahl type=radio>
                            <label for=mastercard>dritter</label>
                        </li>
                    </ol>
                </fieldset>

    <fieldset>
<button type=button onclick='myFunction()'> alle ausgefüllten felder aktualisieren / übernehmen</button>

    </fieldset>
</form>
<script>
function myFunction() {
let result = document.querySelector('#KV').value;
let idNX = '" +
    raw(Nr) +
    "';
if (result) {
 database.update(idNX, 'VE' , result)
}
let result1 = document.querySelector('#Name').value;
let idNX1 = '" +
    raw(Nr) +
    "';
if (result1) {
 database.update(idNX1, 'UE' , result1)
}
let result2 = document.querySelector('#Vorname').value;
let idNX2 = '" +
    raw(Nr) +
    "';
if (result2) {
 database.update(idNX2, 'WE' , result2)
}
let result3 = document.querySelector('#Telefon').value;
let idNX3 = '" +
    raw(Nr) +
    "';
if (result3) {
 database.update(idNX3, 'BF' , result3)
}
}
</script>
 ";
html(aa)

Michi.1
vor 1 JahrMon, September 25, 2023 at 12:57 PM UTC
Gemeldet - anzeigen

Dialog vor Übernahme der Daten in Ninox will noch nicht, hat einer Rat?

let aa := "
<style>
form#payment {
    background: #9cbc2c;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 20px;
    width: autopx;
}
form#payment fieldset {
    border: none;
    margin-bottom: 10px;
}
form#payment fieldset:last-of-type {
    margin-bottom: 0;
}
form#payment legend {
    color: #384313;
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 10px;
    text-shadow: 0 1px 1px #c0d576;
}
form#payment > fieldset > legend:before {
    content: Step  counter(fieldsets) : ;
    counter-increment: fieldsets;
}
form#payment fieldset fieldset legend {
    color: #111111;
    font-size: 13px;
    font-weight: normal;
    padding-bottom: 0;
}
form#payment ol li {
    background: #b9cf6a;
    background: rgba(255,255,255,.3);
    border-color: #e3ebc3;
    border-color: rgba(255,255,255,.6);
    border-style: solid;
    border-width: 2px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    line-height: 30px;
    list-style: none;
    padding: 5px 10px;
    margin-bottom: 2px;
}
form#payment ol ol li {
    background: none;
    border: none;
    float: left;
}
form#payment label {
    float: left;
    font-size: 13px;
    width: 110px;
}
form#payment fieldset fieldset label {
    background:none no-repeat left 50%;
    line-height: 20px;
    padding: 0 0 0 30px;
    width: auto;
}
form#payment label[for=visa] {
    background-image: url(visa.gif);
}
form#payment label[for=amex] {
    background-image: url(amex.gif);
}
form#payment label[for=mastercard] {
    background-image: url(mastercard.gif);
}
form#payment fieldset fieldset label:hover {
    cursor: pointer;
}
form#payment input:not([type=radio]),
form#payment textarea {
    background: #ffffff;
    border: none;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    font: italic 13px Georgia, Times New Roman, Times, serif;
    outline: none;
    padding: 5px;
    width: 200px;
}
form#payment input:not([type=submit]):focus,
form#payment textarea:focus {
    background: #eaeaea;
}
form#payment input[type=radio] {
    float: left;
    margin-right: 5px;
}
</style>

<form id=payment>
    <fieldset>
        <legend>Kunden Daten</legend>
        <ol>
            <li>
                <label for=KV>KV-Nr.</label>
                <input id='KV' name=KV type='text' placeholder= " +
    'KV-Nr.' +
    " 'keine Daten' autofocus>
            </li>
            <li>
                <label for=Name>Name</label>
                <input id=Name name=Name type=text placeholder=" +
    Name +
    " 'keine Daten' autofocus>
            </li>
            <li>
                <label for=Vorname>Vorname</label>
                <input id=Vorname name=Vorname type=text placeholder=" +
    Vorname +
    " 'keine Daten'autofocus>
            </li>
            <li>
                <label for=Vorname>Telefon</label>
                <input id=Telefon name=Vorname type=text placeholder=" +
    Telefon +
    " 'keine Daten'autofocus>
<button type=button onclick=html<p><a href='" +
    "tel:" +
    Telefon +
    "'>" +
    "wählen" +
    "</a></p></button>
            </li>
        </ol>
    </fieldset>
<form id=payment>
    <fieldset>
        <legend>Dropdown für Auswahlfeld</legend>
        <ol>
            <li>
                <select id=Auswahl>
        <option value='1'" +
    if Auswahl = 1 then "selected" end +
    " >erster</option>

        <option value='2'" +
    if Auswahl = 2 then "selected" end +
    ">zweiter</option>

        <option value='3'" +
    if Auswahl = 3 then "selected" end +
    " >dritter</option>

        <option value='0'" +
    if Auswahl = null then "selected" end +
    " >nichts gewählt</option>

    </select>
            </li>
        </ol>
    </fieldset>

<form id=payment>
    <fieldset>
        <legend>Daten übernehmen</legend>
        <ol>
            <li>
                <button type=button onclick='myFunction()'> alle ausgefüllten felder aktualisieren / übernehmen</button>

            </li>
</ol>
    </fieldset>
<form id=payment>
    <fieldset>
        <legend>Daten übernehmen mit Dialogfeld für mehr Sicherheit</legend>
        <ol>
            <li>
                <section>
  <h2>Alert-Fenster</h2>
  <p><button data-js='alert'>myAlert()</button></p>
</section>
<section>
  <h2>Confirm-Fenster</h2>
  <p>
    <button data-js='confirm'>myConfirm()</button>
    Ergebnis:
    <output></output>
  </p>
</section>
<section>
  <h2>Prompt-Fenster</h2>
  <p>
    <button data-js='prompt'>myPrompt()</button>
    Ergebnis:
    <output></output>
  </p>
</section>

            </li>
</ol>
    </fieldset>

</form>
<script>
function myFunction() {
let result = document.querySelector('#KV').value;
let idNX = '" +
    raw(Nr) +
    "';
if (result) {
 database.update(idNX, 'VE' , result)
}
let result1 = document.querySelector('#Name').value;
let idNX1 = '" +
    raw(Nr) +
    "';
if (result1) {
 database.update(idNX1, 'UE' , result1)
}
let result2 = document.querySelector('#Vorname').value;
let idNX2 = '" +
    raw(Nr) +
    "';
if (result2) {
 database.update(idNX2, 'WE' , result2)
}
let result3 = document.querySelector('#Telefon').value;
let idNX3 = '" +
    raw(Nr) +
    "';
if (result3) {
 database.update(idNX3, 'BF' , result3)
}
var e = document.querySelector('#Auswahl');
var value = e.value;
let idNX4 = '" +
    raw(Nr) +
    "';
 database.update(idNX4, 'ZE' , value)
}
// Demo: alle Buttons mit Funktionalität ausrüsten
Array.prototype.slice.call(
  document.querySelectorAll('section')
).forEach(function(section) {
  var button = section.querySelector('[data-js]'),
    output = section.querySelector('output');
  if (button) {
    button.addEventListener('click', function () {
      switch (button.dataset.js) {
        case 'alert':
          myAlert('Dieses Fenster können Sie bedenkenlos wieder schließen.');
        break;
        case 'confirm':
          myConfirm(
            'Sind Sie mit SELFHTML zufrieden?',
            function () {
              output.className = 'ok';
              output.value = 'ok';
            },
            function () {
              output.className = 'false';
              output.value = 'false';
            }
          );
        break;
        case 'prompt':
          myPrompt(
            'Was möchten Sie uns sagen?',
            function (result) {
              output.className = 'ok';
              output.value = '' + result + '';
            },
            function () {
              output.className = 'false';
              output.value = 'false';
            }
          );
        break;
      }
    });
  }
});
</script>
 ";
html(aa)

- Michi.1
- vor 1 JahrMon, September 25, 2023 at 1:14 PM UTC
- Gemeldet - anzeigen
Würde gerne die "Confirm-Fenster" variante haben, mit Auswahl übernehmen oder abbrechen. Um mit dem Rückgabewert das eigentliche Skript anzustoßen. Was ja jetzt in der Konstellation in beide Richtungen funktioniert. (bestehende Werte anzeigen und neue Werte schreiben)

Skript Ursprung: https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Eigene_modale_Dialogfenster
- Michi.1
- vor 1 JahrTue, September 26, 2023 at 2:46 PM UTC
- Gemeldet - anzeigen
Komm echt nicht weiter, sobald ich ein dialog (modal) versuche in "form" einzubauen, funktioniert es nicht mehr. Außerhalb geht es. Und selbst wenn der Dialog aufgeht kann ich nicht das JavaScript einbauen. Da öffnet es sich wieder nicht. Was mache ich nur falsch???
- Michi.1
- vor 1 JahrWed, September 27, 2023 at 10:34 AM UTC
- Gemeldet - anzeigen
Letzter versuch....

Jetzt läuft es so weit. Dialog öffnet sich, Übernahme Funktion in Ninox klappt.

Weis einer wie ich den Modal bei Übernahme mit ausblende bzw. das es bei Klick auf Abbrechen ausgeblendet wird?

Dann könnte man an die Kosmetik gehen.

Form html(1).ninox
- Michi.1
  
  vor 1 JahrWed, September 27, 2023 at 11:26 AM UTC
  
  Gemeldet - anzeigen
  css:
  
  .close {
  color: #aaaaaa;
  float: center;
  font-size: 28px;
  font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  }
  
  html:
  
  
  <div id= myModal class= modal>
  
  
  <div class= modal-content>
  <p>sollen die Daten übernommen werden?</p>
  <br><br>
  <span class=close><Button>abbrechen</button></span> ....geht!
  <button type=button onclick='myFunction()' >alle ausgefüllten felder aktualisieren / übernehmen</button> ......hier soll es nach der funktion schliesen... nur wie???
  
  </div>
  
  </div>
  
  script:
  
  // Get the modal
  var modal = document.getElementById('myModal');
  
  // Get the button that opens the modal
  var btn = document.getElementById('myBtn');
  
  // Get the <span> element that closes the modal
  var span = document.getElementsByClassName('close')[0];
  
  // When the user clicks the button, open the modal
  btn.onclick = function() {
  modal.style.display = 'block';
  }
  
  // When the user clicks on <span> (x), close the modal
  span.onclick = function() {
  modal.style.display = 'none';
  }
  
  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
  if (event.target == modal) {
  modal.style.display = 'none';
  }
  }

Content aside

Status Answered
1 „Gefällt mir“ Klicks
vor 1 JahrWed, September 27, 2023 at 11:26 AM UTCZuletzt aktiv
7Antworten
438Ansichten
2 Folge bereits

Willkommen in der Ninox-Community

Ninox übersichtlicher mit HTML & Java

7 Antworten

Content aside

Übersicht