Inserting <noscript> or similar within form tag (HTML, JavaScript)

Question

I have the following form:

<form id="signup" onsubmit="return false;">
  ... form content...
  <input class="button" type="submit" />
</form>

Where upon clicking the button, a JavaScript function signup() is called. This function uses an AJAX call to validate the form (compare to current database values), and then submit the form via a PHP function.

My question is: If the user has their JavaScript disabled in their browser, is there a way that I can modify the <form> tag to include an action and method?

Since HTML5 allows <noscript> tags within the body, I thought I'd try something like:

<form id="signup" <noscript>action="..." method="post"</noscript>>

but that doesn't work.

If the user has their JS enabled, I would like the AJAX calls to handle everything - it makes for a very clean user experience. BUT, I need it to still be functional for those people who have disabled their JS.

Thank you in advance.

since you already have onsubmit handler which always returns false for clients with JS enabled, why don't you simply do this: <form onsubmit='return false;' method='post' action='otherpage.php'>? — naivists
– naivists, Commented Jan 12, 2015 at 7:29
Very simple. I might double-up with this and Christian's answer, just for paranoia sake. — Birrel
– Birrel, Commented Jan 12, 2015 at 7:36

Christian · Accepted Answer · 2015-01-12 07:25:42Z

5

You're looking at it the wrong way round. You always want to include the action and method attributes on your form.

<form id="signup" action="/path/to/signup" method="post">

Then you bind a function to the submit event, and prevent the form from submitting by using .preventDefault(); (I'm assuming jQuery usage here)

$('#signup').on('submit', function(e) {
    e.preventDefault();

    // submit data via ajax here
});

This is much better, because you don't have to set the login URL in your javascript any more. You simply get it from the form.

$.ajax({
  type: "POST",
  url: $('#signup').attr('action'),
  data: $('#signup').serialize()
})
  .done(function( msg ) {
    // logged in (or not)
  });

edited Jan 12, 2015 at 7:25

answered Jan 12, 2015 at 7:19

Christian

19.8k3 gold badges57 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Prasanna · Accepted Answer · 2015-01-12 07:26:20Z

0

Try Like This example

<form action="calcSquare.php">
<p>
<label for=x>Number</label>:
<input id="x" name="x" type="number">
</p>
<script>
var x = document.getElementById('x');
var output = document.createElement('p');
output.textContent = 'Type a number; it will be squared right then!';
x.form.appendChild(output);
x.form.onsubmit = function () { return false; }
x.oninput = function () {
  var v = x.valueAsNumber;
  output.textContent = v + ' squared is ' + v * v;
};
</script>
<noscript>
<input type=submit value="Calculate Square">
</noscript>
</form>

answered Jan 12, 2015 at 7:26

Prasanna

993 bronze badges

Collectives™ on Stack Overflow

Inserting <noscript> or similar within form tag (HTML, JavaScript)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related