Member Avatar for thetwig

I bought a template online and i'm trying to develop a website and I'm stuck on the contact form. I can't seem to get it to submit. When I click submit it just remains static, but i'd like to get it to run the action- that is go to the contactTq.php page. Below is all the code i think you need. but if you want the entire .js file it's here: http://pastebin.com/1B1j9pkB

,submitFu:function(){
_.validateFu(_.labels)                          
if(!_.form.has('.'+_.invalidCl).length)
    $.ajax({
        type: "POST",
        url:_.mailHandlerURL,
        data:{
            name:_.getValFromLabel($('.name',_.form)),
            email:_.getValFromLabel($('.email',_.form)),
            phone:_.getValFromLabel($('.phone',_.form)),
            //fax:_.getValFromLabel($('.fax',_.form)),
            //state:_.getValFromLabel($('.state',_.form)),
            message:_.getValFromLabel($('.message',_.form)),
            owner_email:_.ownerEmail,
            stripHTML:_.stripHTML
        },
        success: function(){
            _.showFu()
        }
    })          
},
showFu:function(){
_.success.slideDown(function(){
    setTimeout(function(){
        _.success.slideUp()
        _.form.trigger('reset')
    },_.successShow)
})
},

Here is the form im using:

<form id="contact-form" action="contactTq.php" method="post">
<div class="success"> Contact form submitted! <strong>We will be in touch soon.</strong></div>
<fieldset>
    <label class="name">
        <input type="text" value="Enter Your Name:">
        <span class="error">*This is not a valid name.</span>
        <span class="empty">*This field is required.</span>
        <span class="clear"></span>
    </label>
    <label class="email">
        <input type="text" value="Enter Your E-mail:">
        <span class="error">*This is not a valid email address.</span>
        <span class="empty">*This field is required.</span>
        <span class="clear"></span>
    </label>
    <label class="phone">
        <input type="text" value="Enter Your Phone (optional):">
        <span class="error">*This is not a valid phone number.</span>
        <span class="clear"></span>
    </label>
    <label class="message">
        <textarea>Enter Your Message:</textarea>
        <span class="error">*The message is too short.</span>
        <span class="empty">*This field is required.</span>
        <span class="clear"></span>
    </label>
    <div class="buttons"><strong><a class="button" data-type="reset">Reset<span></span></a></strong><strong><a class="button" data-type="submit">Submit<span></span></a></strong></div>
</fieldset>
</form>

If you need any other info, please let me know. Would appreciate any help. Thanks in advance!

  • 3 Contributors
  • 3 Replies
  • 342 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by thetwig

Dani AI

Generated

Quick diagnosis: the "Submit" control in the form is an anchor, so it won't submit the form by itself — as pointed out. The inline onclick fix in Post #4 triggers the form's native submit, which performs a full page navigation. For an AJAX workflow the form should be handled by a submit event handler that prevents the default action, serializes the fields, posts to the server, and shows the success UI without leaving the page.

A minimal unobtrusive pattern (jQuery) that keeps HTML and JS separated:

$('#contact-form').on('submit', function(e){
  e.preventDefault();
  var $f = $(this);
  var $btn = $f.find('[data-type="submit"],:submit').prop('disabled', true);

  $.ajax({
    url: $f.attr('action'),
    type: ($f.attr('method') || 'POST').toUpperCase(),
    data: $f.serialize(),
    dataType: 'json'
  }).done(function(res){
    $f.find('.success').slideDown();
    setTimeout(function(){ $f.find('.success').slideUp(); $f[0].reset(); }, 3000);
  }).fail(function(xhr){
    console.error('Submit failed', xhr.status, xhr.responseText);
  }).always(function(){ $btn.prop('disabled', false); });
});

Practical checklist and gotchas (gaps seen in the thread)

  • Ensure every input/textarea has a name attribute — without names serialize() sends nothing.
  • Prefer placeholder for hints instead of initial value text so bogus values aren't posted.
  • Use the browser DevTools Network tab to confirm the request goes to contactTq.php and that the server returns the expected status and content-type (JSON if dataType:'json' is used).
  • For file uploads use FormData (processData:false, contentType:false).
  • Follow ’s point: serialize() returns a query string; serializeArray() gives an array of name/value pairs — pick the one that matches the server API.
  • Keep a real submit control for accessibility; enhance it with JS rather than replacing it with anchors.

Recommended Answers

All 3 Replies

Member Avatar for pritaeas

Your "submit" is a link tag, which does not submit automatically. You either need to use Javascript code to trigger the submit, or use <input type="submit"/>

Member Avatar for lambing

+1 to pritaeas..

I suggest you also want to look at using $('#contact-form').serializeArray() method which will return an array of names and values from elements on your form rather than selecting your form elements over and over.

Edited by pritaeas because: Added markdown
Member Avatar for thetwig

thnx a heap pritaeas.. i did some research with your guidance... and the code below does the job:

<div class="buttons"><strong><a class="button" data-type="reset">Reset<span></span></a></strong><strong><a class="button" data-type="submit" href="javascript:{}" onclick="document.getElementById('contact-form').submit();">Submit<span></span></a></strong></div>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.