使用锚标签提交表单而不刷新页面

我试图使用basicModal在单击我的锚标记以提交表单后创建模式弹出框。我原本有一个按钮标签，但在我看来，basicModal只适用于锚标签，所以我切换到。问题是，当我通过点击按钮提交表单时，页面刷新时不会弹出模式。话虽如此，我希望能够使用锚标记提交表单，而不是刷新页面，以便模式可以弹出。使用锚标签提交表单而不刷新页面

我试着这样做： <a class="alert button large" href="javascript:$('form').submit();" onclick="return false;">Submit!</a>

提交表单，但什么都不做的onclick与return false但不工作。

的代码看起来是这样的：

<form method="POST" action="" class="form"> 
     <div class="small-6 small-centered columns"> 
      <select name="city"> 
      <option value="" disabled selected>Select a City</option> 
      <option value="nyc">NYC</option> 
      <option value="philly">Phladelphia</option> 
      <option value="rot">Rotchester</option> 
      <option value="sf">San Francisco</option> 
      <option value="boston">Boston</option> 
      <option value="la">Los Angeles</option> 
      </select> 
      <br/><br/> 
      <select name="category"> 
      <option value="" disabled selected>Select a Category</option> 
      <option value="cs">Computer Science</option> 
      <option value="math">Mathematics</option> 
      <option value="bio">Biology</option> 
      <option value="chem">Chemistry</option> 
      <option value="physics">Physics</option> 
      <option value="art">Art</option> 
      <option value="lang">Linguistics</option> 
      <option value="astro">Astrology</option> 
      </select> 
      <br/><br/> 
       <input type="text" class="span2" name="get-date" value="Select a Date" id="dp1"> 
      <br/><br/> 
      <div class="btnn"> 
       <a class="alert button large" href="javascript:$('form').submit();" onclick="return false;">Submit!</a> 
      </div> 
      </div> 
     </div> 
    </form>

来源

2016-01-24 Dor-Ron

请看下面的例子：

<a class="alert button large" href="javascript:void(0)" onclick="submitForm();">Submit!</a>

function submitForm(){ 
    $.ajax({ 
     type: 'POST', 
     url: '<url>', // change to your url 
     data: $('.form').serialize(), 
     success: function(response){ 
      basicModal.show({ // just for example 
       body: '<p>This is a dead-simple alert modal!<br>The message can be filled with anything you want.</p>', 
       buttons: { 
        action: { 
         title: 'Dismiss', 
         fn: basicModal.close 
        } 
       } 
      }); 
     } 
    }); 
}

来源

2016-01-24 09:43:47 RomanPerekhrest

如果我理解正确的，你想提交表单到服务器，然后显示响应与模式弹出，无刷新页面。然后，你需要Ajax请求：

var submitForm = function() 
{ 
    $.ajax({ 
     type: 'post', 
     url: '', 
     data: $('form').serialize(), 
     success: function(response){ 
      //open your modal here 
     } 
    }) 
}

和按钮：

<a class="alert button large" href="javascript:submitForm()">Submit!</a>

来源

2016-01-24 09:34:37

使用锚标签提交表单而不刷新页面

回答

相关问题