Sending form by pushing 'Enter' key

Question

I wonna send form by AJAX after pushing 'Enter' button. I've found different types of solutions but I did it before and it worked by the next way:

<form method="POST" id="newName" action="javascript:void(null);" onsubmit="editName()">
   <input type="text" id="input_{{ projectName.project_id }}" name="new_name" class='input_new_name'
   data-target="{{ projectName.project_id }}" placeholder="{{ projectName.project_name }}" >
   <input type="submit" hidden>
</form>

And my JS code:

function editName() {
    var msg = $('#newName').serialize();
    $.ajax({
        type: 'POST',
        url: '../edit/editprojectname',
        data: msg,
        success: function() {
            window.location.reload();
        }

    });
}

Where I am wrong?

Oh, I am using it in a for circle!

{% for projectName in namesOfProjects %}
    <form action="" method="post">
        <tr>
            <td>{{ projectName.project_id }}</td>
            <td>
                <button class="show-hide-field toggle_button" id="{{ projectName.project_id }}">{{ projectName.project_name }}</button>
                <form method="POST" id="newName_{{ projectName.project_id }}" action="javascript:void(null);" onsubmit="editName()">
                    <input type="text" id="input_{{ projectName.project_id }}" name="new_name" class='input_new_name'
                           data-target="{{ projectName.project_id }}" placeholder="{{ projectName.project_name }}" >
                    <input type="submit" hidden>
                </form>
            </td>
            <td>
                <button  id="delete" class="btn btn-danger">Delete</button>
            </td>
        </tr>
    </form>
{% endfor %}

by default, if any of the inputs are selected, the form will submit when you hit enter without any additional code, unless you're in a textarea, but i dno't see any textareas. have you tried it? — I wrestled a bear once., Jan 22 '18 at 14:12
you may want to `preventDefault` to disable default form submission. — Shub, Jan 22 '18 at 14:13
@Iwrestledabearonce Oh, I am using it in a for circle! By Twig — Andreykin Sergey, Jan 22 '18 at 14:23
Possible duplicate of [Trigger a button click with JavaScript on the Enter key in a text box](https://stackoverflow.com/questions/155188/trigger-a-button-click-with-javascript-on-the-enter-key-in-a-text-box) — tanaydin, Jan 22 '18 at 14:24
@AndreykinSergey - I don;t see how that would make a difference. just make sure your JS function is defined in the head, or above the form. — I wrestled a bear once., Jan 22 '18 at 14:28

score 0 · Answer 1 · answered Jan 22 '18 at 14:15

0

Change your HTML - eliminate the input button and some of the form attributes.

<form method="POST" id="newName">
   <input type="text" id="input_{{ projectName.project_id }}" name="new_name" class='input_new_name'
   data-target="{{ projectName.project_id }}" placeholder="{{ projectName.project_name }}" >

</form>

on page load, configure your form to recognize the enter key

window.onload = function() {
   var form = document.getElementById('newName');
   form.addEventListener('keyup', function(e){
     if (e.keyCode === 13) {
        editName();
     }
   });
};

answered Jan 22 '18 at 14:15

daddygames

1,880
1
11
18

His code works as expected by the code. However, he doesn't want the form to submit, thus the reason for this question existing. My answer is one possible solution. – daddygames Jan 22 '18 at 14:17
yeah, i got that, and it doesn't submit. it works exactly as he explained (it calls the function instead of submitting), again, try it.. https://jsfiddle.net/vh4u4Le6/ – I wrestled a bear once. Jan 22 '18 at 14:21
@Iwrestledabearonce. Oh, I am using it in a for circle! By Twig – Andreykin Sergey Jan 22 '18 at 14:24
i down voted because you didn't bother to try the original code before posting an answer, same reason i downvoted op for not trying his code before posting a question. i think that's a fair reason to downvote. nothing personal. – I wrestled a bear once. Jan 22 '18 at 14:26

Sending form by pushing 'Enter' key

1 Answers1