We Keep Coding

How to store form input data into a jquery array?

I'm new to Jquery and need a solution for a challenge.
What I need precisely is to store the inputs of a HTML form into an existing array. Do you know the Jquery logic to do this?
Here is a sample of the HTML that is the focus of this inquiry.
<form>
<input type="text" id="inputform" value""idkyet></input>
</form>
Example of how I'd like this to work:
User types name into form and clicks submit. That name is now stored into an existing array.
thank you.

Try
yourExistingArrayThatIsDefinedSomewhere.push($("#inputform").val())
console.log(yourExistingArrayThatIsDefinedSomewhere); //should show all previously pushed values
Note that you should add the code above to an event handler of the submit button.

<input type="text" id="inputform"> <input type="button" value="submit" id="submitform">
JS:
var your_array = [];
$("#submitform").click(function(){
your_array.push($("#inputform").push());
alert(your_array);
});
i think you should do a bit of studing yourself instead of just posting anything here.

Getting the value of the input in jQuery and adding it to an array would be something like this :
var array = [];
$("#inputform").change(function() {
array.push(this.value);
alert(array);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<form>
<input type="text" id="inputform" value=""></input>
</form>
For example, here each time the value of the input changes, it will add it to the array.

Merging search terms from 2 separate input fields

So I have javascript code to prepend "tag:" or "vendor:" before every search term, but I wanted to hide that from the user, so I created a hidden input field to send the code but it's not properly prepending the "tag:" and "vendor:" before every word. and instead inputs the entire string, then the search terms.
<form method="get" action="/search" id="search-home">
<button type="submit" value="search"></button>
<input type="hidden" name="type" value="product" />
<input type="hidden" name="q" class="searchtext" />
<input type="text" name="red" placeholder="Search"/>
</form>
<script>
$(document).on('submit','#search-home',function(){
var searchtext = $('.searchtext').val();
$('.searchtext').val("tag:"+searchtext+"* OR vendor:"+searchtext+"*");
});
</script>
Here's what the Url looks like with the code
http://zzz.co/search?type=product&q=tag%3A+OR+vendor%3A&red=tote#fullscreen=true&search=home
Here's what it's supposed to look like.
http://zzz.co/search?type=product&q=tag%3Atote+OR+vendor%3Atote#fullscreen=true&search=home

You're getting an empty value and inserting it here:
$(document).on('submit','#search-home',function(){
var searchtext = $('.searchtext').val(); // <- HERE
$('.searchtext').val("tag:"+searchtext+"* OR vendor:"+searchtext+"*");
});
What you should be doing is getting the user given query, which is the input you named "red".
$(document).on('submit','#search-home',function(){
var searchtext = $('input[name="red"]').val();
$('.searchtext').val("tag:"+searchtext+"* OR vendor:"+searchtext+"*");
});
With the above fix, your URL will look similar to:
http://zzz.co/search?type=product&q=q=tag%3Atote+OR+vendor%3Atote&red=tote.
I do not know where you're getting your hashbang(#) from, but I would assume it will append at the end as before.
If you want to get rid of the red=tote part, you have a few options. Emptying the value via $('input[name="red"]').val(''); will make it appear in your url as red=. If you want it gone entirely, you should use $('input[name="red"].remove();.
I would also advise having your "on" hook attached to the form, not the entire document. This is just a good practice to avoid using unnecessary resources as this hook will bubble every time a form is submitted, regardless of the selector. Instead, consider:
$('form#search-home').on('submit', 'button[type="submit"]', function() { ... };
That way it will only bubble when a submit event happens on that specific form, greatly reducing the possible instances those resources are used.

What is document.f.q.focus?

What is document.f.q.focus?
Is this a java script code or not
whether I can use document.f.id.value?
what is the difference between this and document.getElementbyID()

The HTML looks like this:
<form name="f">
<input name="q" />
</form>
In such a case, document.f refers to the form, and .q refers to the input element of that form. .focus() places the focus on that input.
It's worth noting that such code is unnecessary now that HTML5 is around:
<input name="q" autofocus />

It needs a form to make it work, Try this:
<form name="f">
<input name="q" value="test" type="text"/>
</form>
javascript:
document.f.q.focus();
document.f.q.value = 1;
Here is DEMO

The id attribute inside a html is meant to be unique.name can be an array(file[]) and with html5 should be used only on form elements.
html5 removed the support of the name atrribute on most elements except form elements.
id and name are 2 different things.
document refers to the whole html inside a page.
to get an element by it's id you need to call document.getElementById(id);
to get an element by it's name (considering html5) so inside a form
you call document.forms[0].name. form[0] refers to the first form inside the document
In your case the form has also a name so appart from html5 the code is correct.
form is called f,input is called q. thats why document.f.q returns the input field.
if you want to add an id to your input field then you have to add an id:
<input name="q" id="q">
to get the element:
document.getElementById('q');
to return the content:
document.getElementById('q').value;
And focus(); is a native function that points the focus to the choosen element.
In your case when you load the page you will see the blinking pointer inside the searchflied.

Setting the value of multiple inputs with the same id using jQuery?

Considering the following HTML:
<form id="upvoteForm" method="post" action="/post/upvote">
<input type="text" name="post_id" id="post_id"/>
</form>
<form id="downvoteForm" method="post" action="/post/downvote">
<input type="text" name="post_id" id="post_id"/>
</form>
<input type="hidden" id="_postid" value="1"/>
I'm trying to set the two input fields with the name post_id to to value from _postid using this JavaScript and jQuery:
$(document).ready(function() {
$('#post_id').val($('#_postid').val());
});
However, as you can see in this jsFiddle, it's only setting the value of the first one. How do I set the value of both of them? I thought the selector would end up grabbing both.
Now, I realize you might be wondering why I have two forms on this page. The basic reason is I have button inputs that I've styled the way I want but then I use the onclick to call the submit of the appropriate form here. I am ultimately going to be leveraging AJAX here, but that's coming later.

id is always unique. you cannot select 2 elements with same id. select by name
$(document).ready(function() {
$('input[name=post_id]').val($('#_postid').val());
});

Having two HTML elements with the same ID is illegal and will cause undefined behavior such as what you're experiencing. Using the same name is valid, however. Therefore you could use a selector like $('form > input[name=post_id]'), which would look for an input inside of a form with the name attribute set to post_id.

jQuery not posting all inputs of a form after the .append()

I have a form generated dynamically with the method .append() of jQuery.
I can add any number of new input, textbox, cmbbox, etc...
But the problem is that when I do the sumbit of the form, the PHP target does not receive the new input added, but just the vars connected to the input already in the form before the append().
Any ideas?
The javascript:
$("#button").live('click',function add(){
$("#list").append(
'<li style="height:20px;">'
+'<input type="text" class="text" id="prova" name="prova[]" value="prova">'+
'</li>'
);
});
The Html:
<input type="submit" id="button" value="Add input">
<form name = "form" id="form" action="post.php" method="POST">
<ul style="width:670px;padding:0px 0px 30px 0px" id="list">
</ul>
<input type="submit" id="submit" value="Submit">
</form>
The PHP:
<?php
print_r($_POST);
?>

Problem 1:
Your #button should not be of type submit, since you just want to use it to add to the form and not submit the form. So you should have:
<input type="button" id="button" value="Add input">
Problem 2:
You are overwriting your variables. The name is the variable sent with the form, so each input addition must have a new name, or the variable must be an array.
Additionally, you can't have more than one element with the same id.
The simplest way to solve this is to make prova an array by using the form prova[]:
$("#button").live('click',function() {
$("#list").append(
'<li style="height:20px;">' +
// Removed repetitive ID and made prova an array
'<input type="text" class="text" name="prova[]" value="prova"></li>'
);
});
jsFiddle example

You are intercepting the click event and adding elements to the form, but the event has already started, and will complete its default action (submit the form) without re-checking the content of the form.
You should stop the event after adding the fields (preventDefault should be the right choice), and then re-submit the form.
Something along these lines:
$('#button').live('click', function add(event){
event.preventDefault();
$('#list').append(...);
$('#form').submit();
});
I haven't tested it, but I'm pretty confident that it should work :)

Just to clarify, and putting any other problems aside, #Claudio's note is the correct answer here. I just had the same problem, button type was 'button' and the new element's name was being dynamically incremented. Everything looked fine, but the added elements would not submit.
Then I noticed my form tags were inside the table tags. I moved them outside and it all worked as planned.

Have any code to show? In order for php to "see" the vars submitted, you have to ensure that it has the "name" attribute specified on the form elements. I have a feeling your issue is going to be with the jQuery not the php.

Best guess: You haven't set name attributes for your dynamically added elements.