Ankündigung

Einklappen
Keine Ankündigung bisher.

formfield ohne Neuladen nach dem Submit

Einklappen

Neue Werbung 2019

Einklappen
X
Einklappen
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige Weiter
  • #1

    formfield ohne Neuladen nach dem Submit

    ich glaube dass dieses kleine Problem mit Javascript zu tun hat und auch damit evtl. behoben werden kann.

    folgendes:

    Auf meiner Webseite habe ich ein Input-Feld in dem die Mail-Adresse eingetippt werden kann (Newsletter Abo etc.) und danach mit Submit bestätigt wird. Darauf hin wird die Eingabe an eine PHP Datei geschickt dort verarbeitet. Als Bestätigung (Ausgabe) gibt es dann am Ende oder während dessen entweder eine Fehlermeldung oder ein OK:

    Das Problem. Nachdem der Submit Button gedrückt wurde bzw. nach dem abschicken der Formulardaten wird die Seite komplett neu geladen (logisch). Nur leider muss man danach wieder runterscrollen um die die Bestätigung / Fehlermeldung zu sehen oder eine neue Eingabe zu machen. Genau das soll verhindert werden. Sie Seite soll nach der Eingabe an dieser Position einfach stehen bleiben und trotzdem die gemachten Eingaben ganz gewöhnlich verarbeitet werden. Wie wird das realisiert? Da ich mich mit JS nicht auskenne wäre eine Lösung echt prima.

    HTML-Code:
     <form action="blah.php" method="post" onsubmit="myFunction()">
        <p><input class="{focus}" name="email" value="E-Mail eingeben" onFocus="changeValue('E-Mail eingeben', this);" onblur="changeValue('E-Mail eingeben', this);" type="text" />
        <input type="submit" value="Bestätigen"/></p>
    </form>
    Code:
    <script>
function myFunction() {
      alert("Eingabe wurde bestätigt");
      return false;
}
</script>
    Stichworte: -
  • #2

    Zeige bitte den kompletten Code der Seite bei der das Problem auftritt und nicht nur einen nicht nachvollziehbaren Codeausschnitt.
    Ausserdem gibt es für E-Mail ein spezielles Input-Element und wenn du zudem noch eine Eingabe erzwingen willst, das Attribut required.

    Bitte beschäftige die erst mit HTML5 bevor du mit Javascript beginnst.

    https://www.w3.org/TR/html-markup/input.html

    http://www.html5rocks.com/de/tutoria...ms/html5forms/

    Kommentar

    • #3
      Zitat von protestix Beitrag anzeigen
      Zeige bitte den kompletten Code der Seite bei der das Problem auftritt und nicht nur einen nicht nachvollziehbaren Codeausschnitt.
      Ausserdem gibt es für E-Mail ein spezielles Input-Element und wenn du zudem noch eine Eingabe erzwingen willst, das Attribut required.

      Bitte beschäftige die erst mit HTML5 bevor du mit Javascript beginnst.

      https://www.w3.org/TR/html-markup/input.html

      http://www.html5rocks.com/de/tutoria...ms/html5forms/
      Richtig. Den Fehler mit dem Input Element für E-Mail habe ich im nachhinein auch bemerkt. Kein Thema. Das "required" Attribut als Validierung für die Erzwingung einer Eingabe ist ab HTML 5 schön und hilfreich. Ich habe ohnehin zudem über PHP genug Fehlerausgaben eingebaut, die entsprechendes auffangen und zurückliefern. Damit ist auch gewährleistet, dass auch in ältere Browsern eine entsprechende Meldung erfolgt. Kein Thema. Ich beschäftige mich z.Zt. eher mit PHP. Ich beabsichtige nicht mit Javascript zu beginnen. Da fehlt mir einfach die Zeit für. Es geht mir um die Lösung dieses Problems, wie beschrieben und ich glaube dass das per JS gelöst werden kann.

      Ich war im glauben, der hier dargestellt Codeausschnitt würde genügen, weil es sich darauf bezieht. O.K. hier der modifizierte HTML Quellcode

      HTML-Code:
      <!DOCTYPE HTML>
