How to create confirm box for multiple forms - javascript

I got a foreach loop which display many forms like this :
<form action="cree-new-user.php" method="post" class="formButtonForm">
<input type="hidden" name="ent" value="<?php echo $corp->id;?>" />
<input type="hidden" name="action" value="delete" />
<input type="submit" class="submit redform" value="delete" />
</form>
When i click on the Delete button it delete the objet in my database.
I would like to create a popup box to confirm if i "really" want to delete it.
I coded this with Javascript :
function Validate(event) {
var thereturn = confirm("Voulez vous vraiment effacer cette entreprise ?");
if (event) {
if (!thereturn) {
event.preventDefault();
}
} else {
return thereturn;
}
}
window.onload = function () {
document.getElementByName("deleteEntreprise").onclick = Validate;
}
It should display a alert popup, but nothing pop...
Do you guys have any clues ?

Even if you get the button correctly you should validate in the form on submit event.
<form action="cree-new-user.php" method="post" class="formButtonForm" onSubmit="return Validate();">
if you return false in the function it won t submit the form.

Try this approach, using onsubmit instead of onclick:
HTML:
<form action="cree-new-user.php" method="post" class="formButtonForm" id="delete-form">
<input type="hidden" name="ent" value="<?php echo $corp->id;?>" />
<input type="hidden" name="action" value="delete" />
<input type="submit" class="submit redform" value="delete" />
</form>
JavaScript:
function Validate(event) {
var thereturn = confirm("Voulez vous vraiment effacer cette entreprise?");
if (event) {
if (!thereturn) {
event.preventDefault();
}
} else {
return thereturn;
}
}
window.onload = function() {
document.getElementById('delete-form').onsubmit = Validate;
};
Code Example

Related

How to use two submit button different purpose ajax and form submit

I have two submit button in form, one button for validate and form submit form reload, Another one for submit the form with out validate in ajax method, How to do this.
HTML Code:
<form action="" id="form-product" method="post" name="product" enctype="multipart/form-data">
<input type="text" name="title"id="title">
<input type="submit" name="save">
<input type="submit" name="enter">
</form>
$(function() {
$("form[name='product']").validate({
rules: {
title: {
required: true,
},
},
messages: {
title: {
required: "Please enter your Emailid.",
},
},
submitHandler: function(form) {
form.submit();
}
});
});
Actually you can do it a numerous way.I will show you one possible way,
<form action="" id="form-product" method="post" name="product" enctype="multipart/form-data">
<input type="text" name="title"id="title">
<input type="button" name="save" value="validate" onclick="_validate()">
<input type="button" name="submit" onclick="_submit()" value="enter">
</form>
<script>
function _validate(){
console.log("add your validation method here");
// add your validation method here.
}
function _submit(){
console.log("submit your form without validation");
//just submit your form
}
</script>
HTML CODE:
<input type='submit' id='btn1' value='Normal Submit'>
<input type='button' id='btn2' value='New Window'>
JS CODE:
document.getElementById('btn2').onclick = function()
{
form.target = '_blank';
form.submit();
}
or simply try this:
<input type='submit' name='self' value='This window' onclick='this.form.target="_self";' />
<input type='submit' name='blank' value='New window' onclick='this.form.target="_blank";' />

Password in confirm box Javascript

