StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POjQuery/JavaScript - Displaying value from text-input in <span>-placeholders
text
Body
copied!<h2>I FORMULATED MY SELF VERY BADLY!</h2> <p>I will start over :) I appreciate your good answers, and if you can, try answering this: ( I will try to be more specific this time)</p> <p>What I want is, that a <code><form></code>element onsubmit, onclick of a button or whatever takes the value of an <code><input type="text" value="Default value"></code> and inserts it in a couple of <code><span></code>elements, I like to call "placeholders". This sample might explain it a little better:</p> <pre><code><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> </code></pre> <p>Now, is it really as simple as this?:</p> <pre><code>var do_the_magic_thing = function() { $(".placeholder").html = $("#txt_inp").value; }; </code></pre> <p>I'm going to bed now - it's late in Denmark :) I will answer your comments tomorrow :)</p> <h2>OLD POST:</h2> <p><strike> I am <strong>very</strong> new to this jQuery thing, but I do understand the basics and all. Let's simplify and say I have a form which looks like this:</p> <pre><code><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> </code></pre> <p>I've tried with <code>$.post</code>, but I just cannot get it right; it's not working for me.</p> <p>Now, I would like to cancel the submit (can't that be done by just adding a <code>return false;</code> in the function returning the value, if a such is present?), but this is not crucial.</p> <p>I think I typed in something like</p> <p><code>$.post("test.php", function(data) {<br> alert("This is the data submitted (and cancelled):" + data);<br> }); //I have also tried without the "test.php", that's not it</code></p> <p>Can you tell me, what I'm doing wrong please? :)</p> <h2>NOTE</h2> <p><strong>It is not necessary, that the submit is cancelled, but I would like that<br> Nor is it necessary, that POST is the method used, but once again, this is what I prefer</strong> </strike></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload