4

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

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

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

非常感谢您的快速回复！但是..我的错误，我想说的是字段应该以“正常方式”出现，当用户单击按钮更改时，它应该更改为“可编辑方式”，现在字段电子邮件如下所示： ！在此处输入图像描述 我希望它看起来像这样：图片。 2

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

4

6 回答 6

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>

希望，它会有所帮助

于 2013-11-14T13:11:29.780 回答
2

为按钮和输入字段提供 ID 以用于电子邮件和电话号码。单击按钮时，隐藏标签并显示输入字段。

<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();
});
于 2013-11-14T11:05:23.993 回答
1

首先，您需要将 @client.email 和 @client.phoneNumber 放入输入中并将它们设置为非活动状态。然后，在单击后使用 javascript 将它们更改为活动状态。

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

并使用jQuery：

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

像这样的东西

于 2013-11-14T11:00:34.387 回答
0

看看这个 JSFiddle 或我的博客就是一个很好的例子。

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>
于 2014-07-23T07:57:14.347 回答
0

现在 HTML5 可用，所以 . 我们可以使用属性

内容可编辑

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

于 2017-02-16T16:22:16.800 回答
-1 
<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;

};
于 2013-11-14T11:06:36.497 回答