How to disable backbutton browser

Question

could someone please help me what codes I need to disable the back browser function? I want to disable it because when the user uses it, it resets all user entry and gets back from the beginning beginning. I am very noob so your help would be greatly appreciated.

Here's just sample of the codes I am using

Thank you very much!

startTextHandler = async ()=>{
    await this.props.form.validateFields();
    let takerdetail = this.props.form.getFieldsValue();
    let uuid = window.location.pathname.split('/').slice(-1)[0];
    const params = {uuid:this.getUUID()};
    axios.get(`${env.url}/api/v1/test/validate-request`,{params}).then((res) => {
        if(res.data.success && (res.data.request.user === takerdetail.email || res.data.request.test_taker === null)){
        takerdetail.sponsor = res.data.request.sponsor;
        takerdetail.uuid = this.getUUID();
        console.log(takerdetail.uuid);
        this.props.dispatch(QuestionActions.setTakerDetail(takerdetail));
        this.props.history.push(`${this.props.location.pathname}/questions`.replace('//','/'));
        }
        else{
            this.props.form.validateFields((error, values) => {
                if (!error) {
                    this.props.form.setFields({
                        email: {
                            value: values.email,
                            errors: [new Error('Wrong email-id or test link')],
                        }
                    });
                } 
                else {
                  console.log('error', error, values);
                }
              });
        }

    }, (err) => {
        this.props.history.push('/');
    });

};
getUUID(){
    return window.location.pathname.match(/([0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12})/g)[0];
}
    render() {
        const { getFieldDecorator } = this.props.form;

        return (

                                            <div className="subtext">
                                              <Checkbox> I have read and I accept the
                                                  <a target="_blank" href="https://docs.wixstatic.com/ugd/3c785b_bbea80070bda4759bd96f7955b0ef891.pdf"> Terms of Use and Privacy Policy. </a>
                                                I agree that my participation in this personality profiling is voluntary and understand that
                                                my responses will be kept for the intended purposes.</Checkbox>
                                            </div>
                                        )}
                                    </Form.Item>
                                </div>
                                <div className="inputitems terms">

                                    <Form.Item>
                                        {/* <button onClick={this.startTextHandler} className="psButton">START THE TEST</button> */}
                                        <Button  onClick={this.startTextHandler} text={"START THE TEST"}/>
                                    </Form.Item>
                                </div>
                            </Form>
                        </div>
                    </div>
                </div>
            </div>
        )

    }
}
export default  connect()(withRouter(Form.create({ name: 'register' })(TakerDetail)));

you can't really change the operation of anything outside the viewport your *web page* is sitting in - i.e. the back button is not under your control, thankfully - perhaps you need to fix your *web page* instead — Jaromanda X, Jan 28 '20 at 03:42
https://stackoverflow.com/questions/32841757/detecting-user-leaving-page-with-react-router — Meir Keller, Jan 28 '20 at 03:54
I think this will help you. https://stackoverflow.com/questions/3243684/disable-back-button-in-browser-using-jquery/35183513 — Its_Ady, Jan 28 '20 at 04:07

score 1 · Answer 1 · answered Jan 28 '20 at 05:19

As a rule, you should not be disabling the back button in the browser.

That said, you can probably achieve your goal by using the browser state as intended to create a new state when the user inputs data so that it can be popped back into the browser when the user pushes the back button.

https://www.sitepoint.com/javascript-history-pushstate/

There's an explanation of how to manipulate browser history and add states to the history so that the user can back up to (for example) what they had previously entered on your page. (You just have to create the mechanism that allows for that in your code.)

score 1 · Answer 2 · answered Jan 28 '20 at 05:24

1

I have been working on this problem from last three days. You cannot disable the browser back Button You will find many methods like erasing the history and so on.

answered Jan 28 '20 at 05:24

Engineer S. Saad

378
4
19

How to disable backbutton browser

2 Answers2