jQuery/JavaScript - Displaying value from text-input in <span>-placeholders

Answer 1

Well for the form submit you need to add the following to the form to cancel the default submit event:

<form onsubmit="return functioncall();">

Then when you return false from the function it will cancel the default form action.

EDIT: If you would like to see all the data that is to be submitted you can serialize the form using jquery serialize() method or serializeArray() method.

Answer 2

Change the id of your form to "myform" or whatever and the name of your text input to "myinput", and try something like this...

$(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;
}

Then in your test.php you can access it by calling $_POST['data'] (we specified this when we created the property of the "post" object called "data" like this: post.data = 'whatever'.

Answer 3

If you're trying to accomplish validation, there's a much easier way, just use a validation plugin like this one: http://docs.jquery.com/Plugins/Validation

Makes it much easier and takes the headache out of developing your own code. Jquery makes it easy to develop powerful javascript applications...but sometimes it's just easier to use stuff that's already been written and debugged (for the most part at least).

Answer 4

I think what you want to do is something like this:

<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;
   });
});

Here's a demo of this in action: http://jsfiddle.net/SA3XY/

Also see my comment on your question.

Answer 5

To answer the revised version of your question, yes, it really is that simple, although the correct syntax for your "do the magic thing" function is the following:

var do_the_magic_thing = function() {
    $('.placeholder').html($('#txt_inp').val());
};

P.S. Don't worry too much about not expressing yourself, your English is much better than my Danish.