We Keep Coding

prevent form submission from enter button

i have a live chat messaging system whenever user press enter button it refreshes the page i have tried using prevent default code also but did not worked for me.... here is the code and if there is any problem in the below code please let me know as i'm totally new to website programming
jQuery(document).ready(function() {
jQuery('.btn-success').click(function() {
var form_name = jQuery(this).attr('title');
var obj = jQuery(this);
jQuery(".ajax_indi").show();
switch (form_name) {
case "npost":
var message = jQuery("#message").val();
break;
default:
alert("something went wrong!");
}
if((jQuery(message) == ''))
{
alert("Message Cannot be Empty");
jQuery(".ajax_indi").hide();
return false;
} else {
jQuery(this).attr("disabled", "disabled");
jQuery(this).prop('value', 'Loading...');
jQuery(this).css('cursor', 'default');
}
var str = jQuery("#"+form_name).serialize();
jQuery.ajax({
type: "POST",
url: "chat.php",
data: str,
cache: false,
success: function(html){
jQuery('#chat1').append(html);
obj.attr("disabled", false);
obj.prop('value', 'Post');
obj.css('cursor', 'pointer');
jQuery(".ajax_indi").hide();
document.getElementById(form_name).reset();
}
});
});
});
Edited part
<form id="npost" name="npost">
<input class="form-control" placeholder="Type your message here..."
type="text" name="message">
<input type="hidden" name="id" value="1">
<span class="input-group-btn">
<button type="button" class="btn btn-success" title="npost" >Send</button>

if you want to prevent from submitting the form you can use return false if you want to stop executing the function and stop submitting it

You need to use preventDefault in order to stop form submission on clicking enter because by default form gets submitted when anyone presses enter. So use preventDefault like this:
<script type="text/javascript" >
jQuery(document).ready(function(){
jQuery('.btn-success').click(function(e){ // added e
e.preventDefault(); // added this line
var form_name = jQuery(this).attr('title');
var obj = jQuery(this);
jQuery(".ajax_indi").show();
var message = '';
switch (form_name)
{
case "npost":
var message = jQuery("#message").val();
break;
default:
alert("something went wrong!");
}
if((jQuery(message) == ''))
{
alert("Message Cannot be Empty");
jQuery(".ajax_indi").hide();
return false;
} else {
jQuery(this).attr("disabled", "disabled");
jQuery(this).prop('value', 'Loading...');
jQuery(this).css('cursor', 'default');
}
var str = jQuery("#"+form_name).serialize();
jQuery.ajax({
type: "POST",
url: "chat.php",
data: str,
cache: false,
success: function(html){
jQuery('#chat1').append(html);
obj.attr("disabled", false);
obj.prop('value', 'Post');
obj.css('cursor', 'pointer');
jQuery(".ajax_indi").hide();
document.getElementById(form_name).reset();
}
});
});
});
</script>

Here You should not stop form default action you to prevent enter key default answer here is the code to prevent.
$('#npost').on('keyup keypress', function(e) {
if (e.which== 13) {
e.preventDefault();
return false;
}
});

bootbox.confirm opens and closes immediately when in ajax loaded div

I am using bootbox which I downloaded from http://bootboxjs.com/.
user_update.php is loaded in a div in users.php with ajax.
In user_update.php I have a JavaScript function validateForm(), and below in the same document I have the form which calls this function like so:
<form name= "updateForm" onsubmit="return validateForm()" role="form-horizontal" method="post" action="index.php">
The function bootbox.alert works just fine.
When I use bootbox.confirm I see the dialog opening and closing within a few tenths of a second.
if (roleid != prevroleid) {
bootbox.confirm("Are you sure?", function (result) {
if (result) {
console.log("User confirmed dialog");
} else {
console.log("User declined dialog");
}
});
}
When I test the same function in a div that is not loaded in a div with ajax, then bootbox.confirm works as expected.
EDITED
this is the ajax call:
$(document).on("click", ".gebruiker", function (e) {
e.preventDefault();
//var url = "user_update.php";
//$("#details").load(url)
var idnr = $(this).attr('idnr');
$.ajax({
type: "get",
url: "view/user_update.php",
data: {
variable1: idnr
},
success: function (data) {
//do stuff after the AJAX calls successfully completes
$('#details').html(data);
}
});
});
this is the div it gets loaded in:
<div id="details" class="col-md-6">
</div>
added at 16:43
ValidateFormcode as requested:
<script>
function validateForm()
{
var fullname = $('#fullname').val();
var username = $('#username').val();
var role = document.getElementById("role");
var roleid = role.options[role.selectedIndex].value;
var password1 = $('#password1').val();
var password2 = $('#password2').val();
var prevroleid = $('#prevroleid').val();
if (roleid != prevroleid) {
bootbox.confirm("Are you sure?", function (result) {
if (result) {
console.log("User confirmed dialog");
} else {
console.log("User declined dialog");
}
});
}
if (!fullname)
{
bootbox.alert("Het veld 'Naam' mag niet leeg zijn")
return false;
}
if (!username)
{
bootbox.alert("Het veld 'Gebruikersnaam' mag niet leeg zijn")
return false;
}
if(password1 != password2)
{
bootbox.alert("De waardes in de wachtwoord velden komen niet overeen")
return false;
}
}
</script>

