1

Ninox übersichtlicher mit HTML & Java

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.

7 Antworten

null
    • Michi.1
    • vor 4 Monaten
    • 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 4 Monaten
    • 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 4 Monaten
    • 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 4 Monaten
    • 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 4 Monaten
    • 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 4 Monaten
    • 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.

      • Michi.1
      • vor 4 Monaten
      • 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:

        <!-- The Modal -->
      <div id= myModal class= modal>

        <!-- Modal content -->
        <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 4 MonatenZuletzt aktiv
  • 7Antworten
  • 198Ansichten
  • 2 Folge bereits