Develop Reference

Get the id on modal when click on anchor tag for open modal using php

I have a modal open on click anchor tag and passing the id value in input hidden field using javascript and value is show in this hidden field
<a href="#modal2" data-toggle="modal" data-id="<?php echo $CRow['id'];?>"
id="<?php echo $CRow['id'];?>" class="btn-floating
waves-effect waves-light yellow modal-trigger" title="Test"></a>
<div id="modal2" class="modal">
<form action="lst_applicant.php" method="post" enctype="multipart/form-data">
<div class="modal-content">
<input type="hidden" id="applicantid" name="applicantid" value="" />
<p>Applicant Information</p>
<?php
$applicant_detail=mysql_query("select * from tbl_useraccount where id=".$applicantid);
?>
</div>
<div class="modal-footer">
<button type="submit" name='save' class="btn waves-effect waves-light right modal-close">Save</button>
</div>
</form>
</div>
Here is the code of javascript passing the id value in input hidden field
<script>
$(document).on("click", ".modal-trigger", function () {
var myBookId = $(this).data('id');
$(".modal-content #applicantid").val( myBookId );
});
</script>
Issue is that when I get id in hidden field but cannot get in php variable. how to get id on modal when opening a modal?
When I click on anchor tag for open a modal then on modal there is one input hidden field, in this hidden field show a id value of each anchor tag using javascript, I want that when this hidden field get id value so how to get in php variable? I am getting in php variable but it is not working

