更改或<input>元素的相同頁面上的顯示文本

-3

我已經搜索了這個答案，它似乎應該是基於DOM的簡單。
我想要做的是在頁面上顯示一個<td id="cte">或<input id="cte">，並在一些操作（即按鈕單擊或更換）後getElementById('cte').value="somenewvalue"實際更改同一頁面上的前述或元素。更改或<input>元素的相同頁面上的顯示文本

該技術（即JavaScript，AJAX，DOM）表示這是可行的，但我看到這個問題提出了許多方法，其中答案似乎無法工作或滿足問題。

所以我的實際問題是：如何在同一頁面上更改'顯示'的element.value，而無需重新加載相同的頁面？

來源

2017-04-20 MikeT

向我們展示你有一個snipet什麼嘗試。 [MCVE] –

您是否認爲元素包含多個值/文本？（如表）

// emty真正在第一，如果元件由幾個值

var forempty = document.getElementById("cte"); 

while(forempty.firstChild){ 
     forempty.removeChild(forempty.firstChild); 
    } 
document.getElementById("cte").value = something; 
//or 
document.getElementById("cte").textContent = something;

來源

2017-04-20 13:47:09 Andras

你回答了你自己的問題，至少在一個方法元素：「的技術（即JavaScript的， AJAX，DOM）說這是可行的果然，使用AJAX，它只是一個用AJAX請求中的數據（響應）替換DOM節點的問題....

這裏是一個非常基本的示例：我們將使用AJAX從服務器獲取HTML字符串D使用此內容替換其中包含HTML一個DIV前內容< strong>Hello< /strong>

此演示的第一部分是我們的包含我們最初的標記，該文件HTML或PHP文件，我們會打電話index.html or index.php

index.php的內容| index.html的

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Mini AJAX Demo</title> 
    </head> 
    <body> 
    <div class="swappable-content" id="swappable-content"> 
     <strong>Hello!!!</strong> 
    </div> 
    <div class="other-dom-elements"> 
     <Button id="action-trigger" data-ajax-url="/ajax.php">Click Me</Button> 
    </div> 
    <!-- ADD JQUERY LIBRARY & SETUP THE AJAX REQUEST CALLS --> 
    <!-- HERE WE ARE LOADING JQUERY FROM THE CDN.... CHANGE THE src ATTRIBUTE IF YOU HAVE A LOCAL COPY --> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
     (function($){ 
      $(document).ready(function(e){ 
       var actionTrigger = $("#action-trigger"); 

       actionTrigger.on("click", function(e){ 
        $.ajax({ 
         url   : $(this).attr('data-ajax-url'), 
         type  : "POST", 
         dataType : "JSON", 
         data  : { 
          // HERE YOU CAN ADD KEY VALUE PAIRS 
          // WHICH WILL BE SENT TO AND PROCESSED BY THE SERVER 
         }, 
         success  : successHandler, 
         error  : errorHandler, 
         complete : completeHandler 

        }); 
       }); 

       function successHandler(data, textStatus, jqXHR){ 
        // IF THERE IS A RESPONSE PAYLOAD FROM THE SERVER 
        // WE JUST REPLACE THE CONTENTS OF THE #swappable-content DIV WITH THE DATA 
        if(data){ 
         if(data.html){ 
          $("#swappable-content").html(data.html); 
         } 
        } 
       } 

       function errorHandler(jqXHR, textStatus, errorThrown){ 
        console.log('The following error occured: ' + textStatus, errorThrown); 
       } 

       function completeHandler(jqXHR, textStatus){ 

       } 
      }); 
     })(jQuery); 
    </script> 
    </body> 

    </html>

AJAX處理用腳本內容：ajax.php

<?php 

    // YOU CAN DO PRETTY MUCH ANYTHING WITHIN THIS FILE 
    // HOWEVER FOR THE PURPOSES OF THIS DEMO, 
    // WE WOULD JUST RETURN SOME HTML STRING BUNDLED IN AN ARRAY AND SENT AS JSON DATA 
    $response = array(
     'html' => "<div style='font-weight:900;color:#F00;'>This is the Response Data from Server!</div>", 
    ); 

    die(json_encode($response));

來源

2017-04-20 14:10:48 Poiz

更改​​或<input>元素的相同頁面上的顯示文本

回答

相關問題

更改或<input>元素的相同頁面上的顯示文本