Forms and Validation Patterns

Reading Form Values

$('#name').val();
$('input[name=email]').val();
$('input[name=plan]:checked').val();      // radio
$('select').val();                          // selected option

Serializing the Whole Form

var data = $('#signup').serialize();        // name=value&email=...
var obj = $('#signup').serializeArray();    // array of {name, value}

serialize() builds a query string ready for $.post or a URL. serializeArray() gives structured objects for JSON APIs.

Client-Side Validation

$('#signup').on('submit', function (e) {
  e.preventDefault();
  var email = $('#email').val();
  if (!email || email.indexOf('@') === -1) {
    $('#email').addClass('is-invalid');
    return;
  }
  $(this).trigger('submit');  // or post via AJAX
});

Disabling Submit While Working

$('#submit').prop('disabled', true).text('Sending...');
// ... after AJAX completes ...
$('#submit').prop('disabled', false).text('Send');

Key Points

• .val() reads and writes input values.
• .serialize() and .serializeArray() package form data.
• Client-side checks warn users instantly; always re-validate on the server.
• Disable the submit button during AJAX to prevent double posts.