<!--[if lt IE 7 ]> <html lang="en" class="ie ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="de"> <!--<![endif]-->
<head>
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon.png">
<meta charset="utf-8">
<title>blah</title>
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<!--<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular,bold"> -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script type="text/javascript">
function changeValue(def_val, sender) {
    if (sender.value == def_val) {
        sender.value = "";
    } else if (sender.value == "") {
        sender.value = def_val;
    }
}
</script>
<!--http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"-->

</head>

<body id="home">
<section class="main">
<div id="Content" class="wrapper topSection">
    <div id="Header">
    <div class="wrapper">
        <div class="logo"><img src="images/img.png" alt="blah"><h1>blah</h1></div>
        </div>
    </div>
    <h2>blah</h2>    
<div class="countdown styled"></div>
</div>
</section>
<section class="subscribe spacing">
<div class="container">
<div id="subscribe">
    <h3>Subscribe</h3>
    <div id="error"><h5>{error}</h5></div>
    <div id="success"><h5>{success}</h5></div>
    <form action="blah.php" method="post" onsubmit="myFunction()">
        <p><input class="{focus}" name="email" value="E-Mail eingeben" onFocus="changeValue('E-Mail eingeben', this);" onblur="changeValue('E-Mail eingeben', this);" type="email" required />
        <input type="submit" value="Bestätigen"/></p>
    </form>
    <div id="socialIcons">
        <ul>
            <li><a href="https://twitter.com/?lang=de" target="_blank" title="Twitter" class="twitterIcon"></a></li>
            <li><a href="https://de-de.facebook.com/" target="_blank" title="facebook" class="facebookIcon"></a></li>
            <li><a href="https://de.linkedin.com/" target="_blank" title="linkedIn" class="linkedInIcon"></a></li>
            <li><a href="https://de.pinterest.com/" target="_blank" title="Pintrest" class="pintrestIcon"></a></li>
        </ul>
    </div>
    </div>
</div>
</section>

