I'm using jquery to sum values of input checkbox and i need to save the sum into DB MySQL but how can i put the value in a php var? I don't know how can i do this.
Can someone help me out? I'm newbie in jquery :/
Here's the code i'm using:
<script type="text/javascript">
$(document).ready(function () {
function recalculate() {
var sum = 0;
$("input[type=checkbox]:checked").each(function() {
var val = $(this).attr("preco").replace(',', '.');
sum += parseFloat(val);
});
$("#output").html(sum);
}
$("input[type=checkbox]").change(function() {
recalculate();
});
});
</script>
<?php
if (isset($_POST['submit'])){
$transporte = $_POST['metodoenvio'];
(... save into DB)
}
?>
<span id="output"></span> // the sum in html shows up here
<form class="cmxform" id="pedidoForm" method="post" action="">
<input type="checkbox" name="metodoenvio" class="metodoenvio" preco="20" />
<input type="checkbox" name="metodoenvio" class="metodoenvio" preco="10" />
(...)
<input type="submit" name="submit" id="submit" value="submit"/>
</form>
Take a hidden type variable with some id in form tag and put value in hidden variable by jquery like:
$("#hidden_var").val(sum);
Then at the end submit the form
add new hidden input field to the form to hold the sum
<form class="cmxform" id="pedidoForm" method="post" action="">
//add new hidden input field to have the sum
<input id="sum_input" name="sum" type="hidden"/>
<input type="checkbox" name="metodoenvio" class="metodoenvio" preco="20" />
<input type="checkbox" name="metodoenvio" class="metodoenvio" preco="10" />
(...)
<input type="submit" name="submit" id="submit" value="submit"/>
</form>
//Then use the jquery to put the sum to input id sum
function recalculate() {
var sum = 0;
$("input[type=checkbox]:checked").each(function() {
var val = $(this).attr("preco").replace(',', '.');
sum += parseFloat(val);
});
$("#output").html(sum);
//jquery to put sum into form
$("#sum_input").val(sum);
}
You should split your php server side scripts out of your html/js client side pages. create a separate php page so process the data and call it through an ajax call.
change your submit button to just be a button and attach an onclick event to call a function that will sum the checkboxes and then initiate the and ajax request.
<script>
function sumChecked(){
i = 0;
$.each($('#pedidoForm:ckecked), function({
i++;
});
$.ajax({
url:"yourPHPpage.php",
type:"POST",
data:{"sumVar":i},
success: function(data){
alert ("Process Complete");
}
})
}
...
</script>
...
<form class="cmxform" id="pedidoForm">
<input type="checkbox" name="metodoenvio" class="metodoenvio" preco="20" />
<input type="checkbox" name="metodoenvio" class="metodoenvio" preco="10" />
(...)
<input type="button" name="submit" id="submit" value="submit" onClick="sumChecked()"/>
</form>
then on your php page catch the $_POST['sumVar'] variable sent through from the form and do whatever you want to server-side with that info.
Related
In the php script when I echo the $_POST['AllItems '] then it shows only the last selected value
instead of a whole string of values or array.
Below is the javascript am using :
$(function () {
$('#senditems').click(function () {
var items = $('input[name^="item"]:checked').map(function () {
return this.value;
}).get();
*****************************
//here when i do alert(items); ,
then it shows comma separated values - 1,22,321
****************************
$.post("saveitems.php", {
AllItems: items
});
});
});
Form is :
<form>
<input type="checkbox" name="items[1]" value="1" />
<input type="checkbox" name="items[22]" value="22" />
<input type="checkbox" name="items[321]" value="321" />
</form>
This is how your form should look.
<form id="my_form">
<input type="checkbox" name="items[]" value="1" />
<input type="checkbox" name="items[]" value="22" />
<input type="checkbox" name="items[]" value="321" />
</form>
Then in your php, you can iterate through all the $_POST['items']
If you want to use jQuery to post, you can use this, but is not necessary as you can add a method and action to the html in your form:
$('#senditems').on('click', function(){
var form_data = $('#my_form').serialize();
$.post({
url: "your_php.php",
data: form_data
});
});
I have a problem, and i don't know how to get an id of a specific form when in the same page there is several form. Each form has a different id :
HTML :
<form method="post" action="page.php" id="acheter1">
<input type="hidden" class="idProd8" name="idProd8" value="1">
<input type="hidden" name="price" value="10">
<button type="submit" id="addToCart" name="addToCart">Add</button>
</form>
<form method="post" action="page.php" id="acheter2">
<input type="hidden" class="idProd8" name="idProd8" value="2">
<input type="hidden" name="price" value="20">
<button type="submit" id="addToCart" name="addToCart">Add</button>
</form>
And this is the ajax
Jquery :
$('[id^=acheter]').submit(function() {
var CurrenID = $(this).attr('id');
$.ajax({
type: "POST",
url: "page.php",
data: $('#'+CurrenID).serialize(),
success: function(data) {
Method();
}
});
return false;
});
$('[id^=acheter]').submit(function() {
var data = $(this).serialize()+"&form_id="+$(this).attr('id');
$.ajax({
type: "POST",
url: "page.php",
data: data,
success: function(data) {
Method();
}
});
return false;
});
That will add your ID to the form post data?
in this line:
$('[id^=acheter]').submit(function() {
change to
$('#acheter').submit(function() {
Note that the id must be unique if you want to get more than one value from diferent tags use name or class.
to check the forms using the id just make a input button instead input submit, each one with a diferent variable to the jquery and submit .
example :
<form method="post" action="page.php" id="acheter1">
<input type="hidden" class="idProd8" name="idProd8" value="1">
<input type="hidden" name="price" value="10">
<button type="button" id="addToCart1" name="addToCart" onclick="submitF('1')">Add</button>
</form>
<form method="post" action="page.php" id="acheter2">
<input type="hidden" class="idProd8" name="idProd8" value="2">
<input type="hidden" name="price" value="20">
<button type="button" id="addToCart2" name="addToCart" onclick="submitF('2')">Add</button>
</form>
Then use jquery/javascript to check what button was clicked
function submitF(var)
{
if (var == 1)
{
...
/*do what you want knowing that the first form was clicked,
submit form with jquery if you want*/
...
}
if (var == 2)
{
...
/*do what you want knowing that the second form was clicked,
submit form with jquery if you want*/
...
}
}
I have a form which performs a javascript when submit is clicked. I can't seem to figure out how to do the same thing when the return key (13) is used.
HTML: (note MakeRequest() is a JS method which performs a request on another php page and returns results to JSresult.)
<form name="SearchForm">
Name: <input type = "text" name = "Name" id="Search"
placeholder="Search stuff here...">
<button type="button" id "Request" onClick="MakeRequest()"">Search</button>
</form>
div id="JSresult">
</div>
Replace your button with a submit input and move the function to form onSubmit, instead of button onClick :
<form name="SearchForm" onSubmit="MakeRequest();">
Name: <input type = "text" name = "Name" id="Search" placeholder="Search stuff here..." />
<input type="submit" id="Request" value="Search" />
</form>
Here is an unobtrusive approach that should do the trick:
<script>
window.onload = function(){
document.getElementById("Search").onkeydown = function(e){
key = (e.keyCode) ? e.keyCode : e.which;
if(key == 13) {
document.getElementById("Request").click();
}
};
};
</script>
Just copy that into the head of your HTML file.
How can I change the code below so instead of a text input type with a submit button I want multiple submit buttons each with their own unique value? Everything I try just ends up with submit's value being undefined. Any help would be great!
Code source: Submit Search query & get Search result without refresh
<script type="text/javascript">
$(function() {
$("#lets_search").bind('submit',function() {
var value = $('#str').val();
$.post('db_query.php',{value:value}, function(data){
$("#search_results").html(data);
});
return false;
});
});
</script>
<form id="lets_search" action="" >
Search:<input type="text" name="str" id="str">
<input type="submit" value="send" name="send" id="send">
</form>
You can add multiple submit buttons and attach to all of them onclick event listener. When button was clicked - get the value and send with a POST request.
<script>
$(function(){
$('input[type=submit]').click(function(){
$.post('db_query.php', {value:$(this).val()}, function(data){
$("#search_results").html(data);
});
return false;
});
});
</script>
<form id="lets_search" action="">
<input type="submit" name="button1" value="hi"/>
<input type="submit" name="button2" value="bye"/>
</form>
If you want to use multiple submit buttons, you can catch the click event and determine which button was clicked. then run different Ajax submit. this also works when enter is hit.
//submit buttons
<form id="lets_search" action="" >
Search:<input type="text" name="str" id="str" />
<input type="submit" value="v1"/>
<input type="submit" value="v2"/>
//...more submit buttons
</form>
//submit func
$(function() {
$("#lets_search input[type=submit]").click(function() {
switch ($(this).val){
case 'v1':...;
case 'v2':...
}
});
});
Here is my version - which now looks very much like Bingjies because it was written while I was testing out his version
DEMO
<form id="lets_search" action="" >
Search:<input type="text" name="q" id="q">
<input type="submit" value="Google" name="send" id="google">
<input type="submit" value="Bing" name="send" id="bing">
</form>
$(function() {
$("#lets_search input[type=submit]").click(function() {
switch ($(this).val()) {
case "Bing" :
$("#lets_search").attr("action","http://www.bing.com/search");
break;
case "Google":
$("#lets_search").attr("action","https://www.google.com/search");
break;
}
});
});
Here, I would prefer to Vamsi's solution n Why not Sanjeev mk?
Give some extra thought on prefering the solution.
case: If there are mulitple submit buttons
If the user is in the text field and hits enter, the system will assume the first submit button was hit.
So, here, it would be good to go for not having mulitple submit
buttons for end user point of view
You can have multiple submit buttons in the form, no problem. They may have the same name, type etc, but just assign them different values. Like Submit Button 1 can have value="hi" and Button 2 can have value="bye".
Then when the action function is called for the button, all you have to do when entering the function is do a check with: $(this).val
HTML:
<input type="submit" name="button1" value="hi"/>
<input type="submit" name="button2" value="bye"/>
jQuery:
$(function() {
$("#lets_search").bind('submit',function() {
var value = $(this).val();
if(value == "hi")
do_something;
else
do_something_else;
});
});
how can i post the value of checked checkbox in php script, using ajax call i.e when the user click on checkbox the value is post to php script.
put on checkbox onclick event:
<input type='ceheckbox' onclick='postwithajax(this)' />
and make a function like:
function postwithajax(e){
//and here send with ajax e.checked
}
use jquery to get values from html
$("#submit").click(function(){
var myarray = [];
$("#div input:checked").each(function() {
myarray.push($(this).val()); //push each val into the array
});
// here post Array with ajax
});
Html
<html>
<head>
</head>
<body>
<div id="div">
<input type="checkbox" value="one_name" checked>
<input type="checkbox" value="one_name1">
<input type="checkbox" value="one_name2">
<input type="button" value="submit" id="submit">
</div>
<textarea id="t"></textarea>
</body>
</html>