I have searched for an answer but couldn't find one!
I have a simple form,
<form action="adminprocess.php" method="POST">
<input type="submit" name="completeYes" value="Complete Transaction" />
</form>
How would I adjust this to confirm before processing the form?
I tried onclick, but couldn't get it working.
Any ideas?
UPDATE - What I now have.
<script type="text/javascript">
var el = document.getElementById('myCoolForm');
el.addEventListener('submit', function(){
return confirm('Are you sure you want to submit this form?');
}, false);
</script>
<form action="adminprocess.php" method="POST" id="myCoolForm">
<input type="submit" name="completeYes" value="Complete Transaction" />
</form>
HTML:
<form action="adminprocess.php" method="POST" id="myCoolForm">
<input type="submit" name="completeYes" value="Complete Transaction" />
</form>
JavaScript:
var el = document.getElementById('myCoolForm');
el.addEventListener('submit', function(){
return confirm('Are you sure you want to submit this form?');
}, false);
Edit: you can always use inline JS code like this:
<form action="adminprocess.php" method="POST" onsubmit="return confirm('Are you sure you want to submit this form?');">
<input type="submit" name="completeYes" value="Complete Transaction" />
</form>
<input type="submit" onclick="return confirm('Are you sure you want to do that?');">
The correct event is onSubmit() and it should be attached to the form. Although I think it's possible to use onClick, but onSubmit is the correct one.
If you're already using jQuery.. you can use an event handler to trigger before submission
$(document).ready(function() {
$("#formID").submit(function(){
// handle submission
});
});
Reference:
http://api.jquery.com/submit/
var submit = document.querySelector("input[type=submit]");
/* set onclick on submit input */
submit.setAttribute("onclick", "return test()");
//submit.addEventListener("click", test);
function test() {
if (confirm('Are you sure you want to submit this form?')) {
return true;
} else {
return false;
}
}
<form action="admin.php" method="POST">
<input type="submit" value="Submit" />
</form>
In my case, I didn't have a form ID and couldn't add inline in the form tag. I ended up with the following jQuery code
var form = $("form").first();
form.on('submit', function() {
return confirm('Are you sure you want to submit this form?');
});
if you have more then one submit buttons that do different actions you can do it this way.
<input TYPE=SUBMIT NAME="submitDelete" VALUE="Delete Script" onclick='return window.confirm("Are you sure you want to delete this?");'>
Related
My problem is that after clicking on submit button the page will go to php file any way my html code is like this
<form action="register.php" method="post">
<input type="text" name="name" id="name"><div id="adiv"></div>
<input type="submit" value="submit" id="button">
</form>
and my jquery code goes like this
$('#name').focusout(function(){
if($('#name').val().length==0){
$('#adiv').html("please enter name")
}
});
$('#button').click(function(){
if($('#name').val().length==0){
$('#adiv').html("please enter your name")
}
});
but after clicking submit button it redirects to php file and doesn't show any error and store blank data in the database.
Because your input type is submit you can either change the type to button or add event.preventDefault() to avoid automatic passing of form
use event.preventDefault()
$('#button').click(function(e) {
e.preventDefault();//this will stop form auto submit thus showing your error
if ($('#name').val().length == 0) {
$('#adiv').html("please enter your name")
}
});
Or
<input type="submit" value="submit" id="button">
change to
<input type="button" value="submit" id="button">//also prevent form auto submit thus will show the error
Well you need to stop the code to execute after error has been detected. For example you can simple use return false or return:
$('#name').focusout(function() {
if ($('#name').val().length == 0) {
$('#adiv').html("please enter name")
}
});
$('#button').click(function() {
if ($('#name').val().length == 0) {
$('#adiv').html("please enter your name")
return false;//add this
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="register.php" method="post">
<input type="text" name="name" id="name">
<div id="adiv"></div>
<input type="submit" value="submit" id="button">
</form>
I strongly recommend never to assign validation to a submit button click.
Instead assign the submit event handler of the form.
I also added trim and removed the content of the error from the code.
$(function() {
$('#name').focusout(function() {
var empty = $.trim($('#name').val()).length == 0;
$('#adiv').toggle(empty);
});
$('#form1').on("submit",function(e) {
$('#name').focusout();
if ($('#adiv').is(":visible")) {
e.preventDefault()
}
});
});
#adiv { display:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="register.php" method="post" id="form1">
<input type="text" name="name" id="name">
<div id="adiv">please enter name</div><br/>
<input type="submit" value="submit" id="button">
</form>
Please check this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
<input type="text" name="name" id="name">
<div id="adiv"></div>
<input type="button" value="submit" id="button">
</form>
<script>
$(document).ready(function(){
$('#button').on('click',function(){
if($('#name').val() == ''){
$('#adiv').text("Please enter name!!");
}else{
$('#adiv').text($('#name').val());
}
})
})
</script>
try this..:D
function validateFunction(){
if(document.getElementByID('name').value.length==0){
document.getElementByID('adiv').innerHTML = "please enter your name";
return false;
}
return true;
}
<input type="submit" value="submit" id="button" onclick="return validateFunction();" />
$('your-form').on('submit', function(e) {
e.preventDefault();
//your code bere
});
preventDefault stop the normal submit behaviour of your browser so that you can trigger any event you want
I have two submit buttons on the same form for edit and delete and I want to make delete confirmation alert. I've tried but this only work yes however I select "no/cancel" in delete confirmation. What should I do ?
This is the form
<form name="form" method="POST" action="update.php">
//form code
<input name="update_button" type="submit" value="Update" />
<input type="submit" name="delete_button" onClick="javascript:confirmDelete();" value="Delete"/>
This is the javascript
<script type="text/javascript">
function confirmDelete()
{
var status = confirm("Are you sure you want to delete ?");
if(status)
{
parent.location.replace("parent.location='<?php echo "update.php";?>'");
}else
{
parent.location.replace("parent.location='<?php echo "form.php?ticket=".$c['no'] ?>'");
}
}
</script>
And this is the update.php
if(isset($_POST['update_button']))
{
//update proses
}
else if(isset($_POST['delete_button']))
{
//delete proses
}
I want delete confirmation show "Are you sure you want to delete ?" if I select "yes", it would delete from database and if I choose "Cancel", it will stay at current page (form.php).
Thanks before,
You don't need to add javascript: in onclick or any event handling attribute. Just use onclick="return confirmDelete();"
and your javascript will be like this:
<script type="text/javascript">
function confirmDelete() {
var status = confirm( "Are you sure you want to delete ?" );
return status;
}
</script>
alternately you can use onclick="return confirm( 'Are you sure you want to delete ?' );"
Html:
<form name="form" method="POST" action="">
<input name="update_button" type="submit" value="Update" />
<input type="button" name="delete_button" id="delete_button" value="Delete"/>
Javascript:
$("#delete_button").on('click',function(){
if(confirmDelete()){
parent.location.replace("parent.location='<?php echo "update.php";?>'");
}
else{
parent.location.replace("parent.location='<?php echo "form.php?ticket=".$c['no'] ?>'");
}
});
function confirmDelete(){
var status = confirm("Are you sure you want to delete ?");
if(status)
{
return true;
}
return false;
}
My Requirement
Form Submission in New Window & Redirect Existing Page to a new page
on same click.
When I tried only Form submission is happening. Javascript function to redirect is not working.
Html
<form id="feedback.php" name="form1" method="post" action="feedback.php" target="_blank">
<input type="submit" class="button" value="SUMBIT" onclick="btntest_onclick();"/>
</form>
Javascript
<script>
function btntest_onclick()
{
window.location.href("mainpage.php");
}
</script>
Actual
But Only Form Submission is Happening in New Window. Existing Page is
not redirected.
Please tell me how to do this ?
Your HTML :
<form id="feedback.php" name="form1" method="post" action="feedback.php" target="_blank">
<input type="submit" class="button" value="SUMBIT" onClick="btntest_onclick()"/>
</form>
See onClick
Your Javascript :
function btntest_onclick()
{
setTimeout(function(){
window.location.href = "mainpage.php";
},0);
}
window.location.href is not a function.
And apparently it needs to be async to work.
JsFiddle
add onsubmit to your form.
and inside function do something like that:
function btntest_onclick() {
window.open("http:// your url");
window.location.href="/mainpage.php";
}
I am using JQuery and SimpleModal Confirm Modal Dialog to show a confirm box before uploading. The form is submitting fine but as i'm checking isset submit button in PHP therefore it fails. How could i submit post using JQuery with setting submit button.
Here is the code
HTML
<form enctype="multipart/form-data" action="#duc" method="post" id="uploadform" >
<input name="file" type="file" >
<input name="Submit_upload" type="submit" value="Upload" id="Upload" >
</form>
JQuery
jQuery(function ($) {
$('#Upload').click(function (e) {
e.preventDefault();
confirm("Continue to the Upload?", function () {
$('#uploadform').submit();
});
});
})
PHP
if(isset($_POST['Submit_upload']) && $_FILES['file']['name'])
{
// file uploading process.
}
I think as after confirm JQuery submitting the form so the actual submit button is not adding in the post array. any help will be much appreciated.
When you submit the form via .submit, type=submit input values are not sent at the same time. There are a ton of different ways to solve/handle this. One is to do:
<input name="Submit_upload" type="hidden" value="true">
<input type="submit" value="Upload" id="Upload">
The hidden input will be sent.
I have tried your code and it is working fine man
i just use one page to use your code. on top i put your PHP code then jquery code in head after jquery.in and then html part and its working fine why it is not working in your machine might you clean cache or browser;
here is my code
<?php
if(isset($_POST['Submit_upload']) && $_FILES['file']['name'])
{
echo $_POST['Submit_upload'];die;
}
?>
<html>
<head>
<script src="jquery.min.js" type="text/javascript"></script>
<script>
jQuery(function ($) {
$('#Upload').click(function (e) {
e.preventDefault();
confirm("Continue to the Upload?", function () {
$('#uploadform').submit();
});
});
})
</script>
</head>
<body>
<form enctype="multipart/form-data" action="#duc" method="post" id="uploadform" >
<input name="file" type="file" >
<input name="Submit_upload" type="submit" value="Upload" id="Upload" >
</form>
</body>
</html>
How can I change the code below so instead of a text input type with a submit button I want multiple submit buttons each with their own unique value? Everything I try just ends up with submit's value being undefined. Any help would be great!
Code source: Submit Search query & get Search result without refresh
<script type="text/javascript">
$(function() {
$("#lets_search").bind('submit',function() {
var value = $('#str').val();
$.post('db_query.php',{value:value}, function(data){
$("#search_results").html(data);
});
return false;
});
});
</script>
<form id="lets_search" action="" >
Search:<input type="text" name="str" id="str">
<input type="submit" value="send" name="send" id="send">
</form>
You can add multiple submit buttons and attach to all of them onclick event listener. When button was clicked - get the value and send with a POST request.
<script>
$(function(){
$('input[type=submit]').click(function(){
$.post('db_query.php', {value:$(this).val()}, function(data){
$("#search_results").html(data);
});
return false;
});
});
</script>
<form id="lets_search" action="">
<input type="submit" name="button1" value="hi"/>
<input type="submit" name="button2" value="bye"/>
</form>
If you want to use multiple submit buttons, you can catch the click event and determine which button was clicked. then run different Ajax submit. this also works when enter is hit.
//submit buttons
<form id="lets_search" action="" >
Search:<input type="text" name="str" id="str" />
<input type="submit" value="v1"/>
<input type="submit" value="v2"/>
//...more submit buttons
</form>
//submit func
$(function() {
$("#lets_search input[type=submit]").click(function() {
switch ($(this).val){
case 'v1':...;
case 'v2':...
}
});
});
Here is my version - which now looks very much like Bingjies because it was written while I was testing out his version
DEMO
<form id="lets_search" action="" >
Search:<input type="text" name="q" id="q">
<input type="submit" value="Google" name="send" id="google">
<input type="submit" value="Bing" name="send" id="bing">
</form>
$(function() {
$("#lets_search input[type=submit]").click(function() {
switch ($(this).val()) {
case "Bing" :
$("#lets_search").attr("action","http://www.bing.com/search");
break;
case "Google":
$("#lets_search").attr("action","https://www.google.com/search");
break;
}
});
});
Here, I would prefer to Vamsi's solution n Why not Sanjeev mk?
Give some extra thought on prefering the solution.
case: If there are mulitple submit buttons
If the user is in the text field and hits enter, the system will assume the first submit button was hit.
So, here, it would be good to go for not having mulitple submit
buttons for end user point of view
You can have multiple submit buttons in the form, no problem. They may have the same name, type etc, but just assign them different values. Like Submit Button 1 can have value="hi" and Button 2 can have value="bye".
Then when the action function is called for the button, all you have to do when entering the function is do a check with: $(this).val
HTML:
<input type="submit" name="button1" value="hi"/>
<input type="submit" name="button2" value="bye"/>
jQuery:
$(function() {
$("#lets_search").bind('submit',function() {
var value = $(this).val();
if(value == "hi")
do_something;
else
do_something_else;
});
});