I have a modal which is supposed to pop up when I click the button. However, when I click the button; nothing happens:
Heres what I did:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<div class = "row text-center">
<input class="btn btn-primary" id="submit-button" name="submit-button" type="submit" value="Save">
<input class="btn btn-danger" id="reset-button" type="reset" value="Reset">
<div class="well well-large">
<div id="form-content" class="modal hide fade in" style="display: none;">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Add transaction</h3>
</div>
<div class="modal-body">
<form class="transaction" name="transaction">
<input type="hidden" name="trans_date" value=<?php echo date("Y-m-d H:i:s");?>><br>
<label class="label" for="trans_payment_mode">Payment mode</label><br>
<select class="form-control" name="trans_payment_mode" id="payment_mode" class="required">
<option value="">Select</option>
<option value="cash">Cash</option>
</select><br>
<label class="label" for="trans_amt">Transaction amount</label><br>
<input type="text" name="trans_amt" class="input-xlarge"><br>
<label class="label" for="trans_details">Transaction details</label><br>
<textarea name="trans_details" class="input-xlarge"></textarea>
<input type="hidden" name="trans_cust_id" value=<?php echo $cid;?>><br>
<input type="hidden" name="trans_admin_person" value=<?php echo $aid;?>><br>
</form>
</div>
<div class="modal-footer">
<input class="btn btn-success" type="submit" value="Send" id="submit_trans">
Cancel
</div>
</div>
</div>
<div id="thanks">
<p><a data-toggle="modal" href="#add-transaction" class="btn btn-primary">Add Transaction</a></p>
</div>
</div>
</body>
I have the above modal containing add-transaction which will populate a modal. Please help.
CSS needs a bit work but you are missing a data_target class in your button. Add a div with an id and another div with the class modal-dialog.
Also change the line
<div id="form-content" class="modal hide fade in" style="display: none;">
to
<div id="modal-content">
Other code changes
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
...
<p><a data-toggle="modal" data-target="#myModal" href="#add-transaction" class="btn btn-primary">Add Transaction</a></p>
You can see it in the fiddle below
https://jsfiddle.net/4peLpye5/1/
EDIT - There is no php in the JSFiddle
It's a combination of a few issues.
No need for the hide class on the modal
No need for the display:none style on the modal
Missing id of add-transaction on the modal
Related
I just want to perform an update operation. the data (basically a set of questions from views.py), and each question is shown in form of a bootstrap accordion. the scenario I want is when we open the accordion, there is a modal toggle button for update the data, and when the button pressed it opens the modal which contains the question of that particular opened accordion which allows the user to update that data.
The problem is that in the current code when I click the model button of the 1st question it displays the 1st question data (which means it works fine) but when I click the 2nd accordion modal button (which contains different question) show the data of the 1st question means 1st accordion data. I can't figure out how to get the desired output means opening the model of a specific accordion should display the data of the particular accordion so that we can perform an update operation. here is my template file
{% extends 'base.html' %}
{% block title %}Add Questions{% endblock title %}
{% block body %}
<body>
<label for=""><h4 style="color: indianred">Grade >> {{classname}} >> {{topicname}} >> {{subtopicnames}} </h4></label><br>
<br>
<br>
<br>
</div>
</form>
<div class="panel-group" id="accordion">
{% for x in queryset %} <!-- retrieving all questions from views.py-->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse{{ forloop.counter }}">
Question
</a>
</h3>
</div>
<div id="collapse{{ forloop.counter }}" class="panel-collapse collapse">
<div class="panel-body">
<!-- <input type="button" onclick="updateques();" value="Edit!!"><br> -->
<br><br>
<div>
{{x.question.id}}
<input type="hidden" id="quesid" name="quesid" value="{{x.question.id}}">
<label>Q- <input type="text" id="ques" name="ques" value="{{x.question.question}}" readonly></label><br><br>
<img src="{{x.question.image}}" alt="" srcset="" width="700"><br><br>
<label>A- <input type="text" id="op1" name="" value="{{x.option.option1}}" readonly><br><br>
<label>B- <input type="text" id="op2" name="" value="{{x.option.option2}}" readonly><br><br>
<label>C- <input type="text" id="op3" name="" value="{{x.option.option3}}" readonly><br><br>
<label>D- <input type="text" id="op4" name="" value="{{x.option.option4}}" readonly><br><br>
<input type="checkbox" name="" value="{{x.answer}}" checked>
<label>{{x.question.difficulty}}</label>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">Edit</button>
<!-- <input type="submit" id="update" value="Update" /> -->
</div>
<!--Toogle Button-->
</div>
</div>
{{x.question.id}}<!-- checking here if it returns the right question id value of the accordian that is opened and it displays the correct id value but when it comes to modal it takes only the 1st question id and its data-->
<!-- Button trigger modal -->
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<input type="hidden" id="quesid" name="quesid" value="{{x.question.id}}">
<label>Q- <input type="text" id="ques" name="ques" value="{{x.question.question}}" readonly></label><br><br>
<img src="{{x.question.image}}" alt="" srcset="" width="700"><br><br>
<label>A- <input type="text" id="op1" name="" value="{{x.option.option1}}" readonly><br><br>
<label>B- <input type="text" id="op2" name="" value="{{x.option.option2}}" readonly><br><br>
<label>C- <input type="text" id="op3" name="" value="{{x.option.option3}}" readonly><br><br>
<label>D- <input type="text" id="op4" name="" value="{{x.option.option4}}" readonly><br><br>
<input type="checkbox" name="" value="{{x.answer}}" checked>
<label>{{x.question.difficulty}}</label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% endblock body %}
when I placed the modal dialogue code section inside the panel body it only opens the modal dialogue box for 1st accordion, not for the second one and the rest of the questions.
when I placed the modal code section inside the template for loop it opens the modal dialogue for all accordions but when I open the modal dialogue of all accordions it displays the data of the 1st accordion on all of them.
what are the possible ways to get the desired scenario?
You can move whole modal outside for-loop and keep only one modal for all questions . So , whenever user click on edit button you can simply clone whole contents(added this class) div and then add that clone content inside your modal-body because you are showing content inside modal which is already present inside accordian so simply get entire html from accordian .
Demo Code :
$("button[data-toggle='modal']").on("click", function() {
var selector = $(this).closest(".contents").clone(); //clone whole div
selector.find("button").remove() //remove modal button
selector.find("input").prop("readonly", false); //remove readonly..from inputs
//you can remove/add/manipulate this cloned content..
$(".modal-body").html(selector) //add that inside modal-body
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="panel-group" id="accordion">
<!-- retrieving all questions from views.py-->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
Question
</a>
</h3>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<br/><br/>
<!--added class here -->
<div class="contents">
<!--remove ids use class-->
1
<input type="hidden" name="quesid" value="1">
<label>Q- <input type="text" name="ques" value="abc" readonly></label><br><br>
<img src="{{x.question.image}}" alt="" srcset="" width="700"><br><br>
<label>A- <input type="text" name="" value="A1" readonly><br><br>
<label>B- <input type="text" name="" value="B1" readonly><br><br>
<label>C- <input type="text" name="" value="C1" readonly><br><br>
<label>D- <input type="text" name="" value="D1" readonly><br><br>
<input type="checkbox" name="" value="A" checked>
<label>Ok </label>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">Edit</button>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
Question 2
</a>
</h3>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<br/><br/>
<div class="contents">
2
<input type="hidden" name="quesid" value="2">
<label>Q- <input type="text" name="ques" value="abc" readonly></label><br><br>
<img src="{{x.question.image}}" alt="" srcset="" width="700"><br><br>
<label>A- <input type="text" name="" value="A2" readonly><br><br>
<label>B- <input type="text" name="" value="B2" readonly><br><br>
<label>C- <input type="text" name="" value="C2" readonly><br><br>
<label>D- <input type="text" name="" value="D22" readonly><br><br>
<input type="checkbox" name="" value="A" checked>
<label>Not Good </label>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">Edit</button>
</div>
</div>
</div>
</div>
</div>
<!--move whole modal outside loop-->
<div class="modal fade" id="staticBackdrop" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!--here all will come-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
</div>
I'm trying to get a value from the database: SenderDriver->total_trips.
And all great, but I want to get a specific id so I have to put it into onClick(), then it set the value from the database variable: SenderDriver->total_trips.
This is the code
<span onclick="readd( amounts{{$referral_detail->SenderDriver->total_trips}});"
data-target="#addMoneyModel" data-toggle="modal" id="{{$referral_detail->GetterDriver->id }}">
<a data-original-title="Add Money" data-toggle="tooltip" id="{{ $referral_detail->GetterDriver->id }}" data-placement="top" class="btn text-white btn-sm btn-success menu-icon btn_detail action_btn">
<i class="fa fa-money-bill"></i>
</a>
</span>
Now I want the val to change a specific text when it's clicked using the above code. Btw all this is in .blade.php
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
function readd(){
$("input:text").val(amounts);
}
</script>
I tried a lot nothing working any help?
The input
<div class="modal fade text-left" id="addMoneyModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel33"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<label class="modal-title text-text-bold-600" id="myModalLabel33">#lang('admin.message200')</label>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="{{ route('merchant.AddMoney') }}" method="post">
#csrf
<div class="modal-body">
<label>#lang('admin.message203'): </label>
<div class="form-group">
<select class="form-control" name="payment_method" id="payment_method" required>
<option value="1">#lang('admin.message201')</option>
<option value="2">#lang('admin.message202')</option>
</select>
</div>
<label>#lang('admin.message204'): </label>
<div class="form-group">
<input type="text" name="receipt_number" value="0"
class="form-control" required>
</div>
<label>#lang('admin.message205'): </label>
<div class="form-group">
<input type="text" id="amount" name="amount"
class="form-control" required>
<input type="hidden" name="add_money_driver_id" id="add_money_driver_id">
</div>
<label>#lang('admin.message206'): </label>
<div class="form-group">
<input class="form-control" id="title1" rows="3" name="description"
value="Refer Gift">
</div>
</div>
<div class="modal-footer">
<input type="reset" class="btn btn-outline-secondary btn-lg" data-dismiss="modal" value="close">
<input type="submit" class="btn btn-outline-primary btn-lg" value="Add">
</div>
</form>
</div>
</div>
</div>
Not 100% sure what you're trying to accomplish, but here are my thoughts anyway.
In your onclick implementation you provide an argument to the function readd, which you're not using/defining in your javascript code at the bottom.
It appears that you try to push the value into the input text field of your bootstrap modal with the id="amount"
Here is the improved JavaScript section:
<script type="text/javascript">
function readd(amount){
$("#amount").val(amounts);
}
</script>
I'm not sure if the bootstrap toggle possibly overrides the onclick event of the span element. If that's the case you need to approach that issue a bit different
<script type="text/javascript">
function readd(amount){
$("#amount").val(amounts);
// Do something with the id
const some_important_id = $(this).attr('data-id');
console.log(some_important_id);
$('#addMoneyModel').modal('show');
}
</script>
and remove the modal stuff from your Span element.
<span onclick="readd( {{$referral_detail->SenderDriver->total_trips}});" data-id="{{$referral_detail->GetterDriver->id }}">
I have a form in a modal. When I press the submit button the php file runs with the following errors:
Notice: Undefined index: phone1 in C:\xampp\htdocs\site\bank.php on line 2
Notice: Undefined index: charge1 in C:\xampp\htdocs\site\bank.php on line 4
Here is the PHP code in bank.php:
<?php
echo $_POST["phone"];
echo "</br>";
echo $_POST["charge"];
?>
Here is the modal contents:
<!-- Modal content-->
<div class="modal fade" id="register" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal title here</h4>
</div>
<div class="modal-body">
<form id="modal-form" class="form-horizontal" method="POST" action="bank.php">
<div class="form-group col-md-12">
<div class="form-group">
<div class="col-xs-6" style="float:right;">
<label>phone numer:</label>
<input id="phone" type="text" class="form-control" name="phone" value="pre filled value" disabled/>
<span id='display'></span>
</div>
<div class="col-xs-6" style="float:left;">
<label>charge:</label>
<input style="font-size:17px; font-weight:bold;" id="charge" type="text" class="form-control" name="charge" value="some other prefilled value" disabled/>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<button class="btn btn-danger btn-default pull-right" data- dismiss="modal" style="margin-left:10px;">close</button>
<button type="submit" class="btn btn-success"> submit </button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
modal footer
</div>
</div>
</div>
</div>
I would be thankful if some one help me figure out what;s wrong with this
Not relevant anymore, OP edited his question. see edit for relevant answer!
the name of the post variable is defined by the nameattribute of the input, not the id.
therefore in your bank.php you will have $_POST['phone1'] and $_POST['charge1']available.
you can always just var_dump($_POST); to see all available post variables.
Edit: Also, disabled inputs are not being sent on submit. You can work around that fact by just adding a second hidden input for each disabled one like that:
<!-- Modal content-->
<div class="modal fade" id="register" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal title here</h4>
</div>
<div class="modal-body">
<form id="modal-form" class="form-horizontal" method="POST" action="bank.php">
<div class="form-group col-md-12">
<div class="form-group">
<div class="col-xs-6" style="float:right;">
<label>phone numer:</label>
<input id="phoneDisabled" type="text" class="form-control" name="phoneDisabled" value="pre filled value" disabled/>
<input id="phone" type="hidden" class="form-control" name="phone" value="pre filled value" disabled/>
<span id='display'></span>
</div>
<div class="col-xs-6" style="float:left;">
<label>charge:</label>
<input style="font-size:17px; font-weight:bold;" id="chargeDisabled" type="text" class="form-control" name="chargeDisabled" value="some other prefilled value" disabled/>
<input style="font-size:17px; font-weight:bold;" id="charge" type="hidden" class="form-control" name="charge" value="some other prefilled value" disabled/>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<button class="btn btn-danger btn-default pull-right" data- dismiss="modal" style="margin-left:10px;">close</button>
<button type="submit" class="btn btn-success"> submit </button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
modal footer
</div>
</div>
</div>
</div>
Edit2: Or, just change disabled attribute to readonly
The name in your $_POST variable and the html input name are both different. Please try to make them the same and hopefully, your code will work.
Change name=phone1 to name=phone or whatever.
You have set both of those inputs as disabled. Forms by default won't post those. You probably need to grab the vars with JavaScript, or remove the disabled attributes, again, with JavaScript.
I am a noob in web development so I am stuck at getting data from a modal and saving it to database.
I have made model with bootstrap. Below is the code of the modal
code of modal
<form name="form" action="post" method="">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Add part</button>
</form>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add parts</h4>
</div>
<div class="modal-body">
<input type="text" name="field1" placeholder="Part Name" id="pName" />
<br>
<br>
<input type="text" name="field2" placeholder="Piece Code" />
<br>
<br>
<input type="text" name="field3" placeholder="Piece Price" />
<br>
<br>
<input type="text" name="field4" placeholder="Quatity" />
<br>
<br>
<input type="text" name="field5" placeholder="Total" />
<br>
<br>
<input type="text" name="field6" placeholder="Comments" />
<br>
<br>
<input type="text" name="field7" placeholder="Shipped" />
<br>
<br>
</div>
<div class="modal-footer">
<button onclick="saveit()" type="button" name="saveBtn" class="btn btn-default" data-dismiss="modal">save</button>
</div>
</div>
</div>
</div>
What I am trying to accomplish is get the data entered in this popup modal save it in database by pressing save button in the modal and clear the pop so that user can enter data again. I want to save the data by using PHP Query .Kindly suggest me a way to get it done . I have seen a lot of tutorials and almost every question on stack overflow as well but I am unable to get it done.
You can use ajax to do that; Try this
Your contact page
<div id="contact">
<h3>Contact Us For Any Query</h3>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Add part</button>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script>
$(function(){
$(document).on("click", ".button", function(e) {
e.preventDefault();
var info = $("#form").serialize();
$.ajax({
type: "POST",
url: "add.php",
data: info,
success: function(result){
//$("#form")[0].reset();
$('#notification').html(result);
}
});
e.preventDefault();
});
});
</script>
<!--div for notification -->
<div id="notification"></div>
<div id="form" class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add parts</h4>
</div>
<div class="modal-body">
<input type="text" name="field1" placeholder="Part Name" id="pName" />
<br>
<br>
<input type="text" name="field2" placeholder="Piece Code" />
<br>
<br>
<input type="text" name="field3" placeholder="Piece Price" />
<br>
<br>
<input type="text" name="field4" placeholder="Quatity" />
<br>
<br>
<input type="text" name="field5" placeholder="Total" />
<br>
<br>
<input type="text" name="field6" placeholder="Comments" />
<br>
<br>
<input type="text" name="field7" placeholder="Shipped" />
<br>
<br>
</div>
<div class="modal-footer">
<button type="button" name="saveBtn" class="btn btn-default button" data-dismiss="modal">save</button>
</div>
</div>
</div>
</div>
</div>
And the PHP page i.e. add.php for adding the data
<?php
//connection to your database
//remember to change the host, dbname, and password to yours,
$db = new PDO('mysql:host=localhost;dbname=databasename;charset=UTF-8',
'root',
'',
array(PDO::ATTR_EMULATE_PREPARES => false,
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
?>
<?php
if (isset($_POST['field1'])) {
$field1 = $_POST['field1'];
$field2 = $_POST['field2'];
$field3 = $_POST['field3'];
$field4 = $_POST['field4'];
$field5 = $_POST['field5'];
$field6 = $_POST['field6'];
$field7 = $_POST['field7'];
$stmt = $conn->prepare("INSERT INTO `table` (field1,field2,field3,field4,field5,field6,field7)
VALUES (:field1, :field2, :field3, :field4, :field4, :field5, :field6, :field7)");
$stmt->bindParam(':field1', $field1);
$stmt->bindParam(':field2', $field2);
$stmt->bindParam(':field3', $field3);
$stmt->bindParam(':field4', $field4);
$stmt->bindParam(':field5', $field5);
$stmt->bindParam(':field6', $field6);
$stmt->bindParam(':field7', $field7);
$stmt->execute();
echo 'added';
}
?>
Hope my answer would be of some help to you:
Keep form inside modal, and give a php file(ex: test.php) as action.
Here is the code I would suggest you to try:
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Add part</button>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<form action="test.php" method="POST">
<!-- Modal content-->
</form>
</div>
</div>
Write a test.php file and retrieve values using $_POST method.
i have a page where I have two buttons, one that opens a modal, and another one that only submits.
I have a .click event on the second button. If i go on the page and click the second button the click event goes fine, BUT if i first open the modal, close it and then i hit the second button, the first time does nothing and the second time it fires the .click event.
I would like to always fire the click event.
this is my code
$(document).ready(function(){
var focusout = false;
$(".prueba").click(function () {
if (focusout == false) {
focusout = true;
return;
}
});
var validator =$('#form1').validate(
{
ignore: "",
rules: {
parametros: {
required: function() { return focusout == true; },
},
terminos: {
required: function() { return focusout == true; },
}
},
highlight: function(element) {
$(element).closest('.grupo').addClass('has-error');
},
unhighlight: function(element) {
$(element).closest('.grupo').removeClass('has-error');
}
});
$(".cancel").click(function() {
validator.resetForm();
});
}); // end document.ready
button 1:
<button type="submit" class="btn btn-primary" name="nueva_articulo"><i class="icon-plus"></i> Nuevo Item</button>
button 2:
<button type="submit" class="btn btn-primary prueba" name="buscar">Buscar</button>
full form:
<form action="" method="post" id="form1" enctype="multipart/form-data">
<p>
<button type="submit" class="btn btn-primary" name="nueva_articulo"><i class="icon-plus"></i> Nuevo Item</button>
<button type="submit" class="btn btn-primary" name="carga_masiva"><i class="icon-arrow-up"></i> Carga Masiva</button>
</p>
<br>
<div class="col-lg-1 grupo">
</div>
<div class="col-lg-10 grupo">
<div class="panel panel-default pagination-centered">
<div class="panel-heading">Búsqueda en Catálogo</div>
<div class="panel-body">
<div class="form-group ">
<div class="col-lg-6 grupo">
<input type="text" class="form-control " id="terminos" name="terminos" placeholder="Términos de búsqueda">
</div>
<div class="col-lg-6 grupo">
<select id="e1" name="parametros" style=" width:80%">
<option></option>
<option value="1" >Autor</option>
<option value="2" >Título</option>
</select>
</div>
</div>
<br> <br>
<div style="text-align:center">
<button type="submit" class="btn btn-primary prueba" name="buscar">Buscar</button>
</div>
</div>
</div>
</div>
<div class="col-lg-1 grupo">
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" name="myModal" data-backdrop="static" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-wide">
<div class="modal-content">
<div class="modal-header">
<button type="submit" class="close cancel" data-dismiss="modal" aria-hidden="true">×</button>
{if isset($smarty.post.nueva_articulo) }
<h4 class="modal-title">Nueva Articulo</h4>
{/if} </div>
<div class="modal-body">
{if isset($smarty.post.nueva_articulo) }
<div class="form-group">
<div class="col-lg-12 grupo">
<label for="art_titulo" class="control-label">Título</label>
<input type="text" class="form-control input-sm" name="art_titulo">
</div>
</div>
<div class="form-group">
<div class="col-lg-12 grupo">
<label for="art_enlace" class="control-label">Enlace</label>
<input type="text" class="form-control input-sm" name="art_enlace">
</div>
</div>
<div class="form-group">
<div class="col-lg-12 grupo">
<label for="aut_id" class="control-label">Autor(es)</label>
<input type='hidden' id='e13' name="autores" style='width:100%'/>
</div>
</div>
<div class="form-group">
<div class="col-lg-12 grupo">
<label for="art_contenido" class="control-label">Contenido</label>
<textarea class="form-control input-sm" name="art_contenido" rows="5" ></textarea>
</div>
</div>
<div class="form-group">
<div class="col-lg-12 grupo">
<label for="etiquetas" class="control-label">Etiquetas</label>
<input type="text" id="e12" name="etiquetas" style="width:100%">
</div>
</div>
<div class="form-group">
<div class="col-lg-12 grupo">
<label for="foto" class="control-label">Imagen</label>
<div class="input-group">
<span class="input-group-btn">
<span class="btn btn-default btn-file">
Buscar… <input type="file" name="foto">
</span>
</span>
<input type="text" class="form-control" name="nombre" readonly="">
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-12 grupo">
<div class="checkbox">
<label>
<input type="checkbox" name="rating" value="si"> Habilitar Rating y Reviews
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="redes" value="si"> Habilitar Compatir en Redes Sociales
</label>
</div>
</div>
</div>
{/if}
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default cancel" data-dismiss="modal" name="cerrar">Cerrar</button>
{if isset($smarty.post.nueva_articulo) }
<button type="submit" class="btn btn-primary" name="insertar_articulo">Guardar Cambios</button>
{/if}
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
<!-- /.modal -->
</form>
They are both of type submit. You should only have 1 submit button on a form
Button 1 could just be a button
<button class="btn btn-primary" name="nueva_articulo"><i class="icon-plus"></i> Nuevo Item</button>
If you want, you can create a Form Object in javascript and generate it dynamically. That will do that you don't need to depend of the submit and forms, just fill the form object with the inputs that you want programatically (that even accept files or images).
But anyway, it seems that you have more than one click events on the same button if the one you want is triggering at the second attempt. You could try to play with event.preventDefault or $.unbind.
As you said taht you need to submit the inputs of the modal, try to place the content of the modal inside the tag and remove the submit type of one of the buttons.