Why I can't run this on jsfiddle

Question

I'm keep getting error why ? I tried everything, have removed every label and name tag. I know that there is similar questions being asked but non of them is useful to me. One of the answers for this particular error was to remove }) but I don't have any of those extra brackets. Thanks.

{"error": "Shell form does not validate{'html_initial_name': u'initial-js_lib', 'form': , 'html_name': 'js_lib', 'html_initial_id': u'initial-id_js_lib', 'label': u'Js lib', 'field': , 'help_text': '', 'name': 'js_lib'}{'html_initial_name': u'initial-js_wrap', 'form': , 'html_name': 'js_wrap', 'html_initial_id': u'initial-id_js_wrap', 'label': u'Js wrap', 'field': , 'help_text': '', 'name': 'js_wrap'}"}

And how to print my username and password ??

<form id='submit_leave_email' method = 'post'>
<input id='username' type='text' value='username'/> 
<input id='password' type='password' value='password'/>                         
<button type='submit' class='input_button' value='submit'>Insert </button>
</form>
<p> Text, please stay here</p>


    $('#submit_leave_email').submit(function() {

    var username = $('#username').attr('value');
    var password = $('#password').attr('value');



    });

Answer 1

The form submit is trying to hit a server when clicked it seems? If you prevent the default action it should work, fiddle here: https://jsfiddle.net/uL0ut0xk/

 $('#submit_leave_email').submit(function(e) {
     var username = $('#username').val();
     var password = $('#password').val();
     console.log(username);
     console.log(password);
     e.preventDefault();
 });

Answer 2

The error is generated because the form does not have the action attribute defined which tells where to post the data. Also, jsFiddle does not allow you to post data.

Answer 3

Javascript code must be inside script tag, or add the javascript code to the javascript section

 <script>    
     $('#submit_leave_email').submit(function() {

    var username = $('#username').attr('value');
    var password = $('#password').attr('value');
    });
</script>

Answer 4

This is because jsfiddle does not offer a web server to handle your form submit. But if you just want to print the username & password you can use the button type="button" rather than button type="submit" . So it this way you can also avoid using event.preventDefault() ,which infact prevent the default behaviour of the a HTML element.

HTML

<form id='submit_leave_email' method = 'post' >
<input id='username' type='text' value='username'/> 
<input id='password' type='password' value='password'/>                         
<button type='button' class='input_button' value='submit'>Insert </button>
</form>
<p> Text, please stay here</p>

JS

$('.input_button').on('click',function(event) {
    var username = $('#username').attr('value');
    var password = $('#password').attr('value');
   console.log(username , password)
 });

WORKING DEMO

Note: If your not using $(document).ready(function(){..} you have to wrap this js snippet inside body tag.

Also if you really need to submit the form then in real application you dont need to use event.preventDefault() .Also printing & consoling will take place actual form submit.

Here is a DEMO .

Note:I just used action tab and used action = "www.google.com" . You can check in console that before processing it is consoling the username & password