Question 182276 in Html Question posted in
Some basic documentation can be found here.

Html – Form not sending, POST

I have my form

    <form class="newsletter" action="https://sendy.thegoodfellas.net/sendy/subscribe" method="POST" accept-charset="utf-8">
  <span class="container active">
    <label for="name">What's your name?</label>

    <input class="required" type="text" name="name" id="name"/>
    <span class="next" title="next"></span>
  </span>
  <span class="container">
    <label for="email">What's your email?</label>
    <input class="required" type="email" name="email" id="email"/>
  </span>
  <span class="submit" type="submit" name="submit" id="submit"></span>
</form>

and the JS

$('.next').click(function(){
  var nextTarget = $(this).parent().siblings('span');
  var currentTarget = $(this).parent();
  currentTarget.removeClass('active');
  nextTarget.addClass('active').find('input').focus();
});

$('input#email').on('keydown',function(e){
  var keyCode = e.keyCode || e.which; 
  if (keyCode == 13) {
    $('.submit').trigger('click');
  }
})

$('.submit').click(function(){
  var target = $(this);
  var lastInputContainerLabel = target.parent().find('.container.active label');
  target.addClass('submitted');
  lastInputContainerLabel.addClass('fadeOut');
})

But for some reason, when the form is submitted i do not see the post call in network. Nothing is sent.

https://thegoodfellas.net/beatsoutsideblockparty/

Please help debug. Not a master of JS.

Tags:

2

Answers


  1. 0

    This line of HTML:

    <span class="submit" type="submit" name="submit" id="submit"></span>

    is not valid. type="submit" is not a recognised attribute of a <span> element.

    You really have two choices:
    a) change your <span> "submit" element to an <input> element (and style it as required), or b) add an extra line in your javascript code to actually submit the form

    $('.submit').click(function(){
  var target = $(this);
  var lastInputContainerLabel = target.parent().find('.container.active label');
  target.addClass('submitted');
  lastInputContainerLabel.addClass('fadeOut');
  document.forms[0].submit();
})

    Alternatively, if you give your <span> "submit" element an ID then you could reference it directly by the ID (particularly useful if you have multiple forms within your page, to be doubly sure you’re submitting the correct one)

    eg.

    <span class="submit" id="submitSpan">Submit Me</span>

document.getElementById('submitSpan').submit();
    Login or Signup to reply.
  2. 0

    You did not submit your form, add $("form.newsletter").submit(); in $('.submit').click function.

    $('.submit').click(function(){
  var target = $(this);
  var lastInputContainerLabel = target.parent().find('.container.active label');
  target.addClass('submitted');
  lastInputContainerLabel.addClass('fadeOut');
  //---Add this------
  $("form.newsletter").submit();
})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search