You should prevent the default behaviour of the form when it's not validated.
So validateForm should be like this:
function validateForm(e)
{
var valid = false; // do some validation
if(!valid){
e.preventDefault();
}
}
Elsewise the form gets submitted and the page refreshes, thus closing the confirm dialog.

Instead of using onsubmit="return validateForm()" attribute in the form tag. Put it on the submit button of the form as onclick="return validateForm();return false;"
<input type="submit" onclick="return validateForm();return false;" />
Return true/false from the validateForm() funtion. If true returned then form will be submitted else if false returned form will not be submitted.
Try it. It should work.

Enter key to submit Ajax form

I have a very simple AJAX form that asks for an email address and sends it to me after submitting.
How can I can I get the form to submit when hitting the enter key?
This runs when user clicks submit button:
<script type="text/javascript">
$(document).ready(function () {
$("#submit_btn").click(function () {
// Get input field values:
var user_email = $('input[name=email]').val();
// Simple validation at client's end
// We simply change border color to red if empty field using .css()
var proceed = true;
if (user_email === "") {
$('input[name=email]').css('border-color', 'red');
proceed = false;
}
// Everything looks good! Proceed...
if (proceed) {
/* Submit form via AJAX using jQuery. */
}
});
// Reset previously set border colors and hide all message on .keyup()
$("#contact_form input, #contact_form textarea").keyup(function () {
$("#contact_form input, #contact_form textarea").css('border-color', '');
$("#result").slideUp();
});
});
</script>
I know this question has been asked before -- I'm having trouble getting the keypress function to work.
I tried this to no avail:
$("#contact_form").keypress(function (e) {
if ((e.keyCode == 13) && (e.target.type != "textarea")) {
e.preventDefault();
// Get input field values
var user_email = $('input[name=email]').val();
// Simple validation at client's end
// We simply change border color to red if empty field using .css()
var proceed = true;
if (user_email === "") {
$('input[name=email]').css('border-color', 'red');
proceed = false;
}
// Everything looks good! Proceed...
if (proceed) {
/* Submit form via AJAX using jQuery. */
}
}
});
The form is #contact_form.
Any help would be would appreciated…

Just bind the submit event to your form, and then the enter key will also work:
$("#contact_form").submit(function (e) {
e.preventDefault();
// Get input field values
var user_email = $('input[name=email]').val();
// Simple validation at client's end
// We simply change border color to red if empty field using .css()
var proceed = true;
if (user_email === "") {
$('input[name=email]').css('border-color', 'red');
proceed = false;
}
if (proceed) {
// Insert the AJAX here.
}
});
And the code is here: http://jsfiddle.net/6TSWk/6/

add new class in every fieldbox or checkbox => class keypressbutton
then replace your code on keypress with this, below :
$(document).on("keypress",".keypressbutton",function(event) {
var keyCode = event.which || event.keyCode;
if (keyCode == 13) {
$("#submit_btn").click();
return false;
}
});

$("#myform").keypress(function(event){
if(event.keycode===13){ // enter key has code 13
//some ajax code code here
//alert("Enter key pressed");
}
});

You have two opening brackets in your if statement and miss a closing bracket. Also, I would change e.target.type. Try this:
$("#contact_form").keypress(function (e) {
if ((e.keyCode == 13) && ($('input[name="email"]').is(':focus'))) {
e.preventDefault();
//get input field values
var user_email = $('input[name=email]').val();
//simple validation at client's end
//we simply change border color to red if empty field using .css()
var proceed = true;
if (user_email === "") {
$('input[name=email]').css('border-color', 'red');
proceed = false;
}
}
});

