I have a form with few inputs and all those inputs are required..I am using bootstrap..
Sample
<input type="email" require="yes">
It works fine it ask for a proper email if it is empty a little warming appears saying wrong email format or this field is required.
All this check happens when the user clicks on submit button... what on the submit button I also want to
add a confirm box like "Are sure ? "...
I added the confirm action using bootbox and it works fine but my problem is that:
When the users click the inputs are checked the warning appears for a second and the confirm box too ... so my problem is that I dont want the confirm box appears unless all the inputs pass the checks ..
Thanks I hope I was clear...
<script src="js/bootbox.min.js"></script>
<script>
// Confirm Box ..
$(document).on("click", ".confirm", function(e) {
bootbox.confirm("Are you sure?", function(result) {
console.log("Confirm result: "+result);
});
});
</script>
<input type="email" placeholder="email" class="contact-input" required="yes">
<button id="contact-input" name="request_meet" class="btn btn-primary confirm">Send</button>
If you add a submit event to your button in javascript you can catch the submit before opening the confirm:
$('form').submit(function(e) {
if (!$('#emailField').val()) {
e.preventDefault();
return false;
}
});
Related
How can I display a message on the redirected page after submit a form?
I have a form on my page that after submitting the form it redirects to the index.html. After redirecting I have a div with a message that is set to display:none. What I'm trying to do is to set to display:block the div for a couple seconds then set the display back to none. Here is what I have so far:
<input type="hidden" name="_next" value="index.html">
<button onclick="emailSubmit()" class="sub-button" type="submit" value="Send Message" style="margin-bottom: -35px;">Send Message</button>
<script>
function emailSubmit() {
setTimeout(function(){ document.getElementById("confirmation").style.display = "block"; }, 500);
setTimeout(function(){ document.getElementById("confirmation").style.display = "none"; }, 3000);
}
</script>
Cold You please share Your code? How does your html file Look like?
Where Do You keep Your message?
As far You only hidden and show dom element. It is Look like the div is empty.
<form name="mForm" action="${pageContext.request.contextPath}/login/insertSeller.do" method="post">
id : <input type="text" name="id" />
<input type="submit" value="register" onClick="doAction()" />
</form>
<script>
function doAction() {
var f = document.mForm;
var id = f.id;
if (id.value == "") {
alert("insert your id");
id.focus();
return false;
}
return true;
}
</script>
Is there any error to correct?
If I click the button, the alert window opens with a message,
but the data is submitted without the validation check.
What do I need to do?
Please help me :)
You really shouldn’t have inline event handlers in modern HTML. Nevertheless, you could try the following:
<input … onclick="return doAction()">
The return in the onclick causes the input to wait for permission.
For the sake of completeness, here is how I would do it in a modern browser:
First, use a button instead:
<button type="submit">register</button>
Second, give your button a name
<button name="register" type="submit">register</button>
You can give a name to the older style input element, and the process will still work.
Next, add the following to your JavaScript:
document.addEventListener('DOMContentLoaded',function() {
document.querySelector('button[name="register"]).onclick=doAction;
},false);
The main function acts as a startup script. The point of it is that it is waiting for the DOM to have loaded. Otherwise it’s not possible to look for elements that aren’t there yet.
Note that you assign to the onclick event handler the name of the function.
I have created a form with a submit button, the submit button is outside the actual form but its targeting the form using the form attribute for example.
<form id="myform">
</form>
<button form="myform"></button>
I apologize for the week example. This is working accross all browsers except IE 11. IE 8-10 is working 100%. Any ideas on how I can fix this. I prefer not writing scripts. I can do this with jQuery but I prefer to just keep it clean if possible
This is a solution with just a click event and a line of css. ( Minimal )
If your button has to be outside the form due to User Interface design.
I would suggest you add an input submit/button inside the form:
<form id="myform">
<input type="button" value="Submit" class="myButton" />
</form>
<button id="outerBtn">Submit</button>
Hide the input:
.myButton {display:none;} OR {visibility:none;}
Use jQuery to trigger click the input button inside the form:
$('#outerBtn').on('click', function(e){
e.preventDefault();
$('.myButton').trigger('click');
});
Just some quick answer. Should be alright.
If you do not want to write script, I would suggest you just keep your input button/submit inside the form.
<form id="form-any-name">
<input type="button" value="Submit" class="myButton" />
</form>
<button type="submit">Submit</button>
<script type="text/javascript">
$(document).ready(function() {
$('button[type=\'submit\']').on('click', function() {
$("form[id*='form-']").submit();
});
});
</script>
Simply include document on ready submit catcher you can place that code in main js file since we catching dinamicaly form id starting with form- so in other pages you can have the different foms:)
I would like to post my answer as this post helped me a lot and I came with an idea that works if you want to add the "button outside the form" functionality on older browsers.
I use JQuery but I dont think I would be a major problem to use pure JS as it's not complicated code.
Just create a class just as some of the answers suggested here
.hiddenSubmitButton {
display: none;
}
$("body").on("click", "button[form]", function () {
/*This will get the clicks when make on buttons with form attribute
* it's useful as we commonly use this property when we place buttons that submit forms outside the form itself
*/
let form, formProperty, formAttribute, code, newButtonID;
formProperty = $(this).prop("form");
if (!(formProperty === null || formProperty === "")) {//Most browsers that don't wsupport form property will return null others ""
return; //Browsers that support the form property won't continue
}
formAttribute = $(this).attr("form");
form = $("#" + formAttribute);
newButtonID = formAttribute + "_hiddenButton";
if (document.getElementById(newButtonID) !== null) {
$("#" + newButtonID).click();
return;
}
code = '<input id="' + newButtonID + '" class="hiddenSubmitButton" type="submit" value="Submit" />';
$(form).append(code);
setTimeout(function () {
$("#" + newButtonID).click();
}, 50);
});
One thing I like about creating buttons outside the form is that they allow us to custom the design more easily and we can use this code and it will work on old browsers and also, the browser will use its HTML form validator.
IE understands 'for', you can use "label for=''".
<label for="form_one_submit">Button one</label>
<form action="" id="form_one">
<span></span>
<input type="submit" id="form_one_submit" style="visibility:hidden;">
</form>
i have a form that i stop from submitting and when confirm message pops up and user clicks yes i want when that happens to submit the form,how can i do that?i tried using fireEvent like this but it wont work...in firebug it says e is undefined.
window.addEvent('domready', function(){
var form=document.adminForm;
form.addEvent('submit', function(e){
var result=confirm("Are you sure!?");
e.stop();
if(result){
form.fireEvent("submit");
}
});
});
you need to stop the event before the confirm and submit after. http://jsfiddle.net/dimitar/qAx6H/
var form=document.id('adminForm');
form.addEvent('submit', function(e){
e && e.stop();
if (confirm('Are you sure?')){
this.submit();
}
});
As far as I understand from your question you want simple confirmation befor submittiong the form. If so, you can use this tiny script:
<input type="submit" OnClick="return confirm('Are you sure!?');" ... />
It will pop-up modal with Ok/Cancel buttons, but works fine for me.
I have a form with several submit buttons. I want my last button to handle the submit rather than the HTML5 spec'ed first button.
I can't change the html at this point and am fairly sure this requires JS. But when I've given it a shot I've gotten into nasty loops or dead code trying to prevent default behaviour and then fire my other button.
Has anyone done this before? jQuery is on the page if needed.
Thanks,
Denis
Since you mentioned jQuery :)
If all you want to do is submit your form when a user presses the enter key, then
$(function() {
$('body').keypress(function(e) {
if (e.which == 13) {
e.preventDefault();
$('#myForm').submit();
}
});
});
However, if you have different behavior/forms depending on which button is clicked and you want the enter key to trigger your last button's click event, then
$(function() {
$('body').keypress(function(e) {
if (e.which == 13) {
e.preventDefault();
$('input[type="submit"]:last').click();
}
});
});
You should just change the input element's type attribute to button instead when you don't want it to submit the form. (I know you said you can't really change the HTML, but this is the best way)
<input type="button" name="mybutton" class="submit-button" value="I wont submit!" />
jQuery code:
$('.submit-button').click(function() {
$('#secret-value-field').val($(this).val());
$(this).parents('form').submit();
});
Or something along those lines.