Good day!

How to write scripts? Where to start? What is the logic of writing?

How to debug a script? How to find out why this or that function does not work, which seems to work in other similar moments.

Courses passed, but somehow not really. It seems I can write small ones, something like that, clicked here, hid there, but those that are more difficult in any way.

Here's an example task: there is a form, and a submit button, which is outside the form. You need to disable sending this form.

It seems everything is simple, you need to disconnect through

$('.b-form--order').submit(function(){ return false; }); <form> <input type="text" class"form-input"> </form>

To send

but the script is not working. Why doesn't it work? How to find out?

  • What does it mean to disable sending this form? - Pavel
  • In such questions, why the developer’s tool in the browser does not work (for example, in chrome ). Namely - the console. In it, you can simulate various script actions. For example, in your case: it is possible that you have not correctly specified selector ('.b-form--order') . Write $('.b-form--order') in the console and see if you have an item. - Stepan Kasyanenko
  • The comment above describes the problem correctly, you do not have the .b-form--order element, but you are accessing it, you can change it to the form tag, or assign the identifier to the <form> - Vasily Barbashev

1 answer 1

For starters, it's best to wait for the document.onReady page to load. For this, jQuery has a template:

 $(function() { // твой код, когда страница загружена })

In your example, you use the selector $('.b-form--order') , which is not on the page yet (even if it were, because you have not specified it). But if you do:

 $(function() { $('.b-form--order').submit(function(){ return false; }); });

You will hang the handler when the page is fully prepared and the elements on it are fully formed.

And in your example, you need to fix the <form> to <form class="b-form--order"> .

PS It is better to make identifiers for the <form id="myForm"> elements, then you will be contacting like this: $('#myForm') . This approach works faster. But in cases where you need to choose a lot of elements, you can use a class.

Living example:

 $(function() { $('.b-form--order').submit(function() { console.log('Submited!'); return false; }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class="b-form--order"> <input type="text" class "form-input"> </form>

On codepen:

http://codepen.io/bustexz/pen/jqLEGm?editors=1111

  • if you swap the form and the script, then you can and do not wait for the page document.onReady to load . - Grundy
  • <form class = ". b-form - order"> = classes in html - usually without dots - Grundy
  • @Grundy, thanks for the amendment, apparently thinking. The question was about writing a script, and it’s better to frame scripts into methods when the page is loaded, so that there are no problems inserting them anywhere on the page. He asked about the approach, I answered. - Vasily Barbashev
  • Well, by the way, the approach: to place scripts at the end of the page, is quite popular for yourself, and when using it you don’t need to think about ready - Grundy
  • I am not a supporter of this, but this is also the right approach. As always and everything, there are several solutions. - Vasily Barbashev