CODEWITHSUNDEEP
phpjqueryformssubmit
Jamal Lanten
Jamal Lanten

Reputation: 69

jquery change form button value in php

I have a form with 2 dropdowns, 'Type' and 'Level', eg

Type
-----
Hotel
Restaurant
Casino

Level
-----
1
2
3

And a submit button which shows the price based on whichever options are selected in the dropdown. The price is calculated by some basic maths on the fly.

How can I do this using jquery?

Is it using onchange() or something?

Upvotes: 0

Views: 244

Answers (3)

Filippos Karapetis
Filippos Karapetis

Reputation: 4652

You can check if a select list has changed via jQuery's change() function.

Here's a way to do it:

HTML:

Type
<select name="type" id="type">
    <option value="hotel" selected>Hotel</option>
    <option value="restaurant">Restaurant</option>
    <option value="casino">Casino</option>
</select>Level
<select name="level" id="level">
    <option value="1" selected>1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<div id="result"></div>

jQuery:

var result = 1;
$("#type").change(function () {
    var val = $(this).val();
    $("#result").html("Type is " + val + ", level is " + $("#level").val());
});

$("#level").change(function () {
    var val = $(this).val();

    // Some basic math
    result = parseInt(val) * 5;

    $("#result").html("Type is " + $("#type").val() + ", level is " + val + ", result: " + result);
});

And the relevant jsfiddle: http://jsfiddle.net/y2s4v/1/

Upvotes: 0

Rob W
Rob W

Reputation: 9142

HTML:

<form>
    <fieldset>
        <p>
            <label for="selectType">Type:</label>
            <select id="selectType" name="type">
                <option value="Hotel" data-cost="40">Hotel</option>
                <option value="Restaurant" data-cost="80">Restaurant</option>
                <option value="Casino" data-cost="35">Casino</option>
            </select>
        </p>

        <p>
            <label for="selectLevel">Level:</label>
            <select id="selectLevel" name="level">
                <option value="1" data-cost="0">1</option>
                <option value="2" data-cost="15">2</option>
                <option value="3" data-cost="30">3</option>
            </select>
        </p>

        <p>
            Total Cost: $<span id="cost">0</span>
        </p>

        <p><input type="submit" value="Go!"></p>
    </fieldset>
</form>

jQuery:

$(function() {
    $("#selectType, #selectLevel").change(function() {
      var type = $("#selectType"),
          level = $("#selectLevel"),
          cost  = $("#cost"),
          typeCost = type.find(":selected").data('cost'),
          levelCost = level.find(":selected").data('cost'),
          total = typeCost + levelCost;

      cost.html(total);
    }).change();  // invoke the .change() trigger
});

See it in action here

You might want to also set something like "data-multiplier" for the level... whereas level 2 may have a 1.5x multiplier, and level 3 may have a 2x multiplier. You'd have to adjust the jQuery accordingly as well (total = typeCost * levelCostMultiplier, for example).

Upvotes: 0

Tim Withers
Tim Withers

Reputation: 12059

$("#button_id_here").val("$your_amount_here");

If you want it to update automatically, bind it to the change event in the select/dropdowns

$("#select_id_here").change(function(){
    //"basic maths"
    $("#button_id_here").val("$your_amount_here");
});

You want more help, we would need to see code.

Upvotes: 1

Related Questions