CODEWITHSUNDEEP
javascripthtmljquery-mobile
Vineet M
Vineet M

Reputation: 138

Submit should not transfer to next page

Well , I have a page with a submit button. When Clicking on the submit button , the page is transfered to the next page(i.e servlet page). But i want that the form page contents (i.e all the attributes and the values )should be transfered to the servlet page and not the entire page (i.e it should be on the form page after clicking on submit button). This is for mobile using jQuery Mobile framework

I think it requires some javascript coding.

Thanks and regards, Vineet M

Upvotes: 2

Views: 238

Answers (3)

graphicdivine
graphicdivine

Reputation: 11231

There's two approaches you could take here.

The first is pretty quick and dirty: you submit the form to the servlet page, which receives the form values, and you then immediately bounce the user back to the form.

The second way, proper, way, is AJAX. Using javascript to compose an HTTP request which you fire off and which completes in the background, without the user seeing anything further. Here's a good introduction.

Use this with caution, though - you'll need to pay attention to your user interface, to let the user know what is going on (or what's going wrong) at each stage in the process. It's a powerful tool, and with power comes responsibility. ;)

Upvotes: 0

Vigrond
Vigrond

Reputation: 8198

Sounds like what you want is either AJAX or to post to the same file.

You may take a tutorial here, which will guide you through an AJAX form in raw javascript: http://www.tizag.com/ajaxTutorial/ajaxform.php

Once you get the idea, AJAX is easily performed through javascript libraries/frameworks such as jQuery.

To post to the same file, your form action would be the same page. And the server, with whatever language you're using, would return the same page after it has taken care of the data.

Upvotes: 1

Dominic Green
Dominic Green

Reputation: 10258

Using an ajax post will give you the required functionality, I would suggest using jquery as it makes things easier.

http://api.jquery.com/jQuery.post/

Example from jquery

   <!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <form action="/" id="searchForm">
   <input type="text" name="s" placeholder="Search..." />
   <input type="submit" value="Search" />
  </form>
  <!-- the result of the search will be rendered inside this div -->
  <div id="result"></div>

<script>
  /* attach a submit handler to the form */
  $("#searchForm").submit(function(event) {

    /* stop form from submitting normally */
    event.preventDefault(); 

    /* get some values from elements on the page: */
    var $form = $( this ),
        term = $form.find( 'input[name="s"]' ).val(),
        url = $form.attr( 'action' );

    /* Send the data using post and put the results in a div */
    $.post( url, { s: term },
      function( data ) {
          var content = $( data ).find( '#content' );
          $( "#result" ).empty().append( content );
      }
    );
  });
</script>

</body>

Upvotes: 3

Related Questions