Formun gönderilmesi nasıl önlenir?

Bir yerde bir Gönder düğmesi olan bir form var.

Ancak, bir şekilde gönder olayı 'yakalamak' ve gerçekleşmesini önlemek istiyorum.

Bunu yapmamın bir yolu var mı?

Gönder düğmesini değiştiremiyorum, çünkü bu özel bir kontrolün parçası.

Diğer cevaplardan farklı olarak, dönüş yanıtın falsesadece bir parçasıdır . Dönüş ifadesinden önce bir JS hatasının oluştuğu senaryoyu düşünün ...

html

<form onsubmit="return mySubmitFunction(event)">
  ...
</form>

senaryo

function mySubmitFunction()
{
  someBug()
  return false;
}

dönen falseburada yürütülmez ve form her iki şekilde sunulacaktır. Ayrıca preventDefault, Ajax form gönderimleri için varsayılan form eylemini önlemek için de çağırmalısınız .

function mySubmitFunction(e) {
  e.preventDefault();
  someBug();
  return false;
}

Bu durumda, hata ile bile form gönderilmez!

Alternatif olarak, bir try...catchblok kullanılabilir.

function mySubmit(e) { 
  e.preventDefault(); 
  try {
   someBug();
  } catch (e) {
   throw new Error(e.message);
  }
  return false;
}

Bu onsubmitgibi satır içi etkinliği kullanabilirsiniz

<form onsubmit="alert('stop submit'); return false;" >

Veya

<script>
   function toSubmit(){
      alert('I will not submit');
      return false;
   }
</script>

<form onsubmit="return toSubmit();" >

gösteri

Büyük projeler yaparken bu iyi bir fikir olmayabilir. Etkinlik Dinleyicilerini kullanmanız gerekebilir.

