[英]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.