JQuery Ajax won't work when receiving POST - php

I've been searching around the last few days looking for an answer but haven't found one. At this point I believe the problem to either be a result of the AJAX, or my actual form. Either way, any help would be appreciated.
So the Ajax I'm using has worked before, when using it on a much simpler form. For that reason, I simply brought it over and adapted it. The only things that I changed are the ID names and file it will load. With that said, it does work - to an extent. If the file being loaded has text, or a basic echo statement, then it will run fine and print as expected on the page.
When I start trying to have it set variables and what not, then it starts having problems. It simple spits out "Ajax failed to run". Ive tried various ways to pull an error message as well but those didn't seem to work either. There may be some small errors here and there because I've been greatly fiddling with the code for a day or two now.
HTML:
<!DOCTYPE html>
<?php session_start(); ?>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Standard Meta -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Site Properties -->
<title>Apollo Project | Conjugate</title>
<link rel="stylesheet" type="text/css" href="/css/semantic.css">
<link rel="stylesheet" type="text/css" href="components/dropdown.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="/components/dropdown.js"></script>
<script src="/scripts/semantic.js"></script>
<style type="text/css">
body {
background-color: #FFFFFF;
}
.ui.menu .item img.logo {
margin-right: 1.5em;
}
.main.container {
margin-top: 7em;
}
</style>
</head>
<body>
<div class="ui fixed inverted menu">
<div class="ui container">
<a href="http://semantic-ui.com/examples/fixed.html#" class="header item">
Apollo Project
</a>
Home
<div class="ui simple dropdown item">
Dropdown <i class="dropdown icon"></i>
<div class="menu">
<a class="item" href="http://semantic-ui.com/examples/fixed.html#">Link Item</a>
<a class="item" href="http://semantic-ui.com/examples/fixed.html#">Link Item</a>
<div class="divider"></div>
<div class="header">Header Item</div>
<a class="item" href="http://semantic-ui.com/examples/fixed.html#">Link Item</a>
</div>
</div>
</div>
</div>
<div class="ui main text container">
<h3 class="ui center aligned header">Verb Conjugating</h3>
<div id="form-content">
<form method="post" action="" id="mainForm" >
<!-- Selector for Chapter -->
Chapter:
<select name="chapter" class="ui fluid search dropdown" id="chapter">
<option value="chAll">Any Chapter</option>
<option disabled role="separator">Select a chapter:</option>
<option value="ch1">Chapter 1</option>
<option value="ch2">Chapter 2</option>
<option value="ch3">Chapter 3</option>
<option value="ch4">Chapter 4</option>
<option value="ch5">Chapter 5</option>
<option value="ch6">Chapter 6</option>
<option value="ch7">Chapter 7</option>
<option value="ch8">Chapter 8</option>
<option value="ch9">Chapter 9</option>
<option value="ch10">Chapter 10</option>
<option value="ch11">Chapter 11</option>
<option value="ch12">Chapter 12</option>
<option value="ch13">Chapter 13</option>
<option value="ch14">Chapter 14</option>
<option value="ch15">Chapter 15</option>
<option value="ch16">Chapter 16</option>
<option value="ch17">Chapter 17</option>
<option value="ch18">Chapter 18</option>
<option value="ch19">Chapter 19</option>
<option value="ch20">Chapter 20</option>
<option value="ch21">Chapter 21</option>
<option value="ch22">Chapter 22</option>
<option value="ch23">Chapter 23</option>
<option value="ch24">Chapter 24</option>
<option value="ch25">Chapter 25</option>
<option value="ch26">Chapter 26</option>
<option value="ch27">Chapter 27</option>
<option value="ch28">Chapter 28</option>
<option value="ch29">Chapter 29</option>
<option value="ch30">Chapter 30</option>
<option value="ch31">Chapter 31</option>
<option value="ch32">Chapter 32</option>
<option value="ch33">Chapter 33</option>
<option value="ch34">Chapter 34</option>
<option value="ch35">Chapter 35</option>
</select>
<br>
<div class="ui two column doubling stackable grid">
<!-- Selectors for Voice, Tense, Conjugation, and Mood -->
<div class="column"> Voice:
<select name="voice" class="ui fluid search dropdown" id="voice">
<option value="vocAll">Any Voice</option>
<option disabled role="separator">Select a voice:</option>
<option value="usrAct">Active</option>
<option value="usrPas">Passive</option>
</select>
</div>
<div class="column"> Tense:
<select name="tense" class="ui fluid search dropdown" id="tense">
<option value="tenAll">Any Tense</option>
<option disabled role="separator">Select a tense:</option>
<option value="usrPres">Present</option>
<option value="usrImp">Imperfect</option>
<option value="usrPerf">Perfect</option>
<option value="usrPluPerf">PluPerfect</option>
<option value="usrFut">Future</option>
<option value="usrFutPerf">Future Perfect</option>
</select>
</div>
<div class="column"> Conjugation:
<select name="conj" class="ui fluid search dropdown" id="conj">
<option value="conjAll">Any Conjugation</option>
<option disabled role="separator">Select a conjugation:</option>
<option value="usr1st">1st</option>
<option value="usr2nd">2nd</option>
<option value="usr3rd">3rd</option>
<option value="usr4th">4th</option>
</select>
</div>
<div class="column"> Mood:
<select name="mood" class="ui fluid search dropdown" id="mood">
<option value="moodAll">Any Mood</option>
<option disabled role="separator">Select a mood:</option>
<option value="usrInd">Indicative</option>
<option value="usrInf">Infinitive</option>
<option value="usrImp">Imperative</option>
</select>
</div>
</div>
<br>
<input type="submit" class="ui fluid button" name="submitBtn">
</form>
</div>
<!-- HTML to submit Ajax to another page -->
<script type="text/javascript">
$(document).ready(function() {
// submit form using $.ajax() method
$('#mainForm').submit(function(e){
e.preventDefault(); // Prevent Default Submission
$.ajax({
url: 'submitDecline.php',
type: 'POST',
data: $(this).serialize() // it will serialize the form data
})
.done(function(data){
$('#form-content').fadeOut('slow', function(){
$('#form-content').fadeIn('slow').html(data);
});
})
.fail(function(){
alert('Ajax Submit Failed ...');
});
});
});
</script>
<!--
<h3 class="ui center aligned header">Doubling Stackable Grid</h3>
<div class="ui stackable grid">
</div>
<div class="ui two column doubling stackable grid">
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
</div>
-->
</div>
<?php $conn->close();
?>
<script src="scripts/script.js"></script>
</body>
</html>
PHP file being loaded:
<p> This is a test </p>
<?php
session_start();
if( $_POST ){
$chaptSelect = $_POST['chapter'];
$tenseSelect = $_POST['tense'];
$voiseSelect = $_POST['voice'];
$moodSelect = $_POST['mood'];
$conjSelect = $_POST['conj'];
if( $chaptSelect == "Any Chapter" ) {
echo("You selected any chapter")
}
?>
<p> This is a test </p>

Related

How to get the form data without refreshing the page

I have created the form below to ask what the visitor wants so I can indicate in a modal window how to get there. So I need to get the visitor's choices in the modal window without refreshing the page.
Here are my codes below.
<form id="wantedForm" method="POST">
<div class="wanted-opt">
<div class="wantoptiontitle">Je veux</div>
<div class="wanted-options input-field">
<select id="wanted-1" name="wanted-1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
</div>
<div class="wanted-opt">
<div class="wantoptiontitle">comme ça je peux</div>
<div class="wanted-options input-field">
<select id="wanted-2" name="wanted-2">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
</div>
<button class="btn-default btn modal-trigger" type="submit">Comment faire ?
</button>
</form>
<div id="wantedModal" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
<p><?php var_dump($_POST) ?></p>
</div>
</div>
Le script
$('#wantedForm').on('submit', function(e){
e.preventDefault();
$('#wantedModal').modal('open');
});
When I do a var_dump($_POST) in the modal, it returns a null result. Can someone please tell me what I need to correct? Thank you for your help.
Please tell me what I need to change. Thank you.
EDIT
I had tried to do with ajax also with the code below. It hadn't worked either.
$('#wantedSubmit').click(function(e){
e.preventDefault();
var wanted_1 = $('#wanted-1').val();
var wanted_2 = $('#wanted-2').val();
$.post(location.href, {wanted_1: wanted_1});
$.post(location.href, {wanted_2: wanted_2});
$('#wantedModal').modal('open');
});

Here is a solution which gets your form data directly in your modal on submit:
$('#wantedForm').on('submit', function(e){
e.preventDefault();
var wanted_1 = $('#wanted-1 option:selected').text();
var wanted_2 = $('#wanted-2 option:selected').text();
$('#choices')
.empty()
.append('<p>wanted 1: '+wanted_1+'</p>')
.append('<p>wanted 2: '+wanted_2+'</p>');
$('#wantedModal').modal('show');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<form id="wantedForm" method="POST">
<div class="wanted-opt">
<div class="wantoptiontitle">Je veux</div>
<div class="wanted-options input-field">
<select id="wanted-1" name="wanted-1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
</div>
<div class="wanted-opt">
<div class="wantoptiontitle">comme ça je peux</div>
<div class="wanted-options input-field">
<select id="wanted-2" name="wanted-2">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
</div>
<button class="btn-default btn modal-trigger" type="submit">Comment faire ?
</button>
</form>
<div id="wantedModal" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
<div id="choices"></div>
</div>
</div>

Your are not posting the request by using e.preventDefault(); that`s why $_POST is empty. You should collect submited values in JS like this.
var x = $('#wanted-1').val();
var y = $('#wanted-2').val();
and then you can open insert this values in modal elements like
$("#modal-element1").html(x);

Fetch Dynamic data with jquery

I am trying to fetch Data when we select value.
Here Is Jquery and html code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#colorselector').change(function(){
$('.colors').hide();
$('#' + $(this).val()).show();
});
});
</script>
Now Here is Html.And This Code is working .
<select id="colorselector">
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="blue">Blue</option>
</Select>
<div id="red" class="colors" style="display:none"> red... </div>
<div id="yellow" class="colors" style="display:none"> yellow.. </div>
<div id="blue" class="colors" style="display:none"> blue.. </div>
But when I am trying to use this with dynamic PHP code this is not Working.
<div class="form-group">
<label for="address"> Select Product Kit</label>
<select class="form-group" name="product kit" id="colorselector">
#foreach($product as $productDeatails)
<option value='{{$productDeatails->id}}'>{{$productDeatails->title}}
</option>
#endforeach
</select>
<div id="{{$productDeatails->id}}" class="colors" style="display:none">{{$productDeatails->price}}
</div>

#endforeach
</select>
<div id="{{$productDeatails->id}}" class="colors" style="display:none">{{$productDeatails->price}}
As you can see, the foreach has ended before you could print the hidden div HTML. Due to this, $productDeatails is out of scope now and is no longer available.
A solution is to run the foreach again to print the hidden divs in HTML like below:
<div class="form-group">
<label for="address"> Select Product Kit</label>
<select class="form-group" name="product kit" id="colorselector">
#foreach($product as $productDetails)
<option value='{{ $productDetails->id }}'>{{ $productDetails->title}}</option>
#endforeach
</select>
#foreach($product as $productDetails)
<div id="{{ $productDetails->id}}" class="colors" style="display:none">{{ $productDetails->price}}
</div>
#endforeach
</div>

Code Igniter - Select tag option depending on another select tag value

I'm new in CodeIgniter and still junior in programming, so don't be angry at me.
PS: don't be angry for my English too. ;)
I am creating small CMS for one project. Inside that project its few select tags, first ones have just a few values but the next ones, have many values, which depends to the one of the values, from select tag that i mention before.
Its everything ok with my database tables dependencies, etc. but I dont know how to make dependencies to show up in select tags. I tried to make it with Ajax, but I am still not make it, and I read that I can make it with codeIgniter libraries, is it true? Can any body can help me?
This is my view file:
<?php echo validation_errors('<p class="alert alert-dismissable alert-danger">'); ?>
<form method="post" action="<?php echo base_url(); ?>admin/engines/add">
<div class="row">
<div class="col-lg-6">
<h1>Engine Type</h1>
</div>
<div class="col-lg-6">
<div class="btn-group pull-right">
<input type="submit" name="submit" class="btn btn-success" value="Save">
Close
</div>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-lg-12">
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i>Dashboard</li>
<li><i class="fa fa-pencil"></i>Variklio Tipai</li>
<li class="active"><i class="fa fa-plus-square-o"></i>Pridėti Variklio tipą</li>
</ol>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<h2>Engine type One</h2>
<div class="form-group">
<label>Engine Name</label>
<input class="form-control" type="text" name="engine" value="<?php echo set_value('engine'); ?>" placeholder="Engine Type" >
</div>
<div class="form-group">
<label>Category</label>
<select name="brand" class="form-control">
<option value="category">Choose category</option>
<?php foreach($categories as $category) : ?>
<option value="<?php echo $category->id; ?>"><?php echo $category->category_name; ?></option>
<?php endforeach; ?>
</select>
</div>
<!-- END Category-->
<!-- *** Brand *** -->
<div class="form-group">
<label>Brand</label>
<select name="brand" class="form-control">
<option value="">Choose Brand</option>
<?php foreach ($brands as $brand) : ?>
<option value="<?php echo $brand->id; ?>"><?php echo $brand->v_brand_name; ?></option>
<?php endforeach; ?>
</select>
</div>
<!-- **** END Brand ***-->
<!-- *** Model *** -->
<div class="form-group">
<label>Model</label>
<select name="model" class="form-control">
<option value="">Choose model</option>
<?php foreach ($models as $model) : ?>
<option value="<?php echo $model->id; ?>"><?php echo $model->v_model_name; ?></option>
<?php endforeach; ?>
</select>
</div>
<!-- **** END MODEL ***-->
</div>
</div>
</div>
</form>

for example this is my view
<select name='list1' id='list1'>
<option value='1'>id 1</option>
<option value='2'>id 2</option>
<option value='3'>id 3</option>
<option value='4'>id 4</option>
<option value='5'>id 5</option>
</select>
this is 2nd dropdown list
<select name='list2' id='list2'>
</select>
now jquery code is
$("#list1").on("change",function(){
var value = $(this).val();
$.ajax({
url : "example.com/welcome/get_data",
type: "post",
data: {"value":value},
success : function(data){
$("#list2").html(data);
},
});
});
now my controller function is
public function get_data()
{
$value = $this->input->post("value");
$data = $this->mymodal->get_data($value);
$option ="";
foreach($data as $d)
{
$option .= "<option value='".$d->id."' >".$d->name."</option>";
}
echo $option;
}
my model function is
public function get_data($value)
{
$this->db->where("id",$value);
return $this->db->get("table_name")->result();
}

php how do I make a textbox unchangeable or passive and a syntax error [duplicate]

This question already has answers here:
PHP parse/syntax errors; and how to solve them
(20 answers)
Closed 6 years ago.
ive been all around trying to fix the code but i still get an error
Parse error: syntax error, unexpected 'userfirstName' (T_STRING), expecting ',' or ';' in /home/crosswayprinting/public_html/ztest2/functions/shop.php on line 66
here's the code btw
whats my mistake :/ ?
<?php if($user_home->is_logged_in()){
echo '
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<h2 class="section-heading">Place an Order</h2>
<div class="text-center" style="input, select, textarea{
color: #000;
}">
</div><BR>
<form role="form" class="userTrans" method="POST">
<input type="hidden" value="OrderInsert" name="act_userTrans">
<div class="form-group">
<label for="typeofservice">Select Type of Service</label>
<select id="typeofservice" class="form-control" name="typeofservice">
<option value="Tarpaulin">Tarpaulin</option>
<option value="Rush ID">Rush ID</option>
<option value="Photocopy">Photocopy</option>
<option value="Graphic Layout">Graphic Layout</option>
<option value="Invitation">Invitation</option>
<option value="Panaflex">Panaflex</option>
<option value="Signages">Signages</option>
<option value="Stickers">Stickers</option>
<option value="Sintra board">Sintra board</option>
<option value="Large Format Photo">Large Format Photo</option>
<option value="PVC ID">PVC ID</option>
<option value="Lamination">Lamination</option>
<option value="Bag Tags">Bag Tags</option>
<option value="Notary Public">Notary Public</option>
<option value="Scan">Scan</option>
</select>
</div>
<div class="form-group">
<label for="templateselect">Template Selection</label>
<select id="templateselect" class="form-control" name="templateselect">
<option value="Own Made Template">Own Made Template</option>
<option value="Pre-made Template">Pre-made Template</option>
</select>
</div>
<div class="form-group">
<label for="text">More details about your order</label>
<input type="text" class="form-control" id="orderdetails" name="orderdetails">
</div>
<div class="form-group">
<label for="text"> Customer Name</label>
<input type="text" value=" <?php echo $row['userfirstName']; ?> " class="form-control" id="customer" name="customer">
</div>
/* this is the code btw what makes it an error, i am trying to
echo a customer's name and make it Passive or uneditable textbox so it can
register to my orderlist to whom ordered */
<button type="submit" class="btn btn-default userTrans">Submit</button>
</form>
';
}
else{
echo '
<center> Please Login to Place an Order </center>
';}
?>

Get rid of the echo statements wrapping your HTMl. There's no need, just escape out of the PHP interpreter and print your HTML. Then you won't get an error when you're doing <?php echo $row['userFirstName']; ?>....Something like this:
<?php if($user_home->is_logged_in()){ ?>
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<h2 class="section-heading">Place an Order</h2>
<form role="form" class="userTrans" method="POST">
<input type="hidden" value="OrderInsert" name="act_userTrans">
<div class="form-group">
<label for="typeofservice">Select Type of Service</label>
<select id="typeofservice" class="form-control" name="typeofservice">
<option value="Tarpaulin">Tarpaulin</option>
<option value="Rush ID">Rush ID</option>
<option value="Photocopy">Photocopy</option>
<option value="Graphic Layout">Graphic Layout</option>
<option value="Invitation">Invitation</option>
<option value="Panaflex">Panaflex</option>
<option value="Signages">Signages</option>
<option value="Stickers">Stickers</option>
<option value="Sintra board">Sintra board</option>
<option value="Large Format Photo">Large Format Photo</option>
<option value="PVC ID">PVC ID</option>
<option value="Lamination">Lamination</option>
<option value="Bag Tags">Bag Tags</option>
<option value="Notary Public">Notary Public</option>
<option value="Scan">Scan</option>
</select>
</div>
<div class="form-group">
<label for="templateselect">Template Selection</label>
<select id="templateselect" class="form-control" name="templateselect">
<option value="Own Made Template">Own Made Template</option>
<option value="Pre-made Template">Pre-made Template</option>
</select>
</div>
<div class="form-group">
<label for="text">More details about your order</label>
<input type="text" class="form-control" id="orderdetails" name="orderdetails">
</div>
<div class="form-group">
<label for="text"> Customer Name</label>
<input type="text" value=" <?php echo $row['userfirstName']; ?> " class="form-control" id="customer" name="customer">
<!-- now the above won't give an error -->
</div>
<button type="submit" class="btn btn-default userTrans">Submit</button>
</form>
</div>
</div>
<?php } else { ?>
<!-- Do not use center tags when you're using bootstrap framework -->
<!--<center> Please Login to Place an Order </center>-->
<div class="text-center"> Please Login to Place an Order </div>
<?php } ?>
Also what's going on with your inline styles? That's not how this works:
<div class="text-center" style="input, select, textarea{
color: #000;
}">
Just move that CSS somewhere else. You can't use targeted selectors within the style="" tag, only relevant CSS.

get the dynamically created multiple select box values using jquery

I have been reviewing a lot of pages about this and can't seem to figure out why this isn't working.
And I have a doubt in the section of,if i have multiple dynamically created select box and this selected values to be passed to the text box with some calculation before using jQuery. please help me i have tortured in this section.
In the below line of input.php have the html code of get the input.
function addMore() {
$("<DIV>").load("input.php", function() {
$("#product").append($(this).html());
});
}
function deleteRow() {
$('DIV.product-item').each(function(index, item){
jQuery(':checkbox', this).each(function () {
if ($(this).is(':checked')) {
$(item).remove();
}
});
});
}
$(document).ready(function() {
$('.product-item').change(function()
{
var option1 =$(this).find('.orderbox1 option:selected').val();
var option2 = $(this).find('.orderbox2 option:selected').val();
option1 *= $(".orderbox3").val();
option2 *= $(".orderbox3").val();
$(".orderbox4").val(option1-option2);
});
});
</SCRIPT>
</HEAD>
<BODY>
<FORM name="frmProduct" method="post" action="">
<DIV id="outer">
<DIV id="header">
<DIV class="float-left" style="margin-left:150px;"> </DIV>
<DIV class="float-left col-heading">Choose Currency</DIV>
<DIV class="float-left col-heading">Choose Product</DIV>
<DIV class="float-left col-heading">Forex Amount</DIV>
<DIV class="float-left col-heading">Rupee Amount</DIV>
</DIV>
<DIV id="product">
<DIV class="product-item float-clear" style="clear:both;">
<DIV class="float-left"><input type="checkbox" name="item_index[]" /></DIV>
<DIV class="float-left"> Choose Currency:
<select name="item_currency[]" id="orderbox1" class="orderbox1" style="width:150px;">
<option selected="selected">Select</option>
<option value="66">United States</option>
<option value="75">European</option>
<option value="12">Philippines</option>
<option value="17">Qatar</option>
</select></DIV>
<DIV class="float-left"> Choose Product:
<select name="item_size[]" id="orderbox2" class="orderbox2">
<option value="1" selected="selected">Select</option>
<option value="10">Forex Card</option>
<option value="20">Currency Notes</option>
</select></DIV>
<DIV class="float-left"><input type="text" name="item_name[]" id="orderbox3" class="orderbox3"/></DIV>
<DIV class="float-left"><input type="text" name="item_price[]" id="orderbox4" class="orderbox4"/></DIV>
</DIV>
</DIV>
<DIV class="btn-action float-clear">
<input type="button" name="add_item" value="Add More" onClick="addMore();" />
<input type="button" name="del_item" value="Delete" onClick="deleteRow();" />F
<span class="success"><?php if(isset($message)) { echo $message; }?></span>
</DIV>
<DIV class="footer">
<input type="submit" name="save" value="Save" />
</DIV>
</DIV>
</FORM>

Firstly, it looks like you are trying to attach a change handler to a div. This is not possible. From the documentation -
The change event is sent to an element when its value changes. This event is limited to <input> elements, <textarea> boxes and <select> elements.
To get it to work you can change this -
$('.product-item').change(function() {
to -
$('.product-item select, .product-item input').change(function() {
Secondly, to handle dynamic rows you you need to use event delegation. Using .on you can apply the function to dynamic elements. You will need to change the function to -
$("#product").on('change', '.product-item select, .product-item input', function() {
var $line = $(this).parents('.product-item');
var option1 = $line.find('.orderbox1').val();
var option2 = $line.find('.orderbox2').val();
option1 *= $line.find(".orderbox3").val();
option2 *= $line.find(".orderbox3").val();
$line.find(".orderbox4").val(option1 - option2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<DIV id="product">
<DIV class="product-item float-clear" style="clear:both;">
<DIV class="float-left">
<input type="checkbox" name="item_index[]" />
</DIV>
<DIV class="float-left">Choose Currency:
<select name="item_currency[]" id="orderbox1" class="orderbox1" style="width:150px;">
<option selected="selected">Select</option>
<option value="66">United States</option>
<option value="75">European</option>
<option value="12">Philippines</option>
<option value="17">Qatar</option>
</select>
</DIV>
<DIV class="float-left">Choose Product:
<select name="item_size[]" id="orderbox2" class="orderbox2">
<option value="1" selected="selected">Select</option>
<option value="10">Forex Card</option>
<option value="20">Currency Notes</option>
</select>
</DIV>
<DIV class="float-left">
<input type="text" name="item_name[]" id="orderbox3" class="orderbox3" />
</DIV>
<DIV class="float-left">
<input type="text" name="item_price[]" id="orderbox4" class="orderbox4" />
</DIV>
</DIV>
<DIV class="product-item float-clear" style="clear:both;">
<DIV class="float-left">
<input type="checkbox" name="item_index[]" />
</DIV>
<DIV class="float-left">Choose Currency:
<select name="item_currency[]" id="orderbox1" class="orderbox1" style="width:150px;">
<option selected="selected">Select</option>
<option value="66">United States</option>
<option value="75">European</option>
<option value="12">Philippines</option>
<option value="17">Qatar</option>
</select>
</DIV>
<DIV class="float-left">Choose Product:
<select name="item_size[]" id="orderbox2" class="orderbox2">
<option value="1" selected="selected">Select</option>
<option value="10">Forex Card</option>
<option value="20">Currency Notes</option>
</select>
</DIV>
<DIV class="float-left">
<input type="text" name="item_name[]" id="orderbox3" class="orderbox3" />
</DIV>
<DIV class="float-left">
<input type="text" name="item_price[]" id="orderbox4" class="orderbox4" />
</DIV>
</DIV>
</DIV>
</DIV>
Here I'm creating a variable ($line) to represent the row. I can then use find to get the orderboxes for that row.

Categories