Need help submitting a form

awkward_clam · November 29, 2010

Hey I'm really new at this so I hired someone to help me make a nice form, but it doesn't send it to my email and now he has gone MIA.

Here is the site in question:

www.yourvancouvermortgagebroker.ca

The application has 5 pages, with the 6th being a summary. I need that summary to be sent when the user clicks "submit".

Please give this noob some detailed instructions as my head is about to asplode.

I have a custom .js file that I am using, there is also a bluemail script which might help, but obviously I am implementing something wrong.

Thanks!!!!

ejaboneta · November 29, 2010

We need to see the code and besides that, this isn't a regex question.

Pikachu2000 · November 29, 2010

I've tentatively moved this to PHP Coding Help, but you're going to need to post the relevant code . . .

awkward_clam · November 29, 2010

I've tentatively moved this to PHP Coding Help, but you're going to need to post the relevant code . . .

Thanks

Here is the on page WordPress code:

<!--//////////// Form Area ////////////////-->
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script><script type="text/javascript" src="http://webexpedition18.com/download/signup_form_WebExpedition18/js/jquery.inputfocus-0.9.min.js"></script><script type="text/javascript" src="http://www.yourvancouvermortgagebroker.ca/js/apply.js"></script>

<!--//////////// Form Area ////////////////-->

<div id="container">
       
<form action="http://www.bluehost.com/bluemail" enctype="multipart/form-data" method="POST">
       
   
            <!-- #first_step -->
            <div id="first_step">
                <h1>Application <span>Step 1/5</span></h1>

                <div class="form">
                    <input type="text" name="fullname" id="fullname" value="Full Name" />
               <label>Full Name</label>
               <input type="text" name="dateofbirth" id="dateofbirth" value="dd/mm/yyyy" /><label>Date of Birth</label>
                   
                    <input type="text" name="phone" id="phone" value="Phone" />
                   <label>Phone Number</label>
                   
                    <input type="text" name="email" id="email" value="Email" />
                    <label>Email</label>
<input type="text" name="currentaddress" id="currentaddress" value="Current Address" /><label>Current Address</label>

                </div>        <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
                <input class="submit" type="submit" name="submit_first" id="submit_first" value="" />
            </div>     


            <!-- #second_step -->
            <div id="second_step">
                <h1>Application <span>Step 2/5</span></h1>

                <div class="form">
                    <input type="text" name="JobTitle" id="JobTitle" value="Job Title" />
                    <label>Job Title</label>
                    <input type="text" name="AnnualIncome" id="AnnualIncome" value="Annual Income" />
                    <label>Annual Income</label>
    <select id="IncomeType" name="IncomeType" style="margin-top:-30px">>
                        <option value="ChooseOne">Choose One</option>
<option value="Salary">Salary</option>
                        <option value="Commission">Commission</option>
                        <option value="Business">Business Owner</option>
                          <option value="Other">Other</option>
                    </select>  <label class="selectlb">Income Type </label>
                            <input type="text" name="TotalMonthlyPayments" id="TotalMonthlyPayments" value="Monthly Payments" />
                     <label class="selectlb">Total Monthly Payments (credit cards, car)</label>                 
        <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
      <input type="text" name="TotalSavings" id="TotalSavings" value="Total Savings" /><label>Total Savings</label>
                </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->

                <input class="submit" type="submit" name="submit_second" id="submit_second" value="" />
            </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->


            <!-- #third_step -->
            <div id="third_step">
                <h1>Step 3 -- <span>Co-Applicant</span></h1>
                <div class="form">
                <input type="text" name="cfullname" id="cfullname" value="Full Name" />
               <label>Fullname</label>
               <input type="text" name="cdateofbirth" id="cdateofbirth" value="dd/mm/yyyy" /><label>Date of Birth</label>
                   
                    <input type="text" name="cphone" id="cphone" value="Phone" />
                   <label>Phone Number</label>
                   
                    <input type="text" name="cemail" id="cemail" value="Email" />
                    <label>Email</label>
<input type="text" name="ccurrentaddress" id="ccurrentaddress" value="Current Address" /><label>Current Address</label>     
                   
                </div>     
                 <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
                <input class="submit" type="submit" name="submit_third" id="submit_third" value="" />
               
            </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->

            <!-- #fourth_step -->
              <div id="fourth_step">
                <h1>Step 4 -- <span>Co-Applicant</span></h1>
                <div class="form">
                    <input type="text" name="cJobTitle" id="cJobTitle" value="Job Title" />
                    <label>Job Title</label>
                    <input type="text" name="cAnnualIncome" id="cAnnualIncome" value="Annual Income" />
                    <label>Annual Income</label>
    <select id="cIncomeType" name="cIncomeType" style="margin-top:-30px">>
