empty required field didn't prevent the form from being submitted - javascript

Here i have a text editor and a preview button.The job of the preview button is to get content from the editor and and append it in a div and create another button called "submit".I attached a click event to this button button which will submit the form.But problem is if i left any required field empty ,the form is getting submitted anyway.if i left the title field empty a submit button inside the form element is prevented the form from being submitted,but a outside form submit button submit the form if the required title field remains empty.
How to prevent this?
<form action='test.php' method='post' id='editorform'>
<div id='title'>
<label for='editorTitle' id='foreditorTitle'>Title
<input type='text' placeholder='Title of the content' id='editorTitle' autocomplete='off' required>
</label>
</div>
<div id='editordiv'>
<textarea name="editor1" id="editor1" rows="10" cols="50" required>
This is my textarea to be replaced with CKEditor.
</textarea>
</div>
<div id='preview'>
<input type='button' id='previewButton' value='preview' >
</div>
</form>
<div id='content' style='width:750px;position:relative;top:50px;'></div>
<script>
CKEDITOR.replace( 'editor1');
$("#previewButton").click( function lol(event){
var content=$('#content');
content.html('');
var el=CKEDITOR.instances.editor1.getData();
var html=$.parseHTML(el);
content.append(html);
$("<input id='sub' type='button' value='submit'/>").appendTo(content);
$(document).on('click','#sub',function(){
$("#editorform").submit();
});
});
</script>

Validation is not done automatically when the form is submitted via the .submit() method.
In modern browsers you can use the validity API to force validation checking.
$(document).on("click", "#sub", function() {
var form = $("#editorform")[0];
if (!form.reportValidity || form.reportValidity()) {
form.submit();
}
});
The !form.reportValidity test allows this to work on older browsers, they'll skip the checks.
DEMO

Related

Google reCaptcha attribute 'data-callback' causing page refresh on alert

I have added Google reCaptcha v3 script to my form. The form also includes validation that alerts the user to complete the input field. Now when the user clicks on submit button directly, an alert is shown and when OK is clicked the page refreshes and form data is submitted in the backend. I have tried adding return false and e.preventdefault() in the function but the page still resets after the alert. If I try to add any additional condition to the data-callback function, the submit button stops working.
HTML
<html>
<head>
<script src="https://www.google.com/recaptcha/api.js"></script>
<script>
function onSubmit(token) {
document.getElementById("demo-form").submit();
}
</script>
<script>
function validateForm() {
var fname = document.forms.WebForm.fname.value;
if (fname == "") {
alert("Please fill out all the fields");
return false;
}
}
</script>
</head>
<body>
</style>
<div class="container">
<form action="https://www.samepage.com" method="post" id="demo-form" name="WebForm">
<div>
<div>
<input name="fname" id="fname" type="text" placeholder="First name*" required/>
</div>
</div>
<div>
<div>
<input type = "submit" style = "font-weight: bold;" value="Submit" class="g-recaptcha button" data-sitekey="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
data-callback='onSubmit'
data-action='submit'
onClick="return validateForm()"/>
</div>
</div>
</form>
</div>
</body>
</html>
Even the required attribute in the input tag doesn't work with the recaptcha script added. When I remove the data-callback attribute and the supporting script functions, the alert and form works as expected.

After submit, input text disappears and reload the page(AJAX)

