We Keep Coding

Any attributes to ensure an HTML form can't be submitted?

I want to server-render an HTML form in such a way that it is not submittable until it has been asynchronously enhanced by my JavaScript.
It looks like there's no disabled attribute for the form element (MDN).
I could add a disabled attribute to the submit button (and then later remove this with JavaScript when ready), but the user could still submit the form by focusing any input and pressing Enter.
Is there any way to prevent submission without JavaScript (short of just hiding the form entirely in the server-rendered HTML, and unhiding it with JS)?

use type="button" attribute to your submit button and then change it to type="submit"

You can simply do
onsubmit="return false"
on the form tag:
<form onsubmit="return false">
<label>input
<input type="text" name="input" name="a" />
</label>
<input type="submit" value="submit" />
</form>

Sorry, answering my own question - it turns out it's easy to make a form unsubmittable (in Chrome 69 at least) just by disabling the submit button.
When the only submit button is disabled, then even focusing a text field and pressing Enter does not submit the form.

Check regex validation on submit and focus all input fields if empty

I want to check the regex validation when I click on the button. It works fine when the button type is submit, but it does not redirect to another page where I have linked the button - however when I change its type to button it redirects to the other page normally and does not check the regex validation. I am also checking if all the input fields are filled, and focusing any empty fields. But I guess something is wrong with the code.
Demo
HTML CODE:
<form action="" method="POST" role="form" class="payment_form">
<div class="contact_details">
<div class="payment_details">
<div class="form-group">
<input type="text" class="input_name" id="fullName" pattern="^([a-zA-Z]+\s)*[a-zA-Z]+$" title="Type only characters" name="fullName" placeholder="FULL NAME" required/>
</div>
<div class="form-group">
<input type="email" class="input_name" id="email" title="Eg: some#mail.com" pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,3}$" name="email" placeholder="EMAIL ADDRESS" required/>
</div>
<div class="form-group">
<input type="text" class="input_name" id="mobileNumber" maxlength="10" pattern="^(\+\d{1,3}[- ]?)?\d{10}$" title="Enter 10 digit Valid Mobile Number" name="mobileNumber" placeholder="MOBILE NUMBER" required/>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary pay_btn" >Continue</button>
</form>
JS:
$('.pay_btn').click(function(e){
$(":input").each(function() {
if($(this).val() === "")
$(this).css('border-color', '#ff0000');
});
});

You have to remove anchor tag from submit button and write the name of html page in action ,this will work fine for page redirection when form is correctly field .For the one field focus at a time you have to change your logic out there .

#Preety Angel , Provide the html file name in the action attribute of form tag <form action="thankyou.html"> like below,
<form action="thankyou.html" method="POST" role="form" class="payment_form">
.......
</form>

I want to check the regex validation when I click on the button. It working fine, when the button type is submit but it does not redirect to another page where i have linked the button,
Whats happening here is, You click on the button who's type is submit, And this button will try to submit the form. So your validation will work on form submit. Since you don't have any url mentioned in the action="" attribute of your form, Your page doesn't know where to go. So solution is add the URL into this action attribute
<form action="thankyou.html" method="POST" role="form" class="payment_form">
but when I am changing the button type to button it redirects to other page normally and does not check the regex validation.
The reason for this is once you remove the button type submit it has nothing to do with the form anymore. Its just a plain button. But you have wrapped this button inside a anchor tag which has a href set. So this is as good as a page redirect by clicking a link, So the form is not submitted at all. Hence your validation keeps quiet. As it works only while form is submitted.

How can I submit div data to MySQL

I was wondering how can I submit div data to MySQL. Im not used to javascript so I dont really know whats happening on the javascript part but how can I get or input the action="" part and method="" part and can I or should I add value="" to the hidden input???
Form html code:
<form onsubmit="document.getElementById('hidden_data').value=document.getElementById('showing_data').innerHTML;">
<input id="hidden_data" name="data" type="hidden"/>
<div id="showing_data" class="commenttext" contenteditable="true"></div>
<input type="submit" Value="Enter" id="submitthis">
</form>

Use the hidden field inside the form tag and use the JavaScript to put the value inside it. You can get the hidden field in the $_POST['hydName'].Put the data on the click of the submit button into the hidden field. Keep your action and method of the form same as required. After the click event is fired, it will submit the form to its action URL
<input type="submit" onclick="document.getElememtById('hidden').value = document.getElementById('div').innerHtml;" />

How can i fire a function inside an input-field? or a default button with that function without actually submitting?

It works:
When the button is used
The problem is:
When pressing enter inside the text-field, the default action seems to be submit. I just want it to use the button available as default. Is this possible or will i have to highjack the enterpress with javascript?
Code:
<form>
<label>Password:<input type="password" id="pass" name="pass"></label>
<input type="button" value="hämta data" onclick="getData('password.txt')"/>
</form>

By default, pressing Enter in the last field of a form submits the form. Try this:
<form onsubmit="return false;">
so that submitting the form doesn't do anything.

Maintain button submit value when using link to submit a form

i am trying to create a link that submits a form. I use this and works fine :
<a name="submit" href="javascript:document.theForm.submit();" class="rollover-button gray small"><span>Send Message</span></a>
However, i have a problem. My previous submit button was :
<input type="submit" name="submit" value="Send Message" />
When this was clicked, i was getting a $_POST['submit'] value that i was checking with isset in my php script, to see whether the form is submitted or not. However, this does not work with my submit link. Does anybody know how i can do that ?
EDIT:
I tried that, as suggested :
<form action="." name="theForm" class="contactForm" method="post">
<input type="hidden" name="submit" value="Send Message" />
</form>
<a name="submit" href="javascript:document.theForm.submit();" class="rollover-button gray small"><span>Send Message</span></a>
But still does not work.

You can create input type of hidden and check for its existence:
if (isset($_POST['hiddenName'])) {....}

You can use a hidden field instead. So when the form is submitted, you can check if the hidden element exists.
Like this:
<input type="hidden" name="submit" value="Send Message" />
This way, you can check for $_POST['submit'] when you submit the form. Just make sure the hidden <input> is inside the <form> element, so it will POST with the rest of the form.

add a hidden input.
<input type="hidden" name="submit" value="Send Message" />
it will not be visible to the user, but it will be send with the form contents.

You can always hide the submit button (with css display: none) and click it with JavaScript:
document.forms.theForm.elements.submit.click();