We Keep Coding

How to serialize just one value of input via jQuery?

I started to do dropdown list instead select bcz it is not possible to stylize but I did not think to future and now I found that if I want to save data from form to db I need to get ids via $_POST instead of names.
For ex. I have dropdown list with status of product:
New
Old
Handmade
If I want to save chosen sattus for chosen product it is better for me to get ID of status option. Bcz my table is like this:
item_id | option_value
1 | 1
If I send name as "old" via $_POST, I need to get its ID from another table before insert it.
I created dropdown list like this:
/* SELECT REPLACED BY DIV JS */
var select = $('.add-item__select').hide(); // Hide original select options
// Replace each select by div
select.each(function() {
var selectVal = $(this).find('.add-item__select-main').text(),
name = $(this).attr('name');
newDropdownDiv = $('<input class="add-item__input-select" name="' + name + '" placeholder="' + selectVal + '" readonly required><i class="arrow down"></i></input>')
.insertAfter($(this))
.css({paddingLeft: '0.3em', cursor: 'pointer'});
});
Each SELECT has addaed INPUT after it.
If I want to show shosen vale from dropdown list I need to show it in this way:
$('.add-item__input-select').val("text copied from list");
After this if I add ID of option to input in this way:
$('.add-item__input-select').attr("value", optionID);
Then If I want to serialize all fields values from form and this is point,
$('.add-item__form').serializeArray()
I get two results for status:
name: "status", value: "text copied from list"
and
name: "status", value: optionID
But I need just optionID.
I have everything optimized for this structure, so I would like to ask you if there is some easy way how to fix it or I need to modify structure.
I am thinking to remove INPUT and just change SELECT opacity to 0 instead of display none and use SELECT for form data serialize. But then I will need to replace all INPUTs by some DIV which will hold text of chosen option and also change everything else connected with it. For ex, if user clicked on INPUT the label was showed above it.
Thanks for advices

I found one solution but I have problem that it is working just if user will not refresh page. In DOM is everything the same after refresh but serializeArray() get just input text value and not value="ID" after page refresh.
I just remove these values which I do not want from FormData.
// Send formData to upload.php
$('.add-item__form').on('submit', function() {
event.preventDefault();
event.stopPropagation();
if ( checkFieldsIfNotEmpty() == true ) {
var formDataFields = $('.add-item__form').serializeArray(), // Get all data from form except of photos
count = Object.keys(data).length; // count fields of object
// Fill formData object by data from form
$.each(formDataFields, function(index, value) {
if ( value.name === 'category' && !$.isNumeric(value.value) || value.name === 'subcategory' && !$.isNumeric(value.value) ) {
// do nothing
} else if ( (value.name.indexOf('filter') >= 0) && !$.isNumeric(value.value) ) {
// do nothing
}
else {
formData.append(value.name, value.value); // add name and value to POST data
}
});
// foreach - fill formData with photos from form
$.each(data, function(index, value) {
formData.append('files[]', value);
});
uploadData(formData); // send data via ajax to upload.php
}
});
Can you advice me what can be problem?

Store form in localstorage, retrieve it later for submit

In a wordpress website I want that when someone fills a product form (select attributes etc) and clicks buy now, if is not logged in then he is redirected to login form. On succesfull login I want to get the submitted form contents from localstorage, fill the form and then submit the form automatically.
Is that possible?
I found that I can store the submitted form like this (but how I can refill the form automatically?):
$(document).ready(function() {
$('form').submit(function(e) {
e.preventDefault();
var formFields = $(this).serialize();
localStorage.setItem('myForm', formFields);
//data = localStorage.getItem('myForm'); //retrieve it later
});
});

You should be able to retrieve data from localStorage, get your form fields using DOM selectors and fill their values using the data from localStorage.
In vanilla JS, you can probably do the following:
document.addEventListener('load', () => {
// check if user is logged in according to your usecase
if(isLoggedIn()) {
try {
const formData = JSON.parse(localStorage.getItem('myForm'));
// get input fields. If you have some unique id associated to them, you can use document.querySelector(`#${inputId}`);
const inputFields = document.querySelectorAll('input');
for(let i = 0; i<inputFields.length; i++) {
const inputId = inputFields[i].getAttribute('data-id');
// fallback to empty string in case it is not found in localStorage object
inputFields[i].value = formData[inputId] || '';
}
} catch(e) {
// handle error
}
// Now you have the form input fields pre-filled, add custom logic from here ..
}
})
/*
--- Sample DOM ----
<input data-id="name" />
<input data-id="city" />
---- Form fields saved in localStorage ---
{ name : 'Naruto', city: 'Leaf Village' }
*/

how to display data from DB on the .append input field

