How to use button for navigation between pages

Asked

Viewed 1,682 times

2

I have a button that I am using a link as code below:

<button id="avancar" type="submit" disabled="disabled" class="btn-primary">
    <a href="teste.php">Avançar</a>
</button>

This button is disabled if no option is selected. I don’t know if this is the right way, but by clicking the disabled button, you are advancing to the next page.

How should I proceed?
If I put required in select, it doesn’t work even if I leave the option blank and the value blank.

jsFiddle: http://jsfiddle.net/9w2zW/

Topic link about enable and disable button:
How to enable and disable button from onclick or onchange from select

Thank you.

twitter-bootstrap

  • Want to re-load the page or open the new content on the same page? In the second case you can put the respective HTML?

  • @Sergio The complete code did not fit here, so I made this link. http://jsfiddle.net/9w2zW/ Thanks.

  • Since the button will be enabled by JS, exchange the <a> for a <span> and request it by JS itself, whether AJAX populates some element or a window.Location.

  • @fabricio_wm, I will return jsFiddle to the question (next time you can click "edit" to improve the question with more infoJão). However you can answer my question in the first comment?

  • Poxa @Sergio, I’m sorry but I thought you already understood that it’s for navigation since you participated in the previous post. Thanks.

  • @fabricio_wm, I realize it’s for navigation. What I still don’t know is if you want to load only one div with the new content, or if you want to load the whole page with the new content.

  • I’m sorry. Now it’s clearer. It was page, but if you can load div’s, it’s even better. Thanks.

  • @Brunoaugusto <br /> How I do the Javascript or Ajax part?

  • @fabricio_wm, you need to use ajax. You are using some library like Mootools or jQuery?

  • It can be Jquery. <br /> But I’m a beginner. <br /> Thank you.

  • @Brunoaugusto or Someone can help me?

Show 6 more comments

1 answer

2


Here’s a typical jQuery AJAX example, and what you need:

$("form").submit(function(e){

    e.preventDefault();

    var form_data = $(this).serialize();
    var form_url = $(this).attr("action"); // ou somente teste.php no seu caso
    var form_method = $(this).attr("method").toUpperCase();

    $("#loadingimg").show();

    $.ajax({
        url: form_url, 
        type: form_method,      
        data: form_data,     
        cache: false,
        success: function(returnhtml){  
            $("#loadingimg").hide();                         
            $("#result").html(returnhtml); 
        }           
    });    

});

The first part of this code does not yet have to do with ajax. It is an "Event Handler" that intercepts the time/event when the form is submitted.

The code e.preventDefault(); stops this action. The e is the event-object that will be stopped, ie the page will not reload.

The following lines are to prepare respectively the data to send, the server-side url, the type of method (typically POST or GET).

The line $("#loadingimg").show(); is optional and is in case you have an image, or text you want to display while the connection is made so that the user knows there is processing on the server.

With the call of this method $.ajax({ begins the AJAX part.

The ajax is exactly to load content from the server without having to refresh the page. Here the parameters defined in variables above will be used.

The perhaps most important part is success: function(returnhtml){. Here is the callback call. The function that runs when the AJAX request receives data back from the server. html is passed in the variable returnhtml.

In this example, the first line hides the image you were showing during the request. The second line is what you are looking for, i.e. $("#result").html(returnhtml); which will insert the new content into the DOM element with the ID result

Browser other questions tagged twitter-bootstrap

You are not signed in. Login or sign up in order to post.