You can achieve data like this, you just have to provide the details in the anchor modal data
data-id="<?php echo $CRow['id'];?>" and for name data-name="<?php echo $CRow['name'];?>" and so on
$(document).on("click", ".modal-trigger", function () {
var myBookId = $(this).data('id');
var name = $(this).data('name');
var email = $(this).data('email');
$(".modal-content #applicantid").val( myBookId );
$("#appli_name").val(name);
$("#appli_email").val(email);
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
Click
<div id="modal2" class="modal">
<form>
<div class="modal-content">
<input type="text" id="applicantid" name="applicantid" value="" />
<p>Applicant Information</p>
<input type="text" id="appli_name"><br>
<input type="text" id="appli_email">
</div>
<div class="modal-footer">
<button type="submit" name='save' class="btn waves-effect waves-light right modal-close">Save</button>
</div>
</form>
</div>

You don't have to get details of that data only inside the modal, you can achieve everything before anchor-tag passing, like how you get id. And you can pass along the details of that data inside the modal
Example: data-name="<?php echo $CRow['name']; ?>" and in your javascript var name=$(this).data('name');

How to implement autocomplete in a modal using Jquery in MVC5

I have a modal window where I want to display an Autocomplete of Jquery UI, this object is inside a form that will then be sent with a submit button to a controller action
my modal window in my main view:
<div class="modal fade" id="agregarProducto">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Agregar Material</h5>
</div>
<form id="myForm">
<label>Producto</label>
<input type="text" class="form-control" name="nombreproducto" id="nombreproducto" autofocus="" />
<br />
<label>Precio Producto</label>
<br />
<input type="text" class="form-control" name="precio" id="idprecioproducto" />
</form>
</div>
<div class="modal-footer">
<input type="submit" value="Agregar Material" class="btn btn-primary" id="btnSubmit" />
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
my Javascript code in my main view calls a JsonResult method that looks for a product:
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
<script>
$(function () {
$("#nombreproducto").autocomplete({
source: "/Recepcions/BuscarProducto"
});
});
</script>
}
my controller:
public JsonResult BuscarProducto(string term)
{
using (DataContext db = new DataContext())
{
var resultado = db.Productoes.Where(x => x.v_Nombre.Contains(term)).Select(y => y.v_Nombre).Take(10).ToList();
return Json(resultado, JsonRequestBehavior.AllowGet);
}
}
How can I establish that by pressing the button that calls my modal window
Agregar Material
Can my modal window be displayed with the autocomplete my products?
I have to call the event from my button? Where do I put the Jquery code? It's the first time that I have to develop something like that ... what Jquery events do I have to handle?
PS: this implementation goes to my controller's JsonResult, but obviously it's not displaying anything, why?
any example or help for me?

What version are you using? If you are using these versions based on the documentation of JQuery UI Autocomplete, this might not work on your bootstrap modal due to conflicts.
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Try to use these versions on your Javascript code and it works:
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
Here is the screenshot based on your code:

Two forms from one input

I'm wondering how I can make this work, unfortunately my code doesn't work. I want my form to have two buttons; one goes to the other PHP file, and the other goes to another PHP file.
The first button, SUBMIT, is working fine. But the second button, SEE RANK, is not working, nothing happens after clicking it
<section class="small-section bg-gray-lighter" id="start">
<div class="container relative">
<!-- FORMS -->
<form id="format" class="form align-center" action="Algorithms/article.php" method = "GET">
<form id="rank" class="form align-center" action="Algorithms/Main2.php" method = "GET">
<div class="row">
<div class="col-md-8 align-center col-md-offset-2">
<div class="newsletter-label font-alt">
Type the description of your case below
</div>
<div class="mb-20">
<!-- INPUT TEXT FIELD -->
<input placeholder="Start typing here" name = "caseInput" class="newsletter-field form-control input-md round mb-xs-12" type="text" required/>
</form>
</form>
<!-- BUTTONS -->
<button form="format" type="submit" class="btn btn-mod btn-medium btn-round mb-xs-10">
Submit
</button>
<button form="rank" type="submit" class="btn btn-mod btn-medium btn-round mb-xs-10">
See rank
</button>
<!-- END OF BUTTONS -->
</div>
<div class="form-tip">
<i class="fa fa-info-circle"></i> Ex. "The father killed her daughter."
</div>
<div id="subscribe-result"></div>
</div>
</div>
</div>
</section>
And it looks like this:

First, it doesn't make sense to use <form> inside <form>. There are couple of ways to do this:
Method 1
Use 2 forms instead.
<form method="post" action="php_file_1.php" id="form1">
<!-- Your further HTML Code Goes Here... -->
</form>
<form method="post" action="php_file_2.php" id="form2">
<!-- Your further HTML Code Goes Here... -->
</form>
Method 2
Use a single PHP file. But perform different function on each button click.
<form method="post" action="functions.php" id="form">
<!-- Your further HTML Code Goes Here... -->
<input type="submit" name="action_1" id="button1">
<input type="submit" name="action_2" id="button2">
</form>
Then in your functions.php file:
if(isset($_POST['action_1'])){
action1(); // Your Function Name...
}
elseif(isset($_POST['action_2'])){
action2(); // Your second function
}

You cannot have a form inside a form. (This is why your second buton does not work)
So, your solution will be to have 2 'submit' elements with different names in your form. Then, on form submission, detect and process accordingly depending on which button was pressed.
<!-- BUTTONS -->
<input type="submit" name='submitAction1' class="btn..." value='Submit'>
<input type="submit" name='submitAction2' class="btn..." value='See rank'>
if(isset($_POST['submitAction1'])){
// process form 1
} elseif (isset($_POST['submitAction2'])){
// process form 2
}

From XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition) - B. Element Prohibitions
form must not contain other form elements
Implementation example with a javascript function which changes the form's action:
<html>
<body>
<script>
function mySubmit(wtf) {
if ('article' == wtf ) {
document.forms['myForm'].action = 'Algorithms/article.php';
} else if ('Main2' == wtf ) {
document.forms['myForm'].action = 'Algorithms/Main2.php';
} else
return false;
document.forms['myForm'].submit();
}
</script>
<form name="myForm">
<input type ="button" value="submit article" class="btn btn-mod btn-medium btn-round mb-xs-10" onClick="mySubmit('article')">
<input type ="button" value="submit Main2" class="btn btn-mod btn-medium btn-round mb-xs-10" onClick="mySubmit('Main2')">
</form>
</body>
</html>

How to clear modal values after submitting