Instead of using button on click function you can use submit button.
Load the validate.js file
function validateEmail(email)
{
var reg = /^\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*$/
if (reg.test(email))
{
return true; }
else{
return false;
}
}
$("#test-form").validate({
submitHandler: function(form) {
//form.submit();
var email=$("#email").val();
if(email=='' )
{
// Here you can type your own error message
$('#valid').css("display","none");
$('#empty').css("display","block");
return false;
}
if (!(validateEmail(email))) {
$('#empty').css("display","none");
$('#valid').css("display","block");
return false;
}
else {
$.ajax({
url: "signup.php",
type: form.method,
data: $(form).serialize(),
success: function(response) {
}
});
}
}
});
});

Simple way is this:
In HTML codes:
<form action="POST" onsubmit="ajax_submit();return false;">
<b>First Name:</b> <input type="text" name="firstname" id="firstname">
<br>
<b>Last Name:</b> <input type="text" name="lastname" id="lastname">
<br>
<input type="submit" name="send" onclick="ajax_submit();">
</form>
In Js codes:
function ajax_submit()
{
$.ajax({
url: "submit.php",
type: "POST",
data: {
firstname: $("#firstname").val(),
lastname: $("#lastname").val()
},
dataType: "JSON",
success: function (jsonStr) {
// another codes when result is success
}
});
}

How to show a confirm message before delete?

I want to get a confirm message on clicking delete (this maybe a button or an image). If the user selects 'Ok' then delete is done, else if 'Cancel' is clicked nothing happens.
I tried echoing this when the button was clicked, but echoing stuff makes my input boxes and text boxes lose their styles and design.

Write this in onclick event of the button:
var result = confirm("Want to delete?");
if (result) {
//Logic to delete the item
}

You can better use as follows
Delete

This is how you would do it with unobtrusive JavaScript and the confirm message being hold in the HTML.
Delete
This is pure vanilla JS, compatible with IE 9+:
var deleteLinks = document.querySelectorAll('.delete');
for (var i = 0; i < deleteLinks.length; i++) {
deleteLinks[i].addEventListener('click', function(event) {
event.preventDefault();
var choice = confirm(this.getAttribute('data-confirm'));
if (choice) {
window.location.href = this.getAttribute('href');
}
});
}
See it in action: http://codepen.io/anon/pen/NqdKZq

function ConfirmDelete()
{
return confirm("Are you sure you want to delete?");
}
<input type="button" onclick="ConfirmDelete()">

it is very simple and one line of code
Delete

Try this. It works for me
Remove

improving on user1697128 (because I cant yet comment on it)
<script>
function ConfirmDelete()
{
return confirm("Are you sure you want to delete?");
}
</script>
<button Onclick="return ConfirmDelete();" type="submit" name="actiondelete" value="1"><img src="images/action_delete.png" alt="Delete"></button>
will cancel form submission if cancel is pressed

I would like to offer the way I do this:
<form action="/route" method="POST">
<input type="hidden" name="_method" value="DELETE">
<input type="hidden" name="_token" value="the_token">
<button type="submit" class="btn btn-link" onclick="if (!confirm('Are you sure?')) { return false }"><span>Delete</span></button>
</form>

It can be simplify to this:
<button onclick="return confirm('Are you sure you want to delete?');" />

HTML
<input onclick="return myConfirm();" type="submit" name="deleteYear" class="btn btn-danger" value="Delete">
Javascript
<script>
function myConfirm() {
var result = confirm("Want to delete?");
if (result==true) {
return true;
} else {
return false;
}
}

