Javascript not working for the first time when webpage open?

Question

I am working on a project where I need to send my data to the firebase of the form.

Link - http://ietvit.com/hackoff/

Github repo link - https://github.com/vivanks/hackoffproject

But on filling out the form it should pop up alert window and submit the form but when I open the website for the first time it does not do anything when it refreshes instead it starts to work perfectly but not for the first time. Any reason why or any suggestions to prevent.

Example :

I open my website for the first time and fills out the subscribe form but it just simply refreshes the page instead of updating firebase and pop-ing alert window.

My html form -

<form class="contact100-form validate-form">
                        <div class="wrap-input100 m-b-10 validate-input" data-validate = "Name is required">
                            <input id="name" class="s2-txt1 placeholder0 input100" type="text" name="name" placeholder="Your Name">
                            <span class="focus-input100"></span>
                        </div>
    
                        <div class="wrap-input100 m-b-20 validate-input" data-validate = "Email is required: ex@abc.xyz">
                            <input id="email" class="s2-txt1 placeholder0 input100" type="text" name="email" placeholder="Email Address">
                            <span class="focus-input100"></span>
                        </div>
    
                        <div class="w-full">
                            <p class="s2-txt3 p-t-18">
                        And don’t worry, we hate spam too! You can unsubcribe at anytime.
                    </p><br>
                            <button id="submitBtn" onclick="submitDetail()" name="submit" class="flex-c-m s2-txt2 size4 bg1 bor1 hov1 trans-04">
                                Submit
                                </button>
                            
                        </div>
                    </form>

My java script -

var nameText = document.getElementById("name");
var emailText = document.getElementById("email");
var submitBtn = document.getElementById("submitBtn");

const firebaseRef = firebase.database().ref();




function submitDetail(){

    var nText = nameText.value;
    var eText = emailText.value;
        
    firebaseRef.push().set({
        name : nText,
        email : eText
    });

    window.alert("Subscribed Successfully")

}

How are you invoking `submitDetail()` have you tried `event.preventDefault()`? — Madhan Varadhodiyil, Aug 01 '18 at 20:09
on button click see the button tag in form @MadhanVaradhodiyil — Vivank Sharma, Aug 01 '18 at 20:10
I have included form and js file @jhpratt you can directly run it how should I mimizie it to more extend even I have given a working website link — Vivank Sharma, Aug 01 '18 at 20:23

Madhan Varadhodiyil · Accepted Answer · 2018-08-01T20:26:15.907

0

                    <div class="wrap-input100 m-b-20 validate-input" data-validate = "Email is required: ex@abc.xyz">
                        <input id="email" class="s2-txt1 placeholder0 input100" type="text" name="email" placeholder="Email Address">
                        <span class="focus-input100"></span>
                    </div>

                    <div class="w-full">
                        <p class="s2-txt3 p-t-18">
                    And don’t worry, we hate spam too! You can unsubcribe at anytime.
                </p><br>
                        <button id="submitBtn" onclick="submitDetail(event)" type="submit" name="submit" class="flex-c-m s2-txt2 size4 bg1 bor1 hov1 trans-04">
                            Submit
                            </button>

                    </div>
                </form>

And in js to prevent reload :

function submitDetail(ev){
ev.preventDefault();
var nText = nameText.value;
var eText = emailText.value;

firebaseRef.push().set({
    name : nText,
    email : eText
});

window.alert("Subscribed Successfully")

}

edited Aug 01 '18 at 20:26

answered Aug 01 '18 at 20:13

Madhan Varadhodiyil

2,086
1
14
20

NO now it is not even running javascript even after refreshing – Vivank Sharma Aug 01 '18 at 20:18
1

@VivankSharma If you provide a [mcve], it will be easier for others to assist you. – jhpratt Aug 01 '18 at 20:21
I am getting none – Vivank Sharma Aug 01 '18 at 20:21
its minimal @jhpratt – Vivank Sharma Aug 01 '18 at 20:22
@VivankSharma Please open up the link to see. I can't verify the issue, as it's not complete. – jhpratt Aug 01 '18 at 20:22
@VivankSharma Can you check now please? – Madhan Varadhodiyil Aug 01 '18 at 20:26
Got it @MadhanVaradhodiyil – Vivank Sharma Aug 01 '18 at 20:27
Cool. What @jhpratt was trying to say was to include a specific method/code snippet which you think is causing a bug/problem – Madhan Varadhodiyil Aug 01 '18 at 20:29

Javascript not working for the first time when webpage open?

1 Answers1