html pattern onclick js

html pattern onclick js - Druckversion

+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Entwicklung (https://javascript-forum.de/forumdisplay.php?fid=4)
+--- Forum: Javascript (https://javascript-forum.de/forumdisplay.php?fid=6)
+--- Thema: html pattern onclick js (/showthread.php?tid=778)

html pattern onclick js - black79 - 29.05.2022

Code:
<input type="text" class="form-control" placeholder="Adresse" id="address" style="height: 33px; width: 300px" maxlength="7"  required="required" pattern=".{7}">

dieses input ist so konfiguriert, dass man 7 zeichen eingeben muss! nicht mehr und nicht weniger!
wird aber bei js nicht mit übernommen?

was muss ich im js anpassen?

Code:
function test() {    

 var address = document.getElementById('address').value;

    dataString = 'send_pocsag='+address; 

    $.ajax({

        type: 'POST',

        url: 'monitorOESoft.php',

        data: dataString,    

         success: function(response){

             if(response==3822){

            $('#myModal4').modal('hide');    

            $('#address').val('');         

    }

   }    

  });

 }

RE: html pattern onclick js - admin - 29.05.2022

Was meinst du mit , das es niocht bei js übernommen wird ? Die aussage verstehe ich nicht ganz

RE: html pattern onclick js - black79 - 31.05.2022

(29.05.2022, 19:37)admin schrieb: Was meinst du mit , das es niocht bei js übernommen wird ? Die aussage verstehe ich nicht ganz

hier mein alter HTML code um das modal zu öffnen (<form method="post">)

Code:
<div class="modal" id="myModal4">

  <div class="modal-dialog modal-lg">

   <div class="modal-content">

    <div class="modal-header">

     <h4>monitorOESoft - Alarmierungstool</h4>

       </div>

        <div class="modal-body">

         <h5 style="margin: 10px"; class="m-0">Radio Identification Code</h5>

          <form method="post">

           <input type="text" class="form-control" placeholder="Rufadresse" name="address" style="height: 33px; width: 150px; border-color: black; margin-left: 15px" maxlength="7"  required="required" pattern=".{7}">

            <br>

           <input type="text" class="form-control" placeholder="Subadresse" name="funktion" style="height: 33px; width: 150px; border-color: black; margin-left: 15px" maxlength="1"  required="required" pattern=".{1}">

          <p style="margin: 15px"; class="m-0"><font size="1">(a)= Einsatzalarm (b)= Bagatellalarm (c)= Infoalarm (d)= Rückalarm</font></p>

          <textarea type='text' name="memo" cols="60" rows="5" placeholder="Freitext" class="form-control" style="height: 125px; width: 600px; border-color: black; margin-left: 15px"></textarea>   

        </div>

        <div class="modal-footer">  

          <input type="Submit" name="send_pocsag" class="btn btn-default" value="Senden">  

          <input type="Submit"  class="btn btn-default" value="Abbruch" data-dismiss="modal">

         </form> 

        </div> 

      </div>

    </div>

  </div>

hier mein neuer code um das modal zu öffnen (mit javascript)
die attribute von html (maxlength="7" required="required" pattern=".{7}") werden nicht berücksichtig??? warum?

Code:
onclick="test()"

Code:
function test() {    

 var address = document.getElementById('address').value+document.getElementById('subaddress').value;

    dataString = 'send_pocsag='+address; 

    $.ajax({

        type: 'POST',

        url: 'monitorOESoft.php',

        data: dataString,    

         success: function(response){

             if(response==3822){

            $('#myModal4').modal('hide');    

            $('#address').val('');

            $('#subaddress').val('');        

    }

   }    

  });

 }

Code:
<!-- Modal Alarm senden -->

 <div class="modal" id="myModal4" data-backdrop="static">

  <div class="modal-dialog modal-lg">

   <div class="modal-content">

    <!-- Modal Header --> 

    <div class="modal-header">

     <h4>monitorOESoft - Mobile Alarmierung</h4>

       </div>

        <div class="modal-body">

         <h5 style="margin: 15px; color: blue"; class="m-0">Radio Identification Code</h5>

           <input type="text" class="form-control" placeholder="Adresse des Funkrufempfängers" id="address" style="height: 33px; width: 300px; border-color: black; margin-left: 15px" maxlength="7"  required="required" pattern=".{7}">

           <p style="margin-left: 15px; color: blue">Test RIC 1234566</p>

            <br>

           <input type="text" class="form-control" placeholder="Subadresse" id="subaddress" style="height: 33px; width: 300px; border-color: black; margin-left: 15px" maxlength="1"  required="required" pattern=".{1}">

          <p style="margin-left: 15px; color: blue">(a)= Einsatzalarm (b)= Bagatellalarm (c)= Infoalarm (d)= Rückalarm</p>

          <textarea type='text' id="memo" cols="60" rows="5" placeholder="Freitext" class="form-control" required="required" style="height: 125px; width: 600px; border-color: black; margin-left: 15px"></textarea>   

         </div>

        <!-- Modal footer -->

         <div class="modal-footer">  

          <input type="Submit" onclick="test()" class="btn btn-default" value="Senden">  

          <input type="Submit" class="btn btn-default" value="Abbruch" data-dismiss="modal">

        </div> 

      </div>

    </div>

  </div>

RE: html pattern onclick js - admin - 31.05.2022

Kannst du das mal online stellen oder so? Den code den ich hier sehen kann erzeugt so kein Fehler bei mir.
Erstelle bei Codepen mal ein Beispiel wo man sehen kann, das der Fehler auftritt. Kann es sein das du da noch andere Scripte wie Bootstrap oder so benutzt?

So funktioniert das maxlength bei mir . Deswegen wäre ein Link oder so gut wo man das sehen kann das es nicht geht

RE: html pattern onclick js - black79 - 01.06.2022

(31.05.2022, 18:04)admin schrieb: Kannst du das mal online stellen oder so? Den code den ich hier sehen kann erzeugt so kein Fehler bei mir.
Erstelle bei Codepen mal ein Beispiel wo man sehen kann, das der Fehler auftritt. Kann es sein das du da noch andere Scripte wie Bootstrap oder so benutzt?

So funktioniert das maxlength bei mir . Deswegen wäre ein Link oder so gut wo man das sehen kann das es nicht geht

https://oesoft.de

"Pager"

Code:
    <!-- Modal Alarm senden -->

     <div class="modal" id="myModal4" data-backdrop="static">

      <div class="modal-dialog modal-lg">

       <div class="modal-content">

        <!-- Modal Header --> 

        <div class="modal-header">

         <h4>monitorOESoft - Mobile Alarmierung</h4>

        </div>

         <div class="modal-body">

          <h5 style="margin: 15px; class="m-0">Radio Identification Code</h5>

           <input type="text" class="form-control" placeholder="Adresse des Funkrufempfängers" id="address" style="height: 33px; width: 300px; border-color: black; margin-left: 15px" maxlength="7"  required="required" pattern=".{7}">

           <p style="margin-left: 15px; color: blue">Test RIC 1234566</p>

           <br>

           <input type="text" class="form-control" placeholder="Subadresse" id="subaddress" style="height: 33px; width: 300px; border-color: black; margin-left: 15px" maxlength="1"  required="required" pattern=".{1}">

           <p style="margin-left: 15px; color: blue">(a)= Einsatzalarm (b)= Bagatellalarm (c)= Infoalarm (d)= Rückalarm</p>

           <textarea type='text' id="memo" cols="60" rows="5" placeholder="Freitext" class="form-control" required="required" style="height: 125px; width: 600px; border-color: black; margin-left: 15px"></textarea>   

         </div>

         <!-- Modal footer -->

         <div class="modal-footer">  

          <input type="Submit" onclick="senden()" class="btn btn-default" value="Senden"> 

          <input type="Submit" class="btn btn-default" value="Abbruch" data-dismiss="modal">

         </div> 

        </div>

      </div>

     </div>

RE: html pattern onclick js - admin - 01.06.2022

(31.05.2022, 09:06)black79 schrieb: die attribute von html (maxlength="7" required="required" pattern=".{7}") werden nicht berücksichtig??? warum?

Ich kann in den Modal in den ersten input feld nut 7 Zeichen rein machen und im 2 ten input feld nur ein Zeichen Das steht in maxlength ind pattern so drinn. Ist doch alles richtig.
Was willst di da den ändern, oder was ist da jetzt falsch?

RE: html pattern onclick js - black79 - 02.06.2022

(01.06.2022, 22:37)admin schrieb:
(31.05.2022, 09:06)black79 schrieb: die attribute von html (maxlength="7" required="required" pattern=".{7}") werden nicht berücksichtig??? warum?

Ich kann in den Modal in den ersten input feld nut 7 Zeichen rein machen und im 2 ten input feld nur ein Zeichen Das steht in maxlength ind pattern so drinn. Ist doch alles richtig.
Was willst di da den ändern, oder was ist da jetzt falsch?

wenn die input felder leer sind, wird trozdem ein post ausgeführt (button senden) das sollte doch nicht so sein!

RE: html pattern onclick js - admin - 02.06.2022

Sag das doch gleich , dann verstehe ich das auch was du meinst.
Benutze <form> Elemente dann geht das auch

Code:
<div class="modal" id="myModal4" data-backdrop="static">

      <div class="modal-dialog modal-lg">

       <div class="modal-content">

        <!-- Modal Header --> 

        <div class="modal-header">

         <h5>monitorOESoft - Freitext Alarmierung</h5>

        </div>

         <div class="modal-body">

         <form>   

          <h6 style="margin: 15px" class="m-0">Radio Identification Code Eingabe</h6>

           <input type="text" class="form-control" placeholder="Adresse des Empfängers" id="address" style="height: 33px; width: 300px; border-color: black; margin-left: 15px" maxlength="7"  required="required" pattern=".{7}">

           <p style="margin-left: 15px; color: blue">Test Adresse: 1234566</p>

           <input type="text" class="form-control" placeholder="Subadresse Unteradresse" id="subaddress" style="height: 33px; width: 300px; border-color: black; margin-left: 15px" maxlength="1"  required="required" pattern=".{1}">

           <p style="margin-left: 15px; color: blue">Subadresse:<br>(a)= Einsatzalarm (b)= Bagatellalarm (c)= Infoalarm (d)= Rückalarm</p>

           <textarea type='text' id="memo" cols="60" rows="5" placeholder="Freitext" class="form-control" required="required" style="height: 125px; width: 600px; border-color: black; margin-left: 15px"></textarea>  

         </div>

         <!-- Modal footer -->

         <div class="modal-footer">  

          <input type="Submit" onclick="senden()" class="btn btn-default" value="Senden"> 

          <input type="Submit" class="btn btn-default" value="Abbruch" data-dismiss="modal">

         </div> 

                   </form>

        </div>

      </div>

     </div>

Außerdem hast du eine Menge HTML Fehler , und die können auch Probleme machen
https://validator.w3.org/nu/?showsource=yes&doc=https%3A%2F%2Foesoft.de%2Foesoft%2FmonitorOESoft_unerledigt.php

RE: html pattern onclick js - black79 - 04.06.2022

(02.06.2022, 23:04)admin schrieb: Sag das doch gleich , dann verstehe ich das auch was du meinst.
Benutze <form> Elemente dann geht das auch

Code:
<div class="modal" id="myModal4" data-backdrop="static"> <div class="modal-dialog modal-lg"> <div class="modal-content">  <div class="modal-header"> <h5>monitorOESoft - Freitext Alarmierung</h5> </div> <div class="modal-body"> <form> <h6 style="margin: 15px" class="m-0">Radio Identification Code Eingabe</h6> <input type="text" class="form-control" placeholder="Adresse des Empfängers" id="address" style="height: 33px; width: 300px; border-color: black; margin-left: 15px" maxlength="7" required="required" pattern=".{7}"> <p style="margin-left: 15px; color: blue">Test Adresse: 1234566</p> <input type="text" class="form-control" placeholder="Subadresse Unteradresse" id="subaddress" style="height: 33px; width: 300px; border-color: black; margin-left: 15px" maxlength="1" required="required" pattern=".{1}"> <p style="margin-left: 15px; color: blue">Subadresse:<br>(a)= Einsatzalarm (b)= Bagatellalarm (c)= Infoalarm (d)= Rückalarm</p> <textarea type='text' id="memo" cols="60" rows="5" placeholder="Freitext" class="form-control" required="required" style="height: 125px; width: 600px; border-color: black; margin-left: 15px"></textarea> </div>  <div class="modal-footer"> <input type="Submit" onclick="senden()" class="btn btn-default" value="Senden"> <input type="Submit" class="btn btn-default" value="Abbruch" data-dismiss="modal"> </div> </form> </div> </div> </div>

Außerdem hast du eine Menge HTML Fehler , und die können auch Probleme machen
https://validator.w3.org/nu/?showsource=yes&doc=https%3A%2F%2Foesoft.de%2Foesoft%2FmonitorOESoft_unerledigt.php

erstmal vielen Dank für die Info

jetzt kommt die meldung "bitte füllen sie das feld aus" super :-) aber das modalfenster schließt sich?

habe eine Lösung gefunden :-)

habe eine if abfrage eingebaut :-)

Code:
if (strlen($address) < 8) {

Code:
if(isset($_POST['send_pocsag'])){

  $address = $_POST['send_pocsag'];

  if (strlen($address) < 8) {

  } else {

  $timestamp = time();

  $query = "INSERT INTO TelegramStorage(Timestamp,Type,Source,Flags,Address,Message)VALUES('$timestamp','4','101623241','0','$address','TEST')";

  $link->query($query);  

   echo '3822';

  exit;   

 }

 }