<option value="chooseone">Choose One</option>                                           
<option value="Salary">Salary</option>
                        <option value="Commission">Commission</option>
                        <option value="Business">Business Owner</option>
                                           <option value="Other">Other</option>
                    </select>  <label class="selectlb">Income Type </label>                 
<input type="text" name="cTotalMonthlyPayments" id="cTotalMonthlyPayments" value="Monthly Payments" />
                                             <label class="selectlb">Total Monthly Payments (credit cards, car)</label>                 
        <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
      <input type="text" name="cTotalSavings" id="cTotalSavings" value="Total Savings" /><label>Total Savings</label>
                </div>
                 <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
                <input class="submit" type="submit" name="submit_fourth" id="submit_fourth" value="" />
                </div>
           
            <!-- #fifth_step -->
                        <div id="fifth_step">
                <h1>Application <span>Step 5/5</span></h1>
                <div class="form">
                 <select id="PurposeofMortgage" name="PurposeofMortgage">
<option value="chooseone">Choose One</option>                       
                        <option value="Pre-Approval">Pre-Approval</option>
                        <option value="Purchase">Purchase</option>
                        <option value="Refinance">Refinance</option>
                    </select>  <label class="selectlb">Purpose of Mortgage</label>

                    <select id="DoYouWant" name="DoYouWant">
<option value="chooseone">Choose One</option>
                        <option value="Variable">Variable</option>
                        <option value="Fixed">Fixed</option>
                        <option value="Not sure">Not sure</option>
                    </select>  <label class="selectlb">Type of Mortgage</label>
                      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
  <input type="text" name="downPayment" id="downPayment" value="How much is your down payment?" /><label>How much is your down payment?</label>
  <input type="text" name="propertyAddress" id="propertyAddress" value="" /><label>What is the property address (if applicable)?</label>     <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
<textarea name="comments" id="comments" cols="40"></textarea><label>Any other comments?</label>
                </div>
                 <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
                <input class="submit" type="submit" name="submit_fifth" id="submit_fifth" value="" />           
            </div>
           
            <!-- #sixth_step -->
            <div id="sixth_step">
                <h1>Summary</h1>
<h2 style="margin-left:60px">Summary</h2>
<div class="form" style="height:240px; width:700px; overflow:scroll; margin:0 auto 0 auto; position:relative">
                    <table style="position:relative;top:-20px">
                        <tr><td>Fullname</td><td></td></tr>
                            <tr><td>Date of Birth</td><td></td></tr>
                        <tr><td>Phone</td><td></td></tr>
                        <tr><td>Email</td><td></td></tr>
                        <tr><td>Current Address</td><td></td></tr>
                        <tr><td>Job Title</td><td></td></tr>
                        <tr><td>Annual Income</td><td></td></tr>
                        <tr><td>Income Type</td><td></td></tr>
                      <tr><td>Total Monthly Payments</td><td></td></tr>
                        <tr><td>Total Savings</td><td></td></tr>
                         <tr><td>Co-Applicant Fullname</td><td></td></tr>
                            <tr><td>Co-Applicant Date of Birth</td><td></td></tr>
                        <tr><td>Co-Applicant Phone</td><td></td></tr>
                        <tr><td>Co-Applicant Email</td><td></td></tr>
                        <tr><td>Co-Applicant Current Address</td><td></td></tr>
                          <tr><td>Co-Applicant Job Title</td><td></td></tr>
                        <tr><td>Co-Applicant Annual Income</td><td></td></tr>
                        <tr><td>Co-Applicant Income Type</td><td></td></tr>
                      <tr><td>Co-Applicant Total Monthly Payments</td><td></td></tr>
                        <tr><td>Co-Applicant Total Savings</td><td></td></tr>
                           <tr><td>Purpose of Mortgage</td><td></td></tr>
                           <tr><td>Do you want a</td><td></td></tr>
                            <tr><td>How much is your down payment?</td><td></td></tr>
                              <tr><td>What is the property address (if applicable)</td><td></td></tr>
                              <tr><td>Comments</td><td></td></tr>                       
                    </table>
                </div>
      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
