Submit a form with JavaScript

Question

I currently have an issue submitting form to the server. When I click on the Submit button, all the fields in the form get submitted but when I use $('#form3').submit(), just one field is submitted.

Find below my code to automatically submit the form on countdown equal to zero.

var countdown = 10000;//expire * 60 * 1000;
var timerId = setInterval(function(){
    countdown -= 1000;
    var min = Math.floor(countdown / (60 * 1000));
    var sec = Math.floor((countdown - (min * 60 * 1000)) / 1000);  //correct
    if (countdown <= 0) {
        $('#form3').submit();
        alert("Time Up!");
        clearInterval(timerId);
        return false;
    }else {
        $("#showtime").html(min + " Min : " + sec + " Sec");
    }
}, 1000); //1000ms. = 1sec.

The form markup

<form class="form-validation" id="form3" action="{{url('submit-form')}}" method="POST">       

{{csrf_field()}}

    <fieldset class="step" id="validation-step1">
        <h6 class="form-wizard-title text-semibold">
            Teacher's Instructions
            <small class="display-block">Select the correct option.</small>
        </h6>

        <div class="row">
            <p class="lead" style="margin-left: 60px;">{{@$question->question}}</p>
            <div class="col-md-12">
                <div class="col-md-6">
                    <p class="lead">Please, read the instructions carefully before you start.</p>
                    <br>

                    <input type="hidden" name="exam" value="{{@$exam->id}}">
                </div>
            </div>
        </div>
    </fieldset>

@php $i = 2; $sn=1; @endphp
@foreach(@$questions as $question)

    @php 
        $options = collect([$question->option1, $question->option2, $question->option3, $question->option4, $question->option5])->shuffle(); 
    @endphp
    <fieldset class="step" id="validation-step{{@$i++}}">
        <h6 class="form-wizard-title text-semibold">
            <span class="form-wizard-count">{{@$sn++}}</span>
            Question 
            <small class="display-block">Select the correct answer to the question.</small>
        </h6>

        <div class="row">
            <p class="lead" style="margin-left: 60px;">{{@$question->question}}</p>
            <div class="col-md-12">
                <div class="col-md-6">
                    <div class="form-group" style="margin-left: 40px;">
                        @foreach($options as $option)
                            <div class="radio">
                                <label class="lead">
                                    <input type="radio" value="{{@$option}}" name="question[{{@$question->id}}]" class="">
                                    {{@$option}}
                                </label>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="col-md-6 text-center">
                    @if(@$question->image)
                        <img src="{{@$question->image}}" class="" style="width: 80%; height: 60%; border: 1px solid black; margin: 20px;">
                    @endif
                </div>
            </div>
        </div>

    </fieldset>
@endforeach

    <div class="form-wizard-actions">
        <button class="btn btn-default" id="validation-back"    type="reset">Back</button>
        <button class="btn btn-info" id="validation-next" type="submit">Next</button>
    </div>
</form>

Which field gets submitted when you use $('#form3').submit()? — Matt U
– Matt U, Commented Nov 29, 2019 at 3:53
@MattU most time, just the _token field. Sometimes, the exam field if not radios were selected and only one radio if more answers are selected. This doesn't happen when I submit manually. — BlackPearl
– BlackPearl, Commented Nov 29, 2019 at 4:04

datpp · Accepted Answer · 2019-11-29 03:31:56Z

1

you can check again form id, maybe it duplicated with another form.

answered Nov 29, 2019 at 3:31

datpp

111 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

BlackPearl Over a year ago

Thanks for your reply. I have checked that already and no duplicate form with same ID.

ThinhCoder · Accepted Answer · 2019-11-29 04:11:10Z

1

I suggest you show the log of $("#form3")object before you submit the form. Because at the moment you click on the button, maybe every elements of your page and your form is ready but it's not ready when your code executes!

if (countdown <= 0) {
    console.log($('#form3')); // to see the object form is ready or not 
    console.log($("#form3").serialize()); // to see what data inside the form at that time
    return false; // to see the log
    //$('#form3').submit();
    //alert("Time Up!");
    //clearInterval(timerId);
    //return false;
}

answered Nov 29, 2019 at 4:11

ThinhCoder

5065 silver badges9 bronze badges

9 Comments

BlackPearl Over a year ago

It returned only the _token value

ThinhCoder Over a year ago

That means your form is not ready when the code executes! Or there's something wrong with HTML code after render. Could you show the form HTML at that time console.log('#form3').html()

BlackPearl Over a year ago

How can I do that?

ThinhCoder Over a year ago

console.log($('#form3').html());

BlackPearl Over a year ago

All items (text field and radios) have the disabled attribute

|

Collectives™ on Stack Overflow

Submit a form with JavaScript

2 Answers 2

1 Comment

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related