So i have form having some input fieldd and it is submitting via Ajax Serialize.
The problem is It is not taking all the values of the form in serialize output.I know i have give Name for each field, Here is my code for HTML :
<form action="" id="BindData">
<input type="hidden" name='style_id' id='style_id' value="<?php echo $model->style_id; ?>">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Select Category:</span>
<select id="category" name="cat_id" class="form-control">
<option value="">Select Category</option>
<?php foreach($all_categories['models'] as $Category) { ?>
<option value="<?php echo $Category->category_id; ?>"><?php echo $Category->category_name; ?></option>
<?php } ?>
</select>
</div>
</div>
<div class="form-group tr_sub_cat" style="display:none;">
<div class="input-group">
<span class="input-group-addon">Select SubCategory:</span>
</div>
<div class="input-group">
<span class="sub_category"></span>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Weightage:</span>
<div class="col-xs-1">
<input type="text" name="weightage" id="weightage" class="form-control" value="0"><span class="badge bg-red">%</span>
</div>
</div>
</div>
<button type="button" class="btn btn-primary addBind pull-left">Submit</button>
</form>
In My Above code The serialize method is not taking the values of cat_id & weightage while i have given them name.
The sub category loaded from cat_id select box is coming in serialize data and changes in weightage value is not coming in out put.
Here is my output of serialize :
style_id=1&cat_id=&sub_cat=95&weightage=0
cat_id is blank and weightage is still 0, not the updated one.
Thanks in advance.
you can use val function to collect data from inputs:
var cat = $("#cat_id").val();
var weightage = $("#weightage").val();
you shouldn't have to do it manually for every field. That's what serialize is for.
you can use above code for debugging to check correct form value save in variable or not.
Related
the whole idea is that when a user click on checkbox and save, the form should be submitted with an array containing the checked values, and save them in the database as single row for each value. i don't know if this is possible but i'm sure you guys have a solution or can help me?
and here's my form:
<div class="">
<form style="width: 70%" method="POST" action="{{ URL('/admin/projects/services/save') }}"
enctype="multipart/form-data">
#csrf
<input type="hidden" name="id" id="id" value="{{ #$id }}">
<input type="hidden" name="projectid" id="projectid" value="{{ #$projectid }}">
<div class="row topSpacer">
<div class="col-3">
<p class="bold">Selected Services: <span class="red">*</span></p>
</div>
<div class="col-9">
<input type="text" id="selectedServices" name="selectedServices" value="" readonly>
</div>
</div>
<div class="row topSpacer">
<div class="col-3">
<p class="bold">Select a service: <span class="red">*</span></p>
</div>
<div class="col-9">
#foreach ($services as $service)
<input type="checkbox" name="service" value="<?php echo stripslashes($service->id); ?>">
<label for="service"><?php echo stripslashes($service->name); ?></label>
<br>
<hr>
#endforeach
#error('service')
<span class="text-danger">{{ $message }}</span>
#enderror
</div>
</div>
<div class="row topSpacerHuge">
<div class="col-12 textRight">
<button type="button"
onclick="window.location='{{ url('admin/projects/services/index/'.$projectid) }}'"
class="goBackBtn">Cancel</button>
<input class="saveBtn" id="saveBtn" type="submit" value="Save">
</div>
</div>
</form>
</div>
and my script to get checkboxes value:
<script>
$(function() {
$("input:checkbox[name='service']").click(function() {
$value = [];
$.each($("input:checkbox[name='service']:checked"), function() {
$value.push($(this).val());
$array = $value.join();
});
// console.log(value.join(", "));
$("#selectedServices").val($array);
})
});
</script>
for implementing checked values I recommend to use the select tag
and you can give A name attribute with [] and it will collect all of your data
for example , look at my project's file which I'm trying to collect name of some users :
<select name="users[]" id="example-with-maxHeight" class="multiselect-group" multiple >
#foreach($users as $user)
<option #if($user->average < $averageParticipate )class="alert-danger" #endif value="{{$user->id}}">{{$user->name}} - {{$user->average}}</option>
#endforeach
</select>
have attention to users[] in name attribute
now in your request you can access all of your checked items .
if we look at your code ,can be some thing like this :
<label for="service"><?php echo stripslashes($service->name); ?></label>
<select name="services[]" id="" class="multiselect-group" multiple >
#foreach($users as $user)
<option value = "{{$sevice->id}}"> <?php echo stripslashes($service->name); ?></option>
#endforeach
</select>
now in your controllers you can access them :
request->get('services');
it will give you back an array of selected items .
Notice that id attribute helps me to interact with my java script code
you can rename it to yourselves .
I am doing a project in codigniter and I have passed a variable from my controller to view. In view, I am populating a select with the data I passed so when I try to go to next page by using one of the ids from my array (by using $_POST) I always get index undefined. I am new to this and any help is appreciated.
Here is my code:
<form method ="post" action ="<?php echo base_url(); ?>test/<?php if(isset($_POST['name'])){$var = $_POST['name'];echo $_POST['name'];}else{$var = null;echo "No name";}?>">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="form-field-select-1">Name</label>
<select id="name" name="name" class="chosen-select form-control">
<?php foreach ($names['list_names'] as $p) { ?>
<option value="<?php echo $p['id']; ?>" title="<?php echo $p['fname']; ?>"><?php echo $p['lname'].' '.$p['fname']; ?></option>
<?php } ?>
</select>
</div>
</div>
</div>
<button type ="submit" class="btn red" style="height: 40px; border-radius:4px;">Continue</button>
<div class="space-10"></div>
</form>
I have been tying to make JQuery repeater plugin works fetching data from database. I already have this working inserting the data into the database but I have not look retrieving the inserted data to edit it.
This is the code I have in php and html.
<div id="repeater">
<div class="repeater-heading" align="left">
<a role="button" class="btn btn-info repeater-add-btn" ><span class="glyphicon glyphicon-plus"> </span>Add Transactional Impact</a>
</div>
<div class="clearfix"></div>
<br>
<div class="items" data-group="impacts">
<div class="item-content">
<div class="form-group">
<?php
$query_raw_num = "SELECT * FROM revenue_impact_number WHERE revenue_impact_id='".$id."' ";
$results = $mysqli->query($query_raw_num);
while($impacts = $results->fetch_assoc()){
?>
<div class="row" data-repeater-item>
<div class="col-md-2">
<label>Region:</label>
<select data-skip-name="true" data-name="region_id[]" id="region_id" class="form-control">
<option value="">-- Select --</option>
<?php
$query_raw = "SELECT regions_id, regions_name FROM regions ";
$result = $mysqli->query($query_raw);
while($row = $result->fetch_assoc()){
?>
<option value="<?php echo $row['regions_id']; ?>" <?php echo ($row['regions_id']==$impacts['region_id'] ? 'selected' : ''); ?> ><?php echo $row['regions_name']; ?></option>
<?php } ?>
</select>
</div>
<div class="col-md-2">
<label>Product:</label>
<select data-skip-name="true" data-name="product_id[]" id="product_id" class="form-control">
<option value="">-- Select --</option>
<?php
$query_raw_products = "SELECT product_id, product_name FROM products ";
$result_products = $mysqli->query($query_raw_products);
while($products = $result_products->fetch_assoc()){
?>
<option value="<?php echo $products['product_id']; ?>" <?php echo ($products['product_id']==$impacts['product_id'] ? 'selected' : ''); ?> ><?php echo $products['product_name']; ?></option>
<?php } ?>
</select>
</div>
<div class="col-md-2">
<label>Impact:</label>
<input type="text" data-skip-name="true" data-name="impact_number[]" id="impact" value="<?php echo $impacts['impact_number'];?>" class="form-control" style="width:200px;"/>
</div>
<div class="col-md-2">
<label>Expected:</label>
<input type="text" data-skip-name="true" data-name="expected[]" id="expected" value="<?php echo $impacts['expected'];?>" class="form-control" style="width:200px;"/>
</div>
<div class="col-md-2" style="margin-top:24px;" align="center">
<a id="remove-btn" role="button" onclick="$(this).parents('.item-content').remove()" class="btn btn-danger" ><span class="glyphicon glyphicon-trash"> </span>Remove</a>
</div>
</div>
<?php } ?>
</div>
</div>
</div>
</di>
This is the script function I am using.
$(function(){
$('#repeater').createRepeater();
});
When the page load for the first time everything is displayed successfully. See below image
The issue I am having is that when I try to add new group of fields it is displaying the whole group again and when I click on remove button it is removing the whole data group as well. See below image.
While retrieving the existing data while edit there is an issue in repeater code. Comment below lines from "repeater.js" files
/*
if (key == 0) {
items.remove();
addItem(newItem, key);
}
*/
I have html select2,it can selected multiple option:
<div class="form-group">
<label class="col-sm-1 control-label no-padding-right" for="form-field-recipient">Recipient:</label>
<div class="col-sm-6 col-xs-12">
<span class="input-icon block col-xs-12 no-padding">
<select name="for" id="for" class="for" multiple="multiple" placeholder="For" style="width: 92%">
<?php
foreach($this->forList as $dataFor){
?>
<option value="<?php echo $dataFor['ohp_id'];?>"><?php echo $dataFor['title'];?> Of <?php echo $dataFor['name'];?></option>
<?php } ?>
<?php
foreach($this->group as $group){
?>
<option value="<?php echo $group['object_group_id'];?>"><?php echo $group['object_group_name'];?></option>
<?php } ?>
</select>
<i class="ace-icon fa fa-user col-xs-0"></i>
</span>
</div>
</div>
$(document).ready(function() {
$(".refnd").select2({placeholder: "Reference ND"});
$(".for").select2({placeholder: "For"});
And this jquery:
But in PHP,it just show 1 option selected. How To fix it?
Change the dropdown name as an array:
<select name="for" id="for" class="for" multiple="multiple" placeholder="For" style="width: 92%">
<select name="for[]" id="for" class="for" multiple="multiple" placeholder="For" style="width: 92%">
JS:
var selectedOpt = $('#for').val(); // it will return an array of selected options
// Now use the selectedOpt array in your ajax call
This is an image of how the page looks like,
The 2 big blue buttons at the top are buttons that represent a value from the database. The main function of this button is to help the user to fill in the form in a convenient way leaving only the "Description" to be filled in.
This is my code for the page,
<div class="bodycontainer">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">My Records</h3>
</div>
<div class="panel-body">
<?php
require 'dbfunction.php';
$con = getDbConnect();
$day = date("l");
if (mysqli_connect_errno($con)) {
"Failed to connect to MySQL: " . mysqli_connect_error();
} else {
$result = mysqli_query($con, "SELECT * FROM timetableschedule WHERE day='" . $day . "'");
while ($schedule = mysqli_fetch_array($result)) {
?>
<div class="col-md-4">
<div class="admininfobox">
<a class="btn btn-primary">
<?php
echo "<br/>";
echo $schedule['academicInstitution'] . "<br />";
echo $schedule['startTime'] . "-" . $schedule['endTime'] . "hrs<br />";
echo "<br/>";
?>
</a>
</div>
</div>
<?php
}
mysqli_close($con);
}
?>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Record Activity</div>
<div class="panel-body">
<form name="Create New Admin" class="form-horizontal" method="post" action="handlerecord.php">
<div class="form-group">
<div class="col-sm-4">
<label>Academic Institution</label>
<input list="AcadInst" type="text" class="form-control" placeholder="Institution Name" name="academicInstitution">
<datalist id="AcadInst">
<option value="Singapore Polytechnic (SP)">
<option value="Ngee Ann Polytechnic (NP)">
<option value="Temasek Polytechnic (TP)">
<option value="Republic Polytechnic (RP)">
<option value="Nanyang Polytechnic (NYP)">
<option value="Others (Please specify)">
</datalist>
</div>
<div class="col-sm-4">
<label>Level of Teaching</label>
<input list="LvTeaching" type="text" class="form-control" placeholder="Teaching Stage" name="levelofteaching">
<datalist id="LvTeaching">
<option value="Undergraduate Teaching">
<option value="Postgraduate Teaching">
<option value="Continuing Education">
<option value="Others (Please specify)">
</datalist>
</div>
<div class="col-sm-4">
<label>Type of Teaching</label>
<input list="TyTeaching" type="text" class="form-control" placeholder="Teaching Type" name="typeofteaching">
<datalist id="TyTeaching">
<option value="Clinical Teaching">
<option value="Academic Teaching">
<option value="Talk">
<option value="Others (Please specify)">
</datalist>
</div>
</div>
<div class="form-group">
<div class="col-sm-4">
<label for="startdate">Start Time</label>
<input type="text" class="form-control" placeholder="Select Time" name="starttime">
</div>
<div class="col-sm-4">
<label for="enddate">End Time</label>
<input type="text" class="form-control" placeholder="Select Time" name="endtime">
</div>
<div class="col-sm-4">
<label for="enddate">Description</label>
<input type="text" class="form-control" placeholder="Optional" name="Description">
</div>
</div>
<div class="form-group">
<div class="col-sm-4">
<input type="submit" value="Add" class="btn btn-primary">
</input>
</div>
</div>
</form>
</div>
</div>
An overview of the database,
I am not sure on how to code it. Like Once the user click onto the button, the button goes through the database and input the data accordingly into the form ready for the user to submit.
My suggestion is to create an AJAX request on click.
Create a page loadFormData.php
Accept key data to search in database. For eg: id. Then search in database with this key and get the results. Finally encode this to json (json_encode()) and echo the result.
When the user clicks on the button, trigger an ajax (Javascript) function and send the key values to the loadFormData.php
From the returned json result, extract institution name, start time, end time etc and fill this to form fields using JavaScript
$("#blueButton").click(function() {
$.ajax({
type: "GET",
url: "loadFormData.php",
dataType: "json",
success : function(data) {
// extract each item from the variable 'data'
}
});
});
You should create a form and use action to state the method of entering the values that you want.
For example
http://www.w3schools.com/php/php_forms.asp
You can use this to enter the data easily.