Radio button in controller scope are not working in angular - javascript

I have form where i want to submit the whole data everything is fine except the radio button. The problem occurs when the radio buttons are in controller scope but they work fine out of controller scope. i am getting all other fields value properly except the radio button and i dont know where i am making mistake i am confuse why its not working...
Here is the angular script which is working fine...
//handling form controller
app.controller('myForm',function($http,$scope){
$scope.formData={};
$scope.saveCashbook=function()
{
console.log(this.formData);
$http({
method: "POST",
url: 'cashbook/save_cash_entry',
data: $.param($scope.formData),
headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
}).success(function (data) {
if (data.status == 'success') {
alert('all okay');
} else {
alert(data)
}
});
}
});
Here is my html in which two way data-binding isnt working while the radio buttons are in scope and when i placed them out from controller scope two way data binding start working but than i wont be able to get my radio button value in my controller where i am saving them to database.
<div class="col-sm-12" ng-controller="myForm">
<form name="supplier_form" id="myform" ng-submit="saveCashbook()" >
<div class="form-group col-sm-2" style="padding-top:30px;">
<label for="" class="label label-info">جمع</label>
<label class="control-label radio-inline">
<input type="radio" class="purple" value="jama" name="jamabanam" ng-model="formData.jamabanam" >
</label>
<label for="" class="label label-danger">بنام</label>
<label class="control-label radio-inline">
<input type="radio" class="purple" value="banam" name="jamabanam" ng-model="formData.jamabanam" >
</label>
</div>
<div class="form-group col-sm-2">
<label for="packing" class="control-label">رجسٹر</label>
<select id="register" name="register_id" ng-model="formData.register_id" class="form-control search-select two" >
<option value=""> </option>
<? $query=$this->dba->get_dropdown('register',array('id','name'));
foreach($query as $key=>$value):
?>
<option value="<?=$key?>"><?=$value; ?></option>
<? endforeach;?>
</select>
</div>
<div class="form-group col-sm-4">
<label for="raqam" class="control-label">نام</label>
<select id="name" name="name" ng-model="formData.name" class="form-control search-select two"></select>
</div>
<div class="form-group col-sm-2 has-error">
<label for="nuqsani-raqam" class="control-label">کھاتہ نمبر</label>
<input type="text" class="form-control" name="khata_id" ng-model="formData.khata_id" id="khata_no" >
</div>
<div class="form-group col-sm-2 has-success">
<label for="nuqsani-raqam" class="control-label">رقم</label>
<input type="text" name="raqam" class="form-control" ng-model="formData.raqam" id="raqqam">
</div>
<div class="form-group col-sm-12">
<label for="raqam" class="control-label">تفصیل</label>
<input type="text" name="details" ng-model="formData.details" id="details" class="form-control" >
</div>
<input type="submit" value="submit" name="submit" id="submit">
</form>
</div>
Here is my php function where i am priniting the whole $_POST
public function save_cash_entry()
{
print_r($_POST);
exit();
}

Related

Having problem submitting a form without reload using jquery ajax

