Develop Reference

TypeError: Cannot read property 'state' of undefined, even though already binded

im trying to print a state in my reactjs web page, i already bind the function just like the other answer says but it still gave me the same error, here is my code
export class Tambah extends React.Component{
constructor(){
super();
this.add = this.add.bind(this);
}
add(event){
this.setState({company: event.target.value})
}
}
function FormTambah(){
return(
<div className="konten container-sm">
<br></br><br></br>
<div className="tabel card rounded">
<div className="card-body">
<p className="head panel-body">Add User</p>
<br/><br/>
<form>
<p>Email*</p>
<input type="text" value={this.state.company} onChange={this.add} className="email form-control col-sm-6"/>
<br/>
<p>Full Name*</p>
<input type="text" className="email form-control col-sm-7" placeholder="Enter Fullname" onChange={this.FullName}></input>
<br/>
<div className="stat custom-control custom-switch">
<input type="checkbox" className="custom-control-input switch-lg" id="customSwitch1"/>
<label className="custom-control-label" for="customSwitch1">Active Status</label>
</div>
<br/>
<button type="submit" className="submit btn col-sm-1">Save</button>
</form>
</div>
</div>
</div>
)
}
the error happens right here :
<input type="text" value={this.state.company} onChange={this.add} className="email form-control col-sm-6"/>
i already bind the add method after i saw the other question but it still gave me the same error, thanks before, any help will be appreciated

state is available in class components not function components.
also beside react, what you're doing is not legal in JS, you're defining state in one class and try to use it in a different function that is not belong to that class.
what you want to do is move the code in FormTambah function to render function in the class component
export class Tambah extends React.Component{
constructor(){
super();
this.add = this.add.bind(this);
}
add(event){
this.setState({company: event.target.value})
}
render(){
return(
<div className="konten container-sm">
<br></br><br></br>
<div className="tabel card rounded">
<div className="card-body">
<p className="head panel-body">Add User</p>
<br/><br/>
<form>
<p>Email*</p>
<input type="text" value={this.state.company} onChange={this.add} className="email form-control col-sm-6"/>
<br/>
<p>Full Name*</p>
<input type="text" className="email form-control col-sm-7" placeholder="Enter Fullname" onChange={this.FullName}></input>
<br/>
<div className="stat custom-control custom-switch">
<input type="checkbox" className="custom-control-input switch-lg" id="customSwitch1"/>
<label className="custom-control-label" for="customSwitch1">Active Status</label>
</div>
<br/>
<button type="submit" className="submit btn col-sm-1">Save</button>
</form>
</div>
</div>
</div>
)
}
}

Put FormTambah into render:
export class Tambah extends React.Component {
constructor() {
super();
this.add = this.add.bind(this);
}
add(event) {
this.setState({ company: event.target.value });
}
render() {
return (
<div className="konten container-sm">
<br></br>
<br></br>
<div className="tabel card rounded">
<div className="card-body">
<p className="head panel-body">Add User</p>
<br />
<br />
<form>
<p>Email*</p>
<input
type="text"
value={this.state.company}
onChange={this.add}
className="email form-control col-sm-6"
/>
<br />
<p>Full Name*</p>
<input
type="text"
className="email form-control col-sm-7"
placeholder="Enter Fullname"
onChange={this.FullName}
></input>
<br />
<div className="stat custom-control custom-switch">
<input type="checkbox" className="custom-control-input switch-lg" id="customSwitch1" />
<label className="custom-control-label" htmlFor="customSwitch1">
Active Status
</label>
</div>
<br />
<button type="submit" className="submit btn col-sm-1">
Save
</button>
</form>
</div>
</div>
</div>
);
}
}

Show all values returned from an AJAX request

