Question

我的应用程序的用户应该可以通过单击“更改”按钮来更改电子邮件和电话号码，这是我的代码：

    <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 -->

我一直在寻找解决方案，但没有成功，任何关于我该怎么做的想法？谢谢！

非常感谢您的快速反应！但是......我的错误，我想说的是字段应该以“正常方式”显示，当用户点击按钮更改时，它应该更改为“可编辑方式”，现在字段电子邮件如下所示：！ enter image description here 我希望它看起来像这样： Pic. 2

点击“更改”按钮后，它必须看起来像第一张图片。再次感谢！

Answer 1

将id添加到按钮并输入电子邮件和ph号码的字段。单击按钮，隐藏lebel并显示输入字段。

<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();
});

Answer 2

首先，你需要的是你的 @ client.emailand @ client.phoneNumber into inputs并将它们设置为非活动状态。然后，在点击之后使用javascript将它们更改为活动状态。

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

并使用jquery：

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

有点像这样

Answer 3

点击后使用此代码，您可以将标签更改为输入，如图片中所示。它现在会帮助你，希望

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

以下是一个例子：

<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>" );
}

结果是：

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

希望，这会有所帮助

Answer 4

<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;

};

Answer 5

看看这个JSFiddle或my blog是一个很好的例子。

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>

Answer 6

现在HTML5可用。我们可以使用属性

CONTENTEDITABLE

更多帮助和细节 http://html5doctor.com/the-contenteditable-attribute/

单击按钮时可以使字段可编辑

6 个答案: