I have implemented a working Modal form using HTML, Bootstrap CSS and PHP, which displays information about a document. In the footer of the Modal I have a 'Delete Document' button which should post to the same page (index.php). The form doesn't react to the submit button.
Reading up on the subject a lot of people are using AJAX to submit from a Bootstrap Modal. This seems unnecessary? Do I really need to implement a JSON post in AJAX just to submit this Modal?
The code:
<div class="modal-footer">
<form action="index.php" method="post">
<input type="hidden" name="DocumentID" value="<?php echo $row['DocumentID']; ?>" />
<input type="hidden" name="top-search" value="<?php echo $_POST['top-search']; ?>" />
<button type="submit" name="deleteDocument" class="btn btn-w-m btn-danger" onclick="return confirm('Are you sure you want to delete this Document?')">Delete</button>
</form>
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
</div>
I have an example where a Modal submits successfully although to a different page using a similar method but using target="_blank"
Its not onclick - but onClick.
Also, you need to place the scripts inside {}. The following code should work.
/*
* A simple React component
*/
class Application extends React.Component {
render() {
return (<div class="modal-footer">
<form action="index.php" method="post">
<input type="hidden" name="DocumentID" value="<?php echo $row['DocumentID']; ?>" />
<input type="hidden" name="top-search" value="<?php echo $_POST['top-search']; ?>" />
<button type="submit" name="deleteDocument" class="btn btn-w-m btn-danger" onClick={ function() {
return confirm("Yes/No?");
}}>Delete</button>
</form>
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
</div>);
}
}
/*
* Render the above component into the div#app
*/
React.render(<Application />, document.getElementById('app'));
Related
What I want to do is very simple: I want to create a form using Code Igniter's form helper and place other buttons (aside from the submit button) within the form. Let me illustrate using this snippet (not my actual form):
<?php echo form_open('client/send_message'); ?>
<input type="text" name="message" required />
<button class="btn btn-primary btn-block">Send</button>
<button class="btn btn-default btn-block" data-toggle="modal" data-target="#my_modal">Send Email</button>
<?php echo form_close(); ?>
The second button Send Email is supposed to open a modal. The problem is this, clicking the Send Email button also processes the form. So it appears you cannot have more than one button within the same form. I know I can have the Send Email button outside the form but my original form has several buttons in different places within the form and placing them outside the form will break the design. I also know that I can use <input type="button"> within a form, but I really want to know the reason for this behavior and if there's a solution to it.
Thanks!
Hope this will help you :
change the type of button form submission change to submit
<?php echo form_open('client/send_message'); ?>
<input type="text" name="message" required />
<button type="submit" class="btn btn-primary btn-block">Send</button>
<button type="button" class="btn btn-default btn-block" data-toggle="modal" data-target="#my_modal">Send Email</button>
<?php echo form_close(); ?>
It would be better to use the a tag for this purpose.
<?php echo form_open('client/send_message'); ?>
<input type="text" name="message" required />
<button class="btn btn-primary btn-block">Send</button>
Send Email
<?php echo form_close(); ?>
<input type="button"/>
This will not submit the form, as we have specified it to act as a button only.
<input type="submit"/>
This will submit the form, as we have specified it to act as a button to submit a form.
I somehow do not get the button value in my form, I am using Laravel.
My form:
<form method="post" name="confi" action="{{ route('postConfi') }}">
<button type="button" name="color" value="test"></button>
<button type="button" name="color" value="test2"></button>
<button type="submit>
</form>
This is how I return the request:
// controller method
public function index(Request $request)
{
$data = $request->all();
dd($data);
}
How can I get the button value in the form?
You have to use
<button type='submit'>
instead of button type=button
Also, that button has no innerHTML are you using CSS to fill it up?
Well see this basic example
<?php
if (isset($_POST['button1'])){
echo "Button 1 Pressed";
}
else if (isset($_POST['button2'])){
echo "Button 2 Pressed";
}
?>
<form method="post">
<button type="submit" name="button1">Btn 1</button>
<button type="submit" name="button2">Btn 2</button>
</form>
My search was working great before I changed the style of the form.
Now the search will not submit.
Here is my searchform.php:
<button type="button" class="close">×</button>
<form role="search" method="get" action="<?php echo home_url( '/' ); ?>">
<input type="search" value="<?php get_search_query(); ?>" name="s" placeholder="search..." title="Search" />
<button type="submit" id="searchsubmit" class="btn btn-default btn-search" value="Search"><i class="fa fa-search fa-4x"></i></button>
</form>
I am developing on site http://www.2knowmusic.net. Search is on the top right.
Check out your footer or where the following is located. In the source code, you have:
//Do not include! This prevents the form from submitting for DEMO purposes only!
$('form').submit(function(event) {
event.preventDefault();
return false;
})
This is preventing your form from being submitted which is why it's not doing anything.
My problem is the buttons don't work, the only thing that happens is that it reloads the page. And is there anyone that know how to make new buttons instant after I create them in my database?
<form action="<?php $_SERVER['PHP_SELF'] ?>" method="post" class="index_head" id = "login_form" >
<?php
header('Cache-Control: no-cache');
header('Pragma: no-cache');
require "gettops.php";
$tops = getTops();
if(!empty($tops))
foreach ($tops as $top) {
if(isset($_POST[$top[0]]) && !empty($_POST[$top[0]]))
{
header("location:forgot_checkin.php");
}
?>
<input type="submit" Name="print" value="<?php echo $top[0]; ?>" class="btn btn-large btn-primary" />
<?php } //end foreach ?>
<input type="submit" Name="print" value="Download Excel" class="btn btn-large btn-primary">
<input type="submit" Name="print" value="Download Excel" class="btn btn-large btn-primary">
</form>
Your form is not submitting anywhere: $_SERVER['PHP_SELF'] is equivalent to "#" or "". You should include the place the form should submit to and avoid $_SERVER['PHP_SELF']. Most of these SERVER_VARS are depreciated anyway.
I'm not entirely sure on your question vs. the code that is present for creating new buttons, but you can do:
<? foreach ($query as $row) { ?>
<input type="button" Name="print" value="<?php echo $row['button']; ?>" class="btn btn-large btn-primary" />
<? } ?>
You can of course make the button line an echo and never leave php mode. But are there multiple buttons just redirecting? Or do they submit the form to multiple places? If they just link you don't even need a form an can append around your button or append onclick="#" to the button tag (or nicer: using jQuery('').click({});.
i want to submit data from one button in the databse and the same button should export
the CSV of the databse, i tried but it doesn't work only dat is being sent
i have two buttons
<div class="mws-form-item large">
<input type="submit" class="button" name="submit1" value="Generate Serials" />
<a href="get_csv.php" style="text-decoration:none">
<input type="button" name="get_csv" value="Export CSV"/></a>
</div>
and tried the in the following way
<div class="mws-form-item large">
<a href="get_csv.php" style="text-decoration:none">
<input type="submit" class="button" name="submit1" value="Generate Serials" />
</a>
</div>
If you can use jQuery, then you can bind click event to the submit button and perform all the operations you need in the function being called after click.
For eg :
<input type="submit" id="submitBut">
For this you can have :
$("#submitBut").click(function(){
//operations you need to perform
})