ansaurus

Question

Collecting form data and removing or hiding a form field using JQuery

Answer 1

+3 A:

Part 1 is easy:

$('#yourform').hide();

EDIT: (to the best of my understanding - using ScottE's step-by-step idea)

Part 2:

Save the form in a local variable:

var tempStorage = $('#yourform').serialize();

Part 3:

Assign a function to the onClick event of your link that sends the data via an AJAX request:

$('#yourbutton').click( function() {
    $.ajax({  
        // Your PHP processing script goes here  
        url: "yourfile.php",

        // You wanted to use POST, right?
        type: "POST",

        // The data object (I hope, it's accessible here)
        data: tempStorage,

        // We don't need caching
        cache: false,

        // A function that gets executed on success
        // Note that you have the response of the script in the html variable
        success: function(html) {
            alert('great');
        }
    });
});

Franz 2009-11-04 20:05:46

This appears correct, but what if I have multiple forms that I want converted to text links that POST serialized data. That is, when the script is run, it'll serialize all data within forms with id = "yourform". When it comes time for a link to POST data, how does the link know what serialized data to send?? Thanks very much for the help.

kingrichard2005 2009-11-05 17:02:37

Well, you can just store the serialized data in an array and then select the right element when submitting the form via the link. Or am I misunderstanding something here?

Franz 2009-11-07 15:13:23

Answer 2

A:

If I understand what you're looking for, you could do the following:

handle the submit event of the form.
store the form data in a local variable in js - look to http://docs.jquery.com/Ajax/serialize
hide the form
show the link that will submit the form (again), and handle it's click event, initiating an ajax call where you pass in the local variable created in step 2.

This seems like an odd request...

ScottE 2009-11-04 22:52:43

Maybe a confirmation? "Do you really want to do this" etc...?

Franz 2009-11-04 23:06:59

Answer 3

A:

Ok all, I went the route of hiding all my forms and appending anchor tags following each form based with class="postLink", I added a conditional statement that adds a unique ID if a form doesn't already have one, the script then adds an anchor tag with the unique ID and the value of the submit button to the end of the hidden form. A separate click function the processes the submit button in the hidden form that is tied to an anchor tag by the unique ID. Code follows:

/**
 * Hide all forms with class="postLink" on page load.
 * Call submit button within a form from a anchor tag
 */
$(document).ready(function() {
    //Hide form(All forms with class="postLink" will be hidden):
 $('.postLink').hide();

 var num = 0;
 //Loop over each form with a postLink class
 $("form").each(function(){
  //Add value of submit button as name of text link
  if($(this).hasClass("postLink")){
   //Get value attribute from submit button
   var name = $(this).find('input#submitThis').val();

   //Add a uniqueID if the form has no id
   if($(this.id).length == 1){
    this.id='uniqueID'+num;
    num++;
   }

   var id = $(this).attr('id');
   //Append a anchor tag after each form that is replaced
   $(this).after("<a id="+id+" class=\"submitLink\" href=\"#\">"+name+"\</a>");
  }
 });

 //Submit button in hidden form by clicking associated anchor tag
 $('.submitLink').click(function(){
  var anchorID = $(this).attr('id');
  //Find the form id that matches the anchor id
  $("form").each(function(){
   if(this.id == anchorID){
    $(this).find('input#submitThis').click();
   } 
  });
  return false;
 });
});

kingrichard2005 2009-11-17 18:11:11

ansaurus

tags:

views:

answers:

Collecting form data and removing or hiding a form field using JQuery

related questions