I am new to Meteor and Javascript. I have slowly figured out how to set up a modal form that will show up when I click a button, and can capture my form data and have the form close when I click submit. Where I am stuck is that whenever I click the button to add more data, the previous values are still in the modal form. I have tried most of the other answer and examples I have found, but I can't seem to figure out what I need to do to make it clear the values. Any suggestions would be appreciated. Here is what I have currently:
Modal Template
<template name="addButton">
<div class="modal fade" id="addButton">
<form>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Add Button</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="buttonOrder">Button Order</label>
<input type="text" class="form-control" name="buttonOrder">
</div>
<div class="form-group">
<label for="buttonName">Button Name</label>
<input type="text" class="form-control" name="buttonName">
</div>
<div class="form-group">
<label for="buttonDescription">Button Description</label>
<input type="text" class="form-control" name="buttonDescription">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
<input type="submit" value="Submit" class="btn btn-primary"/>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</form>
</div>
</template>
Modal JS Helper
Template.addButton.events({
'submit form': function(e) {
e.preventDefault();
var button = {
buttonOrder: $(e.target).find('[name=buttonOrder]').val(),
buttonName: $(e.target).find('[name=buttonName]').val(),
buttonDescription: $(e.target).find('[name=buttonDescription]').val()
}
button._id = Buttons.insert(button);
$('#addButton').modal('hide');
$(this).removeData('#addButton.modal');
}
})
#Jeremy-s
I couldn't get your suggestion to work, although the Session key suggestion got me a solution that did for work with Bootstrap 2 but not with Bootstrap 3. I did finally get things working with Bootstrap 3, although I doubt it is the most elegant solution. I added ids to the elements and just set the value for each element to null like so:
$('#addButton').modal('hide')
$('#buttonOrder').val(null);
$('#buttonName').val(null);
$('#buttonDescription').val(null);
Now I just need to figure out why I can't get it to work with the Session key and Bootstrap 3.

One possible way to go is to use Meteor's findAll to find the inputs in the template, then iterate through them and set the value of each input to null. The findAll is a jquery selector but is limited here to the context of the template.
Template.addButton.events({
'submit form': function(e) {
e.preventDefault();
var button = {
buttonOrder: $(e.target).find('[name=buttonOrder]').val(),
buttonName: $(e.target).find('[name=buttonName]').val(),
buttonDescription: $(e.target).find('[name=buttonDescription]').val()
}
button._id = Buttons.insert(button);
_.each(
this.findAll("input"),
function(element){element.value = null}
);
$('#addButton').modal('hide');
}
})
Note also that instead of using jquery to show and hide the modal, Meteor's preferred approach would be to add and remove it completely from the DOM based on a reactive source like a Session key. I would look at Meteor's reactivity summary for additional guidance on how to do this.

Twitter Bootstrap 2 modal form dialogs

I have the following dialog form :
<div class='modal' id='myModal'>
<div class='modal-header'>
<a class='close' data-dismiss='modal'>×</a>
<h3>Add Tags</h3>
</div>
<div class='modal-body'>
<form accept-charset="UTF-8" action="/tagging" data-remote="true" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="mCNvbvoPFWhD7SoJm9FPDh+BcRvCG3d16P+oOFACPuc=" /></div>
<input id="tags_string" name="tags_string" type="text" value="luca" />
<input id="id" name="id" type="hidden" value="4f1c95fd1d41c80ff200067f" />
</form>
</div>
<div class='modal-footer'>
<div class='btn btn-primary'><input name="commit" type="submit" value="Add tag" /></div>
</div>
</div>
and his JS :
<script>
//<![CDATA[
$(function() {
// wire up the buttons to dismiss the modal when shown
$("#myModal").bind("show", function() {
$("#myModal a.btn").click(function(e) {
// do something based on which button was clicked
// we just log the contents of the link element for demo purposes
console.log("button pressed: "+$(this).html());
// hide the dialog box
$("#myModal").modal('hide');
});
});
// remove the event listeners when the dialog is hidden
$("#myModal").bind("hide", function() {
// remove event listeners on the buttons
$("#myModal a.btn").unbind();
});
// finally, wire up the actual modal functionality and show the dialog
$("#myModal").modal({
"backdrop" : "static",
"keyboard" : true,
"show" : true // this parameter ensures the modal is shown immediately
});
});
//]]>
</script>
When I click x, which is <a class='close' data-dismiss='modal'>×</a>, the form close down leaving me on the current page, while I'd like to go on the hamepage.
Also "Add tag" botton, which is <div class='btn btn-primary'><input name="commit" type="submit" value="Add tag" /></div> don't do nothing, while clicking jaust ENTER on the keyboard do the job and I'd like clicking "Add tag" did the same.
I'm not so skilled on JS and front-end prog, so any help is welcome.