<input type="hidden" name="sendtoemail" value="hello@wordpresswebsites.ca">
<input type="hidden" name="redirect" value="http://www.yourvancouvermortgagebroker.ca/thanks">
            <input class="send submit" type="submit" name="submit_sixth" id="submit_sixth" value="" />           
            </div>
           
        </form>
    
<!-- ////////////////////////////// Form area ///////////////////////// -->
</div>
<div id="progress_bar">
        <div id="progress"></div>
        <div id="progress_text">0% Complete</div>
</div>

And here is the apply.js file:

$(function(){
    //original field values
    var field_values = {
            //id        :  value
            'fullname'  : 'Fullname',
            'dateofbirth'  : 'Date of Birth',         
            'phone'  : 'Phone',
            'email'  : 'Email',
            'currentaddress'  : 'Current Address',
            'JobTitle'  : 'Job Title',
           'AnnualIncome'  : 'Annual Income',
          'IncomeType'  : 'Income Type',
          'TotalMonthlyPayments'  : 'Total Monthly Payments',
       'TotalSavings'  : 'Total Savings',
          'cfullname'  : 'Fullname',
            'cdateofbirth'  : 'Date of Birth',         
            'cphone'  : 'Phone',
            'cemail'  : 'Email',
            'ccurrentaddress'  : 'Current Address',
          'cJobTitle'  : 'Job Title',
          'cAnnualIncome'  : 'Annual Income',
          'cIncomeType'  : 'Income Type',
          'cTotalMonthlyPayments'  : 'Total Monthly Payments',
       'cTotalSavings'  : 'Total Savings',
             'PurposeofMortgage'  : 'Purpose of Mortgage',
                   'DoYouWant'  : 'Do you want a',
                         'downPayment'  : 'How much is your down payment?',
                               'propertyAddress'  : '',
                            'comments'  : 'Comments'
    };
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; 

    //inputfocus
    $('input#fullname').inputfocus({ value: field_values['fullname'] });
    $('input#dateofbirth').inputfocus({ value: field_values['dateofbirth'] });
    $('input#phone').inputfocus({ value: field_values['phone'] });
    $('input#email').inputfocus({ value: field_values['email'] });
    $('input#currentaddress').inputfocus({ value: field_values['currentaddress'] });
    $('input#JobTitle').inputfocus({ value: field_values['JobTitle'] });
    $('input#AnnualIncome').inputfocus({ value: field_values['AnnualIncome'] });
       $('input#IncomeType').inputfocus({ value: field_values['IncomeType'] });
       $('input#TotalMonthlyPayments').inputfocus({ value: field_values['TotalMonthlyPayments'] });
          $('input#TotalSavings').inputfocus({ value: field_values['TotalSavings'] });
  $('input#cfullname').inputfocus({ value: field_values['cfullname'] });
    $('input#cdateofbirth').inputfocus({ value: field_values['cdateofbirth'] });
    $('input#cphone').inputfocus({ value: field_values['cphone'] });
    $('input#cemail').inputfocus({ value: field_values['cemail'] });
    $('input#ccurrentaddress').inputfocus({ value: field_values['ccurrentaddress'] });
    $('input#cJobTitle').inputfocus({ value: field_values['cJobTitle'] });
    $('input#cAnnualIncome').inputfocus({ value: field_values['cAnnualIncome'] });
          $('input#cIncomeType').inputfocus({ value: field_values['cIncomeType'] });
       $('input#cTotalMonthlyPayments').inputfocus({ value: field_values['cTotalMonthlyPayments'] });
          $('input#cTotalSavings').inputfocus({ value: field_values['cTotalSavings'] });
                   $('input#PurposeofMortgage').inputfocus({ value: field_values['PurposeofMortgage'] });
                            $('input#DoYouWant').inputfocus({ value: field_values['DoYouWant'] });
                   $('input#downPayment').inputfocus({ value: field_values['downPayment'] });
                         $('input#propertyAddress').inputfocus({ value: field_values['propertyAddress'] });
                            $('input#comments').inputfocus({ value: field_values['comments'] });

    //reset progress bar
    $('#progress').css('width','0');
    $('#progress_text').html('0% Complete');

    //first_step
    $('form').submit(function(){ return false; });
   
   //step 1
    $('#submit_first').click(function(){
        //remove classes
        $('#first_step input').removeClass('error').removeClass('valid');
        //ckeck if inputs aren't empty
        var fields = $('#first_step input[type=text]');
        var error = 0;
        fields.each(function(){
            var value = $(this).val();
            if( value.length<1 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) {
                $(this).addClass('error');
                $(this).effect("shake", { times:3 }, 50);
               
                error++;
            } else {
                $(this).addClass('valid');
            }
        });       
       
        if(!error) {
                 //update progress bar
                $('#progress_text').html('20% Complete');
                $('#progress').css('width','68px');
               
                //slide steps
                $('#first_step').slideUp();
                $('#second_step').slideDown();     
        } else return false;
    });

//step 2
    $('#submit_second').click(function(){
        //remove classes
        $('#second_step input').removeClass('error').removeClass('valid');
       
        var fields = $('#second_step input[type=text]');
        var error = 0;
        fields.each(function(){
            var value = $(this).val();
            if( value.length<1 || value==field_values[$(this).attr('id')]) {
                $(this).addClass('error');
                $(this).effect("shake", { times:3 }, 50);
               
                error++;
            } else {
                $(this).addClass('valid');
            }
        });

        if(!error) {
                //update progress bar
                $('#progress_text').html('40% Complete');
                $('#progress').css('width','136px');
               
                //slide steps
                $('#second_step').slideUp();
                $('#third_step').slideDown();     
        } else return false;

    });

//step 3
$('#submit_third').click(function(){
        //remove classes
        $('#third_step input').removeClass('error').removeClass('valid');
        //ckeck if inputs aren't empty
        var fields = $('#third_step input[type=text]');
        var error = 0;
        fields.each(function(){
            var value = $(this).val();
            if( value.length<1 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='cemail' && !emailPattern.test(value) ) ) {
                $(this).addClass('error');
                $(this).effect("shake", { times:3 }, 50);
               
                error++;
            } else {
                $(this).addClass('valid');
            }
        });       
       
        if(!error) {

                //update progress bar
                $('#progress_text').html('60% Complete');
                $('#progress').css('width','204px');
               
                //slide steps
                $('#third_step').slideUp();
                $('#fourth_step').slideDown();     
        } else return false;
    });


//step 4
    $('#submit_fourth').click(function(){
        //remove classes
        $('#fourth_step input').removeClass('error').removeClass('valid');
       
        var fields = $('#fourth_step input[type=text]');
        var error = 0;
        fields.each(function(){
            var value = $(this).val();
            if( value.length<1 || value==field_values[$(this).attr('id')]) {
                $(this).addClass('error');
                $(this).effect("shake", { times:3 }, 50);
               
                error++;
            } else {
                $(this).addClass('valid');
            }
        });

        if(!error) {
                //update progress bar
                $('#progress_text').html('80% Complete');
                $('#progress').css('width','272px');
             //slide steps
        $('#fourth_step').slideUp();
        $('#fifth_step').slideDown();   
   }
    });               

// step 5            
    $('#submit_fifth').click(function(){   
   //remove classes
        $('#fifth_step input').removeClass('error').removeClass('valid');
            var fields = $('#fifth_step input[type=text]');
        var error = 0;
        fields.each(function(){
            var value = $(this).val();
            if( $(this).attr('id')=='downPayment' && (value.length<1 || value==field_values[$(this).attr('id')])) {
                $(this).addClass('error');
                $(this).effect("shake", { times:3 }, 50);
               
                error++;
            } else {
                $(this).addClass('valid');
            }
        });

        if(!error) {
    //update progress bar
                $('#progress_text').html('100% Complete');
                $('#progress').css('width','339px');         
        //prepare the fourth step
        var fields = new Array(
            $('#fullname').val(),
            $('#dateofbirth').val(),
            $('#phone').val(),
            $('#email').val(),
            $('#currentaddress').val(),
            $('#JobTitle').val(),
            $('#AnnualIncome').val(),
           $('#IncomeType').val(),
            $('#TotalMonthlyPayments').val(),
            $('#TotalSavings').val(),
          $('#cfullname').val(),
            $('#cdateofbirth').val(),
            $('#cphone').val(),
            $('#cemail').val(),
            $('#ccurrentaddress').val(),
          $('#cJobTitle').val(),
            $('#cAnnualIncome').val(),
            $('#cIncomeType').val(),
            $('#cTotalMonthlyPayments').val(),
            $('#cTotalSavings').val(),
            $('#PurposeofMortgage').val(),
            $('#DoYouWant').val(),
            $('#downPayment').val(),
            $('#propertyAddress').val(),
            $('#comments').val()
                            
        );
        var tr = $('#sixth_step tr');
        tr.each(function(){
            //alert( fields[$(this).index()] )
            $(this).children('td:nth-child(2)').html(fields[$(this).index()]);
        });
               
        //slide steps
        $('#fifth_step').slideUp();
        $('#sixth_step').slideDown();   
      }else{
            return false;   
      }
    });

//step 6
    $('#submit_sixth').click(function(){
        //send information to server
        alert('Thanks');
    });

});

