更改或<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>元素的相同页面上的显示文本