I called my datas with ajax then created variables in result but I cannot reach my variables in other function. How can I reach variables or create as a public function ? $("#btBilgileriAktar") is my new function .I want to take variables in this function.
Thank you for your helps.
$.ajax({
type: 'POST',
data: {
data: gripin
},
datatype: 'html',
url: '<?php echo site_url('
servis / bring_Cari '); ?>',
success: function(result) {
var obj = $.parseJSON(result);
// console.log(obj);
$.each(obj, function(key, value) {
// console.log(value);
$("table#cariler tbody").append("<tr class=\"cariKayit\"><td class=\"tdCariAdi\">" + obj[key].CARI_ISIM + "</td><td class=\"tdVergiNo\">" + ((obj[key].VERGI_NUMARASI == null) ? "" : obj[key].VERGI_NUMARASI) + "</td><td class=\"tdVergiDairesi\">" + ((obj[key].VERGI_DAIRESI == null) ? "" : obj[key].VERGI_DAIRESI) + "</td><td class=\"tdCariAdres\">" + ((obj[key].CARI_ADRES == null) ? "" : obj[key].CARI_ADRES) + "</td><td class=\"tdCariTel\">" + ((obj[key].CARI_TEL == null) ? "" : obj[key].CARI_TEL) + "</td><td class=\"tdCariIlce\">" + ((obj[key].CARI_ILCE == null) ? "" : obj[key].CARI_ILCE) + "</td><td class=\"tdCariIl\">" + ((obj[key].CARI_IL == null) ? "" : obj[key].CARI_IL) + "</td><td><input type=\"checkbox\" id=\"checks\"/></td></tr>");
});
$('#checks').on("click", function() { //Çalışıyor
var nAdi = $(this).parent().parent().find(".tdCariAdi").text();
var nVno = $(this).parent().parent().find(".tdVergiNo").text();
var nVdairesi = $(this).parent().parent().find(".tdVergiDairesi").text();
var nAdres = $(this).parent().parent().find(".tdCariAdres").text();
var nTel = $(this).parent().parent().find(".tdCariTel").text();
var nIlce = $(this).parent().parent().find(".tdCariIlce").text();
var nIl = $(this).parent().parent().find(".tdCariIl").text();
});
$('#btBilgileriAktar').on('click', function() { //Buda seçimi çekiyor ama burada sıkıntı var verileri almıyor.
var tcLength = nVno.toString();
if (tcLength.length == 11) {
$("#spTc").val(tcLength);
} else if (tcLength.length == 10) {
$("#spVno").val(tcLength);
} else {
$("#spTc").val("");
$("#spVno").val("");
}
$("#spCariAdi").val(nAdi);
$("#spVergiDairesi").val(nVdairesi);
$("#spAdres").val(nAdres);
$("#spTel").val(nTel);
$("#spIlce").val(nIlce);
$("#spIl").val(nIl);
});
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="tab-pane fade active in" id="musteri">
<div class="form-group">
<label class="control-label" for="focusedInput">Müşteri Adı</label>
<input class="form-control" id="spCariAdi" type="text" value="">
</div>
<div class="form-group">
<label class="control-label" for="focusedInput">Adres</label>
<input class="form-control" id="spAdres" type="text" value="">
</div>
<div class="form-group">
<label class="control-label" for="focusedInput">İlçe</label>
<input class="form-control" id="spIlce" type="text" value="">
</div>
<div class="form-group">
<label class="control-label" for="focusedInput">İl</label>
<input class="form-control" id="spIl" type="text" value="">
</div>
<div class="form-group">
<label class="control-label" for="focusedInput">Tel</label>
<input class="form-control" id="spTel" type="text" value="">
</div>
<div class="form-group">
<label class="control-label" for="focusedInput">Vergi Dairesi</label>
<input class="form-control" id="spVergiDairesi" type="text" value="">
</div>
<div class="form-group">
<label class="control-label" for="focusedInput">TC Kimlik No</label>
<input class="form-control" id="spTc" type="text" value="">
</div>
<div class="form-group">
<label class="control-label" for="focusedInput">Vergi No</label>
<input class="form-control" id="spVno" type="text" value="">
</div>
</div>
Because you are declaring variables in another function. You need global variables for accessing them from different function.
var nAdi = ''; //global var declaration
$('#checks').on("click", function() { //Çalışıyor
nAdi = $(this).parent().parent().find(".tdCariAdi").text(); //assigning value
});
$('#btBilgileriAktar').on('click', function() {
$("#spCariAdi").val(nAdi); // retrieving value
});
Related
So I am writing some javascript to check if a user inputs a gmail address.
At the moment I have the code thats below, but no matter what I do it is giving me false. even when the input has #gmail.com...I feel that the mistake is how I am grabbing the user input in a variable and then testing it with test().
Javascript:
<script>
function validationCheck() {
var email = document.getElementById("inputEmail");
var gmailPatt = /#gmail.com/i;
var emailMatch = gmailPatt.test(email);
if (emailMatch == false || emailMatch == true) {
document.getElementById("emailError").innerHTML =
"<p>" + emailMatch + "</p>";
} else {
}
}
</script>
html
<form>
<div class="form-group row">
<div>
<label for="inputEmail" class="col-sm-1">Email:</label>
<input
type="text"
class="form-control col-sm-1"
id="inputEmail"
placeholder="username#gmail.com"
/>
<p id="emailError"></p>
</div>
</div>
<button type="button" onclick="validationCheck()">Check</button>
</form>
You need to check the value of the input, var emailMatch = gmailPatt.test(email.value);
function validationCheck() {
var email = document.getElementById("inputEmail");
var gmailPatt = /#gmail.com/i;
var emailMatch = gmailPatt.test(email.value);
if (emailMatch == false || emailMatch == true) {
document.getElementById("emailError").innerHTML =
"<p>" + emailMatch + "</p>";
} else {}
}
<form>
<div class="form-group row">
<div>
<label for="inputEmail" class="col-sm-1">Email:</label>
<input type="text" class="form-control col-sm-1" id="inputEmail" placeholder="username#gmail.com" />
<p id="emailError"></p>
</div>
</div>
<button type="button" onclick="validationCheck()">Check</button>
</form>
i'm having trouble going trough making a calculator (sum only) of 5 inputs fields in html/javascript and i can't manage to find what's wrong in my code
i tried messing around with types such as int instead of var and passing the value into parseInt, i somehow managed to have a result like "11111" where it should be like "5" but alongside that case the result is never printed in the innerHTML even after i added the "if not null" condition
Here is my html
<body>
<h1 class="head-title"></h1>
<div class="input-group">
<label for="design">Design :</label>
<input class="input-text" type="number" id="design">
</div>
<div class="input-group">
<label for="plot">Plot :</label>
<input class="input-text" type="number" id="plot">
</div>
<div class="input-group">
<label for="character">Character :</label>
<input class="input-text" type="number" id="character">
</div>
<div class="input-group">
<label for="enjoyment">Enjoyment :</label>
<input class="input-text" type="number" id="enjoyment">
</div>
<div class="input-group">
<label for="music">Music :</label>
<input class="input-text" type="number" id="music">
</div>
<div class="button-group">
<button class="button-primary" onclick="ratingCompute();">Calculate</button>
</div>
<div class="input-group">
<label for="total">Rating :</label>
<p class="rating-score" id="total"></p>
</div>
</body>
and here is my javascript
function ratingCompute()
{
var designValue = document.getElementById("design").value;
var plotValue = document.getElementById("plot").value;
var charValue = document.getElementById("character").value;
var enjoyValue = document.getElementById("enjoyment").value;
var musicValue = document.getElementById("music").value;
var totalValue = designValue + plotValue + charValue + enjoyValue + musicValue;
if (totalValue != null)
{
document.getElementById("total").innerHTML = totalValue + "/10";
}
else
{
document.getElementById("total").innerHTML = "0/10";
}
}
Any clue?
JavaScript is not a type variable language try using let or const. And here is how you properly parse it. If you did it already then its because of your variable declaration.
let designValue = parseInt(document.getElementById("design").value);
let plotValue = parseInt(document.getElementById("plot").value);
let charValue = parseInt(document.getElementById("character").value);
let enjoyValue = parseInt(document.getElementById("enjoyment").value);
let musicValue = parseInt(document.getElementById("music").value);
In javascript you should use keyword var/let/const instead of int. and you have to convert String type input value to int using parseInt method.
Please check this:
function ratingCompute()
{
var designValue = parseInt(document.getElementById("design").value);
var plotValue = parseInt(document.getElementById("plot").value);
var charValue = parseInt(document.getElementById("character").value);
var enjoyValue = parseInt(document.getElementById("enjoyment").value);
var musicValue = parseInt(document.getElementById("music").value);
var totalValue = designValue + plotValue + charValue + enjoyValue + musicValue;
if (totalValue)
{
document.getElementById("total").innerHTML = totalValue + "/10";
}
else
{
document.getElementById("total").innerHTML = "0/10";
}
}
<body>
<h1 class="head-title"></h1>
<div class="input-group">
<label for="design">Design :</label>
<input class="input-text" type="number" id="design">
</div>
<div class="input-group">
<label for="plot">Plot :</label>
<input class="input-text" type="number" id="plot">
</div>
<div class="input-group">
<label for="character">Character :</label>
<input class="input-text" type="number" id="character">
</div>
<div class="input-group">
<label for="enjoyment">Enjoyment :</label>
<input class="input-text" type="number" id="enjoyment">
</div>
<div class="input-group">
<label for="music">Music :</label>
<input class="input-text" type="number" id="music">
</div>
<div class="button-group">
<button class="button-primary" onclick="ratingCompute()">Calculate</button>
</div>
<div class="input-group">
<label for="total">Rating :</label>
<p class="rating-score" id="total"></p>
</div>
</body>
As mentioned by #Joshua Aclan, JavaScript does not have an "int" variable declaration, only "var". Also you have to cast all of the inputs to int or float, because otherwise you are adding strings and the values of input fields are always strings. Also the output is most likely empty because int designValue... produces an error.
function ratingCompute()
{
var designValue = parseInt(document.getElementById("design").value);
var plotValue = parseInt(document.getElementById("plot").value);
var charValue = parseInt(document.getElementById("character").value);
var enjoyValue = parseInt(document.getElementById("enjoyment").value);
var musicValue = parseInt(document.getElementById("music").value);
var totalValue = designValue + plotValue + charValue + enjoyValue + musicValue;
if (totalValue != null)
{
document.getElementById("total").innerHTML = totalValue + "/10";
}
else
{
document.getElementById("total").innerHTML = "0/10";
}
}
I am having problem with my jquery code
I am dynamically adding multiple <input type='file' multiple> each of them name parameter is change means 1st one is
color_images_1 <input type='file' multiple name='color_images_1'>
and will dynamically increase this 1 okay so every color has multiple images of its own color.
So basically I want to achieve this and I am using jS new FormData for it so here's my problem I am appending multiple files to formdata.
$(function() {
let $i = 1;
$(document).on('click', '.btn_color', function() {
$i++;
$('.color_wrapper').append("<div class='form-group'><label for='color_name" + $i + "'>Color Name</label><input type='text' name='color_name" + $i + "' id='color_name" + $i + "' class='form-control'></div><div class='form-group'><label for='sku" + $i + "'>Sku</label><input type=text class='form-control' id='sku" + $i + "' name='sku" + $i + "'></div><div class='form-group'><button type='button' class='btn btn-link pull-right btn_color'>Add more colors</button><label for='color_images" + $i + "'>Color Images</label><input type='file' name='color_images" + $i + "' multiple id='color_images" + $i + "' class='form-control'></div>");
});
$("#product_form").on('submit', function(e) {
e.preventDefault();
let files = '';
let form = document.getElementById('product_form');
let formData = new FormData(form);
files = $("#color_images" + $i).get(0).files;
$(files).each(function(index, file){
formData.append("color_images_" + [$i],file);
});
formData.append('variable', $i);
$.ajax({
url: 'product_ajax.php',
method: 'post',
data: formData,
success: function(data) {
console.log(data);
},
contentType: false,
cache: false,
processData: false
});
});
});
Now I am getting just only one file if I give index so I am getting multiple files otherwise not
[color_images_1] => Array
(
[name] => dht_feed.dat
[type] => application/octet-stream
[tmp_name] => D:\xampp\tmp\php4E11.tmp
[error] => 0
[size] => 2
)
)
what I want
color_images_1 its all multiple files
color_images_2 its all multiple files
html Code:
<form id="product_form" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="product_name">Product Name</label>
<input type="text" class="form-control" name="product_name" id="product_name">
</div>
<div class="form-group">
<label for="product_slug">Product Slug</label>
<input type="text" class="form-control" name="product_slug" id="product_slug">
</div>
<div class="form-group">
<label for="product_price">Product Price</label>
<input type="text" class="form-control" name="product_price" id="product_price">
</div>
<div class="form-group">
<label for="product_description">Product Description</label>
<textarea class="form-control" name="product_description" id="product_description"></textarea>
</div>
<div class="form-group">
<label for="color_name1">Color Name</label>
<input type="text" name="color_name1" id="color_name1" class="form-control">
</div>
<div class="form-group">
<label for="sku1">Stock Keeping Unit</label>
<input type="text" name="sku1" id="sku1" class="form-control">
</div>
<div class="form-group">
<button class="btn btn-link pull-right btn_color" type="button">Add more colors</button>
<label for="color_images1">Color Images</label>
<input type="file" name="color_images1" multiple id="color_images1" class="form-control">
</div>
<div class="color_wrapper">
</div>
<button class="btn btn-primary btn-block" type="submit">Add Product</button>
</form>
You need to iterate i as well.
Please replace below code
files = $("#color_images" + $i).get(0).files;
$(files).each(function(index, file){
formData.append("color_images_" + [$i],file);
});
formData.append('variable', $i);
With this one
for (var j = 1; j <= $i; j++) {
files = $("#color_images" + j).get(0).files;
$(files).each(function(index, file) {
formData.append("color_images_" + [j], file);
});
formData.append("variable", j);
}
I am trying to make HTML form with javascript but I could not make one part.
If a visitor selects from the dropdown menu "Service 1", the price will be multiplied with 1,5. If he selects "Service 2", the price multiplied with 2 and then with "adet" input value. I want to make multiplier values in script part like this;
var service_prices = new Array();
service_prices["service1"]=1.5;
service_prices["service2"]=2;
I need this calculation Paket(Dropdown)*Adet(Input) Could you help me?
These are my HTML codes;
<script>
$(function(){
//Adet
var val = $('#adet').val();
output = $('#output');
output.html(val);
$('#adet').on('change', function () {
output.html(this.value);
});
$('#Paket').change(function () {
if (this.value == "80") {
$('#adet').prop({
'min': 20,
});
}
if (this.value == "81") {
$('#adet').prop({
'min': 100,
});
}
$('#adet').val();
output.html('');
});
});
</script>
<form method="post" action="process.php"></br>
<label class="control-label col-sm-3" for="inputSuccess3">Paket</label>
<div class="col-sm-9">
<select class="form-control" id="Paket" name="paket">
<option value="80">Service 1 x1.5</option>
<option value="81">Service 2 x2</option>
</select>
</div>
<br>
<label class="control-label col-sm-3" for="inputSuccess3">Adet</label>
<div class="col-sm-9">
<input class="form-control" type="number" id="adet" name="adet" min="20" max="250" value="10" required>
</div>
<label class="control-label col-sm-3" for="inputSuccess3">Link</label>
<div class="col-sm-9">
<input class="form-control" type="text" name="link" required>
</div>
<div class="col-sm-offset-4 col-sm-8">
Fee: <span id="output"></span> Credi
</div>
<div class="col-sm-offset-4 col-sm-8">
<button type="submit" class="btn btn-primary">Order</button>
</div>
</form>
You can store the values in an array like this:
var service_prices = [{
"name": "Service 1",
"value": 80,
"multiplier": 1.5
}, {
"name": "Service 2",
"value": 81,
"multiplier": 2
}
];
You can store the multiplier value in a data-attribute in every option of the Paket dropdown.
See this example:
(function() {
var service_prices = [{
"name": "Service 1",
"value": 80,
"multiplier": 1.5
}, {
"name": "Service 2",
"value": 81,
"multiplier": 2
}];
var Paket = document.getElementById("Paket");
var adet = document.getElementById("adet");
var output = document.getElementById("output");
adet.onchange = function() {
output.innerHTML = adet.value;
if (Paket.value.length > 0) {
var multiplier = Paket.options[Paket.selectedIndex].getAttribute("data-multiplier") * 1;
output.innerHTML = adet.value * (Paket.value * 1) * multiplier;
} else {
output.innerHTML = "";
}
};
Paket.onchange = function() {
if (this.value.length > 0) {
var multiplier = this.options[this.selectedIndex].getAttribute("data-multiplier") * 1;
if (this.value === "80") {
adet.setAttribute("min", "20");
}
if (this.value === "81") {
adet.setAttribute("min", "100");
}
adet.value = 10;
output.innerHTML = adet.value * (this.value * 1) * multiplier;
} else {
output.innerHTML = "";
}
};
function fillServices(data) {
var html = "", i, len = data.length, obj;
html += "<option value=\"\">[SELECT]</option>";
for (i = 0; i < len; i++) {
obj = data[i];
html += "<option data-multiplier=\"";
html += obj.multiplier;
html += "\" value=\"";
html += obj.value;
html += "\">";
html += obj.name;
html += "</option>";
}
return html;
}
Paket.innerHTML = fillServices(service_prices);
})();
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<form method="post" action="process.php">
<label class="control-label col-sm-3" for="inputSuccess3">Paket</label>
<div class="col-sm-9">
<select class="form-control" id="Paket" name="paket">
</select>
</div>
<br>
<label class="control-label col-sm-3" for="inputSuccess3">Adet</label>
<div class="col-sm-9">
<input class="form-control" type="number" id="adet" name="adet" min="20" max="250" value="10" required>
</div>
<label class="control-label col-sm-3" for="inputSuccess3">Link</label>
<div class="col-sm-9">
<input class="form-control" type="text" name="link" required>
</div>
<div class="col-sm-offset-4 col-sm-8">
Fee: <span id="output"></span> Credi
</div>
<div class="col-sm-offset-4 col-sm-8">
<button type="submit" class="btn btn-primary">Order</button>
</div>
</form>
I have a form where users enter 6 numbers and those numbers are compared to numbers contained in an xml document. I've used SimpleXML in PHP to compare the entered numbers to the numbers stored in the xml document, then echo the corresponding date from the xml. This works correctly.
I'm now trying to use AJAX to present a loading screen before the result is displayed. Once the form is submitted, the loading screen appears but the result is not shown.
How do I get the result to show?
This is the form:
<form id="numbers_form" method="post" action="index.php" ajax="true">
<div class="col-lg-2 col-md-2 numbers">
<input class="num_input" type="number" name="num1" id="num1" required >
</div>
<div class="col-lg-2 col-md-2 numbers">
<input class="num_input" type="number" name="num2" id="num2" required >
</div>
<div class="col-lg-2 col-md-2 numbers">
<input class="num_input" type="number" name="num3" id="num3" required >
</div>
<div class="col-lg-2 col-md-2 numbers">
<input class="num_input" type="number" name="num4" id="num4" required >
</div>
<div class="col-lg-2 col-md-2 numbers">
<input class="num_input" type="number" name="num5" id="num5" required >
</div>
<div class="col-lg-2 col-md-2 numbers">
<input class="num_input" type="number" name="num6" id="num6" required >
</div>
<div class="input-button">
<input class="submit" type="submit" value="Show me the money" name="submit">
</div>
<div class="img">
<img id="loader" src="images/loader.gif" alt="loading image">
</div>
</form>
This is my php:
$num1 = $_POST['num1'];
$num2 = $_POST['num2'];
$num3 = $_POST['num3'];
$num4 = $_POST['num4'];
$num5 = $_POST['num5'];
$num6 = $_POST['num6'];
$xml = simplexml_load_file('lottery.xml') or die("Error: Cannot create object");
if(isset($_POST['num1'])&& isset($_POST['num2'])&& isset($_POST['num3']))
{
foreach($xml->children() as $record)
{ // for every record node
if($record->num1 == $num1 && $record->num2 == $num2 && $record->num3 == $num3 && $record->num4 == $num4 && $record->num5 == $num5 && $record->num6 == $num6)
{
echo
"<div class='success'>
<h1>".$record->date."</h1>
</div>";
}
}
}
This is the AJAX:
$(function() {
$(".submit").click(function() {
var num1 = $("#num1").val();
var num2 = $("#num2").val();
var num3 = $("#num3").val();
var num4 = $("#num4").val();
var num5 = $("#num5").val();
var num6 = $("#num6").val();
var dataString = 'num1='+ num1 + '&num2=' + num2 + '&num3=' + num3 + '&num4=' + num4 + '&num5=' + num5 + '&num6=' + num6;
if(num1=='' || num2=='')
{
$('.error').fadeOut(200).show();
}
else
{
$.ajax({
type: "POST",
url: "index.php",
data: dataString,
data:jQuery('#numbers_form').serializeArray(),
beforeSend: function(){
$('#loader').css('display','block');
},
success: function(res){
$('#loader').css('display','none');
}
});
}
return false;
});
});
Remove the line return false; which is below the ajax call