We Keep Coding

hidden input not submited

Hi i have modal popup have hidden input with id value from database.
<input id="no_id" name="no_id" type="hidden" value="<? echo $no_id;?>">
I have javascript to call the hidden value below
$(document).ready(function(){
$(".btn").click(function(){
$("#no_id").val($(this).data('id'));
});
the problem is when the form submited, the hidden value not submited.
Any idea to solve this problems
thanks
.btn to call the modal is below, with data-id as value to hidden input
<a target="_blank" data-id="<? echo $no_id;?>" data-toggle="modal" href="#update_bayar" class="btn mini red"><i class="icon-exclamation-sign"></i></a>
Modal form is here
<form id="myForm" action="action.php" method="get" enctype="multipart/form-data">
<div class="modal fade" id="update_bayar" tabindex="-1" role="basic" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Update Status Bayar</h4>
</div>
<div class="modal-body">
<div class="span12"><b>Pembayaran Langsung Ke Kas Negara</b>
<label class="control-label">Nomor NTPN</label>
<input name="no_ntpn" value="test value" type="text" placeholder="" class="m-wrap span12">
<label class="control-label">Tanggal NTPN</label>
<div class="controls">
<input name="tgl_ntpn" type="text" placeholder="" class="m-wrap span12 date-picker" value="test value">
</div><br>
<b>Pembayaran Ke Rekening Bendahara</b>
<label class="control-label">Nomor Rekening</label>
<div class="controls">
<input name="tanggal_bayar" value="test value" type="text" placeholder="" class="m-wrap span12">
</div>
<label class="control-label">Lampirkan Bukti Transfer/Rekening Koran</label>
<input type="file" name="file" />
</div>
<div id="output"></div>
<div id="progressbox"><div id="progressbar"></div ><div id="statustxt">Loading...</div ></div>
</div>
<div class="modal-footer">
<input id="no_id" name="no_id" type="hidden" value="<? echo $no_id;?>">
<button id="submit" name="submit_status_bayar" type="submit" class="btn green"><i class="icon-save"></i> Simpan</button>
</div>
</div>
</div>
</div>
</form>
got the answer after remove .btn submit class

I can not understand one thing, you have already given value to that hidden field using PHP code, and then on btn click, you are picking btn's data-id value and assigning it to the hidden field.
I think if the .btn is not having any value with its data-id attribute, then it will set hidden fields with blank.
That is the reason I can see, you are not getting its value in your PHP code.

How to close popup after checkbox is checked

I have a specific request from a customer. I'm more a designer than a developer. I'm working on a WordPress theme with a custom contact form integrated.
I need to place a link on the "Submit" button that when clicked will open a confirm popup. In the popup, the user would find a checkbox with a text saying "I declare that I have read, understood and accepted the information on the processing of my personal data".
Once they check the checkbox, a "Continue" button on the bottom of that popup should enable (prior to checking the checkbox, the Continue button is disabled). When the Continue button is clicked, the popup would go away and the form will be launched.
Here's how I would like the popup to look like:
Here's the HTML of the form:
<form method="post" name="contactform" class="peThemeContactForm">
<div class="col-md-5 col-sm-5 col-xs-12 animated hiding" data-animation="slideInLeft">
<div class="form-group">
<input type="text" name="author" class="form-control input-lg" placeholder="<?php _e("Full Name",'Pixelentity Theme/Plugin'); ?>" required />
</div>
<div class="form-group">
<input type="email" name="email" class="form-control input-lg" placeholder="<?php _e("Email",'Pixelentity Theme/Plugin'); ?>" required />
</div>
<div class="form-group">
<input type="text" name="phone" class="form-control input-lg" placeholder="<?php _e("Phone",'Pixelentity Theme/Plugin'); ?>">
</div>
</div>
<div class="col-md-7 col-sm-7 col-xs-12 animated hiding" data-animation="slideInRight">
<div class="form-group">
<textarea name="message" class="form-control input-lg" placeholder="<?php _e("Message",'Pixelentity Theme/Plugin'); ?>" required ></textarea>
</div>
</div>
<input type="submit" class="btn btn-custom up animated hiding" value="<?php _e("Send Message",'Pixelentity Theme/Plugin'); ?>" data-animation="fadeInUpBig">
</form>

You are use Bootstrap Modal. If the control that should close the dialog is placed within the modal, then just add data-dismiss="modal" attribute to this control. To lock or unlock Continue button use handler for the chechkbox click event.
Also you could implement another sequence of user actions that is demonstrated below.
$(".modal").on('show.bs.modal', lock);
$("#MyModal [type=checkbox]").click(lock);
$("#MyModal .btn-primary").click(function() {
$("#MyForm").submit();
});
function lock() {
var flag = $("#MyModal [type=checkbox]").prop('checked');
if (!flag) {
$("#MyModal .btn-primary").attr("disabled", "disabled");
} else {
$("#MyModal .btn-primary").removeAttr("disabled");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Modal -->
<div id="MyModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Privacy Policy</h4>
</div>
<div class="modal-body">
<div class="checkbox">
<label>
<input type="checkbox"> I declare that I have read, understood and accepted the information on the processing of my personal data.
</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" disabled="disabled">Continue</button>
</div>
</div>
</div>
</div>
<!-- Form with confirmation request -->
<form id="MyForm" action="/">
<p>You will have to accept our privacy policy to submit the form data.</p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#MyModal">Submit</button>
</form>
The Submit button opens dialog box that contains the checkbox for confirmation. The Continue button submits the form, but it is disabled until the checkbox will be checked.

You should do it with JavaScript jQuery. So install the jQuery plugin first.
Put the popup inside the form like this and change the submit button to a onclick event:
<form method="post" name="contactform" class="peThemeContactForm">
<div class="col-md-5 col-sm-5 col-xs-12 animated hiding" data-animation="slideInLeft">
<div class="form-group">
<input type="text" name="author" class="form-control input-lg" placeholder="<?php _e("Full Name",'Pixelentity Theme/Plugin'); ?>" required />
</div>
<div class="form-group">
<input type="email" name="email" class="form-control input-lg" placeholder="<?php _e("Email",'Pixelentity Theme/Plugin'); ?>" required />
</div>
<div class="form-group">
<input type="text" name="phone" class="form-control input-lg" placeholder="<?php _e("Phone",'Pixelentity Theme/Plugin'); ?>">
</div>
</div>
<div class="col-md-7 col-sm-7 col-xs-12 animated hiding" data-animation="slideInRight">
<div class="form-group">
<textarea name="message" class="form-control input-lg" placeholder="<?php _e("Message",'Pixelentity Theme/Plugin'); ?>" required ></textarea>
</div>
</div>
<a onclick="popupshow()" class="btn btn-custom up animated hiding" data-animation="fadeInUpBig"><?php echo _e("Send Message",'Pixelentity Theme/Plugin'); ?></a> //Submit-Button
//PopUP
<div id="popup" style="display:none;">
<input type="checkbox" id="checkbox" onchange="checkboxclick()">
<button type="submit" id="mycheckbox" disabled>Continue</button>
</div>
</form>
Now do the Javascript Functions (Put them in your head section):
<script>
function popupshow() {
document.getElementById("popup").style = "";
}
function checkboxclick() {
if (document.getElementById("mycheckbox").checked) {
$('#mycheckbox').prop('disabled', false);
} else {
$('#mycheckbox').prop('disabled', true);
}
}
</script>
This should show the popup if you click the submit-button and should activate the continue-button if the checkbox is checked.

Get Data entered in modal to save In Database

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.

How to get a button ID to jquery and modal window?

I have an HTML form and on Clicking the button would generate a Modal window.The Button is as follows.
<button type="button" class="btn" id="gs_one" data-toggle="modal" data-target="#BASIC">Get Started</button>
The modal type that launched would be the "basic" type. Modal is actually another form, which would then be submitted to another PHP page via a POST method. The Modal is as below.
<div class="modal fade" id="BASIC" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Header</h4>
</div>
<div class="modal-body">
<form class="contact-work-form2 mar" id="contact-form" action="" method="post">
<div class="text-input">
<div class="float-input">
<input type="text" placeholder="Name" id="name2" name="name" required>
</div>
<div class="float-input2">
<input type="text" placeholder="Email" id="mail2" name="mail" required>
</div>
</div>
<div class="text-input">
<div class="float-input">
<input type="text" placeholder="Phone" id="phone" name="phone" required>
</div>
<div class="float-input2">
<input type="text" placeholder="Company" id="company" name="company" required>
</div>
</div>
<div class="text-input">
<div class="float-input1">
<input type="text" required name="country" id="country" placeholder="Country">
</div>
</div>
<input type="submit" value="Submit" class="submit_contact main-form" name="mailing-submit">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I can POST to the PHP page. However, while posting, I also need to pass a variable which has the value or the ID of button that launched the modal.

you can access the button id by
$(document).ready(function(){
$('.btn').click(function(){
var a=$(this).attr('id');
alert(a);
});
});

Try following code,
When you click on the button it will fetch corresponding id of the modal.
That id will be added as hidden field into the form.
When you submit the form, you can access the data in server-side.
<script type="text/javascript">
function appendHiddenDiv(){
var modalNameWithHash = $(this).attr('data-target');
var modalName = modalNameWithHash.substring(1)
$('<input>').attr({
type: 'hidden',
name: 'plan',
value: modalName
}).appendTo(modalNameWithHash+' '+'form');
}
$(document).on("click",'button[data-toggle="modal"]', appendHiddenDiv);
</script>
I hope this helps.

Load data by "id" for edit form using javascript in codeigniter

I am trying to pass data from a table to edit a form, using JavaScript. The problem is that I am a complete newbie at JavaScript. Can someone at least help me by giving me an example of what the code should be?
I am not doing AJAX, just simple load data with JavaScript
my model :
function edit($a)
{
$d = $this->db->get_where('crud', array('idcrud' => $a))->row();
return $d;
}
my controller :
function edit()
{
$kd = $this->uri->segment(3);
if ($kd == NULL) {
redirect('Chome');
}
$dt = $this->Mcrud->edit($kd);
$data['fn'] = $dt->firstname;
$data['ln'] = $dt->lastname;
$data['ag'] = $dt->age;
$data['ad'] = $dt->address;
$data['id'] = $kd;
$this->load->view('Vhome', $data);
}
And this is the button in the view, "Vhome", that I use as edit button :
<button class="btn btn-warning btn-xs" onclick="edit(<?php echo $row->idcrud; ?>)"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></button>
That button will call JavaScript edit function that should call the data by "idcrud" :
function edit(idcrud)
{
$('#form')[0].reset(); // reset form on modals
$('#modal_form').modal('show'); // show bootstrap modal
$('.modal-title').text('Edit Data'); // Set Title to Bootstrap modal title
// I dont know what must i do here to call my data in table crud by "idcrud"
}
And this is the form where the data gets passed to :
<div class="modal fade" id="modal_form" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title">Surat Keluar</h3>
</div>
<div class="modal-body form">
<form action="Chome/edit" method="post" id="form" class="form-horizontal">
<input type="hidden" value="" name="id"/>
<div class="form-body">
<div class="form-group">
<label for="fn" class="control-label col-md-3">First Name</label>
<div class="col-md-9">
<input type="text" class="form-control" id="fn" name="fn" placeholder="First Name">
</div>
</div>
<div class="form-group">
<label for="ln" class="control-label col-md-3">Last Name</label>
<div class="col-md-9">
<input type="text" class="form-control" id="ln" name="ln" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<label for="ag" class="control-label col-md-3">Age</label>
<div class="col-md-9">
<input type="text" class="form-control" id="ag" name="ag" placeholder="age">
</div>
</div>
<div class="form-group">
<label for="ad" class="control-label col-md-3">Address</label>
<div class="col-md-9">
<input type="text" class="form-control" id="ad" name="ad" placeholder="Address">
</div>
</div>
</div>
<div class="modal-footer">
<input type="submit" name="mit" class="btn btn-primary" value="Submit">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Can someone give me an example of what must I write in the JavaScript function edit?
edit :
This is full code of my view Vhome.php

Ok, it's quite easy. First put some identifiers on this section:
foreach(...){
...
<tr id="idcrud<?php echo $row->idcrud;?>">
<td class="idcrud"><?php echo $row->idcrud; ?></td>
<td class="fn"><?php echo $row->firstname; ?></td>
<td class="ln"><?php echo $row->lastname; ?></td>
<td class="age"><?php echo $row->age; ?></td>
<td class="addr"><?php echo $row->address; ?></td>
...
</tr>
And in your edit() function:
function edit(idcrud)
{
$('#form')[0].reset(); // reset form on modals
$('#modal_form').modal('show'); // show bootstrap modal
$('.modal-title').text('Edit Data'); // Set Title to Bootstrap modal title
// MY EDIT:
$("input #fn").val($("td #idcrud"+idcrud + " .fn").html());
$("input #ln").val($("td #idcrud"+idcrud + " .ln").html());
//and so on
}
Some observation: Inside your form <input type="hidden" value="" name="id"/> will also need an id attribute : <input id="id" type="hidden" value="" name="id"/>. Then you can update it's value with: $("input #id").val(idcrud); in the edit() function.