Why my page reloads even I used ajax to it and it also disappears my input text after clicking the submit button. I already used show to solve it but it doesn't work.
<form method="POST" action="<?php $_SERVER['PHP_SELF'];?>">
<input type="text" name="name" id="name">
<span id="namenotif" style="color:red;"> <span>
<br>
<input type="text" name="price" id="price">
<span id="pricenotif" style="color:red;"> <span>
<br>
<input type="submit" name="submit" id="save"><br>
</form>
<script>
$(document).ready(function() {
$(document).on("click","#save",function(){
var name = $("#name").val();
var price = $("#price").val();
if(name==""){
$("#namenotif").html("Enter a name");
$("#name").show("fast");
$("#save").show("fast");
}
else if(price==""){
$("#pricenotif").html("Enter a price");
$("#price").show("fast");
$("#save").show("fast");
}else{
$.ajax({
url:"addproduct.php",
type:"POST",
data:{name:name,price:price},
success:function(data){
alert("Successful");
}
});
}
});
});
</script>
add return false to end of function, that handle click event
Two solutions:
Change the button type='submit' to type='button'
or ( and preferably )
Change the event listener to listen for the form's onSumbit event then call event.preventDefault or in jQuery, I think you just do return false in the callback.
The form is being submitted I think, because it is the default behavior of submit button to submit the form, no matter if you used ajax or not. so you can prevent the default behavior by simple adding a code in jquery. Modify the code like this:
$(document).on("click","#save",function(e){
e.preventDefault();
...............
Rest of the codes can remain same. so only prevent the default action, it should work.
Its because of type="submit"
Use
<input type="button" name="submit" id="save"><br>
Or
<a href="javascript:void(0) id="save">
or
jquery's preventDefault();

Multiple JavasScript submits in the same form

When I click on submit1 and then on submit2 everything is going well, but, when I press Enter Key on 1st input text I go to the second part
When I press Enter Key on the 2nd input text -> 1st JavaScript function executes which causes me trouble.
I don't want to disable Enter Key press, but that he executes the good submit input.
Is there a way to deactivate submit1 after he has been executed?
Or know from which input text Enter Key has been pressed?
HTML:
<div id="1">
<input type="text" placeholder="name"/>
</div>
<div id="2">
<input type="submit" value="submit" id="submit1"/>
</div>
<div id="3">
<input type="text" placeholder="firstname"/>
</div>
<div id="4">
<input type="submit" value="submit" id="submit2"/>
</div>
CSS:
#3, #4
{
display: none;
}
JavaScript:
$(document).ready(function() {
$("#submit1").click(function () {
/* Verify data with javascript and send it with Ajax */
/* if everything is ok display: */
document.querySelector("#2").style.display = "none";
document.querySelector("#3").style.display = "block";
document.querySelector("#4").style.display = "block";
});
$("#submit2").click(function () {
/* Verify data with javascript and send it with Ajax */
});
});
Unless I misunderstood the question - you are simply trying to make sure that the correct event handler gets called based on which button is selected by the user. This will work fine as long as the buttons have unique IDs which they do - and you can associate them with the correct event handler (which it seems like you are doing in the shared code).
Also, you can disable any button using the disabled attribute (set it to true).
to disable
document.getElementById("submit1").disabled = true;
to enable:
document.getElementById("submit1").disabled = false;
From what I can tell your biggest problem here is that you seem to have two submit buttons in a single form tag. I would seriously recommend against this as it can cause issues like the one you are experiencing. Instead I would change both to buttons and add the submit functionality to JavaScript methods as you are kind of doing now.
Obviously though you would want to link the text boxes to a button then and for that I would take a look at this SO question How to trigger HTML button when you press Enter in textbox?
<input type="submit"> is a special control. It will cause the form to submit if the form has focus and the enter button is pressed. When using this you should make use of event.preventDefault() to cancel that behavior when binding to the click event. I suggest using <button type="button"><button> instead.
If you press ENTER on submit1, submit2 will not be selected unless you hit TAB. Are you doing this?
Anyway, you can do this:
$("#submit1").click(function () {
/* Verify data with javascript and send it with Ajax */
/* if everything is ok display: */
$("#submit2").focus(); // This will automatically focus the user on the second submit button //
});
This will force the user, the next time he hits ENTER, to submit the submit2 button.
But don't use .submit()... you should use the .submit() function instead of .click(), because I believe .click() only checks for mouse clicks?
$("#submit1").submit(function(){
/* Blah blah blah... */
$("#submit2").focus(); // This will automatically focus the user on the second submit button //
});
$("#submit2").submit(function(){
/* ... */
});
As other users have said, are submit1 and submit2 in the same <form> tag:
Yes, they were. But you shouldn't have 2 fields in the same <form> tag if you want to submit the data separately.
Do this:
HTML
<form>
<div id="1">
<input type="text" placeholder="name"/>
</div>
<div id="2">
<input type="submit" value="submit" id="submit1"/>
</div>
</form>
<form>
<div id="3">
<input type="text" placeholder="firstname"/>
</div>
<div id="4">
<input type="submit" value="submit" id="submit2"/>
</div>
</form>
JQuery
$("#submit1").submit(function(e){
/* Blah blah blah... */
e.preventDefault(); // Keeps the user on the same page //
});
$("#submit2").submit(function(e){
/* ... */
e.preventDefault(); // Keeps the user on the same page //
});
I let it work like that:
Why should I have troubles with one form? IE < 6?
HTML:
<form>
<div id="1">
<input type="text" id="text1"/>
</div>
<div id="2">
<input type="submit" value="submit" id="submit1"/>
</div>
<div id="3">
<input type="text" id="text2"/>
</div>
<div id="4">
<input type="submit" value="submit" id="submit2"/>
</div>
</form>
CSS:
#3, #4
{
display: none;
}
JAVASCRIPT:
$(document).ready(function() {
$('#text2').keypress(function(e){
if(e.keyCode==13)
$('#submit2').click();
});
$("#submit1").click(function () {
/* Verify data with javascript and send it with Ajax */
/* if everything is ok display: */
document.querySelector("#2").style.display = "none";
document.querySelector("#3").style.display = "block";
document.querySelector("#4").style.display = "block";
document.querySelector("#submit1").disabled = true;
});
$("#submit2").click(function () {
/* Verify data with javascript and send it with Ajax */
});
});

jQuery - How do I submit the cloned forms?

How can I submit all the cloned forms at the same time?
I made a script to clone my form, and I want to submit all the cloned forms. How can I do that?
HTML:
<div id='forms'>
<div class='cform'>
<form id='form' method='POST'>
<input style='width: 80px;' class='hihi' type='submit' name='add_jo' value='Submit all' />
<td><input class='txtedit' placeholder='Job name' type='text' name='jo[]' maxlength='130' /></td>
</form>
</div>
</div>
jQuery
$('.clone').click(function(event) {
event.preventDefault();
var tr = $('.cform:first');
var newTr = tr.clone();
newTr.find(":input").val(''); // find all input types (input, textarea etc), empty it.
newTr.appendTo(tr.parent());
});
Submitting a form is triggering request for new page load, thus you can't submit several forms simultaenously. Try to collect all forms' values in a hidden form to be submitted or use some AJAX to do the job without actually submitting form data.
Alternatively you could clone your form's content to extend the form itself.
<form action="..." method="post">
<div class="cloneable">
<input name="data[]" value="" />
</div>
<button id="extend">Clone</button>
<button type="submit" id="submit">Submit</button>
</form>
Your JS might look like this:
$("#extend").click( function() {
$(".cloneable")
.clone()
.insertBefore( $("#extend") );
} );

Detect post action in a form

I want to do something when a form is submitted.
var ispostaction = false;
$("#myform").submit(function () {
ispostaction = true;
});
When the form is submitted the .submit(function ()) is not called.
Is there anything wrong that I'm doing? I have the form id as myform.
I would appreciate any help.
Here's my xhtml page. I'm using JSF 2
<form id="myform" class="someclass" enctype="application/x-www-form-urlencoded"
action="pagename.jsf" method="post">
// custom input text field
// selectOneMenu
// a few more input text fields
// submit button is below
<input id="javax.faces.ViewState" type="hidden" autocomplete="off" value="...." name="javax.faces.ViewState">
</form>
The jquery documentation:
The submit event is sent to an element when the user is attempting to submit
a form. It can only be attached to <form> elements. Forms can be submitted
either by clicking an explicit <input type="submit">, <input type="image">,
or <button type="submit">, or by pressing Enter when certain form elements
have focus.
Calling the submit function will not trigger the submit event. You can "fix" this by adding a hidden button which you click from jquery instead. Most, if not all, browsers unfortunately display the same behavior.
<html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<body>
<form id="myform" enctype="application/x-www-form-urlencoded"
action="posturl" method="post">
// custom input text field
// selectOneMenu
// a few more input text fields
// submit button is below
<input id="javax.faces.ViewState" type="hidden" autocomplete="off" value="...." name="javax.faces.ViewState">
<input type="text" value="a value" />
<input id="submit" type="submit" value="submit" style="display: none;" />
</form>
<script type="text/javascript">
$(document).ready(function() {
$("#myform").bind('submit', function() {
alert('');
});
$("#submit").click();
});
</script>
</body>
</html>

Categories

Resources