編集時にデータを確認してボタンのテキストを変更する方法

ヘルプが必要です。 Javascript/Jqueryを使用して、条件に応じてボタンのテキストを変更する必要があります。私は以下の私のコードを説明します。編集時にデータを確認してボタンのテキストを変更する方法

ここで、ユーザーがドロップダウンリストを選択すると、3つの入力フィールドに値が入力されます。 JavaScriptコードを以下に示します。私はそれが、その後Addボタンのテキストの意志だったので、すべてがある場合、ユーザーはCheckボタンをクリックしますとき、それは選択のドロップダウン後に元の値をチェックすることが必要です。ここ

function setValue(){ 
 
    var arrField=[]; 
 
    if(document.getElementById('uinfo').value==1){ 
 
    document.getElementById('uname').value="Ram"; 
 
    document.getElementById('uemail').value="[email protected]"; 
 
    document.getElementById('ucity').value="cuttuck"; 
 
    arrField.push({'uname':document.getElementById('uname').value,'uemail':document.getElementById('uemail').value,'ucity':document.getElementById('ucity').value}); 
 
    }else{ 
 
    document.getElementById('uname').value=""; 
 
    document.getElementById('uemail').value=""; 
 
    document.getElementById('ucity').value=""; 
 
    var arrField=[]; 
 
    } 
 
    }


 

 
<select onchange="setValue();" id="uinfo"> 
 
     <option value="">Select</option> 
 
     <option value="1">User Info</option> 
 
     </select> 
 
     <div class="form-group has-feedback"> 
 
     <label class="control-label">Username</label> 
 
     <input type="text" class="form-control" placeholder="Username" id="uname" /> 
 
     <i class="glyphicon glyphicon-user form-control-feedback"></i> 
 
     </div> 
 
     <div class="form-group has-feedback"> 
 
     <label class="control-label">Email</label> 
 
     <input type="email" class="form-control" placeholder="Username" id="uemail"/> 
 
     <i class="glyphicon glyphicon-user form-control-feedback"></i> 
 
     </div> 
 
     <div class="form-group has-feedback"> 
 
     <label class="control-label">City</label> 
 
     <input type="email" class="form-control" placeholder="Username" id="ucity" /> 
 
     <i class="glyphicon glyphicon-user form-control-feedback"></i> 
 
     </div> 
 
     <button type="button" class="btn btn-success" onclick="checkAllValue();"> 
 
     <i class="icon-user icon-white"></i> Add 
 
     </button> 
 
<button type="button" class="btn btn-success" onclick="checkAll();"> 
 
     <i class="icon-user icon-white"></i> Check 
 
     </button>

Addのままです。ボタンの選択後にフィールド値が変更された場合、テキストはUpdateに変更されます。私を助けてください。

出典

2016-09-01 subhra

あなたが意味するユーザー変化値ならば、ボタンを更新するために変更されますか？ –

はい、私の更新された投稿をもう一度チェックしてください。ユーザーはチェックボタンをクリックし、ドロップダウンを選択した後にすべてのフィールド値が同じであれば、同じままです。ユーザーがフィールド値を変更してチェックボタンをクリックすると、「追加」ボタンが更新に変わる。 – subhra

は 'checkAll'関数を表示します。 – Jamiec

//Object, key based on select options 
 
var popData= { 
 
    'user-info': 
 
    {uname: 'User1', uemail: '[email protected]', ucity: 'user city'} 
 
    , 
 
    'emp-info': 
 
    {uname: 'Emp1', uemail: '[email protected]', ucity: 'emp city'} 
 
}; 
 
//Select change that will update values 
 
$('#uinfo').change(function(){ 
 
    $.each(popData[$(this).val()], function(i, val) { 
 
    $('#'+i).val(val); 
 
    }); 
 
}); 
 
//When input change check based on the conditions 
 
