ansaurus

Question

how do i submit data from HTML using jquery

Answer 1

+2 A:

Hi DucDigital:

If I am getting it right, you are talking about sending AJAX-based post requests "under the hood" and get "dynamic reflections" back on the same page.

Well, if this is the case, there are actually more than just submitting data to the server.

Here is the big picture:

You need a javascript which is loaded in the page that has the form to submit.

Inside that script, you need to define the event which will trigger the AJAX-based post request. Basically you would love trigger such an event when the content in that particular field has been just changed (an onChange event, that is).

Then you can use script like the following:

$.ajax
 ({
     type: 'POST',
        cache: false,
        async: false,
        timeout: 10000,
        url : '/path/to/your/serverside/function',
        dataType : 'json',
        data:
        {
              'tag' : //whatever you want to be used as the tag
        },
        success : function(message)
        {
            //this will be called when this post was successfully been carried out.
            //you should update the view (the same page) here using some jQuery script.
            //such as : $('#tag').html(message.tag);
        },
        error : function(message) 
        { 
            //this is for displaying error messages (perhaps due to networking problems?)
        }
 });

Since there are really a lot to write about. I suggest you post whatever you have finished up here so we can give it a check.

At least from my consideration, this scenario require the following knowledge to get everything right(though you can always choose to use less tech):

   onChange event triggered
       |
       |
   jQuery =====sending JSON formatted tag info ======> serverside function
                                                               |
                                                               |
                                                       decode JSON tag info
                                                               |
                                                               |
                                                       process(saving it into database?)
                                                               |
                                                               |
                                                       encode feedback info
                                                               |
    jQuery callback function  <===== JSON info==================
      |
      |
    update the view(the same page)
      .
      .
      .
      .
      .
    aforementioned process is before form is submitted via normal POST/GET.

Michael Mao 2009-10-24 06:33:32

im not really mean ajax request, what you cover is just a little of the whole question. if you take a look at wordpress new post, you can see a tag in the right column, when you submit, it add into a UL the tag name... what i want to is to parse this and then use on final submission...

DucDigital 2009-10-24 06:42:51

so the form is somehow like this <form><ul id=tag><li>something</li><li>sometihngelse</li> <input name=title /></form> , so how can i get the tag part...

DucDigital 2009-10-24 06:44:19

Answer 2

A:

One way is to keep track of the tags you add in a hidden form field, but actually display using divs or spans or whatever UI you want. In the case of facebook, I'd imagine they're doing something somewhat similar, though I guess they could actually be adding form elements dynamically. Forgive the nasty code/css - just tossed it together. If you add tags and then hit submit, you'll see the querystring that all the values are there.

<!doctype html> 
<html lang="en"> 
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"&gt;&lt;/script&gt; 
<script type="text/javascript">
$(function(){
    $("#btnSuggest").click(function(){
     var $tagSuggest = $("#tagSuggest");
     if($tagSuggest.val() != "")
      AddTag($tagSuggest.val());
    });

    $("#tagSuggest").keyup(function(e){
     if(e.keyCode == 13 && $(this).val() != "")
      AddTag($(this).val());
    });
});

function AddTag(tag){
    $("<div>").text(tag).appendTo("#tags").click(function(){
     $(this).remove();
     UpdateTags();
    }).hover(function(){
     $(this).addClass("over");
    },function(){
     $(this).removeClass("over"); 
    });

    UpdateTags();
}

function UpdateTags(){
    var allTags = ""; 

    $("#tags div").each(function(){
     allTags += "," + $(this).text();
    });

    $("#hidTags").val(allTags.substring(1));
    $("#tagSuggest").val("");
}
</script>
<style type="text/css">
.main
{
    width: 400px; 
    padding: 10px; 
    margin: auto; 
    border: 1px solid black; 
    background-color: #e6e6e6;
    height: 600px;
}

#tags div
{
    padding: 3px;
    border: 1px solid black; 
    background-color: #e6e6e6;
    margin: 3px;
    height: 15px;
    width: auto;
    float: left;
    cursor: pointer;

}

#tags div.over
{
    background-color: red;
}
</style>
</head>
<body>
<div class="main">
    <form action="" method="get">
     <input type="hidden" name="hidTags" id="hidTags">

     <textarea name="Wallpost" style="width: 390px; height: 100px;"></textarea>
     <br />
     <input type="text" id="tagSuggest" style="width: 280px;" />
     <input type="button" id="btnSuggest" value="Add Tag" style="float: right;"/>
     <br />  
     <input type="Submit" name="cmdSubmit" value="Share" style="float: right;"/> 
    </form>
    <div id="tags">

    </div>
</div>
</body>
</html>

WesleyJohnson 2009-10-24 09:05:58

ansaurus

tags:

views:

answers:

how do i submit data from HTML using jquery

related questions