Mod edit:

 . . .

tags added.

awkward_clam · November 29, 2010

So points of interest:

//step 6

$('#submit_sixth').click(function(){

//send information to server

alert('Thanks');

});

What do I change? I'm so bad at this, going to the library today to take out a book. thx

ejaboneta · November 30, 2010

Step 6 isn't sending anything. It's just alerting the user with "Thanks".

Try changing the line with the <form.... to this (to give your form a name):

<form name="myform" action="http://www.bluehost.com/bluemail" enctype="multipart/form-data" method="POST">

and changing step six to this (to tell it send the form):



//step 6
    $('#submit_sixth').click(function(){
        //send information to server
        alert('Thanks');
        document.myform.submit();
    });

awkward_clam · November 30, 2010

Hmmm, didn't change anything yet.

So here is what I have:

On page:

......

<h1>Summary</h1>

<h2 style="margin-left:60px">Summary</h2>

<tr><td>Fullname</td><td></td></tr>

<tr><td>Date of Birth</td><td></td></tr>

<tr><td>Phone</td><td></td></tr>

<tr><td>Email</td><td></td></tr>

<tr><td>Current Address</td><td></td></tr>

<tr><td>Job Title</td><td></td></tr>

<tr><td>Annual Income</td><td></td></tr>

<tr><td>Income Type</td><td></td></tr>

