CODEWITHSUNDEEP
javascriptjqueryfunctionclick
Nathaniel Brown
Nathaniel Brown

Reputation: 61

How to take user input through the click function jQuery

I am trying to use a click function on a button element for an address book. I want to take the user input for the contact's name then number when the button is clicked, but I am receiving an

"Unexpected identifier" error.

My contacts are being stored on my html document in a table; here is my code:

$(document).ready(function() {
    $('#add').click(function() {

        var toAddName = $('input[name=contact]').val();
        var toAddNum = $('input[name=number]').val();

        $('#contacts').append('<tr><th>'+toAddName+'</th><td>'+toAddNum+'</td></tr>');
    });
});

I also tried this:

var name = prompt("Name: ");
var number = prompt("Number: ");

$(document).ready(function() {
    $('#add').click(function() {
        $('table').append('<tr><th>'name'</th><td>'number'</td></tr>');
    });
});

Here is all of my JS/CSS/HTML code:

(P.S. I know my javascript nor my css is linked to the html but I am using a code editor that does it for me)

var name = prompt("Name: ");
var number = prompt("Number: ");

$(document).ready(function() {
  $('#add').click(function() {
    $('table').append('<tr><th>'name'</th><td>'number'</td></tr>');
  });
});
table {
  font-size: 20px;
  margin-left: 10px;
  margin-top: 15px;
}

th {
  padding-right: 100px;
}

#add {
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 14px;
  margin-right: 50px;
  color: blue;
}

#del {
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 14px;
  color: red;
}
<html>
<title>Address Book</title>
<div>
  <h1>Contacts:</h1>
</div>

<div id="add">
  <button><strong>New Contact</button>
</div>
  
<div id="del">
  <button>Delete Contact</strong></button>
</div>

<div>
  <table>
    
    <tr>
      <th>Name1</th>
      <td>555-555-5555</td>
    </tr>
    
    <tr>
      <th>Name2</th>
      <td>555-555-5555</td>
    </tr>
    
    <tr>
      <th>Name3</th>
      <td>555-555-5555</td>
    </tr>
    
    <tr>
      <th>Name4</th>
      <td>555-555-5555</td>
    </tr>
    
    <tr>
      <th>Name5</th>
      <td>555-555-5555</td>
    </tr>
    
  </table>
</div>

</html>

Upvotes: 0

Views: 969

Answers (4)

suman
suman

Reputation: 728

Try this, All you need to do is use concatenation :D

$(document).ready(function() {
  $('#add').click(function() {

    var name = prompt("Name: ");
    var number = prompt("Number: ");

    $('table').append('<tr><th>'+name+'</th><td>'+number+'</td></tr>');
  });
});

https://jsfiddle.net/o6cfmbbv/

Upvotes: 0

amaksr
amaksr

Reputation: 7745

This line

$('table').append('<tr><th>'name'</th><td>'number'</td></tr>');

Should be changed to:

$('table').append('<tr><th>' + name+ '</th><td>' + number + '</td></tr>');

Upvotes: 0

Sandeep Nayak
Sandeep Nayak

Reputation: 4757

You need to concatenate the name and number. Also, in the below code, I am prompting for name and number once use clicks on New Contact

$(document).ready(function() {
  $('#add button').click(function() {  // bind to button
    var name = prompt("Name: ");
    var number = prompt("Number: ");
    $('table').append('<tr><th>' + name + '</th><td>' + number + '</td></tr>');
  });
});
table {
  font-size: 20px;
  margin-left: 10px;
  margin-top: 15px;
}
th {
  padding-right: 100px;
}
#add {
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 14px;
  margin-right: 50px;
  color: blue;
}
#del {
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 14px;
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<title>Address Book</title>
<div>
  <h1>Contacts:</h1>
</div>

<div id="add">
  <button><strong>New Contact</button>
</div>
  
<div id="del">
  <button>Delete Contact</strong>
  </button>
</div>

<div>
  <table>

    <tr>
      <th>Name1</th>
      <td>555-555-5555</td>
    </tr>

    <tr>
      <th>Name2</th>
      <td>555-555-5555</td>
    </tr>

    <tr>
      <th>Name3</th>
      <td>555-555-5555</td>
    </tr>

    <tr>
      <th>Name4</th>
      <td>555-555-5555</td>
    </tr>

    <tr>
      <th>Name5</th>
      <td>555-555-5555</td>
    </tr>

  </table>
</div>

</html>

Upvotes: 2

Rayon
Rayon

Reputation: 36609

Concatenate the variables using +(concatenation operator) operator and invoke prompt in click handler function so that it will ask for input every time "New Contact" is clicked.

The concatenation operator (+) concatenates two string values together, returning another string that is the union of the two operand strings.

$('#add').click(function() {
  var name = prompt("Name: ");
  var number = prompt("Number: ");
  $('table').append('<tr><th>' + name + '</th><td>' + number + '</td></tr>');
});


$('#add').click(function() {
  var name = prompt("Name: ");
  var number = prompt("Number: ");
  $('table').append('<tr><th>' + name + '</th><td>' + number + '</td></tr>');
});
table {
  font-size: 20px;
  margin-left: 10px;
  margin-top: 15px;
}
th {
  padding-right: 100px;
}
#add {
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 14px;
  margin-right: 50px;
  color: blue;
}
#del {
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 14px;
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
  <h1>Contacts:</h1>
</div>
<div id="add">
  <button>New Contact</button>
</div>
<div id="del">
  <button>Delete Contact</button>
</div>
<div>
  <table>
    <tr>
      <th>Name1</th>
      <td>555-555-5555</td>
    </tr>

    <tr>
      <th>Name2</th>
      <td>555-555-5555</td>
    </tr>
    <tr>
      <th>Name3</th>
      <td>555-555-5555</td>
    </tr>
    <tr>
      <th>Name4</th>
      <td>555-555-5555</td>
    </tr>
    <tr>
      <th>Name5</th>
      <td>555-555-5555</td>
    </tr>
  </table>
</div>

Upvotes: 1

Related Questions