If you are interested in some quick pretty solution with css format done, you can use SweetAlert
$(function(){
$(".delete").click(function(){
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
}).then(isConfirmed => {
if(isConfirmed) {
$(".file").addClass("isDeleted");
swal("Deleted!", "Your imaginary file has been deleted.", "success");
}
});
});
});
html { zoom: 0.7 } /* little "hack" to make example visible in stackoverflow snippet preview */
body > p { font-size: 32px }
.delete { cursor: pointer; color: #00A }
.isDeleted { text-decoration:line-through }
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<link rel="stylesheet" href="http://t4t5.github.io/sweetalert/dist/sweetalert.css">
<p class="file">File 1 <span class="delete">(delete)</span></p>

HTML:
Delete
Using jQuery:
$('.delete').on("click", function (e) {
e.preventDefault();
var choice = confirm($(this).attr('data-confirm'));
if (choice) {
window.location.href = $(this).attr('href');
}
});

<form onsubmit="return confirm('Are you sure?');" />
works well for forms. Form-specific question: JavaScript Form Submit - Confirm or Cancel Submission Dialog Box

Delete Product
<!-- language: lang-js -->
<script>
function del_product(id){
$('.process').css('display','block');
$('.process').html('<img src="./images/loading.gif">');
$.ajax({
'url':'./process.php?action=del_product&id='+id,
'type':"post",
success: function(result){
info=JSON.parse(result);
if(result.status==1){
setTimeout(function(){
$('.process').hide();
$('.tr_'+id).hide();
},3000);
setTimeout(function(){
$('.process').html(result.notice);
},1000);
} else if(result.status==0){
setTimeout(function(){
$('.process').hide();
},3000);
setTimeout(function(){
$('.process').html(result.notice);
},1000);
}
}
});
}
</script>

Practice
<form name=myform>
<input type=button value="Try it now"
onClick="if(confirm('Format the hard disk?'))
alert('You are very brave!');
else alert('A wise decision!')">
</form>
Web Original:
http://www.javascripter.net/faq/confirm.htm

to set a conformation message when you delete something in php & mysql...
use this script code:
<script>
function Conform_Delete()
{
return conform("Are You Sure Want to Delete?");
}
</script>
use this html code:
<a onclick="return Conform_Delete()" href="#">delete</a>

var txt;
var r = confirm("Press a button!");
if (r == true) {
txt = "You pressed OK!";
} else {
txt = "You pressed Cancel!";
}
var txt;
var r = confirm("Press a button!");
if (r == true) {
txt = "You pressed OK!";
} else {
txt = "You pressed Cancel!";
}

function confirmDelete()
{
var r=confirm("Are you sure you want to delte this image");
if (r==true)
{
//User Pressed okay. Delete
}
else
{
//user pressed cancel. Do nothing
}
}
<img src="deleteicon.png" onclick="confirmDelete()">
You might want to pass some data with confirmDelete to determine which entry is to be deleted

Using jQuery:
$(".delete-link").on("click", null, function(){
return confirm("Are you sure?");
});

I know this is old, but I needed an answer and non of these but alpesh's answer worked for me and wanted to share with people that might had the same problem.
<script>
function confirmDelete(url) {
if (confirm("Are you sure you want to delete this?")) {
window.open(url);
} else {
false;
}
}
</script>
Normal version:
<input type="button" name="delete" value="Delete" onClick="confirmDelete('delete.php?id=123&title=Hello')">
My PHP version:
$deleteUrl = "delete.php?id=" .$id. "&title=" .$title;
echo "<input type=\"button\" name=\"delete\" value=\"Delete\" onClick=\"confirmDelete('" .$deleteUrl. "')\"/>";
This might not be the correct way of doing it publicly but this worked for me on a private site. :)

Its very simple
function archiveRemove(any) {
var click = $(any);
var id = click.attr("id");
swal.fire({
title: 'Are you sure !',
text: "?????",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'yes!',
cancelButtonText: 'no'
}).then(function (success) {
if (success) {
$('a[id="' + id + '"]').parents(".archiveItem").submit();
}
})
}

function del_confirm(msg,url)
{
if(confirm(msg))
{
window.location.href=url
}
else
{
false;
}
}
<a onclick="del_confirm('Are you Sure want to delete this record?','<filename>.php?action=delete&id=<?<id> >')"href="#"></a>

<SCRIPT LANGUAGE="javascript">
function Del()
{
var r=confirm("Are you sure?")
if(r==true){return href;}else{return false;}
}
</SCRIPT>
your link for it:
<a href='edit_post.php?id=$myrow[id]'> Delete</a>

The onclick handler should return false after the function call. For eg.
onclick="ConfirmDelete(); return false;">

I think the simplest unobtrusive solution would be:
Link:
Delete
Javascript:
$('.delete').click(function () {
return confirm("Are you sure?");
});

Delete Product
function del_product(id){
$('.process').css('display','block');
$('.process').html('<img src="./images/loading.gif">');
$.ajax({
'url':'./process.php?action=del_product&id='+id,
'type':"post",
success: function(result){
info=JSON.parse(result);
if(result.status==1){
setTimeout(function(){
$('.process').hide();
$('.tr_'+id).hide();
},3000);
setTimeout(function(){
$('.process').html(result.notice);
},1000);
}else if(result.status==0){
setTimeout(function(){
$('.process').hide();
},3000);
setTimeout(function(){
$('.process').html(result.notice);
},1000);
}
}
});
}

