CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Jonathan Bechtel
Jonathan Bechtel

Reputation: 3607

Jquery Not Grabbing Value from Form Fields

I'm trying to manipulate the values in a form field after a click event with Jquery, but for some reason I can't seem to get it to grab anything from the form, and I don't think it's the jQuery syntax, since I use it successfully elsewhere in the program.

HTML:

<form class="centered formula-form">
  <input type="text" id="project" name="project" placeholder="Name your project"  maxlength="20" required />
  <input type="text" id="description" name="description" placeholder="Give it a brief description"  maxlength="35" required /> <br /> <br />
  <input type="text" id="name" placeholder="Ingredient Name" required  />
  <input type="number" id="amount" placeholder="0" min="0" step="0.1" required />
  <input type="text" id="notes" placeholder="form, supplier, etc" />
  <input type="submit" value="Add Ingredient" class="pure-button" />
</form>

<table class="centered-block pure-table pure-table-striped formula-table">
  <thead class="thead-styled">
    <tr class="centered">
        <th>Ingredient</th>
        <th>Amount</th>
        <th>Notes</th>
        <th></th>
    </tr>
  </thead>
  <tbody class="formula-body">
  </tbody>
</table>
<button type="submit" value="Submit" class="pure-button pure-button-primary formula-submit" >Submit</button>

When button class="formula-submit" is clicked I'm trying save the form values like so:

JQuery:

$('.formula-submit').click(function(){
  //declare variables
  var projectName = $('#project').val();
  var description = $('#description').val();
});

But this hasn't worked. I've also tried:

$('input:text[name=project]').val()

But no dice.

As far as I can tell these selectors should work, and what's even more strange to me is that in the same file I make an AJAX call that uses the $('#project').val() convention and it works just fine, so I'm not sure what it is about the structure of my code that's prohibiting me from getting these values.

I've done console.log to verify that jQuery is actually recording the click event and it is.

Upvotes: 0

Views: 104

Answers (2)

Jonathan Bechtel
Jonathan Bechtel

Reputation: 3607

Okay, I realize what it was.

There is nothing wrong with the code in my answer. The problem is that I was referencing the same form values in another file and was emptying the form fields after I passed their data into the AJAX call that was being triggered by the same event.

That file was listed above the code in this question so it was being executed first, so by the time I was trying to store the values in the form fields they were already deleted.

Upvotes: 0

sauntimo
sauntimo

Reputation: 1591

I'm not sure what the problem you're having is. I haven't really changed your code, but if you run the snippet below, add some text in the #projectName and #description fields and click submit, it console.logs them out. Is that what you're trying to do?

$('.formula-submit').click(function(){
  var projectName = $('#project').val();
  var description = $('#description').val(); 
  console.log( `Your projectName is ${projectName}` );
  console.log( `Your description is ${description}` );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="centered formula-form">
  <input type="text" id="project" name="project" placeholder="Name your project"  maxlength="20" required />
  <input type="text" id="description" name="description" placeholder="Give it a brief description"  maxlength="35" required /> <br /> <br />
  <input type="text" id="name" placeholder="Ingredient Name" required  />
  <input type="number" id="amount" placeholder="0" min="0" step="0.1" required />
  <input type="text" id="notes" placeholder="form, supplier, etc" />
  <input type="submit" value="Add Ingredient" class="pure-button" />
</form>
<button type="submit" value="Submit" class="pure-button pure-button-primary formula-submit" >Submit</button>

Upvotes: 1

Related Questions