<section class="features spacing">
  <div class="container">
    <h2 class="text-center">Neues</h2>
    <div class="row">
      <div class="col-md-6">
        <div class="featuresPro">
          <div class="col-md-3 col-sm-3 col-xs-3 text-center"><img src="images/progallery.png" data-at2x="img/icon-1@2x.png" alt="Features"></div>
          <div class="col-md-9 col-sm-9 col-xs-9">
            <!--features 1-->
            <h4>dfgddfg</h4>
            <p>dfghfhgdfhdfg</p>
            <!--features 1 end-->
          </div>
        </div>
        <div class="featuresPro">
          <div class="col-md-3 col-sm-3 col-xs-3 text-center"><img src="images/contactform.png" data-at2x="img/icon-2@2x.png" alt="Features"></div>
          <div class="col-md-9 col-sm-9 col-xs-9">
            <!--features 2-->
            <h4>fghdg</h4>
            <p>gghfghfg </p>
            <!--features 2 end-->
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="featuresPro">
          <div class="col-md-3 col-sm-3 col-xs-3 text-center"><img src="images/gmaps.png" data-at2x="img/icon-3@2x.png" alt="Features"></div>
          <div class="col-md-9 col-sm-9 col-xs-9">
            <!--features 3-->
            <h4>fgdfgf</h4>
            <p>gfhftghf</p>
            <!--features 3 end-->
          </div>
        </div>
        <div class="featuresPro">
          <div class="col-md-3 col-sm-3 col-xs-3 text-center"><img src="images/bookings.png" data-at2x="img/icon-2@2x.png" alt="Features"></div>
          <div class="col-md-9 col-sm-9 col-xs-9">
            <!--features 4-->
            <h4>dfgdfgg</h4>
            <p>fghfghfg</p>
            <!--features 4 end-->
          </div>
        </div>
        <div class="featuresPro">
          <div class="col-md-3 col-sm-3 col-xs-3 text-center"><img src="images/socialbar.png" data-at2x="img/icon-4@2x.png" alt="Features"></div>
          <div class="col-md-9 col-sm-9 col-xs-9">
            <!--features 5-->
            <h4>fhfghfgh</h4>
            <p>fgcfhgfdhgfh</p>
            <!--features 5 end-->
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<span class="tempBy">Copyright &copy; 2016 <a href="blah" alt="blah">blah</a></span>
<!--<a class="back-to-top" onclick="return false;" href="#" style="display: inline;"></a>-->
<!--Scripts-->
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.countdown.js"></script>
<script type="text/javascript" src="js/global.js"></script>
<script>
function myFunction() {
      alert("Eingabe wurde bestätigt");
      return false;
}
</script>
</body>
</html>

      Kommentar

      • #4
        So was löst man bspw. mit Ajax. Da Du nicht beabsichtigst, tiefer in JS einzusteigen, empfehle ich Dir eine extra HTML nur mit der 'Form e-MailAdresse' anzulegen und diese per Object oder iframe einzubinden. Damit löst Du das zwar nicht schön aber schnell.

        Kommentar

        • #5
          O.K. aber deswegen bin ich in dieser Sektion gelandet, damit jemand mal so freundlich ist und mal so ein Ajax (JS), der im Allgemeinen aller Wahrscheinlichkeit, für solche Problematiken, anwendbar ist, kurz tippt. Dafür möchte ich kein Studium ablegen müssen. Ich bin kein Freund von iFrames. Ich include lieber mit PHP o.ä. Frames werde immer von Browser unterschiedlich interpretiert.

          Kommentar

          • #6
            Zitat von me.nerd Beitrag anzeigen
            O.K. aber deswegen bin ich in dieser Sektion gelandet, damit jemand mal so freundlich ist und mal so ein Ajax (JS), der im Allgemeinen aller Wahrscheinlichkeit, für solche Problematiken, anwendbar ist, kurz tippt.
            Dafür gibts eigentlich die Job und Scriptbörse.

            Kommentar

            • #7
              komisch dass ich keinen Treffer zu diesen Sachverhalt im Web finde. Entweder die Leute kopieren von einander, es interessiert keinen oder es ist selbstverständlich.

              Kommentar

              • #8
                Das mit den Frames ist Quatsch solange Du die Quelle kontrollierst. Die Suche nach Ajax Javascript ergibt ca. 20 Mio. Treffer, sicher ist da etwas für Dich dabei.

                Kommentar

                • #9
                  Zuletzt geändert von me.nerd; 28.07.2016, 14:46.
                  Endlich, was nicht passt wird passend gemacht. Ohne viel Moral und Therorie, zumal ich Prakmatiker bin - möchte ich eine mögliche Variante via Jquery als Lösung zum Problem hier noch reinwerfe, damit anderen evtl. auch damit geholfen ist, sofern die es benötigen.

                  HTML-Code:
                  <form id="form" action="">
        <p><input class="{focus}" name="email" value="E-Mail eingeben" onFocus="changeValue('E-Mail eingeben', this);" onblur="changeValue('E-Mail eingeben', this);" type="email" required />
        <input type="submit" value="Bestätigen" class="button"/></p>
    </form>
                  Code:
                  <!--Jquery Formulardaten senden ohne Reload der Seite -->
    <script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
    <script type="text/javascript">
     $(document).ready(function(){
        $("#form").submit(function(e){
          e.preventDefault();
          $.post("form.php",$("#form").serialize(),function(msg){
          $('#form')[0].reset();
            alert(msg);
          });
        });
      });
    </script>
                  Funktioniert einwandfrei. jQuery Ajax Aufruf beim Absenden von einem Formular. Das Skript lässt sich beliebig erweitern und gestalten. Learning by doing! Prima, dann noch eine gute Zeit

                  Kommentar

                  Vorherige Weiter
                  Lädt...
                  X