I have a Delete button in my PHP page which deletes a record.
But when I delete that button I do a confirm box with:
<form action="log.php" method="post" onsubmit="return confirm('Are you sure?');">
Can I make it so when they confirm they have to fill in a password?
So what I mean is something like this
<form action="log.php" method="post" onsubmit="return confirm('password :');">
And then they have to fill in a password
Thanks in advance.
Hi You Need some thing like this, Modify according to your requirements
<script>
function do_check()
{
var return_value=prompt("Password:");
if(return_value==="your_password")
return true;
else
return false;
}
</script>
<form action="log.php" method="post" onsubmit="return do_check();">
Try using input type="password" , required attribute` ; disable submit until password set
document.forms["form"].querySelector("input[type=button]").onclick = function(e) {
e.preventDefault();
this.nextElementSibling.disabled = false;
this.nextElementSibling.nextElementSibling.disabled = false;
}
<form name="form">
<input type="button" value="Are you sure?" />
<input type="password" minlength="3" maxlength="7" required disabled />
<input type="submit" disabled />
</form>
document.forms["form"].querySelector("input[type=button]").onclick = function(e) {
e.preventDefault();
this.nextElementSibling.disabled = false;
this.nextElementSibling.nextElementSibling.disabled = false;
}
<form name="form">
<input type="button" value="Are you sure?" />
<input type="password" minlength="3" maxlength="7" required disabled />
<input type="submit" disabled />
</form>

Delaying Form Submit

I want to delay the post of the below form by 3 seconds and have an image pop up.
<form id="test" name="test" method="post" action="">
<input type="hidden" name="inp1" method="post" value="<?php echo $var1 - $var2; ?>">
<input type="hidden" name="inp2" method="post" value="<?php echo $var3 - $var4; ?>">
<input type="hidden" name="inp3" method="post" value="">
<input type="submit" name="inp4" value="Test" />
</form>
I am trying to get the delay part working first and have tried using Javascript in the HTML head part of my php file:
$('test').submit(function (e) {
var form = this;
e.preventDefault();
setTimeout(function () {
form.submit();
}, 30000); // in milliseconds
});
This currently isn't giving any delay. Any ideas?
you forgot to add # with $("#test")
$('#test').submit(function (e) {
var form = this;
e.preventDefault();
setTimeout(function () {
form.submit();
}, 3000); // in milliseconds
});
Demo
I would switch things up a bit, rather than using a submit button I would change it to a regular button and pass the form in the button. You don't need the submit button at all.
<input type="button" name="inp4" value="Test" onclick="myfunction(form)" />
Then the function
function myfunction(form) {
setTimeout(function() {
form.submit();
},30000);
}
that should do the trick. No jQuery needed

Do nothing on empty input - combinate with dynamic action on form

What i want is when you type something in input, depending what button you click, he will change path of action in form. I am at half way to achieve this (i think)....check out what i make till now
function OnSubmitForm() {
if(document.pressed == 'Log As')
{
document.myform.action ="log-as.html";
}
else
if(document.pressed == 'Log As Int')
{
document.myform.action ="log-as-int.html";
}
return true;
};
<form name="account" onsubmit="return onsubmitform();">
<input type="text" name="user" id="user">
<input type="submit" name="account" onclick="document.pressed=this.value" value="Log As" />
<input type="submit" name="account" onclick="document.pressed=this.value" value="Log As Int" />
</form>
And maybe i found solution for this, but i don't know how to combinate those two...
$('#search-form').submit(function(e) {
if (!$('#user').val()) {
e.preventDefault();
}
});
This can be easily done using JQuery like so:
$("input[type='submit']").click(function(){
var name = $(this).val();
if(name=="Log As"){
$("#myform").attr('action', 'log-as.html');
}
if(name=="Log As Int"){
$("#myform").attr('action', 'log-as-int.html');
}
});
JSFiddle demo here
I would also like to point out that you are submitting to a HTML page and not a PHP page. So do keep that in mind when trying to retrieve the values later.
You can do the same thing by using this code:
First of all name attribute of your form and input type submit are
same. They must be unique.
<form name="account" id="account" action="">
<input type="text" name="user" id="user">
<input type="submit" name="account_submit1" onclick="document.pressed=this.value" value="Log As" />
<input type="submit" name="account_submit2" onclick="document.pressed=this.value" value="Log As Int" />
</form>
and
$(document).ready(function () {
$("#account").submit(function(e){
alert($.trim($("#account [type='submit']:focus").val()))
if($.trim($("#account [type='submit']:focus").val()) == "Log As"){
$("#account").attr('action',"log-as.html");
}else{
$("#account").attr('action',"log-as-int.html");
}
});
});
Updated code according to the discussion:
$(document).ready(function () {
$("#account").submit(function(e){
if (!$('#user').val()) {
e.preventDefault();
}
if($.trim($("#account [type='submit']:focus").val()) == "Log As"){
$("#account").attr('action',"log-as.html");
}else{
$("#account").attr('action',"log-as-int.html");
}
});
});

Forward page request using JavaScript functions return values?

Here is the related part of code:
<form id="frmDemo" name="frmDemo" action="temp.jsp" method="post" >
<div>
<hr/><a name="d2"></a>
<h2>CMS Sign In Page</h2>
<p>Passing parameters to the Web Service:</p>
<label>Your username: </label><input type="text" name="username" id="username" value="elthefar" />
<label>Your password: </label><input type="password" name="password" id="password" value="workandwork" />
<input type="button" value="Sign In" onclick="var r = SignIn(); if (r == 0) document.forms[0].action = 'temp2.jsp'; return true;" />
I want my form to forward to temp2.jsp if SignIn return 0, otherwise to temp.jsp. but the above code doesn't forward to any page.
You can add a onsubmit event to you form like this:
<form id="frmDemo" name="frmDemo" action="temp.jsp" method="post" onsubmit="return myfunction();">
and then use a simple submit button in your form.
<input type='submit' value='Sign In' />
in this case, when you click on submit button, the function will fire and in that function you can do what ever you want to do like this:
<script language='javascript'>
function myfunction(){
var r = SignIn();
if(r == 0)
document.forms[0].action = 'temp2.jsp';
return true;
}
</script>
Did you mean to use input type="submit"? Or call document.forms[0].submit();?
Change your form to this
<form id="frmDemo" name="frmDemo" method="post">
And change button to submit
<input type="submit" name="Submit" onClick="Validate()" value="Submit" />
And use your javaScript
<script language='javascript'>
function Validate(){
var r = SignIn(); // assuming, you have some implementation for SignIn() method
var frm = document.getElementById("frmDemo") || null;
if(frm) {
if(r != 0)
{
frm.action = 'temp.jsp';
}else{
frm.action = 'temp2.jsp';
}
}
}
</script>

Categories