我將如何迴應HTML元素中的選定表單值（如p標籤）？

-6

當用戶填寫表單時，是否有方法在HTML元素中顯示/回顯表單值？我將如何迴應HTML元素中的選定表單值（如p標籤）？

我正在創建一個巨大的搜索表單，並希望通過提交按鈕添加一個有用的區域，提醒用戶他們將要搜索的內容。

2012-08-03 gigglebot

是的，與JavaScript和也許或可能不使用AJAX – 2012-08-03 03:56:49

請嘗試一些事情後，然後尋求幫助 – Jalpesh 2012-08-03 04:37:16

這是一個簡單的例子，您可以如何使用jQuery複製表單輸入的值。

$('input[name=query]').keyup(function() { 
    $('#query-term').text($(this).val()); 
}); 

$('select[name=category]').change(function() { 
    $('#query-category').text($(this).val()); 
}).change();

Demo on jsFiddle。這裏是我使用的jQuery函數列表。

$()相當於jQuery()
keyup()
val()
text()

來源

2012-08-03 03:58:20

如果你正在使用PHP和服務器（例如Apache）的配置具有HTML/HTM啓用內嵌PHP/xhtml文件，你可以像這樣包含php：

<..> 
<form> 
<input> 
<?php 
echo 'test' 
?> 
</form> 
<..>

同樣可以放入.php文件中.htm並且可以工作，因爲很可能您的服務器啓用php解析僅用於.php文件。

現在，如果你想只顯示哪些用戶進入一些領域在頁面的頂部窗體字段值，也許你想這個代替：

<form> 
<input id="search" value="test" onkeypress="$('#search_field_test').text($(this).val())" > 
<..> 
<span id="search_field_test"> 
</form>

來源

2012-08-03 03:59:26

你可以改變處理程序添加到窗體本身 - 單個字段上的更改事件會冒泡（jQuery確保即使它在舊版IE中不會自然發生） - 然後獲取所有非空值並將它們放在「有用區域」元素中：

$(document).ready(function() { 
    var $form = $("#yourFormIdHere"), 
     $formFields = $form.find(":input"), 
     $helpfulArea = $("#yourOutputElement"); 

    $form.change(function(e) { 
     $helpfulArea.empty(); 
     $formFields.each(function() { 
      if (this.value != "") 
       $helpfulArea.append(this.name + ": " + this.value + "<br/>"); 
     }); 
    }); 
});

:input selector給你所有的形式co但是你需要添加一些代碼來處理複選框和單選按鈕，因爲你會根據它們的checked屬性將它們包含在輸出中，而不是在它們的value屬性中。正如你所看到的，我只是使用輸入元素名稱屬性作爲輸出中的標籤，但通過使用相關標籤元素中的文本（如果有的話），或者添加data-displayName=...屬性或其他。但這應該是足夠多的讓你開始更多...

演示：http://jsfiddle.net/nnnnnn/3VB6G/

來源

2012-08-03 04:07:30 nnnnnn

您也不妨看看AngularJS，這將讓你做這樣的事情：

<!doctype html> 
<html ng-app> 
    <head> 
    <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> 
    </head> 
    <body> 
    <div> 
     <label>Name:</label> 
     <input type="text" ng-model="yourName" placeholder="Enter a name here"> 
     <hr> 
     <h1>Hello {{yourName}}!</h1> 
    </div> 
    </body> 
</html>

來源

2012-08-03 04:18:16 msanford

我將如何迴應HTML元素中的選定表單值（如p標籤）？

回答

相關問題