Your submit button is outside of the form tags.
It won't know what form to submit.
Use javascript to connect it to the form.
<div class='modal-body'>
<form id="modal-form" accept-charset="UTF-8" action="/tagging" data-remote="true" method="post">
<input name="something" value="Some value" />
</form>
</div>
<div class='modal-footer'>
<a id="modal-form-submit" class='btn btn-primary' href="#">Submit</a>
</div>
<script>
$('#modal-form-submit').on('click', function(e){
// We don't want this to act as a link so cancel the link action
e.preventDefault();
// Find form and submit it
$('#modal-form').submit();
});
</script>
As for the <a class='close' data-dismiss='modal'>×</a> that is supposed to link to the homepage, why not just remove the data-dismiss='modal' and make it act like a normal link using a standard href='home.html'.
Here is some additional code to point you in the right direction for using AJAX to submit the form:
// Since we want both pressing 'Enter' and clicking the button to work
// We'll subscribe to the submit event, which is triggered by both
$('#modal-form').on('submit', function(){
//Serialize the form and post it to the server
$.post("/yourReceivingPage", $(this).serialize(), function(){
// When this executes, we know the form was submitted
// To give some time for the animation,
// let's add a delay of 200 ms before the redirect
var delay = 200;
setTimeout(function(){
window.location.href = 'successUrl.html';
}, delay);
// Hide the modal
$("#my-modal").modal('hide');
});
// Stop the normal form submission
return false;
});

To get the submit button work put it inside the form.
<div class="modal">
<form id="modal-form" action="/tagging" data-remote="true" method="post">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>A Modal Form</h3>
</div>
<div class="modal-body">
<input name="something" value="Some value" />
</div>
<div class="modal-footer">
Cancel
<input type="submit" value="Save" class="btn btn-primary" />
</div>
</form>
</div>
However, this adds an unexpected margin at the bottom of the modal. Bootstrap 2.0.2 introduced the modal-form class to fix this or you can fix it yourself with a style definition like:
.modal > form {
margin-bottom: 0;
}
For linking to another page when closing the modal I go along with TheShellfishMeme
As for the × that is supposed to link to the homepage, why not just remove the data-dismiss='modal' and make it act like a normal link using a standard href='home.html'.

With HTML5 you can have something like this:
<div class="modal" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Add Tags</h3>
</div>
<div class="modal-body">
<form id="my_form" accept-charset="UTF-8" action="/tagging" data-remote="true" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓" />
<input name="authenticity_token" type="hidden" value="mCNvbvoPFWhD7SoJm9FPDh+BcRvCG3d16P+oOFACPuc=" />
</div>
<input id="tags_string" name="tags_string" type="text" value="luca" />
<input id="id" name="id" type="hidden" value="4f1c95fd1d41c80ff200067f" />
</form>
</div>
<div class="modal-footer">
<div class="btn btn-primary"><input name="commit" type="submit" value="Add tag" form="my_form" /></div>
</div>
</div>
This called in HTML5 form-associated element of-course if you need to support all browsers + old ones then you need to go with JavaScript, but you can use JavaScript as a fallback :)

The problem for submitting form lies within bootstrap own JS modal library (bootstrap-modal.js) - basicaly submit event is being prevented due to line #204: ev.preventDefault (why?).
My solution was to add:
if(!$(e.target).parents('form'))
e.preventDefault();
however I don't know what problems it will spawn.

FYI You can do the following (written in jade):
.modal.hide.fadel
form.modal-form
.modal-header
button.close type='button' data-dismiss="modal" x
h3= t 'translation'
.modal-body
p hello
.modal-footer
button.btn data-dismiss="modal" href="#" = t 'close'
a.btn.btn-primary data-dismiss="modal" data-remote="true" href="#"= t 'form.submit'