I need to disable only the error message of HTML Validation; the actual validation should still be there. User won't submitted the form without filling text field. Even if the user does not fill in a required text field, I don't want to display any message like "Please fill out this field".
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="" required>
<br>
<input type="submit" value="Submit">
</form>
You can use novalidate attribute to skip validation from HTML and then add validation code on javascript - on submit event.
HTML:
<form novaidate>
First name:<br>
<input type="text" name="firstname" value="" required>
<br>
<input type="submit" value="Submit">
</form>
JS:
$('form').submit(function(){
//check validations and submit through AJAX
return false;
});
Related
How to make a form that submit to a text field below
<form action="">
Text: <input type="text" name="firstname">
<input type="submit" value="Submit"><br><br>
Post text: <input type="text" name="firstname">
</form>
You will need to use JavaScript for that:
<script>
function submitted() {
formValue = document.getElementsByName("firstname")[0].value;
document.getElementsByName("firstname")[1].setAttribute("value", formValue); // Copy the value
return false;
}
</script>
<form onsubmit="return submitted()"> <!-- Call submitted when the form is submitted -->
Text: <input type="text" name="firstname">
<input type="submit" value="Submit"><br><br> Post text: <input type="text" name="firstname">
</form>
However, there is no need for a form for that. The onsubmit attribute is mostly used for when you want to alert the user that the form was submitted; the actual submission is done on the server through PHP or something else, and not through JavaScript (since the user has access to the JavaScript code and could change the input checking process as he wishes). Here you could simply have something like this:
<script>
function submitted() {
formValue = document.getElementById("firstname").value;
document.getElementById("postFirstname").setAttribute("value", formValue); // Copy the value
}
</script>
Text: <input type="text" id="firstname">
<button onclick="submitted()">Submit</button>
<br><br> Post text: <input type="text" id="postFirstname">
I am following the tutorial of HTML Forms,
reference to the 'Name Attribute', it says "Each input field must have a name attribute to be submitted."
However, in the official exmaple, type submit input does not follow the rule.
<form action="/action_page.php">
First name:<br>
<input type="text" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
If there's no name/value pair, how can the server capture the 'submit' action?
This is an example of what not to do.
Each input field must have a name attribute to be submitted.
If the name attribute is omitted, the data of that input field will
not be sent at all.
This example will only submit the "Last name" input field:
<form action="/action_page.php">
First name:<br>
<input type="text" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
How can I add a string to the text written by the user of my form?
For example, if he wants to search for "test", my form should submit "site:mysite.de test".
(The name where I'm trying to send the string to is q.)
I tried with
<form action="https://searx.me" method="get" accept-charset="UTF-8">
<input type="text" name="q" placeholder="Search with Searxes" required>
<input type="hidden" name="q" value="site:mysite.de">
</form>
How expected only the first value is submitted https://searx.me/?q=test
I would prefer a solution with pure html without javascript.
Here is an ugly way to do that, looks like binding ;)
var hidden = document.getElementsByClassName('hidden')[0];
var hidden_attr = hidden.getAttribute('value');
var show = document.getElementsByClassName('show')[0];
function magic(){
hidden.setAttribute('value', hidden_attr + show.value);
console.log(hidden.getAttribute('value'));
}
<form action="https://searx.me" method="get" accept-charset="UTF-8">
<input class="show" onkeyup="magic()" type="text" name="q" placeholder="Search with Searxes" required>
<input class="hidden" type="hidden" name="q" value="site:mysite.de ">
</form>
My html code is
<div>
<div>
<form name="form 1" ng-submit="submitForm1()">
<input type="text" required name="text1">
</form>
</div
<div>
<form name="form 2" ng-submit="submitForm2()">
<input type="text" required name="text2">
</form>
</div>
</div>
and in my controller i am accessing the form using scope.controller looks like
$scope.submitFrom1 = function(){
console.log(form1);
}
$scope.submitFrom2 = function(){
console.log(form2);
}
but in result first form will give object and second form is returning undefined
I am getting why this is happening.
You have to use ngModel for the fields inside each form to access data.
https://docs.angularjs.org/api/ng/directive/ngModel
<form name="firstForm" ng-submit="submitForm1()">
<input type="text" required name="text1" ng-model="firstForm.text1>
</form>
<form name="secondForm" ng-submit="submitForm2()">
<input type="text" required name="text1" ng-model="secondForm.text1>
</form>
In controller
$scope.firstForm.text1 to access the data from first form individually.
$scope.secondForm.text1 to access the data from second form individually.
To get full form object just use.
$scope.firstForm;
$scope.secondForm;
Remove the spaces from the form names.
<!-- remove spaces from form name
<form name="form 1" ng-submit="submitForm1()">
-->
<form name="form1" ng-submit="submitForm1()">
<input type="text" required name="text1" ng-model="a">
</form>
<!-- remove spaces from form name
<form name="form 2" ng-submit="submitForm2()">
-->
<form name="form2" ng-submit="submitForm2()">
<input type="text" required name="text2" ng-model="b">
</form>
It was causing $parse errors.
The DEMO on JSFiddle
I have a problem with a form. It is not sending any action (page not even refreshing on click). If I copy the form in another document locally it has no problem, all working well, mail message being sent. Here is the code of the form:
<form method='post' name='ContactForm' id='contactForm' action='contact_main.php'>
<p>Your name:</p>
<input type="text" class="input-box" name="user-name" placeholder="Please enter your name.">
<p>Email address:</p>
<input type="text" class="input-box" name="user-email" placeholder="Please enter your email address.">
<p>Subject:</p>
<input type="text" class="input-box" name="user-subject" placeholder="Purpose of this message.">
<p class="right-message-box">Message:</p>
<textarea class="input-box right-message-box message-box" name="user-message" placeholder="Your message."></textarea>
<button type='submit' class='myinputbtn' name='submitf' id="submitf">Send your message</button>
<div id='message_post'></div>
<input type="hidden" name="contact">
</form>
Clicking the submit button results in... nothing!
Please let me know if I need to edit my question before downrating. Thanks!
Use
<input type="submit" ...
instead of a button (which is used with Javascript, not for form submitting)