Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Ian Svoboda
Ian Svoboda
16,639 Points

Convert Form to use Javascript/jQuery

I am working with a .NET coded online store that uses a form to serve all page content. I need to insert a mailing list signup form on the page, but I can't use the standard format since nested forms are not valid HTML.

My plan was to remove the form tags and submit the data using jQuery, but i'm slightly lost as to how to do so. I know of the jQuery Post/AJAX methods, but i'm looking for some guidance on how to do this.

Also, the form has hidden inputs which is throwing me off.

Any guidance is appreciated. Here is the code:

    <form action='//luckyhorngifts.activehosted.com/proc.php' method='post' id='_form_1026' accept-charset='utf-8' enctype='multipart/form-data'>
      <input type='hidden' name='f' value='1026'>
      <input type='hidden' name='s' value=''>
      <input type='hidden' name='c' value='0'>
      <input type='hidden' name='m' value='0'>
      <input type='hidden' name='act' value='sub'>
      <input type='hidden' name='nlbox[]' value='2'>
      <div class='_form'>
        <div class='formwrapper'>
          <div id='_field81'>
            <div id='compile81' class='_field _type_input'>
              <div class='_label '>
                Email *
              </div>
              <div class='_option'>
                <input type='email' name='email' >
              </div>
            </div>
          </div>
          <div id='_field82'>
            <div id='compile82' class='_field _type_input'>
              <div class='_option'>
                <input type='submit' value="Subscribe">
              </div>
            </div>
          </div>
        </div>
        <div class="preview_part">
          <div id="notice">
            <a href="http://www.activecampaign.com/" title="email marketing" target="_blank">email marketing</a>
            by activecampaign
          </div>
        </div>
      </div>
    </form>

3 Answers

Jayden Spring
Jayden Spring
8,625 Points
Jayden Spring
Jayden Spring
8,625 Points

Hi Ian,

You can submit the data with jQuery using submit if you just wanted to submit the form to its current location.

If you want to post the data to a different location (if thats what you mean) then you can just edit the form action through jQuery using attr()

`` $(document).ready(function(){ ....... $('form').attr('action','your new link'); });

If thats not what you meant sorry! Clear it up for me and ill try my best to help.
Ian Svoboda
Ian Svoboda
16,639 Points
Ian Svoboda
Ian Svoboda
16,639 Points

The key here is to remove the form tag all together. I need to be able to submit the data without the form yeah being present.

Jayden Spring
Jayden Spring
8,625 Points
Jayden Spring
Jayden Spring
8,625 Points

Ok, in that case you want to do something more along the lines of this. In plain english - when the user clicks the submit button you want to prevent the default action from happening (ie the form being submitted) and then handle the data yourself and submit it to a location of your choice.

$('input[type=submit]').click(function(e){
   e.preventDefault();
   //If your just submitting the email then do this
   $.post('your url',$('input[name=email]').val(),successFunction(data));

   //If your processing hidden fields etc then you could put all the data into an array
   var data = [];
   $('input[type=hidden],input[name=email]').each(function(){
     data.push({name: $(this).attr('name'), value: $(this).val());  //Pushes an object containing data into the data array
   });
   $.post('your url',data,successFunction(data));
});

function success(data){
  //Present user with some confirmation - perhaps remove form
}

If you want to process all the input fields then the end array would look something like this: [ { name: 'Your Field', value: 'Value', }, { name: 'Your Field', value: 'Value', } ]

By using an object to store the field data you can easily access the name and value of the field whereas with an array if you change the order of the field you would have to check the index is correct.

Hope this is of some help!

Ian Svoboda
Ian Svoboda
16,639 Points

I'll try this out, this looks like what I was looking for. Thanks alot for the help, good method here.