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.
Related
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 very simple page in HTML/PHP in which I am displaying form like below
<div class="modal-content">
<div class="modal-header" style="background: #095077; color: #fff" >
<h3 class="modal-title" id="formModalLabel" style="margin-left: 20px; margin-top: 20px;margin-bottom: 20px;">Compare Numbers
</h3>
</div>
<div class="modal-body">
<form id="demo-form" class="mb-4" novalidate="novalidate">
<div class="form-group row align-items-center" style = "margin-bottom:20px">
<label class="col-sm-3 text-left text-sm-right mb-0">Number 1
</label>
<div class="col-sm-9">
<select name="number1" id="number1" class="form-control" required>
<option value="">--Select 1st Number--
</option>
<?phpwhile($number_row=mysqli_fetch_array($number_result)){?>
<option value="<?php echo $number_row['number'];?>">
<?php echo $number_row['number'];?>
</option>
<?php}?>
</select>
</div>
</div>
<div class="form-group row align-items-center">
<label class="col-sm-3 text-left text-sm-right mb-0">Number 1
</label>
<div class="col-sm-9">
<select name="number2" id="number2" class="form-control" required>
<option value="">--Select 2nd Number--
</option>
<?phpwhile($number2_row=mysqli_fetch_array($number2_result)){?>
<option value="<?php echo $number2_row['number'];?>">
<?php echo $number2_row['number'];?>
</option>
<?php}?>
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-dismiss="modal">Close
</button>
<button type="button" onclick="location.href='details.php?id='" class="btn btn-primary">Compare
</button>
</div>
</div>
</div>
I want pass number1 and number2 value with details.php when user press compare button. I do not know how I can use selection value from form. Let me know if someone can help me for do it.
Thanks
There are multiple ways to do this. Simplest way is, You can use the action attribute in the form and use submit button to submit the values to details.php
<form id="demo-form" class="mb-4" novalidate="novalidate" action='details.php' method='GET'>
<button type="submit" class="btn btn-primary">Compare</button>
in details.php you will get the submitted values. Now by Capturing the submitted Form Data in details.php, compare the values and respond back with resultant html.
You can do it with Javascript;
But I think it's better to do with form-submit:
At first, change
<form id="demo-form" class="mb-4" novalidate="novalidate">
to
<form id="demo-form" class="mb-4" novalidate="novalidate" action="details.php" method="get">
Then you can change the button to a submit button instead of normal button:
<input type="submit">
So you are able to get the params of your form to details.php. It will call details.php?number1=2&number2=3
In your details.php you can get the values with PHP using $_GET['number1'] and so on..
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 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.
I am trying to clear all the errors and make input values blank on closing of magnific popup.
I inspected the class of 'close' button and tried to fire jquery event but it is not working.
$("button.mfp-close").on('click',function(){
console.log("Closed");
});
When i click on mfp-close then there is no log in console.
HTML snippet is:
<div class="mfp-content"><div id="customdesign" class="white-popup mfp-with-anim">
<div class="row">
<div class="col-sm-12 text-center">
<h3>Upload Your Design</h3>
<p><span class="success_sbmt" style="display:none;color:green">Congratulations! We have sent you the coupon code on your registered email id</span>
</p><form novalidate="novalidate" class="form cmxform" id="customForm">
<input name="leave" value="http://" type="hidden">
<input name="isblank" value="" type="hidden">
<div class="form-group">
<label class="sr-only">Name</label>
<input aria-required="true" class="form-control" name="nam_cst" id="nam_cst"
placeholder="Enter Name.." required="" type="text">
<span class="help-block" style="color:red"></span>
</div>
</form>
</div>
</div>
<button title="Close (Esc)" type="button" class="mfp- close">×</button>
</div></div>
How can we handle this operation??
First of all, if you are using bootstrap framework, use bootstrap modal instead magnific popup, no need for extra js librabry, you can achieve same with bootstrap modal
in your HTML, button you have class="mfp- close" it should be class="mfp-close" as you are binding it like this $("button.mfp-close")
To reset form on pop-up close, you can achieve it with $('form')[0].reset();
Script
$("button.mfp-close").on('click',function(){
alert("Closed");
$('form')[0].reset();
});
HTML
<a class="popup-modal" href="#customdesign">Open modal</a>
<div class="mfp-content">
<div id="customdesign" class="white-popup-block mfp-hide">
<div class="row">
<div class="col-sm-12 text-center">
<h3>Upload Your Design</h3>
<p>
<span class="success_sbmt" style="display:none;color:green">Congratulations! We have sent you the coupon code on your registered email id</span>
</p>
<form novalidate="novalidate" class="form cmxform" id="customForm">
<input name="leave" value="http://" type="hidden">
<input name="isblank" value="" type="hidden">
<div class="form-group">
<label class="sr-only">Name</label>
<input aria-required="true" class="form-control" name="nam_cst" id="nam_cst" placeholder="Enter Name.." required="" type="text">
<span class="help-block" style="color:red"></span>
</div>
</form>
</div>
</div>
<button title="Close (Esc)" type="button" class="mfp-close">×</button>
</div>
</div>
Working fiddle example