When i submit form it doesnot update value in database mysql.Its a form written in php.
here is my php and html. I want that the form should not reload and it must submit the changes in database without reloading the page and show preloader for 1 sec on submitting form.
HTML,PHP AND ACTION of form: Here action is the current page where this form is avalilable
detail_customer.php
<?php
$server = "localhost";
$username = "root";
$pass = "";
$dbname = "stinkspolitics_pl";
$conn = mysqli_connect($server, $username, $pass, $dbname);
if (isset($_GET['detail_customer'])) {
$quest_id = $_GET['detail_customer'];
$get_quest = "SELECT * FROM questions WHERE quest_id = '$quest_id'";
$getting_quest = mysqli_query($conn, $get_quest);
while ($row = mysqli_fetch_assoc($getting_quest)) {
$quest_title = $row['quest_title'];
$category_id = $row['category_id'];
}
}
if (isset($_POST['submit'])) {
$quest_t = $_POST['quest_t'];
$update = "UPDATE questions SET quest_title = '$quest_t' WHERE quest_id = '$quest_id'";
$run_update = mysqli_query($conn, $update);
if ($run_update) {
echo 'hello';
}
}
?>
<div class="recent-orders cust_det ">
<h2> Customer Detail</h2>
<div class="customer_detail">
<form id="form-submit" action="./inc/detail_customer.php
" method="POST" class="c_form animate__animated animate__fadeIn">
<div class='alert alert-success'>
<strong>Success!</strong> Your question has been submitted.
</div>
<div class='alert alert-danger'>
<strong>Sorry!</strong> Your question has not been submitted.
</div>
<div class="row">
<div class="c_detail">
<label for="" class="form-labels">Name</label>
<input type="text" name="cat_id" value="<?php echo $category_id ?>" id="cat_id">
</div>
<div class="c_detail">
<label for="" class="form-labels">Contact</label>
<input type="text" name="quest_t" value="<?php echo $quest_title ?>" id="quest_t">
</div>
<div class="c_detail">
<label for="" class="form-labels">City</label>
<input type="text" name="" id="">
</div>
</div>
<div class="row">
<div class="c_detail">
<label for="" class="form-labels">Name</label>
<input type="text" name="" id="">
</div>
<div class="c_detail">
<label for="" class="form-labels">Contact</label>
<input type="text" name="" id="">
</div>
<div class="c_detail">
<label for="" class="form-labels">City</label>
<input type="text" name="" id="">
</div>
</div>
<div class="row">
<input name="submit" type="hidden" />
<input class="btn-primary submit-btn" type="submit" name="" value="Submit">
</div>
</form>
</div>
</div>
JS Code
index.js
$("#form-submit").on("submit", function () {
// e.preventDefault();
var form = $(this);
var formData = form.serialize();
$.ajax({
type: "POST",
url: form.attr("action"),
data: formData,
success: function (data) {
$(".alert-success").show();
$(".alert-success").fadeOut(4000);
console.log(data);
},
error: function (data) {
$(".alert-danger").show();
$(".alert-danger").fadeOut(4000);
console.log(data);
},
});
return false;
});
Ajax Success Response But not updating data in mySQL
<div class="recent-orders cust_det ">
<h2> Customer Detail</h2>
<div class="customer_detail">
<form id="form-submit" action="./inc/detail_customer.php" method="POST"
class="c_form animate__animated animate__fadeIn">
<div class='alert alert-success'>
<strong>Success!</strong> Your question has been submitted.
</div>
<div class='alert alert-danger'>
<strong>Sorry!</strong> Your question has not been submitted.
</div>
<div class="row">
<div class="c_detail">
<label for="" class="form-labels">Name</label>
<input type="text" name="cat_id" value="<br />
<b>Warning</b>: Undefined variable $category_id in <b>C:\xampp\htdocs\admin_panel\inc\detail_customer.php</b> on line <b>62</b><br />
" id="cat_id">
</div>
<div class="c_detail">
<label for="" class="form-labels">Contact</label>
<input type="text" name="quest_t" value="<br />
<b>Warning</b>: Undefined variable $quest_title in <b>C:\xampp\htdocs\admin_panel\inc\detail_customer.php</b> on line <b>66</b><br />
" id="quest_t">
</div>
<div class="c_detail">
<label for="" class="form-labels">City</label>
<input type="text" name="" id="">
</div>
</div>
<div class="row">
<div class="c_detail">
<label for="" class="form-labels">Name</label>
<input type="text" name="" id="">
</div>
<div class="c_detail">
<label for="" class="form-labels">Contact</label>
<input type="text" name="" id="">
</div>
<div class="c_detail">
<label for="" class="form-labels">City</label>
<input type="text" name="" id="">
</div>
</div>
<div class="row">
<input name="submit" type="hidden" />
<input class="btn-primary submit-btn" type="submit" name="" value="Submit">
</div>
</form>
</div>
</div>
The condition if (isset($_POST['submit'])) { will never evaluate to true, since there is no input element in the form with name="submit" (the button with name='submit' does not send the attribute by default).
Either change the condition:
if (isset($_POST['quest_t'])) { ...
Or, include an input element with name='submit', for example:
<input name="submit" type="hidden" />
Also, make sure to move the $_POST check at the beginning of the file and ensure that no other code will be evaluated in the PHP file (e.g. the rest of the HTML code) if a POST request has been received.
Just return false after at the end of the method.
jQuery has its own way of ensuring "preventDefault()" and it is just returning false from the submit handler.
Full background on this here:
event.preventDefault() vs. return false
Issue has been solved. By changing path and then putting path of js file again.

Why am I getting null values when submitting a form after editing some values with JS?

I have a form with some inputs that are filled from the result of an AJAX request. When I submit the form I get only null on the back-end. I tried to submit the values without editing it and it works
this is my java script code
editPayment = function() {
if ($('#entrytransId').val() != '') {
if ($('#entryReceiptTypesselect').val() == "1") {
$.ajax({
type: "GET",
url: "#Url.Action("GetInvoiceNumber", "Payment")",
data: {transId: $('#entrytransId').val()},
success: function(response) {
if (response.invNo == 0) {
window.location.reload();
} else {
$('#reciptNo').val(response.invNo);
$('#enteryAmt').val(response.Amt);
$('#entrytransId').attr("disabled", "true");
$('#enteryhide').show(500);
}
},
error: function(reponse) {
window.location.reload();
}
});
}
}
This is Exactly My HTML Form with inputs I have tried more times and its failures
but when I deleted the javascript function and fill the data manually its works
<form action="/Payment/EditPayment" id="MF" method="post">
<div class="row">
<div class="col-md-2">
<label class="form-control">Receipt Type</label>
</div>
<div class="col-md-8">
<select class="form-control" id="entryReceiptTypesselect"
name="entryReceiptTypes" required="true"><option value="">-Choose</option>
<option value="1">MoF</option>
<option value="2">Zakah</option>
<option value="3">Tax</option>
<option value="4">Other Taxs</option>
<option value="5">M & S</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-2">
<label class="form-control">Trans Id</label>
</div>
<div class="col-md-3">
<input required="" type="number" class="form-control" id="entrytransId" name="entrytransId">
</div>
<div class="col-md-2" hidden="" id="btnHidden">
<button type="button" class="btn btn-primary legitRipple" onclick="editPayment()">check</button>
</div>
</div>
<div class="row">
<div class="row">
<div class="col-md-2">
<label class="form-control" id="lblinvoice">reciptNo</label>
</div>
<div class="col-md-4">
<input required="" type="number" name="reciptNo" class="form-control" id="reciptNo">
</div>
</div>
<div class="row" hidden="" id="enteryhide">
<div class="col-md-2">
<label class="form-control">enteryAmt</label>
</div>
<div class="col-md-4">
<input required="" type="number" value="0" name="enteryAmt" class="form-control" id="enteryAmt">
</div>
</div>
<div class="row">
<div class="col-md-2">
<label class="form-control">E15 userName</label>
</div>
<div class="col-md-8">
<input required="" type="text" class="form-control" id="userName" name="userName">
</div>
</div>
<div class="row">
<div class="col-md-2">
<label class="form-control">password</label>
</div>
<div class="col-md-8">
<input required="" type="password" class="form-control" id="password" name="password">
</div>
</div>
</div>
<br>
<br>
<br>
<br>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<input type="submit" value="submit" class="btn btn-block btn-success legitRipple" id="enterysubmit">
</div>
</div>
</form>
The issue is not with setting the values via javascript/jquery, but specifically with setting the inputs to disabled.
$('#entrytransId').attr("disabled", "true");
when an input is set to disabled, it is not included (it is excluded) from the form's POST, so will appear as null in the server-side code.
You can:
- not set them to disabled (will affect your UX)
- enable them just before POST (icky)
- use hidden fields
MVC does this for checkboxes, so you can copy that idea here:
<input type='text' name='entryid' />
<input type='hidden' name='entryid' />
POST uses the input's name field, not its id, so it's ok to have multiple inputs with the same name.
POST will then use the first input that is not disabled (so don't put the hidden one first...)
Then just update the jquery to apply the value to both inputs (if you also want it shown in the UI) rather than by id, eg:
$("name[entryid]").each(function() { $(this).val(newvalue); });
(other ways to set this may be better, not checked if .val() will apply to all, likely only applies to the first)
The proplem was on $('#entrytransId').attr("disabled", "true");
i have another function onselectChange() is disabled all inputs , i tried $('#entrytransId').attr("disabled", "true"); and its works well

Jquery Mobile Ajax Post Insert Data

I'm trying to post data from a form with an ajax post. Currently I am just debugging this by alerting the data sent, via a php script.
So my code html :
<form id="form_sewa">
<input type="hidden" name="penyewaan" id="penyewaan" value="">
<div class="form-group col-md-12">
<label for="nama_anak">Nama Anak:</label>
<input type="text" data-mini="true" name="nama_anak" id="nama_anak" value="">
</div>
<div class="form-group col-md-12">
<label for="jumlah_uang">Jumlah Uang:</label>
<input type="number" data-mini="true" name="jumlah_uang" pattern="[0-9]" id="jumlah_uang" value="">
</div>
<div class="form-group col-md-12">
<label for="harga_kamar"><b>Harga</b> Kamar:</label>
<input type="number" data-mini="true" name="harga_kamar" pattern="[0-9]" id="harga_kamar" value="">
</div>
<div class="form-group col-md-12">
<!-- Untuk tanggal -->
<label for="tanggal_masuk">Tanggal <b>Masuk:</b></label>
<input id="tanggal_masuk" name="tanggal_masuk" data-mini="true" />
</div>
<br>
<div class="form-group col-md-12">
<label for="tanggal_keluar">Tanggal <b>Keluar:</b></label>
<input id="tanggal_keluar" name="tanggal_keluar" data-mini="true" />
</div>
<br>
<div class="form-group col-md-12">
<label for="no_kamar"><b>Nomor</b> Kamar:</label>
<input type="number" data-mini="true" name="no_kamar" pattern="[0-9]" id="no_kamar" value="">
</div>
<input type="submit" data-role="button" data-theme="f" data-inline="true" data-icon="check" id="submitSwa" />
Kembali
</form>
In JavaScript
$(document).ready(function(){
$("#submitSwa").click(function(){
$.ajax({
url: "http://localhost/apri2/php/crudpenyewaan.php",
type: "post",
cache:false,
data: {
nama_anak: $('#nama_anak').val(),
jumlah_uang: $('#jumlah_uang').val(),
harga_kamar: $('#harga_kamar').val(),
tanggal_masuk: $('#tanggal_masuk').val(),
tanggal_keluar: $('#tanggal_keluar').val(),
no_kamar: $('#no_kamar').val()
},
success: function(response){
alert(response);
},
error: function(){
alert('Error while request..');
},
complete: function() {
$.mobile.loading("hide");
}
});
});
});
And in php
<?php
print_r($_POST);
?>
I have tried methods like submithandler, formdata serialize, but the alert doesn't show up and my url looks like this after clicking submit:

laravel-Auto increment Id

How to get auto increment Id?I created the database.It has customer registration form.Customer Id is auto-generated in DB.I want to fill Id input field by a max value of Id column.ex:
my source code(register.blade.php)
#extends('layerout.registration')
#section('content')
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form action="/insert" method="post">
<center><font color="white"><h2>Registration form</h2></font></center>
<div class="form-group">
{{csrf_field() }}
<script type="text/javascript">
<label for="example-number-input" class="col-2 col-form-label">ID</label>
<input class="form-control" type="number" value="1" name="id">
</script>
<label for="example-text-input" class="col-2 col-form-label">Name</label>
<input class="form-control" type="text" value="name" name="Name">
<label for="example-text-input" class="col-2 col-form-label">Job_titleID</label>
<select class="form-control" type="text" value="0" name="Job_ID"> <option>-0-</option>
#foreach($register as $cat)
<option value="{{$cat->Job_ID}}" name="Job_ID">{{$cat->Job_ID}}</option>
#endforeach
</select>
<label for="example-text-input" class="col-2 col-form-label">Identifier</label>
<input class="form-control" type="text" value="93xxxxxxV" name="Identifier">
<label for="example-text-input" class="col-2 col-form-label">Street</label>
<input class="form-control" type="text" value="Panagoda road" name="Road">
<label for="example-text-input" class="col-2 col-form-label">city</label>
<input class="form-control" type="text" value="Rakwana" name="City">
<label for="example-text-input" class="col-2 col-form-label">Postal Code</label>
<input class="form-control" type="text" value="7000" name="P_code">
<label for="example-text-input" class="col-2 col-form-label">Countery</label>
<input class="form-control" type="text" value="Sri Lanaka" name="Address">
<label for="example-email-input" class="col-2 col-form-label">Email</label>
<input class="form-control" type="email" value="mithika.hetti#gmail.com" name="email">
<label for="example-tel-input" class="col-2 col-form-label">Telephone</label>
<input class="form-control" type="tel" value="+94 071 172 6818" name="tel">
<label for="example-datetime-local-input" class="col-2 col-form-label">Date and time</label>
<input class="form-control" type="datetime-local" value="2011-08-19T13:45:00" name="datetime-local">
<br>
<br>
<button type="Submit" name="Submit" value="Add" id="add" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
#endsection
my controller
<?php namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use App\Job_ID;
class register extends Controller{
public function register()
{
$register=Job_ID::all();
return view('cutomer.register',['register' => $register]);
}
function insert(Request $req)
{
$ID=$req->input('ID');
$Name=$req->input('Name');
$Job_ID=$req->input('Job_ID');
$Identifier=$req->input('Identifier');
$Road=$req->input('Road');
$City=$req->input('City');
$P_code=$req->input('P_code');
$Address=$req->input('Address');
$email=$req->input('email');
$tel=$req->input('tel');
$datetimelocal=$req->input('datetime-local');
$data = array('E_ID'=>$ID,"E_Name"=>$Name,"Job_ID"=>$Job_ID,"E_Phone"=>$Identifier,"Road" =>$Road,"City" =>$City,"P_Code" =>$P_code,"E_Address" =>$Address,"E_email"=>$email,"E_Phone" =>$tel,"Date"=>$datetimelocal);
DB::table('employer')->insert($data);
}
}
I created ID column and set auto increment it in Mysql.I want to display max value(4) on Id text-field of customer registration form.
with mysql you can do this
SELECT AUTO_INCREMENT
FROM information_schema.TABLES
WHERE TABLE_SCHEMA = "databaseName"
AND TABLE_NAME = "tableName"
for laravel
$table = DB::select("SELECT AUTO_INCREMENT FROM information_schema.TABLES WHERE TABLE_SCHEMA = 'databaseName' AND TABLE_NAME = 'tableName'");
if (!empty($table)) { echo $table[0]->AUTO_INCREMENT; }
If you are asking how to show the id of a Model, first in your controller, make a collection query like:
$posts= Post::all();
return view(view.post)->withPosts($posts);
and then on your blade file, make a foreach to iterate through all the posts:
#foreach ($postsas $post)
<p>This is ID number {{ $post->id }}</p>
#endforeach
If you are asking how to manually auto increment a certain column, this is the code I used to manually make an auto-increment column (form_counter) starting with value of 1. Basically, I check if there is an existing record, if there is none, the first record for the form_counter column is 1. If it is existing, add 1 to the most current value in the column.
$lastValueCollection = Post::where('formId', $request->inputFormId)->orderBy('Term', 'desc')->first();
$form_counter = 1;
if(isset($lastValueCollection->form_counter)){
$form_counter = $lastValueCollection->form_counter + 1;
}
$data = array('E_ID'=>$ID,....., 'Client_ID'=>$form_counter);
DB::table('employer')->insert($data);
This is not exact but I hope this gives you an idea.
on your schema builder: $table->increments('yourPrimaryKey');
example :
Schema::table('users', function (Blueprint $table) {
$table->increments('id');
});
See the the docs: https://laravel.com/docs/5.5/migrations

How to add form with in another form using AJAX? But remember first form is also added with AJAX

I add a form using AJAX in a Php page now I add anther form within that form which is created using AJAX but it is not working.
This is the parent page.
<div class="col-xs-12 mg-top-30 text-left" id="studentstatus">
<div class="col-sm-1 hidden-xs"></div>
<div class="col-sm-2">
<label for="" class="control-label">Are you a?</label>
</div>
<div class="col-sm-5">
<label class="radio-inline">
<input type="radio" name="studentstatus" value="fresh">Freshman</label>
<label class="radio-inline mg-top-5">
<input type="radio" name="studentstatus" value="compart">Reappeared</label>
</div>
</div>
<div id="adddata"></div>`
JQuery to working with AJAX is the following for adding First form:
$(function () {
$('#studentstatus input:radio').change(
function () {
var index = this.value;
$.get(
"add_freshman_form_in_maprevios.php", {
studentstatus: index
},
function (data) {
$("#adddata").html(data);
}
);
}
);
});
add_freshman_form_in_maprevios.php page HTML code is:
$output='<div class="col-xs-12 mg-top-10 text-left">
<div class="col-sm-1 hidden-xs"></div>
<div class="col-sm-2">
<label for="" class="control-label">Roll No.</label>
</div>
<div class="col-sm-2">
<input type="number" class="btn-block input-sm" placeholder="Previous roll no.">
</div>
</div>
<div class="col-xs-12 mg-top-10 text-left">
<div class="col-sm-1 hidden-xs"></div>
<div class="col-sm-3">
<label for="" class="control-label">Write down the names of failed papers:</label>
</div>
</div>
<div class="col-xs-12 mg-top-10 text-left">
<div class="col-sm-1 hidden-xs"></div>
<div class="col-sm-2">
<input type="text" class="btn-block input-sm" placeholder="Failed Paper name...">
</div>
</div>
<div class="col-xs-12 text-left">
<div class="col-sm-1 hidden-xs"></div>
<button class="mg-left-15 color addanother"> <i class="fa fa-plus-circle " > <label for="">Add another</label></i></button>
<div id="compartpaper"></div>
</div>';
echo $output;
It is working very well but when I want another textbox in this form using AJAX than it is not working. I write JQuery code for this purpose into the main page.
$('.addanother').click(function (e) {
e.preventDefault();
$.get(
"add_compart_form_in_previous_paper.php", {
username: $("#username").val()
},
function (data) {
$("#compartpaper").append(data);
}
);
});
The Form which I want to add in this page is mean :
<?php
$output='<div class="col-sm-2">
<input type="text" class="btn-block input-sm" placeholder="Failed Paper name...">
</div>';
echo $output;
?>
You're referring to an element that does not exist when the page is loaded , it is why not enter on the click event. Try this instead.
$("#adddata").on("click", ".addanother", function(){
//your code
});

Categories