i have a button that creates a new input field and a default field
<div class="container1">
<button class="add_form_field">Add Title</button>
<div class="form-group label-floating">
<input type="text" id="title_name">
</div>
</div>
and this is the jquery that creates a new input field.
var max_fields = 10;
var wrapper = $(".container1");
var add_button = $(".add_form_field");
var x = 1;
$(add_button).click(function(e){
e.preventDefault();
if(x < max_fields){
x++;
$(wrapper).append('<div><input type="text" id="title_name"/>Delete</div>'); //add input box
}
else
{
alert('You Reached the limits')
}
});
$(wrapper).on("click",".delete", function(e){
e.preventDefault(); $(this).parent('div').remove(); x--;
});
and i have ajax call to get the title name from my database based on the user logged in.
$.ajax({
url:'../ajax/getprofile.php',
type:'POST',
data:{userid:user},
dataType:'JSON',
success: function(result){
$('#title_name').val(result.title_name);
}
});
when i use console.log(result) to see what the data is being returned what happen is that only one data is being returned from my ajax request..
i just didn't include the other data on my question earlier cuz those data only return one data.. i only have problem with the title_name
this code works fine for only the default input field.. like the data from my database only shows up on the default input field not on the appended input field..
saying i have a user id of 10001 and my db is look like this
tbl_title
id | name
10001 | sample
10001 | test
what i want to achieve is that when i make a request from ajax and returned the requested value it will display on my input field.and since my id is similar to the tbl_title (id) it should display the two data on the input field. but unfortunately only the 1st data is being displayed only on the default input field what i wanted to make is that if the data is more than 1 it will also display on the appended input field.. but i dont have any idea how this works..
b4 i only got one data that is being returned so i updated my mysql to return all the data that have similar id so now i got array1 and array2 array1 is on the picture and the array2 is similar to the picture but the only difference is their title_name.. so what should i do to display my the two title_name on the array on my input field

The id is the same for each input. So jQuery takes the first catch in this line:
$('#title_name').val(result.title_name);
Thats why only the first input works ...
Try to change it something like this:
$(wrapper).append('<div><input type="text" id="input_' + x + '"/> ...
and:
$('#input' + x ).val(result.title_name);
Probably not exactly right but a push in the right direction ;) The id is the problem.

Feed to select from mysql db through Ajax

I have the following Code
if($('#b_ID').length==1){
$('#gen, #dob').change(function(){
$.ajax({
type: "POST",
url: "<?=APP_PATH?>ajax/json.class.php",
data: {
gen: $('#gen').val()
,dob: $('#dob').val()
},
}).done(function( msg ) {
var wcs = $.parseJSON(msg);
console.log(wcs);
$('#b_ID').html('');
$('#b_ID').append('<option value="">'+'<?=_('[Select]')?>'+'</option>');
$.each(wcs, function(){
$wc=$(this);
//check for original value
var selected = $('#orig_ID').val()==$wc[0].ID_w?' selected="selected"':'';
$('#b_ID').append('<option '+selected+' value="'+$wc[0].ID_w+'">'+$wc[0].w_d+'</option>');
})
})
})
}
The above code is working perfect, if the form is loaded from other previous form. For example,
form1.php contains two fields
dob text input
select option
After we insert dob and select from option, when I save and then I load the second form which contains the select option that depends on those two inputs. For this purpose it works OK.
but what I need is I have all the elements on the form, all three fields, including one input and two select, so according to the first input of dob and the second select, I want to fill the third selection.
How could I change the above code to be able to work?

Organizing values of child elements for processing of a draggable form

in my form, the user can click a button to create input fields. Inside each of the created input fields, they can click the "add media links" button to create another input field underneath. They can add as many media links as they please or none at all. The first set of input fields are also sortable. I have the user interface working, I'm just wondering how to go about processing it.
right now, I am basically grabbing all of the values entered from the first set of input fields (aka "thestepvalues" in the code) and then grabbing all of the values entered from the second set of input values (aka "links" in the code) and then URL enconding it and serializing it to send to the my process.php file. The code is below:
$("#new_post").submit(function(e){
e.preventDefault();
//enter each of the values for 'the step' input field into an array
var thestepvalues = $("input[name='thestep\\[\\]']")
.map(function(){return $(this).val();}).get();
//enter each of the values for each 'links' input field into an array
var linkvalues = $("input[name='link\\[\\]']")
.map(function(){return $(this).val();}).get();
//this will basically convert everything entered into the steps as well as the links fields
//into URL appropriate strings to pass on to the process.php file
var i, string="";
for(i=0;i<thestepvalues.length; i++){
string += "thesteps[]=" + encodeURI(thestepvalues[i]) + "&";
}
for(i=0;i<linkvalues.length; i++){
string += "links[]=" + encodeURI(linkvalues[i]) + "&";
}
//send the data from the string (both kinds of input fields) as well as any
//other input fields (that aren't dynamic) from the form
$.post("process.php", string + $("#new_post").serialize(),
function(data){
if(data.email_check == 'invalid'){
$("#message_post").html("<div class='errorMessage'>Sorry " + data.name + ", " + data.email + " is NOT a valid e-mail address. Try again.</div>");
} else {
$("#message_post").html("<div class='successMessage'>" + data.email + " is a valid e-mail address. Thank you, " + data.name + ".</div>");
}
}, "json");
});
For a sample of data entered into the form, how do I go about indicating which link belongs to the parent input field? Baring in mind the parent input fields are sortable jquery ui elements.
here's a sample set of data entered, as you can tell I have no way of knowing which input field the child links belong to:
[thesteps] => Array
(
[0] => This is really the second input field, but dragged up to the first position.
[1] => This is the second input field, but used to be in the first position.
[2] => this is the third input field
)
[links] => Array
(
[0] => this is the first (child) link for the first position.
[1] => this is actually the (child) link for the third field!
)
Any help would be greatly appreciated, thanks in advance
-- 24x7

You could use HTML5 custom data attributes, setting the value of each linked set to be the same number.
For example:
<input id="1" data-newinput-id="1" />
<input id="2" data-newinput-id="1" />
<input id="3" data-newinput-id="2" />
<input id="4" data-newinput-id="2" />
Even if the inputs are re-arranged, you can match them up by getting the attribute values in jQuery like so:
var id = $(this).attr("data-newinput-id"); // 1