Say I have a simple form on a page called photo/delete.php. This form deletes an image specified by the user. All it is, is this:
<form action="?" method="post">
<input type="checkbox" name="confirmDelete" value="confirm" />
<input type="submit" value="delete" />
</form>
So, this form contains a confirmation check box that must be ticked to ensure the image is deleted. How can I dynamically choose what page to POST this form to, based on its contents?
For example, if the checkbox is not checked, yet the submit button is clicked, I'd like to stay on the same photo/delete.php page and display an error, since its possible they really do want to delete the image and simply forgot to tick the box.
But otherwise, if everything is successful and the checkbox is ticked, I'd like to POST it to another page, say home.php since it makes no sense to stay on the same page of a just-deleted image.
How can I implement this?
You may try something like this
HTML:
<form action="delete.php" method="post">
<input type="checkbox" name="confirmDelete" value="confirm" />
<input id="btn_delete" type="submit" value="delete" />
</form>
JS:
window.onload = function(){
document.getElementById('btn_delete').onclick = function(e){
var checkBox = document.getElementsByName('confirmDelete')[0];
if(!checkBox.checked) {
if(e && e.preventDefault) {
e.preventDefault();
}
else if(window.event && window.event.returnValue) {
window.eventReturnValue = false;
}
alert('Please check the checkbox!');
}
};
};
DEMO.
Related
So what i want do is, have a form displayed on load where it asks user for their details such as name etc, then once the user clicks submit, i want that information to carry over to the next form, i know i have to hidden fields for that.
I want another form to be displayed after they click submit, this all has to be done using POSTBACK, so pretty much having 2 forms on one php page but only displaying the second one after the first has been submitted.
I know i can do this by creating two different php files and using header but i would like to learn how to do it via postback.
<form name="firstform" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?> " onSubmit="return validator();">
<p>Please fill in the following form</p>
<p>Given Name* <input type="text" name="fname" id="fname"/><br/>
Middle Name <input type="text" name="mname"/><br />
Family Name* <input type="text" name="lname" id="lname"/><br />
Chosen Username* <input type="text" name="uname"/>
</p>
<p><input type="submit" value="submit" id="submit"/>
</form>
<form name="secondform" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?> " >
Test* <input type = "text" name="test"/>
</form>
You can use jquery and Javascript if this is just a quick form
There is a nice form plugin that allows you to send an HTML form asynchroniously.
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// Hide all forms
$('form').hide();
// Show the first form
$('form').eq(0).show();
$('form').eq(0).on('submit', function() {
// Submit via ajax
// Unhide second form
$(this).hide();
$('form').eq(1).show();
return false;
});
});
</script>
I would validate that the first forms data is correct, then test to see if the form has been submitted without errors.
if (isset($_POST['submit']) && empty($errors)) {
// Output second form
} else {
// Output first form
}
You would either send the first set of data to the database or you can add them as hidden fields in the second form.
This is assuming you put any generated errors in to an array called $errors.
Is it possible to create two form actions? One should action a .php page and one should action a script on the same page.
<form method="post" action="">
// Input fields here
<input type="submit" name="calculate" value="Calculate price">
// Form should perform the calculation script below (not attached here)
<input type="submit" name="order" value="Order">
// Form should perform the action 'order.php'
</form>
Searched for a long time, but could not find a solution. Does anyone know how to fix this?
If you want a button in a form to do something other than submit the form set its type to button
<input type="button" name="calculate" value="Calculate price">
then attach a click handler to the button to run your script.
Assuming you have an event that will lead to this change, yes but with javascript.
Example:
$('select#actions').on('change', function(){
var action = $('#actions').find(":selected").val();
$('#someForm').attr("action", action + '.php');//or whatever is the route
}
you can try something like this:
<script type="text/javascript">
function SubmitForm()
{
if(document.pressed == 'Calculate price')
{
document.myform.action ="calculate.php";
}
else
if(document.pressed == 'Order')
{
document.myform.action ="order.php";
}
return true;
}
</script>
<form method="post" onsubmit="return SubmitForm();">
// Input fields here
<input type="submit" name="operation" onclick="document.pressed=this.value" value="Calculate price">
// Form should perform the calculation script below (not attached here)
<input type="submit" name="operation" onclick="document.pressed=this.value" value="Order">
// Form should perform the action 'order.php'
</form>
So when you submits, trigger a function that capture your button value and set form action.
In this case, you can put your calculation script in a php file.
I am modifying a php login form, adding javascript check form function to it. I wish when users tick the checkbox, the form is true, and when the checkbox is empty, the form becomes false. the codes are like these:-
//the javascript
function check_sli(form,mark,edit){
if(mark==1 || mark=="all"){
if(form.terms.value==""){
sli_check_terms.innerHTML="Please read the terms and conditions first！";
sli_check_terms.style.height="auto";
return false;
}else{
sli_check_terms.innerHTML="";
sli_check_terms.style.display = "none";
}
}
}
//the form
<form name="form_sli" id = "form_sli" ACTION="<?php echo $loginFormAction1; ?>" METHOD="POST" onSubmit="return check_sli(form_sli,'all')">
<input type="text" name="login"/><br>
<input type="password" name="password"/><br>
<input name="terms" type="checkbox" id="terms" checked="checked" onBlur="check_sli(form_sli,1)">I have read the terms and conditions<br><div id="sli_check_terms" class="right"></div>
<input type="submit" name="button" id="button" value="Login" />
</form>
The above codes works normal for textfields, such as when the textfield is empty, the innerHTML pops up. However, when using checkbox, I don't know the checked and unchecked value, is it 1 vs 0, or !=="" vs ==""??? and shall I use onBlur or onSubmit???
How shall it modify the scripts so that it works for checkbox as well? thanksalot!
checkboxes use .checked in the dom, which is a bool.
if (form.terms.checked) {
... it's checked ...
}
Instead of if(form.terms.value==""), do this if(form.terms.checked==false)
I'm using a WordPress sidebar widget to capture email addresses. The thing is, it redirects after form submission. I want the visitor to stay on the page they were on after form submission with just a hidden div giving a successful signup message.
I've tried something with javascript like this --
<script type="text/javascript">
function showHide() {
var div = document.getElementById("hidden_div");
if (div.style.display == 'none') {
div.style.display = '';
}
else {
div.style.display = 'none';
}
}
</script>
And that works perfectly for showing the hidden div on submit, but the actual form then doesn't work :(
The form (with what I was trying to do) is like this --
<div id="wp_email_capture"><form name="wp_email_capture" method="post" onsubmit="showHide(); return false;" action="<?php echo $url; ?>">
<label class="wp-email-capture-name">Name:</label> <input name="wp-email-capture-name" type="text" class="wp-email-capture-name"><br/>
<label class="wp-email-capture-email">Email:</label> <input name="wp-email-capture-email" type="text" class="wp-email-capture-email"><br/>
<input type="hidden" name="wp_capture_action" value="1">
<input name="submit" type="submit" value="Submit" class="wp-email-capture-submit">
</form>
<div id="hidden_div" style="display:none"><p>Form successfully submitted.</p>
</div>
The problem is coming in somewhere between 'return false' and the form action (which is where the plugin's coder has made it redirect I think). If I remove 'return false', it redirects. With 'return false' there, the form doesn't work. I can't figure out a way to get the form to work but not redirect, ie. just show the hidden div, work, and that's it! No redirect :) Would appreciate your help.
I will show how to submit the form with jQuery, as this is what you have available to you:
First of all, you should make one small change to the form HTML. Namely, change showHide() to showHide(this), which will give showHide() access to the form element. The HTML should be:
<div id="wp_email_capture"><form name="wp_email_capture" method="post" onsubmit="showHide(this); return false;" action="<?php echo $url; ?>">
<label class="wp-email-capture-name">Name:</label> <input name="wp-email-capture-name" type="text" class="wp-email-capture-name"><br/>
<label class="wp-email-capture-email">Email:</label> <input name="wp-email-capture-email" type="text" class="wp-email-capture-email"><br/>
<input type="hidden" name="wp_capture_action" value="1">
<input name="submit" type="submit" value="Submit" class="wp-email-capture-submit">
</form>
<div id="hidden_div" style="display:none"><p>Form successfully submitted.</p>
</div>
The javascript to submit the form and display the div on successful submit is:
function showHide(form) {
var serial = $(form).serialize();
$.post(form.action, serial, function(){
$('#hidden_div').show();
});
};
What this does:
Serializes the form data, i.e. converts it to one long string such as wp-email-capture-name=&wp-email-capture-email=&wp_capture_action=1 that is stored in serial.
Submits the serialized data to the the form's action url (form.action)
If the form submit was successful, it runs the success handler, which is the third parameter to $.post(). This handler takes care of displaying the hidden div. I changed the code to use jQuery's .show() function, which takes care of browser inconsistencies.
Hope this is helpful.
I'm creating a registration page and I would like to give the user the opportunity to review their information and go back and edit it before clicking a confirm button which inserts it into the database.
Is there a way to include two submit buttons which point to different scripts or would I have to duplicate the entire form but use hidden fields instead?
Any advice appreciated.
Thanks.
You can use two submit buttons with different names:
<input type="submit" name="next" value="Next Step">
<input type="submit" name="prev" value="Previous Step">
And then check what submit button has been activated:
if (isset($_POST['next'])) {
// next step
} else if (isset($_POST['prev'])) {
// previous step
}
This works because only the activated submit button is successful:
If a form contains more than one submit button, only the activated submit button is successful.
As for every other HTML input element you can just give them a name and value pair so that it appears in the $_GET or $_POST. This way you can just do a conditional check depending on the button pressed. E.g.
<form action="foo.php" method="post">
<input type="text" name="input">
<input type="submit" name="action" value="Add">
<input type="submit" name="action" value="Edit">
</form>
with
$action = isset($_POST['action']) ? $_POST['action'] : null;
if ($action == 'Add') {
// Add button was pressed.
} else if ($action == 'Edit') {
// Edit button was pressed.
}
You can even abstract this more away by having actions in an array.
you can
like :
http://sureshk37.wordpress.com/2007/12/07/how-to-use-two-submit-button-in-one-html-form/
via php
<!-- userpolicy.html -->
<html>
<body>
<form action="process.php" method="POST">
Name <input type="text" name="username">
Password <input type="password" name="password">
<!-- User policy goes here -->
<!-- two submit button -->
<input type="submit" name="agree" value="Agree">
<input type="submit" name="disagree" value="Disagree">
</form>
</body>
</html>
/* Process.php */
<?php
if($_POST['agree'] == 'Agree') {
$username = $_POST['username'];
$password = $_POST['password'];
/* Database connection goes here */
}
else {
header("Location:http://user/home.html");
}
?>
or via javascript
I certainly wouldn't repeat the form, that would be a fairly self-evident DRY violation. Presumably you will need the same data checks every time the form is submitted, so you could perhaps just have the one action and only run through the "add to database" part when the user hits the "approve" button.