CODEWITHSUNDEEP
javascripthtmlforms
Dor-Ron
Dor-Ron

Reputation: 1807

Submit form with an anchor tag without refreshing page

I am trying to use basicModal to make a modal popup after my anchor tag is clicked on to submit a form. I originally had a button tag, but it seems to me that basicModal only works with anchor tags so I switched to that. The problem is that when I submit the form by clicking on the button, the page refreshes without the modal actually popping up. That being said, I'd like for me to be able to submit the form using the anchor tag and not refresh the page so the modal can popup.

I tried doing: <a class="alert button large" href="javascript:$('form').submit();" onclick="return false;">Submit!</a>

To submit the form but do nothing onclick with return false but that is not working.

The code looks like this:

    <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>

Upvotes: 0

Views: 1514

Answers (2)

RomanPerekhrest
RomanPerekhrest

Reputation: 92854

Consider the following example:

<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
                     }
                }
            });
        }
    });
}

Upvotes: 1

Gene R
Gene R

Reputation: 3744

If i understand right, you want submit form to the server and then show response with modal popup, without page refresh. Then you need ajax request:

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

and button:

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

Upvotes: 1

Related Questions