Form not sending, POST

Question

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 the network. Nothing is sent.

https://thegoodfellas.net/beatsoutsideblockparty/

How should I debug it?

https://stackoverflow.com/questions/9855656/how-can-i-submit-a-form-using-javascript You don't currently have any line of code that actually submits your form. type="submit" is not really a valid attribute for a element — Craig, Jun 04 '23 at 22:07

score 1 · Answer 1 · answered Jun 04 '23 at 22:20

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();

score 1 · Answer 2 · answered Jun 04 '23 at 22:25

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();
})

Form not sending, POST

2 Answers2