[英]jQuery/JavaScript - Displaying value from text-input in <span>-placeholders
我將重新開始:)感謝您的良好回答，如果可以的話，請嘗試回答此問題：（這次我將嘗試更具體）
我想要的是，一個<form>元素onsubmit，一個按鈕的onclick或任何采用<input type="text" value="Default value">並將其插入到幾個<span>元素中的方法，我喜歡稱呼“占位符”。 該示例可能會更好地解釋它：
<head>
<script type="text/javascript">
$(document).ready(function()
{
$("input[type=button]").click(function //click the button
{ do_the_magic_thing() //make the value from id="txt_inp" appear in class="placeholder"
});
});
</script>
</head>
<body>
<form method="POST" action="" id="theForm"> //could also be get, I don't care
<input type="text" id="txt_inp" value="Default Value" onfocus="if (this.value == Default Value) this.value=''"> //this SHOULD make the Default Value dissapear on focus
<input type="button"> //could also be a submit
<span class="placeholder"></span> //$("#txt_inp").value; goes here
<span class="placeholder"></span> //$("#txt_inp").value; goes here
</body>
現在，真的真的這么簡單嗎？：
var do_the_magic_thing = function() {
$(".placeholder").html = $("#txt_inp").value;
};
我現在要睡覺-在丹麥很晚:)明天我將回答您的評論:)
我對jQuery這個東西
很陌生，但我確實了解所有基本知識。
讓我們簡化一下，說我有一個看起來像這樣的表格：
<form method="POST" action=""> <input type="text" value="Default value"> <input type="submit" value="Click me"> <input type="hidden"> //hidden is for being able to submit by hitting enter </form>
我已經嘗試過
$.post ，但是我無法正確完成。
它對我不起作用。
現在，我想取消提交（通過添加
return false;可以做到這一點嗎；如果存在這樣的話，在返回值的函數中可以這樣做嗎？），但這不是至關重要的。
我想我輸入了類似
$.post("test.php", function(data) {
alert("This is the data submitted (and cancelled):" + data);
}); //I have also tried without the "test.php", that's not it
你能告訴我，我做錯了嗎？
:)
不必取消提交，但我希望這樣做
也不必使用POST作為方法，但是再次，這是我更喜歡的方法
將表單的ID更改為“ myform”或其他，並將文本輸入的名稱更改為“ myinput”，然后嘗試執行以下操作...
$(document).ready(function() {
$('#myform').submit(submitMyForm);
})
function submitMyForm(e) {
var data = new Object();
data.whatever = $('#myinput').val();
var post = new Object();
//here I use a jquery json extension...you can use anything you like
post.data = $.toJSON(data);
$.post("test.php", post, function(returnval) {
alert(returnval);
}, "text");
//this is to stop the normal form submit action
return false;
}
然后，在您的test.php中，可以通過調用$ _POST ['data']來訪問它（我們在創建名為“ data”的“ post”對象的屬性時指定了該屬性，如下所示：post.data ='whatever'。
我認為您想要做的是這樣的：
<fieldset id="myData">
<legend>My Data</legend>
</fieldset>
<form id="myForm" method="POST" action="">
<input type="text" value="Default value">
<input type="submit" value="Click me">
<input type="hidden"> //hidden is for being able to submit by hitting enter
</form>
$(function() {
$('#myForm').submit(function() {
//do whatever you want here.
//this will take place after the form is submitted, but before your ajax request
$('input[type=text]').each(function() {
$('#myData').append('<div class="placeholder">' + $(this).val() + '</div>');
});
//serialize your form data
var toSubmit = $('input[type=text]').serialize();
//do ajax here
$.post('test.php', toSubmit, function(data) {
alert('Your AJAX POST request returned: ' + data);
}, 'text');
//this will prevent the form from submitting normally
return false;
});
});
這是一個實際的演示： http : //jsfiddle.net/SA3XY/
另請參閱我對您問題的評論。
是的，要回答問題的修訂版本，是的，實際上就是這么簡單，盡管“執行魔術操作”功能的正確語法如下：
var do_the_magic_thing = function() {
$('.placeholder').html($('#txt_inp').val());
};
PS：不要擔心自己不表達自己，英語比我的丹麥語好得多。
對於表單提交，您需要在表單中添加以下內容以取消默認的提交事件：
<form onsubmit="return functioncall();">
然后，當您從函數返回false時，它將取消默認的表單操作。
編輯：如果您想查看將要提交的所有數據，則可以使用jquery serialize()方法或serializeArray()方法對表單進行serialize() serializeArray() 。
如果您要完成驗證，則有一種更簡單的方法，只需使用這樣的驗證插件即可： http : //docs.jquery.com/Plugins/Validation
使它變得更加容易，並消除了開發自己的代碼的麻煩。 jQuery使開發強大的javascript應用程序變得容易...但是有時使用已經編寫和調試的東西（至少在大多數情況下）更容易。
在使用jQuery的文本輸入上觸發keydown，在事件發生后保留值
[英]Trigger keydown on text-input with jQuery, retain value after event
使用 Javascript 或 Jquery 更改 span 的值<input>或文本屬性
[英]Change the value of span using Javascript or Jquery using <input> or text attribute
JQuery/Javascript 從輸入中復制文本並將其粘貼到跨度中
[英]JQuery/Javascript copy a text from an input and paste it in a span
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.