I have a query to select the data from my database:
function check_po_kode()
{
$key = $this->input->post('key');
$this->db->select('a.NO, b.quantity, b.satuan, b.harga, b.discount, b.sparepart_kode, b.sparepart_name, c.id as id_sparepart');
$this->db->from('purchase_order a');
$this->db->join('purchase_order_item b', 'a.id = b.purchase_order_id');
$this->db->join('sparepart c', 'c.kode = b.sparepart_kode');
$this->db->where(array('a.NO'=>$key));
$result = $this->db->get()->row_array();
if (count($result) > 0)
{
echo json_encode(array('status'=> 1, 'qty_po'=> $result['quantity'], 'satuan'=> $result['satuan'], 'harga'=> $result['harga'], 'discount'=> $result['discount'], 'sparepart_name'=> $result['sparepart_name'], 'sparepart_kode'=> $result['sparepart_kode'], 'id_sparepart'=> $result['id_sparepart'], 'jmlhSparepart'=> $result['jmlhSparepart']));
}
else
{
echo json_encode(array('status'=> 0));
}
}
I already have the result. I want to then show the data in the page with this AJAX code:
//check purchase order kode
$("#purchase-order-kode").blur(function() {
var key = $(this).val();
$.ajax({
url: '<?php echo base_url('
purchase_order / check_po_kode '); ?>',
type: 'post',
dataType: 'json',
data: {
key: key
},
error: function() { },
success: function(res) {
console.log(res);
if (res.status == 1) {
$("#purchase-order-kode-notif").html("Valid");
$('#form').find('#sparepart_id').val(res.id_sparepart);
$('#form').find('#sparepart_kode').val(res.sparepart_kode);
$('#form').find('#sparepart_name').val(res.sparepart_name);
$('#form').find('#quantity').val(res.qty_po);
$('#form').find('#unit').val(res.satuan);
$('#form').find('#price').val(res.harga);
$('#form').find('#discount').val(res.discount);
$('#button_post').prop('disabled', false);
} else {
$("#purchase-order-kode-notif").html("Invalid Kode!");
$('#button_post').prop('disabled', true);
}
}
});
});
<div class="transport-row form-box" style="display: inline-block; width: 1250px">
<h4>Input Item</h4>
<div style="margin-bottom: 20px"></div>
<div class="row-fluid sparepart-row">
<div class="control-group">
<div class="span4">
<fieldset>
<label>Nama Barang</label>
<input type="hidden" name="sparepart_id[]" id="sparepart_id">
<input type="text" name="sparepart_kode[]" class="stok_barang_id" id="sparepart_kode" placeholder=" Kode" readonly style="width: 100px; padding-bottom:4px;">
<div class="input-append">
<input type="text" name="sparepart_name[]" class="stok_barang_name" id="sparepart_name" readonly placeholder="Sparepart name" title="" style="padding-bottom:4px;">
<span class="add-on">
<i data-title="" ime-icon="icon-time" data-date-icon="icon-search" class="icon-search"></i>
</span>
</div>
</fieldset>
</div>
<div class="span1 span-qty">
<fieldset>
<label>Quantity</label>
<input type="text" name="quantity[]" id="quantity" class="quantity" placeholder="99" style="width:65px;" />
</fieldset>
</div>
<div class="span1 span-qty">
<fieldset>
<label>Unit</label>
<input type="text" id="unit" class="unit" placeholder="Unit" style="width: 65px;" readonly/>
</fieldset>
</div>
<div class="span2 span-harga">
<fieldset>
<label>Price</label>
<input type="text" name="price[]" id="price" class="price" value="" placeholder="999" style="width:160px;" readonly/>
</fieldset>
</div>
<div class="span3 span-harga">
<fieldset>
<label>Discount</label>
<input type="text" name="discount[]" id="discount" class="discount" value="" placeholder="10%" style="width:160px;">
<button class="btn btn-primary" id="add_row">+</button>
</fieldset>
</div>
</div>
</div>
</div>
With the above code I succeed in showing only 1 item in the data. If I run that query with Number PO, there is 2 or 3 items returned. How can I show all data from the AJAX request above?
EDIT :
I already tried with :
//check purchase order kode
$("#purchase-order-kode").blur(function(){
var key = $(this).val();
$.ajax({
url : '<?php echo base_url('purchase_order/check_po_kode'); ?>',
type : 'post',
dataType : 'json',
data : {key:key},
error : function(){
},
success : function(res){
console.log(res);
if(res.status == 1){
$("#purchase-order-kode-notif").html("Valid"); $.each(res,function(index,item){ $('#form').find('#sparepart_id').text(item.id_sparepart), $('#form').find('#sparepart_kode').text(item.sparepart_kode), $('#form').find('#sparepart_name').text(item.sparepart_name), $('#form').find('#quantity').text(item.qty_po), $('#form').find('#unit').text(item.satuan), $('#form').find('#price').text(item.harga), $('#form').find('#discount').text(item.discount);
});
$('#button_post').prop('disabled', false);
}else{
$("#purchase-order-kode-notif").html("Invalid Kode!");
$('#button_post').prop('disabled', true);
}
}
});
});
with above code, i cannot showing any data.

