Validate with JavaScript, then display and submit

I've created a submit function to verify form inputs, and then, if desired (via checkbox), print as part of the submission process.

The issue is that when printing, the form submission never finishes. However, without printing, the form submits correctly.

<INPUT class=checkboxes id="Place order" onclick="return checkfields()" type=submit value=SUBMIT name="Place order">

The validation always seems to work correctly (as far as I know).

function checkfields() {
    var missinginfo="Please fill in the following information";

    var bres = true, qty=0, elem;

    var tqty = document.getElementById('bottles').value;
    if (tqty ==0){alert("No wine selected");bres=false;return bres;}
    if (tqty %6 !=0){
        alert("Orders need to be in 6 bottle packs. Please add " + (6 -(tqty %6)) + " bottles to your order");
        bres=false;
        return bres;
    }   //end if
    for (i=1; i<30; i++) {
        elem = document.getElementById('f'+i);
        if(elem !=null){
            if(elem.value== ""){  
                bres = false; missinginfo += "\n    " + (document.getElementById('f'+i).name);
            }     //end if
        }     //end if
    }     //end for
    if(!bres){alert (missinginfo );}

    // end of validation here, print if checkbox checked
    if(bres && document.getElementById('cprint').checked==true){window.print();}

    document.getElementById('doc').value = "";
    return bres;
}    

Do you have any suggestions on how to fix this issue, or am I approaching it all wrong?

Answer №1

Try using onsubmit in place of onclick:

<INPUT class="checkboxes" id="Place order"
    onsubmit="return checkfields();"
    type="submit" value="SUBMIT" name="Place order">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Challenges faced when using jQuery UI autocomplete

My code utilizes jQuery UI's autocomplete method on a text box: $(function() { $('#project').autocomplete({ source: function(request, response){response(Object.getOwnPropertyNames(projects))}, minLength: 0, ...

Troublesome CSS conflicts arise when using minified assets with AngularJS and Webpack

After transitioning my Angular project to the Webpack build system, I encountered issues with Angular Dependency Injection in the JS source code. Surprisingly, now I am facing JS errors that are targeting CSS files, leaving me completely bewildered about w ...

The IsArray() function in IE8 encounters an issue where it expects an error object

I am interested to know why IE8 is having trouble with this line of code: if (isArray(obj)) When I check in the IE8 javascript console, I see the following: >>obj {...} >>typeof(obj) "object" >>Object.prototype.toString.call(obj) "[obj ...

The replace() function is failing to replace the provided inputs

Supposedly, when a user types in certain profanity and submits it, the word is supposed to be replaced with a censored version. Unfortunately, this feature is not working as expected. The word appears uncensored. Do you think implementing if/else stateme ...

Is there a way to sustain audio playback even after the current track has finished?

I am facing an issue with my code where I am trying to play the next song in a playlist or album after the current one finishes playing. Although I was able to get a song to play, it does not progress to the next one automatically. Below is the snippet of ...

Submitting the Ajax form will result in the quantity of the product in the cart being updated while remaining on

Hello, I am using ajax to keep the user on the same page after submitting a form. If successful, I will use ajax load to load another page that displays the quantity of the product. However, I am facing an issue where each subsequent submit increases the q ...

Restrict dropping items in HTML5 by only allowing the drop if the target div is

I am working on developing a user-friendly visual interface for creating simple graphics. The interface includes 10 image icons and 5 boxes where users can place these icons. Users have the freedom to select which icon they want to display and arrange them ...

JavaScript (Create a button that toggles the visibility of an element)

I have implemented a hamburger menu that transforms into an x when clicked. I am looking to modify it so that clicking on the hamburger opens the menu, and clicking on the x closes the menu. Below is the code I have been working with: <!DOCTYPE html&g ...

Waiting for the result of an AngularJS promise

When I click a button in my AngularJS app, the following code is executed: if (!$scope.isChecked) { $scope.getExistingName($scope.userName).then(function (data) { $scope.userName = data; }); } // Additional processing code foll ...

Accessing JavaScript cookie within .htaccess file to establish redirection parameters according to cookie content

Is there a way to modify the rules within my .htaccess file so that it can properly read a user-side cookie and redirect based on its content? The scenario is this: I have a cookie called userstate which contains an abbreviation of US states, such as AL ( ...

adding content to div is becoming less speedy

Currently, I'm developing a drawing board using only html/css/jquery and the drawing functionality is working smoothly. The approach I've taken involves capturing the mousemove events and placing a dot (div) at each point where the event occurs, ...

Update the VueJS application by loading and replacing the existing JSON data with new information

Is there a way to dynamically re-render the entire v-for loop and DOM after fetching and loading new JSON data to replace the current one? I want to be able to click on different options and have the products updated. Vue.use(VueResource); var produ ...

I designed my higher-order component to allow for dual invocations. How can I integrate Redux within this framework?

I have implemented my higher-order component (HOC) in such a way that it can be invoked twice, emphasizing the concept of "functional programming". However, I am facing challenges in connecting Redux to access state and certain functions. I would greatly ...

What could be the reason for my code generating the error [$http:badreq]?

I'm currently attempting to retrieve JSON data from a certain URL and am having trouble getting it to work. Despite going through the Angular documentation and other resources, I still can't pinpoint the issue due to my limited experience with An ...

Ways to call a method in a subclass component from a functional parent component?

In my redux-store, I have objects with initial values that are updated in different places within the child component. As the parent, I created a stateless functional component like this: const Parent = () => { const store = useSelector(state => s ...

Interacting with PHP variables in JSON format

I've recently started using JSON to exchange data between pages, but I am facing a challenge that I can't seem to solve. Essentially, my issue lies in one page where I am utilizing jquery's getJSON method to retrieve JSON data from another ...

Can you distinguish between these two plunkers - one using AngularJS and the other using Angular-UI?

I'm currently facing a challenge while trying to incorporate the ui-bootstrap project into my own project. Despite having successfully used ui-bootstrap before, I seem to be making mistakes this time around. The Plunkers linked below showcase the issu ...

Optimizing with react and mobX: What You Need to Know

I am new to React and MobX and have been studying various tutorials on using both together. Currently, I am working on creating a form where users can select a product through autocomplete functionality using react-select. Once a product is selected, the i ...

angularjs dropdown - customize selected item appearance

My dilemma involves a list of countries, each with a code and name. When the list is expanded, I aim to show "code + name" (e.g. "+44 United Kingdom"). However, once a country is selected, I only want to display the code ("+44"). Is it achievable using Ang ...

Guide to transforming a JSON file value into a JavaScript list

I need assistance with converting a string of comma-separated values in a JSON file into a list. The goal is to iterate through the list in a for loop and click on each element. Can you help me with this task? testdata.json : {"optionsList":&quo ...