<tr><td>Total Monthly Payments</td><td></td></tr>

<tr><td>Total Savings</td><td></td></tr>

<tr><td>Co-Applicant Fullname</td><td></td></tr>

<tr><td>Co-Applicant Date of Birth</td><td></td></tr>

<tr><td>Co-Applicant Phone</td><td></td></tr>

<tr><td>Co-Applicant Email</td><td></td></tr>

<tr><td>Co-Applicant Current Address</td><td></td></tr>

<tr><td>Co-Applicant Job Title</td><td></td></tr>

<tr><td>Co-Applicant Annual Income</td><td></td></tr>

<tr><td>Co-Applicant Income Type</td><td></td></tr>

<tr><td>Co-Applicant Total Monthly Payments</td><td></td></tr>

<tr><td>Co-Applicant Total Savings</td><td></td></tr>

<tr><td>Purpose of Mortgage</td><td></td></tr>

<tr><td>How much is your down payment?</td><td></td></tr>

<tr><td>What is the property address (if applicable)</td><td></td></tr>

<tr><td>Comments</td><td></td></tr>

</table>

</div>

<div class="clear"></div>

</div>

apply.js

....

//step 6

$('#submit_sixth').click(function(){

//send information to server alert('Thanks'); document.myform.submit(); });

Only showing an alert box when I click submit

});

ejaboneta · November 30, 2010

Yes, try that. Is your form on the page http://www.yourvancouvermortgagebroker.ca/apply? I was just looking at it.

awkward_clam · November 30, 2010

Yes, try that. Is your form on the page http://www.yourvancouvermortgagebroker.ca/apply? I was just looking at it.

Yeah that's it. I already updated the code you gave but I haven't noticed any changes.

I really appreciate your help.

ejaboneta · November 30, 2010

Well looking at the source code for that url (http://www.yourvancouvermortgagebroker.ca/apply), it looks like you didnt add the form name.

awkward_clam · November 30, 2010

You, sir, are a baby angel.

Thank You so much, made my day. That would have taken me so long to figure out just reading through forums.

Sign In

Need help submitting a form

Recommended Posts

awkward_clam

Link to comment

Share on other sites

ejaboneta

Link to comment

Share on other sites

Pikachu2000

Link to comment

Share on other sites

awkward_clam

Link to comment

Share on other sites

awkward_clam

Link to comment

Share on other sites

ejaboneta

Link to comment

Share on other sites

awkward_clam

Link to comment

Share on other sites

ejaboneta

Link to comment

Share on other sites

awkward_clam

Link to comment

Share on other sites

ejaboneta

Link to comment

Share on other sites

awkward_clam

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information