$('button.check').click(function(){ 
 
    //Check if any changes in the fields 
 
    if(
 
    popData[$('#uinfo').val()].uname != $('#uname').val() || 
 
    popData[$('#uinfo').val()].uemail != $('#uemail').val() ||  popData[$('#uinfo').val()].ucity != $('#ucity').val() 
 
    ) 
 
    { 
 
    $('button.add').text('Update'); 
 
    } 
 
    //Check if no changes in the fields 
 
    else if(popData[$('#uinfo').val()].uname == $('#uname').val() && 
 
    popData[$('#uinfo').val()].uemail == $('#uemail').val() &&  popData[$('#uinfo').val()].ucity == $('#ucity').val()) 
 
    { 
 
     $('button.add').text('Add'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="uinfo"> 
 
    <option value="">Select</option> 
 
    <option value="user-info">User Info</option> 
 
    <option value="emp-info">Emp Info</option> 
 
    </select> 
 
    <div class="form-group has-feedback"> 
 
    <label class="control-label">Username</label> 
 
    <input type="text" class="form-control" placeholder="Username" id="uname" /> 
 
    <i class="glyphicon glyphicon-user form-control-feedback"></i> 
 
    </div> 
 
    <div class="form-group has-feedback"> 
 
    <label class="control-label">Email</label> 
 
    <input type="email" class="form-control" placeholder="Username" id="uemail"/> 
 
    <i class="glyphicon glyphicon-user form-control-feedback"></i> 
 
    </div> 
 
    <div class="form-group has-feedback"> 
 
    <label class="control-label">City</label> 
 
    <input type="email" class="form-control" placeholder="Username" id="ucity" /> 
 
    <i class="glyphicon glyphicon-user form-control-feedback"></i> 
 
    </div> 
 
    <button type="button" class="btn check"> 
 
    <i class="icon-user icon-white"></i> Check 
 
    </button> 
 
    <button type="button" class="btn btn-success add"> 
 
    <i class="icon-user icon-white"></i> Add 
 
    </button>

出典

2016-09-01 11:29:38

@ Loading ..：これは私の要件ではありません。私の記事をもう一度読んでください。 – subhra

@subhra：どこからこれらの値を確認して確認しますか？ –

@subhra私は私の答えを編集しました。今チェックする –

この

function setValue(){ 
 
     var arrField=[]; 
 
     if(document.getElementById('uinfo').value==1){ 
 
     document.getElementById('uname').value="Ram"; 
 
     document.getElementById('uemail').value="[email protected]"; 
 
     document.getElementById('ucity').value="cuttuck"; 
 
     arrField.push({'uname':document.getElementById('uname').value,'uemail':document.getElementById('uemail').value,'ucity':document.getElementById('ucity').value}); 
 
     }else{ 
 
     document.getElementById('uname').value=""; 
 
     document.getElementById('uemail').value=""; 
 
     document.getElementById('ucity').value=""; 
 
     var arrField=[]; 
 
     } 
 
     } 
 
function checkAll(){ 
 
    var uname = $('#uname').val(); 
 
    var email = $('#uemail').val(); 
 
    var city = $('#ucity').val(); 
 
var count = 0; 
 
if(uname!='Ram') 
 
    { 
 
    count++; 
 
    } 
 
else if(email!='[email protected]') 
 
    { 
 
    count++; 
 
    } 
 
    else if(city!='cuttuck') 
 
     { 
 
    count++; 
 
    } 
 
    if(count>0) 
 
    { 
 
     $('#add').text('UPDATE'); 
 
     } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<select onchange="setValue();" id="uinfo"> 
 
      <option value="">Select</option> 
 
      <option value="1">User Info</option> 
 
      </select> 
 
      <div class="form-group has-feedback"> 
 
      <label class="control-label">Username</label> 
 
      <input type="text" class="form-control" placeholder="Username" id="uname" /> 
 
      <i class="glyphicon glyphicon-user form-control-feedback"></i> 
 
      </div> 
 
      <div class="form-group has-feedback"> 
 
      <label class="control-label">Email</label> 
 
      <input type="email" class="form-control" placeholder="Username" id="uemail"/> 
 
      <i class="glyphicon glyphicon-user form-control-feedback"></i> 
 
      </div> 
 
      <div class="form-group has-feedback"> 
 
      <label class="control-label">City</label> 
 
      <input type="email" class="form-control" placeholder="Username" id="ucity" /> 
 
      <i class="glyphicon glyphicon-user form-control-feedback"></i> 
 
      </div> 
 
      <button id="add" type="button" class="btn btn-success" onclick="checkAllValue();"> 
 
      <i class="icon-user icon-white"></i> Add 
 
      </button> 
 
    <button type="button" class="btn btn-success" onclick="checkAll();"> 
 
      <i class="icon-user icon-white"></i> Check 
 
      </button>

出典

2016-09-01 11:30:45

var arrField = new Array(); 
 

 
function setValue() { 
 

 
    if (document.getElementById('uinfo').value == 1) { 
 
    document.getElementById('uname').value = "Ram"; 
 
    document.getElementById('uemail').value = "[email protected]"; 
 
    document.getElementById('ucity').value = "cuttuck"; 
 
    arrField.push({ 
 
     'uname': document.getElementById('uname').value, 
 
     'uemail': document.getElementById('uemail').value, 
 
     'ucity': document.getElementById('ucity').value 
 
    }); 
 
    } else { 
 
    document.getElementById('uname').value = ""; 
 
    document.getElementById('uemail').value = ""; 
 
    document.getElementById('ucity').value = ""; 
 
    arrField = []; 
 
    } 
 

 
    $('#Save').text('Add'); 
 
} 
 

 
$(document).ready(function() { 
 

 
    $('#uname, #uemail, #ucity').change(function() { 
 

 
    if (arrField[0].uname == $('#uname').val() && arrField[0].uemail == $('#uemail').val() && arrField[0].ucity == $('#ucity').val()) 
 
     $('#Save').text('Add'); 
 
    else 
 
     $('#Save').text('Update'); 
 

 

 
    }); 
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<select onchange="setValue();" id="uinfo"> 
 
    <option value="">Select</option> 
 
    <option value="1">User Info</option> 
 
</select> 
 
<div class="form-group has-feedback"> 
 
    <label class="control-label">Username</label> 
 
    <input type="text" class="form-control" placeholder="Username" id="uname" /> 
 
    <i class="glyphicon glyphicon-user form-control-feedback"></i> 
 
</div> 
 
<div class="form-group has-feedback"> 
 
    <label class="control-label">Email</label> 
 
    <input type="email" class="form-control" placeholder="Username" id="uemail" /> 
 
    <i class="glyphicon glyphicon-user form-control-feedback"></i> 
 
</div> 
 
<div class="form-group has-feedback"> 
 
    <label class="control-label">City</label> 
 
    <input type="text" class="form-control" placeholder="Username" id="ucity" /> 
 
    <i class="glyphicon glyphicon-user form-control-feedback"></i> 
 
</div> 
 
<button type="button" class="btn btn-success" onclick="checkAllValue();" id="Save"> 
 
    <i class="icon-user icon-white"></i> Add 
 
</button>

0試してみてください。この方法を試してみてください

出典

2016-09-01 11:32:33

あなたが探している（追加の）jQueryコードは、このようなものになります。私はそれを動作させるために、ターゲットボタンにクラス「changebtn」を追加したことに注意してください：

$(document).ready(function(){ 

    // Save original value when document is ready 
    var original = $("#uinfo").val(); 

    // Update Button when current value is different 
    // from original as the selection changes 
    $("#uinfo").on("change", function(){ 
    if ($(this).val() != original) { 
     $(".changebtn").html("Update"); 
    } else { 
     // Reset Button when User switches back to original 
     $(".changebtn").html("Add"); 
    } 
    }); 
});

JSFiddleデモ：https://jsfiddle.net/0yj5y5sb/2/

出典

2016-09-01 11:41:55 VoodooDS

編集時にデータを確認してボタンのテキストを変更する方法

答えて

関連する問題