[Solved] Submitting data with click, possible?

help
1

Hi, I’m trying to submit data from an input field just after clicking a button, but it nothing happen.

I don’t understand what i’m missing there.

This is my template

<div class="modal" id="UserNameModal">
   <div class="modal-dialog modal-sm">
     <div class="modal-content">
			 <div class="input-group">
              <input type="text" class="form-control" autofocus="" placeholder="Insert your name" id="nameField" >
              <span class="input-group-btn">
                <button class="btn btn-primary" type="button" id="okInsertUser">Add me now</button>
              </span>
			 </div>
		 
     </div>
   </div>
 </div>

and this is my event

‘click #okInsertUser’: function(event){

	event.preventDefault();

  // Get value from form element
  var name = event.target.nameField.value;

  // Insert a user into the collection
  Tasks.insert({
    username: name,
  });

  // Clear form
  event.target.nameField.value = "";


	$("#UserNameModal").modal("hide");


},

Thanks in advance

2

The event object refers to the button event, not the other DOM objects in the template. You could use:

'click #okInsertUser': function(event, templ){

	event.preventDefault();

  // Get value from form element
  var name = templ.$('#nameField').val();

Check out the Template Instance documentation for other options.

3

I finally I figured it out to make it less messy and I modified my code to make it with submit .form, but 2 more issues console.log are not showing in the console browser and my insert neither… Any idea ?

Here is my new code

<div class="modal" id="UserNameModal">
   <div class="modal-dialog modal-sm">
     <div class="modal-content">
     <form> <!-- without submit fonction is not possible -->
			 <div class="input-group">
              <input type="text" class="form-control" autofocus="" placeholder="Insert your name" id="nameField" >
              <span class="input-group-btn">
                <button class="btn btn-primary" type="submit" id="okInsertUser">Add me now</button>
              </span>
			 </div>
		   </form>
     </div>
   </div>
 </div>

my event function

“submit .form”: function (event) {
// Prevent default browser form submit
event.preventDefault();

  // Get value from form element
  var name = event.target.nameField.value;

  console.log(nameField);

  // Insert a user into the collection
  Users.create({
    username: name,
  });

  // Clear form
  event.target.nameField.value = "";

  $("#UserNameModal").modal("hide");
}
4

should be "submit form": function (event) , because .form is a class selector

5

@mrzafod Thanks for your answer, I just tried it, but if i do submit form nothing works. with submit .form at leak my modal close when I type “enter” or when I click the button.

6

Hi vonaa…

i think you should get and completed the basic tutorial… if you have reached the level 4 or 5 the tutorial, you should probably through this…

here i help you fix this first… from what i learn :

  1. if you want to insert something in <form> you have to define the name of the class…
  2. you have to define the ‘name’ property of your textbox… if you want to use the ‘id’ property, you should use $
  3. you have to define the collection first
  4. the syntax to insert to the collection is not like that…

here’s the code

hmtl

<div class="modal" id="UserNameModal">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <form class="InsertTest"> <!-- without submit fonction is not possible -->
                    <div class="input-group">
                        <input type="text" class="form-control" autofocus="" placeholder="Insert your name" id="nameField" name="textbox1">
                        <span class="input-group-btn">
                            <button class="btn btn-primary" type="submit" id="okInsertUser">Add me now</button>
                        </span>
                    </div>
                </form>
            </div>
        </div>
    </div>

.js

'submit .InsertTest': function (event) {
    // Prevent default browser form submit
      event.preventDefault();

      // Get value from form element
      var name = event.target.textbox1.value;

      alert(name);

      // Insert a user into the collection
      Users.insert({
        username: name,
      });

      // Clear form
      event.target.textbox1.value = "";

      $("#UserNameModal").modal("hide");
    }
  });

dont forget to create the collection first in the top row of your .js

sorry for my bad english… hope you can understand it

7

Thanks a lot !

I figured it out and now it works ! But actually I’m using the id of html elements and i don’t need $.