Can we display the chosen form values before submitting?

Question

Can we display the chosen form values before submitting?

Want to implement a confirmation message for users before submitting their form using

onClick="return confirm('are you sure ?')"

.

The basic form structure is as follows:

<form>
<Select name='val[]' class='select'><option></option><option value='a'>a</option><option value='b'>b</option><option value='c'>c</option><option value='d'>d</option></select>
<Select name='opt'><option>AAA</option><option>BBB</option><option>CCC</option></select>
<input type='submit' name='submit' value='submit' onClick="return confirm('are you sure ?')">
</form>

If the user clicks submit, how can I update the confirmation message to display the values they have selected from the dropdown menus?

Edit:

This page is utilizing the Jquery Chosen script available at

The first option is a multiselect dropdown and styled using chosen.

The suggested solution provided by dishwasherWithProgrammingSkill works but does not show the multiple values selected.

Is there a way to achieve that functionality?

Update: Using : var opt3=$('#opt1').val();

The above code returns a comma-separated list. How can I remove the commas?

Appreciate any help. Thank you!

javascript forms submit

Answer 1

Answer №1

It seems like this could be the solution you've been searching for.

<form>
    <select name='val' class='select' id='opt1'>
        <option></option>
        <option value='a'>a</option>
        <option value='b'>b</option>
    </select>
    <select name='opt' id='opt2'>
        <option value='AAA'>AAA</option>
        <option value='BBB'>BBB</option>
    </select>
    <input type='submit' name='submit' value='submit' onClick="return function1();">
</form>

<script type='text/javascript'>
    function function1(){
        var opt1=document.getElementById("opt1").value;
        var opt2=document.getElementById("opt2").value;
        var response=confirm("Are you sure? option1="+opt1+" option2="+opt2);
        return response;
     }
</script>

UPDATE

Having already acquired the values using var opt3=$('#opt1').val();, the next steps are straightforward. You can utilize the split() function in JavaScript, similar to PHP's explode() function. Here is an example:

var opt3=$('#opt1').val();
var valArray=opt3.split(",");  //Specify where you want to split
for (var i = 0; i < valArray.length; i++) {
    alert(valArray[i]);
}

Answer 2

It seems like this could be the solution you've been searching for.

<form>
    <select name='val' class='select' id='opt1'>
        <option></option>
        <option value='a'>a</option>
        <option value='b'>b</option>
    </select>
    <select name='opt' id='opt2'>
        <option value='AAA'>AAA</option>
        <option value='BBB'>BBB</option>
    </select>
    <input type='submit' name='submit' value='submit' onClick="return function1();">
</form>

<script type='text/javascript'>
    function function1(){
        var opt1=document.getElementById("opt1").value;
        var opt2=document.getElementById("opt2").value;
        var response=confirm("Are you sure? option1="+opt1+" option2="+opt2);
        return response;
     }
</script>

UPDATE

Having already acquired the values using var opt3=$('#opt1').val();, the next steps are straightforward. You can utilize the split() function in JavaScript, similar to PHP's explode() function. Here is an example:

var opt3=$('#opt1').val();
var valArray=opt3.split(",");  //Specify where you want to split
for (var i = 0; i < valArray.length; i++) {
    alert(valArray[i]);
}

Answer 3

Answer №2

To achieve this, you will need to create a custom function. With the help of jQuery, you can utilize $(form).submit(function(){}); to retrieve your values when the form is submitted, display a confirmation dialog, and set the content accordingly.

I would be interested to hear about your progress!

http://api.jquery.com/submit/

Answer 4

To achieve this, you will need to create a custom function. With the help of jQuery, you can utilize $(form).submit(function(){}); to retrieve your values when the form is submitted, display a confirmation dialog, and set the content accordingly.

I would be interested to hear about your progress!

http://api.jquery.com/submit/

Answer 5

Answer №3

To enhance the functionality of your form, it is recommended to separate your JavaScript code and apply an event listener. However, if you prefer using the onclick attribute, consider assigning an id to each form element and retrieving their values with getElementById():

<form>
    <select name='val[]' id='val' class='select'><option></option><option value='a'>a</option><option value='b'>b</option><option value='c'>c</option><option value='d'>d</option></select>
    <select name='opt' id='opt'><option>AAA</option><option>BBB</option><option>CCC</option></select>
    <input type='submit' name='submit' value='submit' onClick="return confirm('are you sure? val='+getElementById('val').value +' opt='+getElementById('opt').value)" />
</form>

For a practical demonstration, refer to this jsFiddle example - http://jsfiddle.net/rpcBS/

Answer 6

To enhance the functionality of your form, it is recommended to separate your JavaScript code and apply an event listener. However, if you prefer using the onclick attribute, consider assigning an id to each form element and retrieving their values with getElementById():

<form>
    <select name='val[]' id='val' class='select'><option></option><option value='a'>a</option><option value='b'>b</option><option value='c'>c</option><option value='d'>d</option></select>
    <select name='opt' id='opt'><option>AAA</option><option>BBB</option><option>CCC</option></select>
    <input type='submit' name='submit' value='submit' onClick="return confirm('are you sure? val='+getElementById('val').value +' opt='+getElementById('opt').value)" />
</form>

For a practical demonstration, refer to this jsFiddle example - http://jsfiddle.net/rpcBS/

Answer 7

Answer №4

Make sure to use onSubmit() instead of onClick() when listening for form submissions.

<form onSubmit="return confirm('Are you sure?);">
    <select name='val[]' class='select'><option></option><option value='a'>a</option><option value='b'>b</option><option value='c'>c</option><option value='d'>d</option></select>
    <select name='opt'><option>AAA</option><option>BBB</option><option>CCC</option></select>
    <input type='submit' name='submit' value='Submit'>
</form>

Using onClick will not prevent the form from being submitted.

Answer 8

Make sure to use onSubmit() instead of onClick() when listening for form submissions.

<form onSubmit="return confirm('Are you sure?);">
    <select name='val[]' class='select'><option></option><option value='a'>a</option><option value='b'>b</option><option value='c'>c</option><option value='d'>d</option></select>
    <select name='opt'><option>AAA</option><option>BBB</option><option>CCC</option></select>
    <input type='submit' name='submit' value='Submit'>
</form>

Using onClick will not prevent the form from being submitted.

Can we display the chosen form values before submitting?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Having trouble getting JavaScript to select a stylesheet based on time?

The issue with Three.Js Raycasting arises when attempting to change camera transformations within an Object3D parent element

Utilizing Ajax and jQuery to extract information from an XML file based on an identification number

Transforming a two-digit year into a four-digit year

The challenge with the Optional Chaining operator in Typescript 3.7@beta

JSON has encountered an unconventional string at position 41 that was not anticipated

Combining a group of JavaScript objects

Creating Table Rows on-the-fly

Issue with process.env.NODE_ENV not functioning appropriately in NodeJS when utilizing package.json scripts

Shuffle letters in a word when hovered over, then unscramble them back to their original order

Deleting images from Firestore using a Vue.js componentReady to learn how to remove images

What makes using $(selector).post() and $.get() in jQuery AJAX so valuable?

Alignment of Bootstrap thumbnails in a horizontal layout

How can I extract the text within an element based on the position of the

How can you utilize a bind function to deactivate a button?

"Internet Explorer naturally selects the submit button when users press the enter key to submit a

Encountering a "Vue is not defined" error in Laravel 5.8 while constructing a comment system using Vue.js

Facing difficulty transferring an array from React to Django

Horizontal navigation bar encroaching on slideshow graphics

"Enhance your client-side PDF capabilities with the pdfMake plugin, offering support for multiple languages