jquery val() not working

Question

jQuery val() didnt working, this is the simple script:

$("#com_form").submit(function () {
    var name = $("#nama").val();
    var komentar = $("#komentar").val();
    alert.("Hi, " + name + " this is your comment: " + komentar)
});

this is the HTML form:

<form method="post" name="com_form" id="com_form">
  <p>What is your name:<br>

    <input type="text" name="nama" id="nama">
  </p>
  <p>Leave your comment here:<br>

    <input type="text" name="komentar" id="komentar">
  </p>
  <p>
    <input type="submit" name="button2" id="button2" value="Submit">
  </p>
</form>

actually, I was tried to create ajax post, the value "nama" is submited but not "komentar". So I tried to debug using alert (like one above) and still "komentar" is not change. What should I do?

With the exception of the `.` after alert, your code works: http://jsfiddle.net/HATSX/ — Nick Craver, Jun 07 '10 at 11:27
Also remove the `*/`. If there's a `/*` before this piece of code as well, remove it as well. It namely outcomments (disables) the whole block of code. — BalusC, Jun 07 '10 at 11:30

score 3 · Answer 1 · answered Jun 07 '10 at 11:27

3

Do you have another HTML element with the id "komentar" elsewhere on the page?

answered Jun 07 '10 at 11:27

David M

71,481
13
158
186

1

I'm working in Django and I had an input with the same id in my base.html (a template for all pages). Your answer really saved me. – nima May 16 '15 at 20:22

score 2 · Accepted Answer · answered Jun 07 '10 at 15:24

You have some errors in your html. Form should have "action" attribute, also js is not well.

I made example html and js files which works correctly. Html file passed w3.org validation and js passed jslint.


<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
    google.load("jquery", "1.4.2");
    </script>
    <script type="text/javascript" src="2988992.js"></script>
    <title>Insert title here</title>
</head>
<body>
    <form method="post" name="com_form" id="com_form" action="2988992.html">
    <p>What is your name:<br>
        <input type="text" name="nama" id="nama">
    </p>
    <p>Leave your comment here:<br>
        <input type="text" name="komentar" id="komentar">
    </p>
    <p>
        <input type="submit" name="button2" id="button2" value="Submit">
    </p>
</form>
</body>
</html>


"use strict";
/*global $, alert*/
$(function () {
  $("#com_form").submit(function () {
    var name = $("#nama").val();
    var komentar = $("#komentar").val();
    alert("Hi, " + name + " this is your comment: " + komentar);
    return false; //prevent standard behavior
  });
});

Action attribute is not required for forms. If not set - it will post to current url — ymakux, Jun 09 '15 at 21:58

score 0 · Answer 3 · answered Jun 07 '10 at 11:28

0

try

$(document).ready(function()
  { 
    //jquery code here 
  }

answered Jun 07 '10 at 11:28

Dezigo

3,220
3
31
39

score 0 · Answer 4 · answered Jun 07 '10 at 11:28

0

Remove the . after the alert statement so it reads;

 alert("Hi, "+name+" this is your comment: "+komentar)

answered Jun 07 '10 at 11:28

simnom

2,590
1
24
34

jquery val() not working

4 Answers4

Linked