Stellen Sie die Felder bearbeitet werden, wenn auf eine Schaltfläche geklickt wird

den Benutzer meiner Anwendung sollte in der Lage sein zu ändern die E-Mail und die Telefonnummer, indem Sie auf eine Schaltfläche "Ändern", das ist mein code:

    <div class="field-group">
     ...............
     ....................
        <div class="field field-omschrijving">
          <label class="label">E-mailadres</label><div>@client.email</div>
         </div>
         <div class="field field-omschrijving field-last">
           <label class="label">Telefoonnummer</label><div>@client.phoneNumber</div>
         </div>
         <input type="submit" class="form-submit" value="Change" name="op">
       </div><!-- /.field-group -->

Suche ich schon nach einer Lösung aber ohne Erfolg, irgendeine Idee, wie kann ich es tun? Danke!

Vielen Dank für die schnelle Antwort! Aber.. mein Fehler, was ich sagen wollte, ist, dass die Felder angezeigt werden soll in einen "normalen Weg" und wenn der Benutzer klickt auf die Schaltfläche ändern ändern sollte, um eine "editable Weg", jetzt das Feld E-Mail sieht wie folgt aus:!Stellen Sie die Felder bearbeitet werden, wenn auf eine Schaltfläche geklickt wird
Ich will, dass es wie folgt aussieht: Stellen Sie die Felder bearbeitet werden, wenn auf eine Schaltfläche geklickt wird

Und nach Klick in die Schaltfläche "Ändern" muss es so Aussehen wie das erste Bild. Nochmals vielen Dank!

InformationsquelleAutor Anna | 2013-11-14

  1. 1

    Mit diesem code nach Klick ändern Sie können Ihr Etikett Eingang, wie in Ihnen Bilder.
    Es wird Ihnen helfen, jetzt, hoffe 

     $( ".button_class" ).click(function() {
       $('.class_Of_label_email').replaceWith($('<input>' + $('.class_Of_label_email').innerHTML + '</input>'));
    });

    Hier ist ein Beispiel:

    <div class="container">
<div class="first">Hello</div>
<div class="second">And</div>
<div class="third">Goodbye</div>
</div>
 $( ".container" ).click(function() {
$( "div.second" ).replaceWith( "<h2>New heading</h2>" );
}

    Ergebnis ist:

    <div class="container">
<div class="inner first">Hello</div>
<h2>New heading</h2>
<div class="inner third">Goodbye</div>
</div>

    Hoffe, es wird helfen,

    Danke! Aber wenn ich auf der Taste passiert nichts 🙁
    Bearbeitet. Bitte versuchen Sie es erneut. Sind Sie sicher, dass Sie haben .class_Of_label_email in der Funktion das gleiche wie in Ihrer Bezeichnung??
    ja, ist das gleiche
    Bearbeitet. Hoffe, es wird helfen
    Danke, endlich habe ich es auf diese Weise: ns.init = function(){ $("#button-id").click(function() { $('#email').removeAttr("readonly"); }); };

    InformationsquelleAutor sergio

  2. 2

    Geben-id-Taste und die input-Felder für E-Mail und ph-Wert keine.
    Klicken Sie auf der Schaltfläche blenden Sie das lebel und zeigen Eingabefelder.

    <div class="field-group">
    <div class="field field-omschrijving">
        <label class="label">E-mailadres</label>
        <div id="divemail">@client.email</div>
        <div id="divemailinput"><input type="text" id="emailId"/></div>
    </div>

    <div class="field field-omschrijving field-last">
        <label class="label">Telefoonnummer</label>
        <div id="divno">@client.phoneNumber</div>
        <div id="divnoinput"><input type="text" id="emailId"/></div>
    </div>
    <input id="btnchange" type="submit" class="form-submit" value="Change" name="op"/>
</div><!-- /.field-group -->

    JS

    $("#btnchange").click(function(){
    $("#divemail").hide();
    $("#divemailinput").hide();
    $("#divno").hide();
    $("#divnoinput").hide();
});

    InformationsquelleAutor user2249160

  3. 1

    Für die erste, die Sie brauchen ist, legen Sie Ihre
    @client.emailand @client.phoneNumber in Eingänge und setzen Sie diese inaktiv.
    Dann, und nach dem Klick auf ändern, um die aktive mithilfe von javascript.

    <input type="text" class="emailand_clas" readonly="readonly" >@client.emailand </input>

    und Verwendung von jquery:

    $( ".button_class" ).click(function() {
    $('.emailand_clas').attr('readonly','')
});

    Einige Sache wie diese

    Ich denke, die 'attr' nicht mit 'atrr'
    danke, wirklich Fehler)
    Danke! Ich aktualisiert meine Frage ,könnten Sie ein Aussehen?

    InformationsquelleAutor sergio

  4. 0
    <label class="label">E-mailadres</label>
<input type="text" class='email' value='@client.email' />

document.getElementsByClassName('form-submit').onclick=function(){

   document.getElementsByClassName('email').disabled=false;

};

    InformationsquelleAutor Ankit Tyagi

  5. 0

    Blick auf dieses JSFiddle oder mein blog für ein tolles Beispiel.

    http://jsfiddle.net/biniama/YDcFF/

    <!DOCTYPE html>
<head>
<title>jQuery enable/disable button</title>
<script type='text/javascript' src='http://code.jquery.com/jquery.min.js'></script>
<script type='text/javascript'>
$(function(){
     $('#submitBtn').click(function(){
        $('.enableOnInput').prop('disabled', false);
        $('#submitBtn').val('Update');
     });
});
</script>
<style type='text/css'>
     /* Lets use a Google Web Font :) */
     @import url(http://fonts.googleapis.com/css?family=Finger+Paint);
     /* Basic CSS for positioning etc */
     body {
          font-family: 'Finger Paint', cursive;
          background-image: url('bg.jpg');
     }
     #frame {
          width: 700px;
          margin: auto;
          margin-top: 125px;
          border: solid 1px #CCC;
          /* SOME CSS3 DIV SHADOW */
          -webkit-box-shadow: 0px 0px 10px #CCC;
         -moz-box-shadow: 0px 0px 10px #CCC;
         box-shadow: 0px 0px 10px #CCC;
         /* CSS3 ROUNDED CORNERS */
         -moz-border-radius: 5px;
         -webkit-border-radius: 5px;
         -khtml-border-radius: 5px;
         border-radius: 5px;
         background-color: #FFF;
     }
     #searchInput {
          height: 30px;
          line-height: 30px;
          padding: 3px;
          width: 300px;
     }
     #submitBtn {
          height: 40px;
          line-height: 40px;
          width: 120px;
          text-align: center;
     }
     #frame h1 {
          text-align: center;
     }
     #frame div {
          text-align: center;
          margin-bottom: 30px;
     }
</style>
</head>
<body>
    <div id='frame'>    
        <div class='search'>
            <h1>jQuery Enable and Disable button</h1>

            <input type='text' name='searchQuery' id='searchInput' class='enableOnInput' disabled='disabled'/> 
            <input type='submit' name='submit' id='submitBtn' value='Edit'/>

        </div>
    </div>
</body>
</html>

    InformationsquelleAutor biniam

  6. 0

    Nun HTML5 verfügbar ist .
    Wir können Attribut

    contenteditable

    Weitere Hilfe und details
    http://html5doctor.com/the-contenteditable-attribute/

    InformationsquelleAutor Sanket Patel

Schreibe einen Kommentar