We Keep Coding

How to get hidden array value from output to PHP

I got an output array code,
<output class="gst" id="op" name="Gst[]">0.00</output>
i got an input hidden array code,
<input type="hidden" id="gst2" name="Gst2[]">
I got a function to show the amount of gst for each output
function myFunction() {
debugger
var ele = document.querySelectorAll('input.input');
let sum = 0;
ele.forEach(input => {
sum += input.value ? parseFloat(input.value) : 0;
$(input).parents("tr").find(".gst").text((input.value * 0.07).toFixed(2));
});
document.getElementById('result').textContent = sum.toFixed(2);
}
my problem is, how do i get the hidden array gst2 value in PHP?

You can't get de hidden field value in PHP without wrapping it in a form and do a POST / GET request. You could do something like this:
<form method="POST">
<input type="hidden" id="gst2" name="Gst2[]">
<input type="submit" value="Submit">
</form>
After you submit the form $_POST['Gst2'] will be set and you can use that variable. You could do the same with method="GET".
EDIT:
You can find multiple solutions in this post:
https://stackoverflow.com/a/50412517/2075596
Just use input tag using same id and name.

Jquery serializeArray break then continue

I'm really new to using serializeArray in jQuery so please forgive me if i'm not asking the correct question.
I have a form which on click add the data to fields within a div ID which works fine, it keeps adding data each time i click which is great, however is it possible to split each form's results? For example, you type in a name and phone number, click add, then in the div ID #results it adds the data then i want the next time you add data, it add's it to the same div ID but seperated by a box
$("#saveAndAdd").click(function(){
addTrip();
var x = $(".cool-test").serializeArray();
$.each(x, function(i, field){
$("#results").append(field.value + " " );
});
});
function addTrip() {
var providerName = $("#providerName").val();
var providerPhone = $("#providerPhone").val();
$("#providerTypeValue").html(providerType);
$("#providerNameValue").html(providerName);
$("#providerPhoneValue").html(providerPhone);
<label class="uikit-text-input__label" for="Input field">Name</label>
<input class="uikit-text-input input-half" name="Input field" id="providerName" type="text" value="" aria-required="true">
<label class="uikit-text-input__label" for="Input field">Phone</label>
<input class="uikit-text-input input-half" name="Input field" id="providerPhone" type="text" value="" aria-required="true">

Jquery selector for laravel array Validation errors

I tried to display the Laravel 5.5 Ajax error Validation using jQuery automatically,
When for single field it was work, to use following code:
$.each(response.errors, function (key, value) {
el.find('input[name="'+key+'"] , select[name="'+key+'"] , textarea[name="'+key+'"]').parent().append('<div class="error right-align pink-text text-mute">'+value+'</div>');
});
The code above will append an error message to each element based on selector.
But if I use array field, for example <input type="text" name="start_date[]" />
Then I got following error validation:
{"message":"The given data was invalid.","errors":{"start_date.0":["The start_date.0 field is required when availability is 0."],"start_date.1":["The start_date.1 field is required."],"end_date.0":["The end_date.0 field is required."],"end_date.1":["The end_date.1 field is required."]}}
So my javascript couldn't find the elements start_date.0
How to select the element using jQuery with that response ? (start_date.0 , start_date.1)

thanks for all the answer, I end this problem by using id attribute, so my html tag should be like this <input type="text" id="start_date.0" name="start_date[]" />
Since jquery doesn't allow dot "." pattern in selector, My selector should be like this
el.find('input[id="select_date.0"]')
So My code should be:
$.each(response.errors, function (key, value) {
el.find('input[id="'+key+'"],input[name="'+key+'"] , select[name="'+key+'"] , textarea[name="'+key+'"]').parent().append('<div class="error right-align pink-text text-mute">'+value+'</div>');
});

Use errors['start_date.0'] instead errors.start_date.0
var myObj = {"message":"The given data was invalid.","errors":{"start_date.0":["The start_date.0 field is required when availability is 0."],"start_date.1":["The start_date.1 field is required."],"end_date.0":["The end_date.0 field is required."],"end_date.1":["The end_date.1 field is required."]}};
console.log(myObj.errors['start_date.0']);
Using start_date.0 it tries to get element 0 in object start_date, but you have this start_date.0 as element of errors so use bracket [ ] to treat start_date.0 as element of errors
var response = {"message":"The given data was invalid.","errors":{"start_date.0":["The start_date.0 field is required when availability is 0."],"start_date.1":["The start_date.1 field is required."],"end_date.0":["The end_date.0 field is required."],"end_date.1":["The end_date.1 field is required."],"dob":["Date of birth is required."]}};
$.each(response.errors, function (key, value) {
var name = $("input[name='"+key+"']");
if(key.indexOf(".") != -1){
var arr = key.split(".");
name = $("input[name='"+arr[0]+"[]']:eq("+arr[1]+")");
}
name.parent().append('<div class="error right-align pink-text text-mute">'+value[0]+'</div>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><input type="text" name="start_date[]" value=""></div>
<div><input type="text" name="start_date[]" value=""></div>
<div><input type="text" name="end_date[]" value=""></div>
<div><input type="text" name="end_date[]" value=""></div>
<div><input type="text" name="dob" value=""></div>

error: function(data){
var response = JSON.parse(data.responseText);
var errorString = '<ul style="list-style: none;">';
$.each( response.errors, function( key, value) {
errorString += '<li><small>' + value + '</small></li>';
});
errorString += '</ul>';
$("#errors").html(errorString);
}

sending multiple inputs on ajax

i have a form where i get a collection of records, and after being present is shown like this:
<input name="position" id="nameText" step-id="3" type="number" value="1" class="form-control stepinput">
<input name="position" id="nameText" step-id="4" type="number" value="2" class="form-control stepinput">
<input name="position" id="nameText" step-id="5" type="number" value="3" class="form-control stepinput">
The value is to later sort the records, and the "step_id" attribute is to send via ajax to update the specific record, but my data is not quite looking good. Wich is the best way to send my data to the controller to later being updated the records
My current code:
$('button.update-positions').on('click', function(event){
event.preventDefault();
var form = $(this).closest(".steps-form");
var map = {};
$(".stepinput").each(function() {
map[$(this).attr("step-id")] = $(this).val()
});
})

Hard to read but if I understood correctly you:
Have an 3 inputs of numbers
Want the value entered being updated in the Database
use "step-id" to identify which one to update
If so then replace step-id="" by data-stepid="" and the code for that would be:
$("button.update-positions").on("click",function(event) {
event.preventDefault();
var form = $(this).closest(".steps-form");
var map = {};
$(".stepinput").each(function(index,value) {
map[$(this).data("stepid")] = value.value;
});
console.log(map); // Your map object
});
You can't have 2 elements with the same ID and you should use a data-attribute if you want to pass on information like so.

Set Input array value using jquery

I am trying to implement html input array.
<input type="text" name="firstName[]" id="firstName[]">
And i need to set value of another form which looks something like
<form id="tempForm">
<input type="text" name="userName" id="userName">
<input type="text" name="userId" id="userId">
</form>
into the input array using jquery on form submit.
For that i tried following on form submit,
var currentIndex=$("input[name^=firstName]").length;
$("#firstName").eq(currentIndex).val($("#userName").val());
But it doesn't works,obviously.
Question:
How to set value of input array using jquery?

Use the jquery append function for add inputs with different attribute value :
Check it :
$(document).ready(function(){
var a = ["username","userid"];
var b = ["username","userid"];
for( var i = ; i <3 ; i++){
$('#tempForm').append('<input type="text" name="'+a[i]+'" id="'+b[i]+'" />);
}
});
Then continue your other work:
replace this code with your js code :
var currentIndex=$("input[name^=firstName]").length;
$("#firstName").eq(currentIndex).val($("#"+userName).val());