Запретить ввод по умолчанию в форме - PullRequest
Новая
       16

Запретить ввод по умолчанию в форме

0 голосов
/ 10 октября 2018

Моя форма содержит около 10 текстовых полей ввода. Проблема заключается в том, что, когда я нажимаю клавишу ввода из текстового поля ввода, она непосредственно собирается отправить кнопку, пропуская текстовые поля между ними. Я добавил свой фрагмент ниже.с помощью мыши 

function getElement(elm){
    var elem = document.getElementById(elm);
    return elem;
}


function sendData(){
    getElement('submit-button').addEventListener("click",function(){
        getElement("success-txt").removeClass('display-none');
        if(getElement('pbarcode')){
            var pbarcode = $('#pbarcode').val();
            var pname = $('#pname').val();
            var pprice = $('#pprice').val();
            var poprice = $('#poprice').val();
            $.ajax({
                     url:'getdata.php',
                     method:"post",
                     data:{pbarcode:pbarcode,pname:pname,pprice:pprice,poprice:poprice},
                     cache: false,
                     onSuccess: function(response){
                                alert('success');
                     },
                     onFailure: function(response){
                                alert('failure');
                     }
            });
        }
        else{
           alert("error"); 
        }

    });
}


function showWarnMessage(){
    getElement("submit-button").addEventListener("click",function(){
       alert("you enteres submitt button");
       var data1 = $('#pbarcode').val();
       var data2 = $('#pname').val();
       var data3 = $('#pprice').val();
       var l3 = data3.length;
       var l1 = data1.length;
       var l2 = data2.length;
       var flag = 0;
       if(l1 < 1){
     
           flag = 1;
       }
       if(l2 < 1){
           flag = 1;
           
       }
       if(l3 < 1){
           flag = 1;
       }
       alert(flag);
       if (flag == '0'){
           alert(flag + "go");
           sendData();
       }
    });
}

showWarnMessage();
ul,li {
list-style : none;
padding :0px;
margin : 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="create-user" method="post">
                            <ul id="create-new-user-page">
                                <li>
                                    <span>Product Barcode</span>
                                    <input type="number" id="pbarcode" name="barcode" class="form-data" required>
                                </li>
                                <li>
                                    <span>Product Name</span>
                                    <input type="text" class="form-data" name="pname" id="pname" required>
                                </li>
                                <li>
                                    <span>Product Price</span>
                                    <input type="number" class="form-data" name="pprice" id="pprice" required>
                                  
                                </li>
                               
                                <li>
                                    <input type="submit" id="submit-button"  Value="Submit" name="submit_data">
                                </li>
                
                            </ul>
                            
                        </form>

До сих пор я пытался использовать

event.preventDefault ();

при вводе нажмите на текстовое поле, я добавил следующие коды 

function preventDefault(elem){
   getElement('elem').addEventListener('keypress',function(){
       if (event.keyCode == 13) {
            event.preventDefault();
            alert('calling ')
       }
   }); 
}
preventDefault('pname');
preventDefault('pprice');
preventDefault('pname');
preventDefault('pbarcode');

, но он также возвращает тот же результат. Я хотел бы иметь форму, которая отлично работает с клавишей ввода.(т. е. когда я нажимаю клавишу «Ввод» из одного текстового поля ввода, которое должно перейти к следующему текстовому полю, вместо этого перейти непосредственно к кнопке отправки формы)

1 Ответ

0 голосов
/ 10 октября 2018

вы можете изменить тип кнопки отправки на кнопку .

<input type="button" id="submit-button"  Value="Submit" name="submit_data">
...