Here is another simple example in pure JS using className and binding event to it.
var eraseable = document.getElementsByClassName("eraseable");
for (var i = 0; i < eraseable.length; i++) {
eraseable[i].addEventListener('click', delFunction, false); //bind delFunction on click to eraseables
}
function delFunction(){
var msg = confirm("Are you sure?");
if (msg == true) {
this.remove(); //remove the clicked element if confirmed
}
};
<button class="eraseable">
<img class="eraseable" src="http://zelcs.com/wp-content/uploads/2013/02/stackoverflow-logo-dumpster.jpg" style="width:100px;height:auto;">
Delete me</button>
<button class="eraseable">
<img class="eraseable" src="http://zelcs.com/wp-content/uploads/2013/02/stackoverflow-logo-dumpster.jpg" style="width:100px;height:auto;">
Delete me</button>
<button class="eraseable">
<img class="eraseable" src="http://zelcs.com/wp-content/uploads/2013/02/stackoverflow-logo-dumpster.jpg" style="width:100px;height:auto;">
Delete me</button>

<script>
function deleteItem()
{
var resp = confirm("Do you want to delete this item???");
if (resp == true) {
//do something
}
else {
//do something
}
}
</script>
call this function using onClick

For "confirmation message on delete" use:
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Searching.aspx/Delete_Student_Data",
data: "{'StudentID': '" + studentID + "'}",
dataType: "json",
success: function (data) {
alert("Delete StudentID Successfully");
return true;
}

Angularjs With Javascript Delete Example
html code
<button ng-click="ConfirmDelete(single_play.play_id)" type="submit" name="actiondelete" value="1"><img src="images/remove.png" alt="Delete"></button>
"single_play.play_id" is any angularjs variable suppose you want to pass any parameter during the delete action
Angularjs code inside the app module
$scope.ConfirmDelete = function(yy)
{
var x = confirm("Are you sure you want to delete?");
if (x) {
// Action for press ok
$http({
method : 'POST',
url : 'sample.php',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
data: $.param({ delete_play_id : yy})
}).then(function (response) {
$scope.message = response.data;
});
}
else {
//Action for cancel
return false;
}
}

jQuery form submit

My goal is:
When for is submitted:
a validation on form is made : OK
an ajax is called to see that username and password do match : OK
if they don't match, display an error: OK
if they match, then REALLY SUBMIT the form: NOT OK.
Infact the trouble is, I cannot submit the form since there is a jquery submit event on it!
function form1Submit() {
var username=$('#username').val();
var password=$('#password').val();
if (username.length<2) {
return false;
}
if (password.length<2) {
return false;
}
$.post("check.php", { username: username, password:password }, function(data) {
if (data=="ko") {
alert('bad password');
return false;
} else {
//to be done here !
}
});
return false;
}
function init() {
$('#form1').submit(function(){
return form1Submit();
})
}
$(document).ready(function(){
init();
})

You can call the native submit event, so do this:
$('#form1').submit(form1Submit);
Then in your post callback do this:
$.post("check.php", { username: username, password:password }, function(data) {
if (data=="ko") {
alert('bad password');
} else {
this.submit();
}
});
The this.submit() isn't calling he jQuery .submit() trigger function, but rather the native <form> .submit() function.

The return false is blocking the default form submit action. You have either to return true from the form1Submit() function to let the default form submit action do its job, or to add another $.post() inside the else which submits the data to the form asynchronously, if your intent was to do it using ajaxical powers.

The problem is that form1Submit always returns false.

function form1Submit(ev, ok) {
ev.stopPropagation();
ok = (typeof ok != 'undefined') ? ok : false;
if (ok)
return true;
var username=$('#username').val(),
password=$('#password').val(),
selfForm = this;
if (username.length < 2)
return false;
if (password.length < 2)
return false;
$.post("check.php", { username: username, password:password }, function(data) {
if (data=="ko") {
alert('bad password');
} else {
$(selfForm).trigger('submit', [true]); // again submit but with ok parameter
}
});
return false;
}
function init() {
$('#form1').bind('submit', form1Submit);
}
$(document).ready(function(){
init();
})