I have this HTML code which contains two HTML forms and two buttons: One for submit and one for cancel (basically get back to the previous page). What I would like to do is after I click the SUBMIT button and submit my forms do the same as the cancel button (get back to the previous page). The problem is that I can't specify what page I want it to go back since this page will be used in many pages so it will be dynamic.

<div data-role="page" id="customer" data="Page" data-expired="true" data-theme="c">

    <div data-role="content" data="customers" data-key="id" data-params="item:itemid">

        <div align="left">
            <h3 style="margin:0px">Customer Profile</h3>
        </div>

        <br/>

        <div class="popup-hrule">
            <div data-role="collapsible" data-collapsed="false" data-collapsed-icon="false" data-theme="a">
                <h3>Customer</h3>
                <form id="submit-edit-customer" method="post" data-formaction="process">


                            <label for="customer_name">Customer</label>
                            <input type="text" name="customer_name" id="customer_name" data-item=":customer_name">
                        </div>
                        <div class="ui-block-b">
                            <label for="name">Primary Contact</label>
                            <input type="text" name="name" id="name" value="no valid name"
                                   data-item=":name">
                        </div>

                </form>
            </div>

            <div data-role="collapsible" data-collapsed-icon="false" data-theme="a">
                <h3>Billing</h3>
                <form id="submit-edit-customer" method="post" data-formaction="process">


                            <label for="customer_name">Customer</label>
                            <input type="text" name="customer_name" id="customer_name" data-item=":customer_name">
                        </div>
                        <div class="ui-block-b">
                            <label for="name">Primary Contact</label>
                            <input type="text" name="name" id="name"
                                   data-item=":name">
                        </div>

                </form>
            </div>

        </div>
        <a id="createeditcancel" data-role="button" data-inline="true" href="#" data-rel="back">Cancel</a>
        <a id="submit-edit-customer-btn" data-role="button" data-inline="true" data-theme="a">Save</a>

    </div>
</div>

My question is, is there any easy way to do this without writing a lot of javascript code in the onclick event?

Thanks.

I have this HTML code which contains two HTML forms and two buttons: One for submit and one for cancel (basically get back to the previous page). What I would like to do is after I click the SUBMIT button and submit my forms do the same as the cancel button (get back to the previous page). The problem is that I can't specify what page I want it to go back since this page will be used in many pages so it will be dynamic.

<div data-role="page" id="customer" data="Page" data-expired="true" data-theme="c">

    <div data-role="content" data="customers" data-key="id" data-params="item:itemid">

        <div align="left">
            <h3 style="margin:0px">Customer Profile</h3>
        </div>

        <br/>

        <div class="popup-hrule">
            <div data-role="collapsible" data-collapsed="false" data-collapsed-icon="false" data-theme="a">
                <h3>Customer</h3>
                <form id="submit-edit-customer" method="post" data-formaction="process">


                            <label for="customer_name">Customer</label>
                            <input type="text" name="customer_name" id="customer_name" data-item=":customer_name">
                        </div>
                        <div class="ui-block-b">
                            <label for="name">Primary Contact</label>
                            <input type="text" name="name" id="name" value="no valid name"
                                   data-item=":name">
                        </div>

                </form>
            </div>

            <div data-role="collapsible" data-collapsed-icon="false" data-theme="a">
                <h3>Billing</h3>
                <form id="submit-edit-customer" method="post" data-formaction="process">


                            <label for="customer_name">Customer</label>
                            <input type="text" name="customer_name" id="customer_name" data-item=":customer_name">
                        </div>
                        <div class="ui-block-b">
                            <label for="name">Primary Contact</label>
                            <input type="text" name="name" id="name"
                                   data-item=":name">
                        </div>

                </form>
            </div>

        </div>
        <a id="createeditcancel" data-role="button" data-inline="true" href="#" data-rel="back">Cancel</a>
        <a id="submit-edit-customer-btn" data-role="button" data-inline="true" data-theme="a">Save</a>

    </div>
</div>

My question is, is there any easy way to do this without writing a lot of javascript code in the onclick event?

Thanks.

• javascript
• jquery
• html
• forms

• Have you tried adding the previous page's url to the href in your Cancel and Save <a> tags? href = "thelastpage.html" should work. – Joe Urc Commented Sep 2, 2015 at 0:56
• 1 Is this for jQuery Mobile? – Matthew Lock Commented Sep 2, 2015 at 1:20

5 Answers 5

Very easy all you have to do is change the href to the url of previous page:

<a id="createeditcancel" data-role="button" data-inline="true" href="YOUR_URL_HERE" data-rel="back">Cancel</a>

Edit: if your submit is using php to save the info just add

header("Location: last_page.html");

Since its dynamic you can just get the back URL from the same place as the rest of your info and do:

header("Location:" + URL);

I didn't know I could do this but I tried it and it worked! I added: data-rel="back" to the submit button.

Like this:

<a id="submit-edit-customer-btn" data-role="button" data-inline="true" data-rel="back" data-theme="a">Save</a>

For redirect to other page in JavaScript you can use

window.location = "http://www.yoururl.";

add to button onclick="location.href = 'www.yoursite.';"

where u handle your form?php file?

other option in php

    if (isset($_POST['submitform']))
    {   
    ?>
<script type="text/javascript">
window.location = "http://www.google./";
</script>      
    <?php
    }

or in form

<form action="demo_form.asp" onsubmit="myFunction()">
  Enter name: <input type="text" name="fname">
  <input type="submit" value="Submit">
</form>


<script>
    function myFunction() {
 location.href = 'www.yoursite.';
}
    </script>

With document.referrer:

var cancel = function() {
  window.location.href = document.referrer;
};

<input type="button" value="Cancel" onclick="cancel()" />

With history:

var cancel1 = function() {
  history.back();
};
var cancel2 = function() {
  history.go(-1);
};

<input type="button" value="Cancel" onclick="cancel1()" />
<input type="button" value="Cancel" onclick="cancel2()" />

on the action page or your controller try adding this:

$(document).ready(function(){
document.location = 'url' // the path to your homepage
});