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.

Get values submitted to php from form

Consider the following form:
<form method="get" enctype="multipart/form-data">
<input type="hidden" value="0" name="foo">
<input type="checkbox" value="1" name="foo">
</form>
When submitting the form, the URL ...?foo=0 will be requested if the checkbox is not checked. If the checkbox is checked, the URL ...?foo=0&foo=1 will be requested. In PHP, query string arguments override any previous arguments with the same name, so foo will have the value 1 in the PHP script handling the latter request.
What is the best way to obtain the value foo would have in the PHP script using JavaScript, when not knowing anything about the form? In theory, there could be an arbitrary number of inputs named foo of different types, and I would like to know the value that foo would have in the PHP script handling the request if the form was submitted.
As I understand it, the answer is the value of the last enabled input element named foo. By enabled, I mean that the input element is not disabled and that it is not a button (the button's name and value are not added to the query string unless the button is used to submit the form) or an unchecked checkbox or radio button.
Maybe there is an easy way to get this value using jQuery?
Edit
Loads of people suggest that I rename the input elements to foo[] or similar. I guess I was not clear enough that I actually want all the input elements named foo, and to only receive one of the values in the php script.
My questions is how to determine which value the php script will receive using JavaScript.

use this:
<form method="get" enctype="multipart/form-data">
<input type="hidden" value="0" name="foo[]">
<input type="checkbox" value="1" name="foo[]">
</form>
and in PHP, use:
$params = $_GET['foo']; //params would hold array
it would be good to use.

You can do a loop on the global variable $_GET
foreach($_GET as $key=>$val) {
echo "key = $key , val = $val";
}
if you have multiple inputs with the same name you will need to append []to the name so you can get all the values as a array
<form method="get" enctype="multipart/form-data">
<input type="hidden" value="0" name="foo[]">
<input type="checkbox" value="1" name="foo[]">
</form>
to get the values in jquery you do the following:
$('input[name="foo[]"]').each(function(){
console.log($(this).val());
});
if you only want one value of foo but you have multiple elements with that name you will need to change your logic to using radio buttons

This is really bad design. You should check checkbox state in your php (backend) code. Get rid of the hidden input:
<form method="get" enctype="multipart/form-data">
<input type="checkbox" value="1" name="foo">
</form>
and put this in your php code:
if (isset($_GET['foo'])) {
$foo = 1;
} else {
$foo = 0;
}
If you want to use javascript, you can try this on form submit:
var checkboxValue = $("input[name='foo']").prop("checked");
checkboxValue would be true or false depending on checkbox status.

How do it have a radio button pass data hidden from url?

Here is the thing, I have to show a proof of concept, in which I:
Pass data from page to page using the url section and displaying the data passed in another page.
Pass data from page to page NOT using the url section and displaying the data passed in another page.
Meaning I want one of the radio button to behave as: input type="hidden",
But I do not know how to do that, to clarify there is a code snipped below. Any help is appreciated. To clarify, it should not show the value of the radio button in the query string.
<form method="POST" action="Confirm.jsp">
<p>
Choose:
<input type="radio" checked name="QuizType" value="Private">Private
<input type="radio" name="QuizType" value="Public">Public
<br>
<input type="submit" name="submit" value="submit">
</p>
</form>

Your form:
<form id="frm1">
<p>
Choose:
<input type="radio" checked name="QuizType" value="Private" id="radio">Private
<input type="radio" name="QuizType" value="Public">Public
<button onclick="myFunction()">Click</button>
</p>
</form>
Then you can get the selected value with JavaScript:
function myFunction() {
var radios = document.getElementsByName('QuizType');
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
// Store the value for the selected radio
// You can maybe redirected on another page and pass this variable
$selectedRadio = radios[i].value
alert($selectedRadio);
break;
}
}
}
Check this Example.
If you want to pass variables to the url then you should try:
window.location.href+'/'+$selectedRadio;
Resources:
Get Radio Button Value with Javascript, Is there a way to pass javascript variables in url?, How to redirect to another webpage in JavaScript/jQuery?

How to identify which button was pressed in javascript?

How to identify which button was pressed in javascript
in have 4 buttons that present items and text box
when i press a buttons, the number in the text box add to sum

We would really like to help you but you should provide some more information how you would like to realize that and what your actual code looks like.
Did you say that you are trying to realize a calculator? There are many ways how to identify the button which was triggered, e.g. pressed. In the example you provided above (Calculator) a javascript function is called if the user clicks on a specific button. To achieve that, the function call is made within the onClick event:
<INPUT type="button" name="one" value="1" OnClick="btnPressed(1)">
The called function could look like this:
function btnPressed(value){
var obj = document.getElementById('ID_of_textbox')
obj.value = parseInt(obj.value) + value
}
If you would like to identify which button was clicked, you can do it with the numbers stored in the 'value' argument. Or on the other hand you could change the trigger to:
<INPUT type="button" name="one" value="1" OnClick="btnPressed(1, this)">
and the JS function to:
function btnPressed(value, sender){
...
}
If you are willing to use the 'this' reference like illustrated above, then you can also do a step further and change the whole thing to something like this:
<INPUT type="button" name="one" value="1" OnClick="btnPressed(this)">
function btnPressed(sender){
var obj = document.getElementById('ID_of_textbox')
obj.value = parseInt(obj.value) + parseInt(sender.value)
}
You can also do it directly in the onClick of the INPUT:
<INPUT type="button" value="1" OnClick="document.getElementById('ID_of_textbox').value = parseInt(document.getElementById('ID_of_textbox').value) + 1">
or:
<INPUT type="button" value="1" OnClick="document.getElementById('ID_of_textbox').value = parseInt(document.getElementById('ID_of_textbox').value) + parseInt(this.value)">

How can I pass variables to another page using a button?

I have a variable var somewhere along my js program. lets call it 'tempVar'.
I want to pass this variable when the button is being pushed. here is part of my code:
var TempVar=9;
<form id="boardButton" action="/test" >
<button id="joinBoardButton" >JOIN</button>
</form>
how can I pass to the page test the content of Tempvar?

You can use the onclick attribute. Then once in JavaScript you can then seek out the values you need. If they are on the page already you can use document.getElementById(someID) to get the element, then grab your value that way.
You can also use the this keyword to access the DOM element just clicked. See : what's “this” in javascript onclick?
EDIT :
As for getting a variable you alreday had, if it has a large scope you can just access it directly.
Another way of doing this, is to save the value you want to re-use in a hidden input of your site and re-use when needed.
Hope this helps!

Assuming var is defined globally (on the window object):
<form id="boardButton" action="/test">
<input type="hidden" name="var"/>
<button id="joinBoardButton" onclick="this.form.elements['var'].value=window.var">JOIN</button>
</form>

You can add an input hidden value to your form
<input id="var" type='hidden' name='country' value=''>
Then you can set the value with onclick when you submit the form :
<button id="joinBoardButton" onclick="this.document.getElementById('var').value=var" >JOIN</button>

This should submit the form with the TempVar in the query string: .../test?TempVar=ABC
<script>
var TempVar = "ABC";
function setVar() {
document.getElementById('TempVar').value=TempVar;
}
</script>
<form id="boardButton" action="/test" >
<input type="hidden" id="TempVar" name="TempVar" value=""/>
<input type="submit" id="joinBoardButton" value="JOIN" onclick="setVar();"/>
</form>