I'm facing a problem that with my Laravel project in JavaScript part.

My issue is that I have a form and when taking the variable outside the function it becomes empty ("") and works only inside the function

<form method="POST" action="#">
  @csrf

  <label for="package">إختر الباقة:</label>
  <div >
    <div >
    <div >

                            <h6 >اشتراك شهري</h6>

                        </div>
                        <div >

                            <h1 >$20</h1>

                            <div >

                                <input type="radio" onclick="setPrice()"  id="package"
                                    name="package"  value="20" />
                                <label  for="package">إختر هذه الباقة</label>

                            </div>
                        </div>
                    </div>

                    <div >
                        <div >
                            <h6 >نصف سنوي</h6>
                        </div>
                        <div >
                            <h1 >$50</h1>
                            <div >
                                <input type="radio"  onclick="setPrice()" id="package"
                                    name="package" value="50"  />
                                <label  for="package">إختر هذه الباقة</label>
                            </div>
                        </div>
                    </div>

                    <div >
                        <div >
                            <h6 >اشتراك سنوي</h6>
                        </div>
                        <div >
                            <h1 >$100</h1>
                            <div >
                                <input type="radio"  onclick="setPrice()" id="package"
                                    name="package" value="100"  />
                                <label  for="package">إختر هذه الباقة</label>
                            </div>
                        </div>
                    </div>
                </div>

                <div >
                    <input type="text" name="name" onclick="setName()"  id="name" required
                        data-error="الرجاء ادخال الاسم الكامل" placeholder="الاسم الكامل" />
                    @if ($errors->has('name'))
                        <span >
                            <strong>{{ $errors->first('name') }}</strong>
                        </span>
                    @endif
                </div>
                <div >
                    <input type="text" name="phone" onchange="setPhone()"  id="phone" required
                        data-error="الرجاء ادخال رقم الهاتف" placeholder="رقم الهاتف" />
                    @if ($errors->has('phone'))
                        <span >
                            <strong>{{ $errors->first('phone') }}</strong>
                        </span>
                    @endif
                </div>
                <div >
                    <input type="email" name="email" onchange="setEmail()"  id="email" required
                        data-error="الرجاء ادخال البريد الالكتروني" placeholder="البريد الالكتروني" />
                    @if ($errors->has('email'))
                        <span >
                            <strong>{{ $errors->first('email') }}</strong>
                        </span>
                    @endif
                </div>
                <div >
                    <input type="password" onchange="setPassword()" name="password"  id="password"
                        required data-error="الرجاء ادخال كلمة السر" placeholder="كلمة السر" />
                    @if ($errors->has('password'))
                        <span >
                            <strong>{{ $errors->first('password') }}</strong>
                        </span>
                    @endif
                </div>
                <div >
                    <input type="password" name="password_confirmation"  id="password-confirm"
                        required data-error="الرجاء ادخال تأكيد كلمة السر" placeholder="تأكيد كلمة السر" />
                    @if ($errors->has('password_confirmation'))
                        <span >
                            <strong>{{ $errors->first('password_confirmation') }}</strong>
                        </span>
                    @endif
                </div>
                <button  name="submit" onclick="Checkout.showPaymentPage();"
                    id="form-submit">تسجيل</button>

SHOW

and when taking a variable only works inside the function and outside always empty here's my script part:

<script type="text/javascript">
    var package1 = $('input[name="package"]:checked').val();
    var name1 = $('input[name="name"]').val(); //name
    var phone1 = $('input[name="phone"]').val(); //phone
    var email1 = $('input[name="email"]').val(); //email
    var password1 = $('input[name="password"]').val(); //password
    $("#show").click(function() {
        console.warn(name1);//result ""


        // if i write var package1 = $('input[name="package"]:checked').val(); and others inside the function here it works. 
     });
 </script>

CodePudding user response：

When you are declaring the variables the page has not been loaded completely and the elements that you are selecting does not exist yet !

You should wait for the page to load first.

jQuery solution :

$(document).ready(function(){
  // page is loaded and all selections should be fine here
});

NativeJs solution:

document.addEventListener("DOMContentLoaded", function(event) {
   // Your code to run since DOM is loaded and ready
});

CodePudding user response：

Try in this way

$(document).ready(function(){
// Get value on button click and show alert
$("#myBtn").click(function(){
    var str = $("#myInput").val();
    alert(str);
});

});