How to automatically run a jQuery script, without having to click submit? - php

Question

I am currently working on an online store. I have succeeded in coding a script that calculates a product's price and shows this price on the product page when the user clicks on an 'update price' button. Is there a way of doing this without a submit button? In other words: is there a way to make the price show and update automatically?
(I have not included my .php file because it uses data from a database.)
Any help would be greatly appreciated!
<form action="/" id="updatePrice">
<h3>Size</h3>
<select class="form-control" id="sizejquery" name="size">
<option>A0</option>
<option>A1</option>
<option>A2</option>
</select>
<h3>Type of paper</h3>
<select class="form-control" id="paperjquery" name="paper">
<option>white coated paper</option>
<option>photo paper</option>
</select>
<h3>Quantity</h3>
<select class="form-control" id="quantityjquery" name="quantity">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<br>
<input class="btn btn-default" type="submit" value="update price">
</form>
<div id="price">
<h3>$0.00</h3>
</div>
<script>
// Attach a submit handler to the form
$("#updatePrice").submit(function(event) {
// Stop form from submitting normally
event.preventDefault();
// Get some values from elements on the page:
var $form = $(this),
size = $form.find("#sizejquery").val(),
paper = $form.find("#paperjquery").val(),
quantity = $form.find("#quantityjquery").val(),
url = $form.attr("action");
// Send the data using post
var posting = $.post(url, {
size: size,
paper: paper,
quantity: quantity
});
// Put the results in a div
posting.done(function(data) {
var content = $(data).find("#content");
$("#price").empty().append(content);
});
});
</script>

Answer 1

You can register the blur() event on Quantity drop down ad then pus the results.
I have modified the script. Please see if it works for your implementation.
<script>
$(document).ready(function(){
$("#quantityjquery").blur(function(){
// Get some values from elements on the page:
var size = $("#sizejquery").val();
var paper = $("#paperjquery").val();
var quantity = $("#quantityjquery").val();
var url=$("#updatePrice").attr("action");
// Send the data using post
var posting = $.post(url, {
size: size,
paper: paper,
quantity: quantity
});
// Put the results in a div
posting.done(function(data) {
var content = $(data).find("#content");
$("#price").empty().append(content);
});
});
});
</script>

Answer 2

Right, so, try the following:
$(function() {
$formBtn = $("#updatePrice").find("input.btn-default");
$formBtn.on("click", function(event) {
//all your code (the one you already have) here....
});
$(window).on("load", function() {
$formBtn.trigger("click");
});
$("#updatePrice").on("change", ".form-control", function() {
$formBtn.trigger("click");
});
});
Full code:
$(function() {
$formBtn = $("#updatePrice").find("input.btn-default");
$formBtn.on("click", function(event) {
// Stop form from submitting normally
event.preventDefault();
// Get some values from elements on the page:
var $form = $("#updatePrice"),
size = $form.find("#sizejquery").val(),
paper = $form.find("#paperjquery").val(),
quantity = $form.find("#quantityjquery")
.val(),
url = $form.attr("action");
// Send the data using post
var posting = $.post(url, {
size: size,
paper: paper,
quantity: quantity
});
// Put the results in a div
posting.done(function(data) {
var content = $(data).find(
"#content");
$("#price").empty().append(
content);
});
});
$(window).on("load", function() {
$formBtn.trigger("click");
});
$("#updatePrice").on("change", ".form-control", function() {
$formBtn.trigger("click");
});
});

Answer 3

Call that method at document ready api in jquery as
$(document).ready(function(){
// your logic
});
In terms of your code
function fetchPrice(){
// Stop form from submitting normally
event.preventDefault();
// Get some values from elements on the page:
var $form = $(this),
size = $form.find("#sizejquery").val(),
paper = $form.find("#paperjquery").val(),
quantity = $form.find("#quantityjquery").val(),
url = $form.attr("action");
// Send the data using post
var posting = $.post(url, {
size: size,
paper: paper,
quantity: quantity
});
// Put the results in a div
posting.done(function(data) {
var content = $(data).find("#content");
$("#price").empty().append(content);
});
}
$(document).ready(function(){
fetchPrice(); // calls as the page load complete
});
Hope it helps ..........