Ask your JavaScript questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

I want to use a form, enter data and push input fields to json object JavaScript

  • SOLVED

I want to use a form, enter data and push input fields to json object "members". Right now I can't even alert(SM_name);

<form name = "playerInfo" id = "playerInfo" action="#" onsubmit="submit(); return false;">

<label>player name</label><input type="text" name = "name" />
<label>CCCR mbr. expires</label><input type="text" id="cccr_expires" name="cccr_expires" /></p>

<label>rating</label><input type="text" name="uscf_rating" />
<label>USCF ID#</label><input type="text" name="uscf_id" />
<label>expires</label><input type="text"name="uscf_exp" />

<button type="submit" id = "submit">Submit</button>

</form>

<script>

function submit() {
var SM_name = document.forms["playerInfo"]["name"].value;
var SM_cccr_expires = document.forms["playerInfo"]["cccr_expires"].value;

var SM_uscf_rating = document.forms["playerInfo"]["uscf_rating"].value;
var SM_uscf_id = document.forms["playerInfo"]["uscf_id"].value;
var SM_uscf_exp = document.forms["playerInfo"]["uscf_exp"].value;


members.push({

ID: SM_uscf_id,
Name: SM_name,
Rate: SM_uscf_rating,
Exp: SM_uscf_exp

});

}
</script>

SAMPLE "members" data:

[{"ID":16720664,"Name":"Adeyemon, Murie","Exp":"2019-05-31","Rate":0},
{"ID":12901834,"Name":"Agok, Peter Panther","Exp":"2019-03-31","Rate":1771},
]

Answers (1)

2019-01-06

Rainner Lins answers:

There's a problem in the way you're handling the submit event from the form and calling your submit() function. The form will try to navigate to the URL defined in the "action" attribute, so you need to tell it not to do that.


<form id="playerInfo" action="#">
<label>player name</label><input type="text" name = "name" />
<label>CCCR mbr. expires</label><input type="text" id="cccr_expires" name="cccr_expires" />
<label>rating</label><input type="text" name="uscf_rating" />
<label>USCF ID#</label><input type="text" name="uscf_id" />
<label>expires</label><input type="text"name="uscf_exp" />
<button type="submit">Submit</button>
</form>



let members = [];

// 1. find the form on the page by id
let form = document.querySelector( '#playerInfo' );

// 2. assign a function to handle the submit event
form.addEventListener( 'submit', function( evt ) {

// 3. use the event object passed here to prevent loading a new page
evt.preventDefault();

// 4. get the values you need from the form object
let SM_name = form["name"].value;
let SM_cccr_expires = form["cccr_expires"].value;
let SM_uscf_rating = form["uscf_rating"].value;
let SM_uscf_id = form["uscf_id"].value;
let SM_uscf_exp = form["uscf_exp"].value;

// 5. handle your data
members.push({
ID: SM_uscf_id,
Name: SM_name,
Rate: SM_uscf_rating,
Exp: SM_uscf_exp
});

console.log( members );
});


Working example here: https://jsfiddle.net/j9qbw2x7/

Also, you should be using the console to see what's going on with your code. It will show you errors that can help you figure out why your code is not working.