сделать поля для редактирования при нажатии кнопки

пользователь моего приложения должны быть в состоянии изменить адрес электронной почты и номер телефона, нажав на кнопку «Изменить», это мой код:сделать поля для редактирования при нажатии кнопки

<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

И после нажатия кнопки «Изменить» это должно выглядеть как первое изображение. Еще раз спасибо!

источник

2013-11-14 Anna

Используя этот код после клика вы можете изменить свою метку на входе, как в вас фотографий. Это поможет вам сейчас, надеюсь

$(".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-14 13:11:29 sergio

Спасибо! Но когда я нажимаю кнопку, ничего не происходит :( – Anna

Отредактировано. Повторите попытку. Уверены ли вы .class_Of_label_email в функции так же, как и на вашем ярлыке? – sergio

Да, это то же самое – Anna

Для первого вам нужно поставить свой @ client.emailand @ 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-14 11:00:34 sergio

Я думаю, что его 'атр' не 'atrr' –

благодарственных лет, действительно ошибка) – sergio

Спасибо! Я обновил свой вопрос, не могли бы вы взглянуть? – Anna

Дайте идентификатор кнопки и поля ввода для электронной почты и тел нет. Нажав кнопку, скройте лебед и покажите поля ввода.

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

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

источник

2013-11-14 11:05:23 user2249160

<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-14 11:06:36

Посмотрите на эту 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>

источник

2014-07-23 07:57:14

Теперь HTML5 доступен так. Мы можем использовать атрибут

contenteditable

Больше помощи и детали http://html5doctor.com/the-contenteditable-attribute/

источник

2017-02-16 16:22:16

сделать поля для редактирования при нажатии кнопки

ответ

Смежные вопросы