We Keep Coding

How to Pass a value to input field through javascript

My Question : A value which is passed by an id is showing in the input box. but i can not see that value in the html source code section.
This is my input field In which i am passing a value through a cookie.
<input type="text" id="city" class="i-p-c" value="" autocomplete="off" placeholder="Select City">
What i am doing is: I have a drop down of cities. when i click on the city. i am setting a cookie with the name of scity.
$("#cuto li").click(function () {
autoValuenew = this.id; // console.log(autoValuenew);
document.cookie = "scity=" + this.id + ";path=/;domain=" + cookieondomain;
document.getElementById('city').value = this.id;
//Here is am pass a value to city
return false;
});
After that ..
I can access the value of city but i can not see that value in the html source code.
When i change my field type text to hidden type i can see the value in the htmlsource code.
I do not understand what is going here with these two types. or if i am doing something please tell where i am doing wrong. or if there is another way to do this.

Kindly look this code I hope it helps
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<input type="text" id="city" class="i-p-c" value="" autocomplete="off" placeholder="Select City"/>
<ul id="cuto">
<li type="button" id="cuto">test</li>
</ul>
here is your JQuery
$("#cuto li").click(function () {
debugger;
autoValuenew = this.id; // console.log(autoValuenew);
$.cookie("scity", "test value"); // Setting cookie value
//document.cookie = "scity=" + this.id + ";path=/;domain=" + cookieondomain;
document.getElementById('city').value = this.id;
//Here is am pass a value to city
return false;
});

element.setAttribute('value', myValue);
I think you should not just change the value change it in by changing attribute value.

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.

Jquery: Read Form Input Text Having Name As Associative Array

For some reason I have HTML like this -
<input type="text" value="100" name="ProductPrice[1][]">
<input type="text" value="200" name="ProductPrice[2][]">
<input type="text" value="300" name="ProductPrice[3][]">
<input type="text" value="400" name="ProductPrice[4][]">
And process this on server side like this -
foreach ($_POST['ProductPrice'] as $ProductId => $Price)
{
//$Price = Price[0];
}
This works fine for me. However my problem is with validating this on client side with jquery.
I tried $.each($("input[name='ProductPrice[][]']"), function(key, value) {
but nothing seems to be working. How can I read those input boxes using the NAME property.

You can use the "Attribute Starts With Selector":
$("[name^=ProductPrice]").each(function() {
var name = $(this).attr("name");
var value = $(this).val();
// Do stuff
});
It will select all elements whose name starts with "ProductPrice"

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());

Clear multiple input[type=text] default values on button click before sending

I have a form with a lot of fields and want to clear all the default values (unchanged ones) for the input[type=text] when I click the button preferably using jQuery. I am using the button rather than submit because I am will be using the same button to then submit the form to a local script and then on to a third part for processing. But my script doesn't seem to be working.
A simplified version of the form:
<form name="cpdonate" id="cpdonate" method="post" action="" >
<input type="text" value="First Name" id="BillingFirstName" name="BillingFirstName" onFocus="clearField(this)" onBlur="setField(this)" />
<input type="text" value="Last Name" id="BillingLastName" name="BillingLastName" onFocus="clearField(this)" onBlur="setField(this)" />
<input type="hidden" name="Submit" value="Submit" />
<button id="cpbutton">Submit</button>
</form>
and the script I'm using:
<script type="text/javascript">
$(document).ready(function(){
// default values will live here
var defaults = {};
// Set the default value of each input
$('input[type=text]').each(function(){
defaults[$(this).attr('value')] = $(this).text();
});
// Functions to perform on click
$('#cpbutton').click(function(){
// clear unchanged values
$('input[type=text]').each(function(){
if (defaults[$(this).attr('value')] === $(this).text())
$(this).text('');
});
});
});
</script>

input doesn't have text, it has value and you can't rely on the attribute once user changes it, need to get it from the value property. Also, your defaults object won't locate the value if it is changed.
Am going to store each value on the elements itself using data()
Use val()
$(document).ready(function(){
// Set the default value of each input
$('input[type=text]').each(function(){
$(this).data('val', $(this).val());
});
// Functions to perform on click
$('#cpbutton').click(function(){
// clear unchanged values
$('input[type=text]').each(function(){
if ($(this).data('val') === $(this).val())
$(this).val('');
});
});
});

You should use defaults[$(this).attr('name')] instead of defaults[$(this).attr('value')] because when user changes value then attribute "values" value also changes

You may try this (Example)
// clear unchanged values
$('input[type=text]').each(function(){
if ($(this).val() == this.defaultValue) $(this).val('');
});
An input type=text has .val() jQuery method, not text() and use this.defaultValue to check the initial default value.