i think something like this could be help:
Object.keys(res).forEach(function(item) {
let field = $('#form').find('#' + item);
if (field) field .val(res[item])
})
if your 'res' is just values of fields, then with this code you can dynamically fill all fields.
here is snippet sample:
const res = {
status: 1,
quantity: "1",
unit: "pcs",
price: "59000000",
discount: "0",
sparepart_name: "SHOCK",
sparepart_kode: "MDBUS",
sparepart_id: "2120"
};
$(function() {
$(document).ready(function() {
Object.keys(res).forEach(function(item) {
let field = $('#' + item);
if (field) field.val(res[item])
})
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="transport-row form-box" style="display: inline-block; width: 1250px">
<h4>Input Item</h4>
<div style="margin-bottom: 20px"></div>
<div class="row-fluid sparepart-row">
<div class="control-group">
<div class="span4">
<fieldset>
<label>Nama Barang</label>
<input type="hidden" name="sparepart_id[]" id="sparepart_id">
<input type="text" name="sparepart_kode[]" class="stok_barang_id" id="sparepart_kode" placeholder=" Kode" readonly style="width: 100px; padding-bottom:4px;">
<div class="input-append">
<input type="text" name="sparepart_name[]" class="stok_barang_name" id="sparepart_name" readonly placeholder="Sparepart name" title="" style="padding-bottom:4px;">
<span class="add-on">
<i data-title="" ime-icon="icon-time" data-date-icon="icon-search" class="icon-search"></i>
</span>
</div>
</fieldset>
</div>
<div class="span1 span-qty">
<fieldset>
<label>Quantity</label>
<input type="text" name="quantity[]" id="quantity" class="quantity" placeholder="99" style="width:65px;" />
</fieldset>
</div>
<div class="span1 span-qty">
<fieldset>
<label>Unit</label>
<input type="text" id="unit" class="unit" placeholder="Unit" style="width: 65px;" readonly/>
</fieldset>
</div>
<div class="span2 span-harga">
<fieldset>
<label>Price</label>
<input type="text" name="price[]" id="price" class="price" value="" placeholder="999" style="width:160px;" readonly/>
</fieldset>
</div>
<div class="span3 span-harga">
<fieldset>
<label>Discount</label>
<input type="text" name="discount[]" id="discount" class="discount" value="" placeholder="10%" style="width:160px;">
<button class="btn btn-primary" id="add_row">+</button>
</fieldset>
</div>
</div>
</div>
</div>

How i pass html input data to javascript

i want to parse input data to razorpay script. i am new in php because basically i am mobile app developer. this is my first try in php. i tried post methode also. i donot know where i do mistake in this code. i want to pass email to razorpay script field
<div class="form-filde">
<form action="contact_us.php" method="post" >
<div class="row">
<div class="col-sm-6">
<div class="input-box">
<input type="text" placeholder="Name" data-validation="required" name="name" >
</div>
<div class="input-box">
<input type="text" placeholder="Email" data-validation="required" name="email" >
</div>
<div class="input-box">
<input type="text" placeholder="Subject" data-validation="required" name="subject" >
</div>
</div>
<div class="col-sm-6">
<div class="input-box">
<textarea placeholder="Message" name="message"></textarea>
</div>
</div>
<div class="col-sm-12">
<div class="submit-box">
<input type="submit" value="SEND" class="btn">
</div>
</div>
</div>
<script
src="https://checkout.razorpay.com/v1/checkout.js"
data-key="my key"
data-amount="100000"
data-buttontext="Enrol Now to Get 10% Spot Registration Discount"
data-name="ssss.com"
data-description="Android Training Courses"
data-image="https://some.com/itrain/images/logo.png"
data-theme.color="#3276B1"
data-prefill.email=document.getElementById('email').value
></script>
</form>
</div>
Someone help me on how to work on this.

Change :
<input type="text" placeholder="Email" data-validation="required" name="email" >
With
<input type="text" placeholder="Email" data-validation="required" name="email" id="email" >
Update -
Try with below one -
<div class="form-filde">
<form action="contact_us.php" method="post" id="frm_container">
<div class="row">
<div class="col-sm-6">
<div class="input-box">
<input type="text" placeholder="Name" data-validation="required" name="name" >
</div>
<div class="input-box">
<input type="text" placeholder="Email" data-validation="required" name="email" id="email">
</div>
<div class="input-box">
<input type="text" placeholder="Subject" data-validation="required" name="subject" >
</div>
</div>
<div class="col-sm-6">
<div class="input-box">
<textarea placeholder="Message" name="message"></textarea>
</div>
</div>
<div class="col-sm-12">
<div class="submit-box">
<input type="submit" value="SEND" class="btn">
</div>
</div>
</div>
<script>
var email_val = document.getElementById('email').value;
document.querySelector("#email").addEventListener("change",setEmail);
function setEmail(e){
try{
var elem = document.getElementById("razorpay_script");
var elem2 = document.querySelector(".razorpay-payment-button");
document.querySelector("#frm_container").removeChild(elem);
document.querySelector("#frm_container").removeChild(elem2);
}catch(err){
console.log(err);
}
email_val = e.target.value;
addScript(email_val);
//
}
function addScript(email_val) {
var s = document.createElement( 'script' );
s.setAttribute( 'src', "https://checkout.razorpay.com/v1/checkout.js" );
s.setAttribute( 'id', "razorpay_script" );
s.setAttribute( 'data-key', "my key" );
s.setAttribute( 'data-amount', "100000" );
s.setAttribute( 'data-buttontext', "Enrol Now to Get 10% Spot Registration Discount" );
s.setAttribute( 'data-name', "ssss.com" );
s.setAttribute( 'data-description', "Android Training Courses" );
s.setAttribute( 'data-image', "https://some.com/itrain/images/logo.png" );
s.setAttribute( 'data-theme.color', "#3276B1" );
s.setAttribute( 'data-prefill.email', email_val );
document.querySelector("#frm_container").appendChild( s );
}
</script>
<!-- <script
src="https://checkout.razorpay.com/v1/checkout.js"
data-key="my key"
data-amount="100000"
data-buttontext="Enrol Now to Get 10% Spot Registration Discount"
data-name="ssss.com"
data-description="Android Training Courses"
data-image="https://some.com/itrain/images/logo.png"
data-theme.color="#3276B1"
data-prefill.email= email_val
></script> -->
</form>
</div>
hope it helps :)

Is this the right way to implement google recpatcha v3?

I've added the snippet inside the tag:
<script src='https://www.google.com/recaptcha/api.js?render=EXAMPLE123456789-_987654321'></script>
After that, I added this javascript callback inside each form on the site: (grecaptcha above the submit button).
<form accept-charset="UTF-8" target="_blank" action="https://website.infusionsoft.com/app/form/process/1234567890" class="infusion-form" id="inf_form_1234567890" method="POST">
<input name="inf_form_xid" type="hidden" value="1234567890" />
<input name="inf_form_name" type="hidden" value="First Last.com&#a;Web Form submitted&#a;HOME PAGE&#a;First / Last" />
<input name="infusionsoft_version" type="hidden" value="1.00.00.1" />
<div>
<div>
<p class ="white">Register Now</p>
</div>
</div>
<div>
<div> </div>
</div>
<div class="user-fields">
<div class="infusion-field">
<label for="inf_field_FirstName_home">First Name *</label>
<input class="infusion-field-input" id="inf_field_FirstName" name="inf_field_FirstName" placeholder="First Name *" type="text" required />
</div>
<div class="infusion-field">
<label for="inf_field_Email_home">Email *</label>
<input class="infusion-field-input" id="inf_field_Email" name="inf_field_Email" placeholder="Email *" type="text" required />
</div>
</div>
<div>
<div> </div>
</div>
<script>
grecaptcha.ready(function() {
grecaptcha.execute('EXAMPLE123456789-_987654321', {action: 'homepage'})
.then(function(token) {
// Verify the token on the server.
});
});
</script>
<div class="infusion-submit">
<button class="infusion-btn" type="submit">Submit!</button>
</div>
</form>
<script type="text/javascript" src="https://website.infusionsoft.com/app/webTracking/getTrackingCode"></script>
<script type="text/javascript" src="https://website.infusionsoft.com/app/timezone/timezoneInputJs?xid=12345678900987654321"></script>
Is this the correct way?

Is it the good way to post variable with ajax processing

I'm trying to post a pseudo with ajax like in the title , i think actually with my code i send no informations to my php file.
so this is the code :
$('#send').click(function(){
var pseudo = $('#psd').val();
});
function recuppoint() {
$.post('point.php',{pseudo: pseudo} ,function(data) {
console.log('['+data + ']');
$('.infos2').html(data);
});
}
setInterval(recuppoint, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="logForm" action="">
<div class="field">
<label class="field-label" for="mailconnect">Votre mail</label>
<input class="field-input"type="email" name="mailconnect" id="email" />
</div>
<div class="field" id="psd">
<label class="field-label" for="client">pseudo client</label>
<input class="field-input" type="text" name="pseudo" id="pseudo" />
</div>
<div class="field">
<label class="field-label" for="mdpconnect">mdp</label>
<input class="field-input" type="password" name="mdpconnect" id="password" />
</div>
<button id="send" class="send"name="formsubscribe">begin</button>
</form>
<div>
<div id="infos" class="infos" align="center"> </div>
<div id="infos2" class="infos2" align="center"> </div>
</div>
So guys how can i solve the problem with the var pseudo ?
thank you

Your div element with id "psd", doesnt have value. If you want to send html use .html(); If you want to get only input values so try some like this:
var x = $('input[name=nameOfInput]').val();
Then you should send it with ajax.

your ajax call should be like this .
you can not access the input field with its parent id as you did $('#psd').val();
but you can access it value with its id itself like this
<input class="field-input" type="text" name="pseudo" id="pseudo" />
$('#send').on('click', function(){
var pseudo = $('#pseudo').val();
$.ajax({
url:'point.php',
type:'POST',
data:{ ele: pseudo},
success:function(data){
$('.infos2').html(data);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="logForm" action="">
<div class="field">
<label class="field-label" for="mailconnect">Votre mail</label>
<input class="field-input"type="email" name="mailconnect" id="email" />
</div>
<div class="field" id="psd">
<label class="field-label" for="client">pseudo client</label>
<input class="field-input" type="text" name="pseudo" id="pseudo" />
</div>
<div class="field">
<label class="field-label" for="mdpconnect">mdp</label>
<input class="field-input" type="password" name="mdpconnect" id="password" />
</div>
<button id="send" class="send"name="formsubscribe">begin</button>
</form>
<div>
<div id="infos" class="infos" align="center"> </div>
<div id="infos2" class="infos2" align="center"> </div>
</div>