Lütfen hakkında daha fazla bilgi Etkinlik İşleyicilere (addEventListener ve IE'nin attachEvent) vs Inline Olaylar burada . Çünkü bunu Chris Baker'ın yaptığından daha fazla açıklayamam .

Her ikisi de doğrudur, ancak hiçbiri kendi başına "en iyi" değildir ve geliştiricinin her iki yaklaşımı kullanmayı seçmesinin bir nedeni olabilir.

Aşağıdaki öğeyi kullanarak forma bir olay dinleyicisi ekleyin .addEventListener()ve ardından şu .preventDefault()yöntemi çağırın event:

const element = document.querySelector('form');
element.addEventListener('submit', event => {
  event.preventDefault();
  // actual logic, e.g. validate the form
  console.log('Form submission cancelled.');
});

<form>
  <button type="submit">Submit</button>
</form>

Web sayfası mantığını ve yapısını ayırdığı submitiçin bir olay işleyicisi ile onsubmitöznitelik satır içi tanımlamaktan daha iyi bir çözüm olduğunu düşünüyorum . Mantığın HTML'den ayrıldığı bir projeyi sürdürmek çok daha kolaydır. Bkz: Göze batmayan JavaScript .

DOM nesnesinin .onsubmitözelliğini kullanmak formiyi bir fikir değildir, çünkü bir öğeye birden çok geri gönderme isteği eklemenizi önler. Bkz. AddEventListener vs onclick .

Bunu dene...

HTML Kodu

<form class="submit">
    <input type="text" name="text1"/>
    <input type="text" name="text2"/>
    <input type="submit" name="Submit" value="submit"/>
</form>

jQuery Kodu

$(function(){
    $('.submit').on('submit', function(event){
        event.preventDefault();
        alert("Form Submission stopped.");
    });
});

veya

$(function(){
    $('.submit').on('submit', function(event){
       event.preventDefault();
       event.stopPropagation();
       alert("Form Submission prevented / stopped.");
    });
});

Şu andan itibaren aşağıdakiler çalışır (krom ve firefox'ta test edilmiştir):

<form onsubmit="event.preventDefault(); return validateMyForm();">

Burada validateMyForm (), falsedoğrulama başarısız olursa geri dönen bir işlevdir . Önemli nokta ismi kullanmaktır event. Örneğin,e.preventDefault()

var form = document.getElementById("idOfForm");
form.onsubmit = function() {
  return false;
}

İzleyin göze batmayan JavaScript programlama kuralları ve ne kadar hızlı bağlı olarak DOM yükleyecektir, aşağıdaki kullanmak iyi bir fikir olabilir:

<form onsubmit="return false;"></form>

Ardından kütüphane kullanıyorsanız, onload veya DOM için hazır olan olayları kullanarak olayları bağlayın.

$(function() {
    var $form = $('#my-form');
    $form.removeAttr('onsubmit');
    $form.submit(function(ev) {
        // quick validation example...
        $form.children('input[type="text"]').each(function(){
            if($(this).val().length == 0) {
                alert('You are missing a field');
                ev.preventDefault();
            }
        });
    });
});

label {
    display: block;
}

#my-form > input[type="text"] {
    background: cyan;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my-form" action="http://google.com" method="GET" onsubmit="return false;">
    <label>Your first name</label>
    <input type="text" name="first-name"/>
    <label>Your last name</label>
    <input type="text" name="last-name" /> <br />
    <input type="submit" />
</form>

Ayrıca, actionbazı kişilerin NoScript gibi bazı eklentileri çalıştırabileceği için bu özelliği her zaman kullanırım . Action özniteliğini kullanıyorsanız, en azından kullanıcınız sunucu tarafından arka uç doğrulamasına göre yönlendirilecektir. window.locationÖte yandan, böyle bir şey kullanıyorsanız , işler kötü olacaktır.

Formun gönderilmesini önlemek için bunu yapmanız yeterlidir.

<form onsubmit="event.preventDefault()">
    .....
</form>

Yukarıdaki kodu kullanarak bu form gönderilmesini engelleyecektir.

İşte cevabım:

<form onsubmit="event.preventDefault();searchOrder(event);">
...
</form>
<script>
const searchOrder = e => {
    e.preventDefault();
    const name = e.target.name.value;
    renderSearching();

    return false;
}
</script>

Ekledim event.preventDefault(); üstünde onsubmitve çalışıyor.

Forma eventListner ekleyebilir preventDefault()ve form verilerini aşağıdaki gibi JSON'a dönüştürebilirsiniz:

const formToJSON = elements => [].reduce.call(elements, (data, element) => {
  data[element.name] = element.value;
  return data;

}, {});

const handleFormSubmit = event => {
    event.preventDefault();
    const data = formToJSON(form.elements);
    console.log(data);
  //  const odata = JSON.stringify(data, null, "  ");
  const jdata = JSON.stringify(data);
    console.log(jdata);

    (async () => {
      const rawResponse = await fetch('/', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body: jdata
      });
      const content = await rawResponse.json();

      console.log(content);
    })();
};

const form = document.forms['myForm']; 
form.addEventListener('submit', handleFormSubmit);

<form id="myForm" action="/" method="post" accept-charset="utf-8">
    <label>Checkbox:
        <input type="checkbox" name="checkbox" value="on">
    </label><br /><br />

    <label>Number:
        <input name="number" type="number" value="123" />
    </label><br /><br />

    <label>Password:
        <input name="password" type="password" />
    </label>
    <br /><br />

    <label for="radio">Type:
        <label for="a">A
            <input type="radio" name="radio" id="a" value="a" />
        </label>
        <label for="b">B
            <input type="radio" name="radio" id="b" value="b" checked />
        </label>
        <label for="c">C
            <input type="radio" name="radio" id="c" value="c" />
        </label>
    </label>
    <br /><br />

    <label>Textarea:
        <textarea name="text_area" rows="10" cols="50">Write something here.</textarea>
    </label>
    <br /><br />

    <label>Select:
        <select name="select">
            <option value="a">Value A</option>
            <option value="b" selected>Value B</option>
            <option value="c">Value C</option>
        </select>
    </label>
    <br /><br />

    <label>Submit:
        <input type="submit" value="Login">
    </label>
    <br /><br />


</form>