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.
Related
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.
I'm wondering how to resolve an issue where I have one text box and two buttons.
Each button needs the same data in the text box to accomplish its task.
One button is to update the existing record they are reviewing (with the new value in the text box), and the other button is used to add a new record (again, using the new value in the text).
One idea I had was to use jquery to update a hidden text box that gets updated when the visible text box is modified by the user.
So something like this: (this is just pseudocode...)
<form name="form1" method="post" action="controller1/method1">
<input type=text name=visibleTextBoxForForm1></input>
<button type=submit value=UPdate>
</form>
<form name="form2" method="post" action="controller2/method2">
<input type=hidden name=hiddenTextBoxforForm2></input>
<button type=submit value=New>
</form>
<script>
$('#visibleTextBoxForForm1').live('change', function() {
//update a hidden textbox in form2 with value of this textbox.
});
</script>
Is there a better way to do this?
Alternatively, you could do it via JQuery. Tie a clicklistener for each button and provide the correct URL to the form on click.
Here's some quick code... you'd have to correct the proper jquery queries for the correct elements.
<form name="form1" method="post">
<input type=text name=visibleTextBoxForForm1></input>
<button type=button value=Update>
<button type=button value=New>
</form>
<script>
$('update').click(function() {
$(form1).attr('action', <update url>).submit();
});
$('new').click(function() {
$(form1).attr('action', <new url>).submit();
});
</script>
If that's the only field, then simply have one form with two buttons and handle that text data based on the name of the button used to submit it.
<form name="form1" method="post" action="controller1/method1">
<input type="text" name="text" />
<input type="submit" name="insert" value="Insert New Data" />
<input type="submit" name="update" value="Update Existing Data" />
</form>
PHP (not CodeIgniter, since I'm not familiar with that framework):
if(isset($_POST['insert'])) {
// insert $_POST['text']
} else if (isset($_POST['update'])) {
// update $_POST['text']
} else {
// error
}
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 have a submit form for a URL and I want it to have specific behavior which I am not able to achieve so far. Initially I want the button to be enabled. After someone enters a URL and hits the "submit" button, I want to call my checkURL() function. If the function returns true, I want the button to become disabled and I want to then open remote_file.php. If it returns false, I want the button to be enabled and make them try another URL.
<form name=URLSubmitForm
action="remote_file.php"
method="post">
<input type="hidden" name="MAX_FILE_SIZE" value="524288000">
<input type="text" name="name" size="50">
<input type="submit"
onchange="this.disabled=false"
onclick="this.disabled=true; checkURL();"
value="submit">
</form>
Edit: It looks like I was just putting the onchange in the wrong place. I ended up doing this to fix reenabling the button
<input type="text" onchange="submit.disabled=false" name="name" size="50">
Thanks!
I would propose that you attach the event handling code to the form's onsubmit event, not the button event(s). What you're trying to control is whether or not the form is posted. The button being disabled while your validation logic runs is a secondary goal.
Try this instead:
<script type="text/javascript">
function checkURL(){
var submitButton = document.getElementById('submitButton');
submitButton.disabled=true;
/* implement your validation logic here
if( url is invalid ){
submitButton.disabled=false;
return false;
}
*/
// everything is valid, allow form to submit
return true;
}
</script>
<form name="URLSubmitForm" action="remote_file.php" onsubmit="return checkURL();" method="post">
<input type="hidden" name="MAX_FILE_SIZE" value="524288000">
<input type="text" name="name" size="50">
<input type="submit" name="submitButton" id="submitButton" value="submit">
</form>
<input type="submit"
onclick="if (checkURL()) { this.disabled='disabled'; return true; } else { return false; }"
value="submit">
How about in the form's onsubmit event:
<form onsubmit="(function(){
if(checkURL()){
this.elements['submit'].disabled = 'disabled';
}
else{
return false;
}
})()">
Since you haven't given any ajax code, the form will still be submitted normally and when the page is reloaded the button will be enabled again.
onclick="checkURL(this);"
function checkURL(arg){
this.disabled=true;
if(<something>) this.disabled=false;
}
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.