CODEWITHSUNDEEP
javascriptjqueryhtmlformswebview
user2423476
user2423476

Reputation: 2275

Display submitted Form Data in div

I've been trying to display submitted form data into a div below the form. Without refreshing the page. I have multiple forms with a div under each one I would like to insert the text into the div below that form.

Heres a jsfiddle of what my forms div look like : http://jsfiddle.net/LNBhj/

Part of my html code (I have multiple forms with divs under each one like this):

<div style='float:left'>
<form action='demo_form.asp'>
    <input type='text' name='email' value="+object_guid+" id='guid' style='display:none'>
        <input type='text' name='email' id='page' style='font-size: 200%;width:78%;float:left'>
            <input type='submit' onclick='goToPage();' value='>>' style='float:right;width:20%;font-size: 200%'>
    </div>
<div style='float:left;height:50px;width:400px;border:2px solid black'>Have submitted form text display above this text</div>

Upvotes: 0

Views: 1495

Answers (1)

RONE
RONE

Reputation: 5485

Have worked to an extent, giving you an idea,

  1. Correct your html, missing ,
  2. convert your 'submit' to 'button' type.
  3. Remove your onclick functions.

Have shown the working example for top two forms,

when you fill the data and click on the form, the

$(document).ready(function(){
    $("input[type=button]").click(function(){
        var myChildren = $(this).parent().children();
        var $submited='';
        $(myChildren).each(function(i, obj){
            if(myChildren.eq(i).is(":visible")){
            $submited += ($(this).parent().children().eq(i).val())+', ';             
            }

        });       
        $submited = $submited.substr(0, ($submited.length - 4));
        $(this).parent().next('div').html($submited);
        //Ajax Functionality goes here
        $.get('demo_form.asp', function(data){
            //rest operation to carry out at client side.
        })

    });
});

Demo

Check out the Top two forms, by filling the values and click on the button

For ajax functionality, you can refer http://api.jquery.com/jquery.get/, Simple

Upvotes: 1

Related Questions