How to persist checkbox checked state after page reload - php

Hello in my laravel eshop i have list of currency value in checkbox . When the checkbox get selected my page will get reloaded and update the currency value, But checkbox selection is missing after page reload, Any idea .
<script>
$(document).ready(function (){
$(function() {
// Currency change in checkout
$('#usd').on('ifChecked', function() {
var currency = $("input[name='currency']:checked").val();
$.ajax({
type: 'POST',
url: "{{URL::to('/')}}/cart/setcurrency",
data: {'currency':currency},
dataType: 'json',
success: function(data) {
window.location.reload();
$('input#usd').html("input[name='currency']:checked");
}
})
})
$('#aed').on('ifChecked', function() {
$("#tot_val").css("font-size", "14px");
$("#tot_text").css("font-size", "14px");
var currency = $("input[name='currency']:checked").val();
$.ajax({
type: 'POST',
url: "{{URL::to('/')}}/cart/setcurrency",
data: {'currency':currency},
dataType: 'json',
success: function(data) {
window.location.reload();
$('#aed').html("{{Session::get('currency')}}");
}
})
})
$("input[name='currency']:checked").bind( "change", function(event, ui) {
console.log('Lang: '+$(this).val());
})
</script>
<div class="cart_currency">
<form action="#">
{{Session::get('currency')}}
<p>CURRENCY</p>
<input type="radio" name="currency" value="USD" id="usd">USD
<input type="radio" name="currency" value="AED" id="aed">AED
<a href="{{URL::to('/')}}/cart/shipping">
<input type="button" name="currency_sub" value="CONTINUE" class="currency_submit">
</a>
</form>
</div>
public function postSetcurrency(){
$data = Input::all();
Session::set('currency',$data['currency']);
return Response::json('success');
}

#if (Session::has('currency'))
$value = Session::get('currency');
#if(strcmp($value,"USD") == 0)
<input type="radio" name="currency" value="USD" checked id="usd">USD
<input type="radio" name="currency" value="AED" id="aed">AED
#else if(strcmp($value,"AED") == 0)
<input type="radio" name="currency" value="USD" id="usd">USD
<input type="radio" name="currency" value="AED" checked id="aed">AED
#endif
#else
<input type="radio" name="currency" value="USD" id="usd">USD
<input type="radio" name="currency" value="AED" id="aed">AED
#endif
I haven't used Laravel before, but just looking at a few off-site examples, you could try this. It should replace your current radio buttons.

You could save the states of the checkbox and pass them as POST by php or using javascript to set local storage
https://developer.mozilla.org/es/docs/Web/API/Storage/setItem
javascript:
//set the checkbox state
localStorage.setItem('checkbox_one','true');
localStorage.setItem('checkbox_one','false');
//on page load
if(localStorage.getItem('checkbox_one') == 'true'){
//checkbox was checked
}else{
//checkbox checked not true
}

Related

Assigning check box values(totalling 3) to separate variables to pass into different columns

This is the HTML for the check box, I have a function that only allows three to be selected
<form class="interestSearchCriteria">
<input type="checkbox" name="walking" value="Walking"> Walking
<input type="checkbox" name="running" value="Running" > Running
<input type="checkbox" name="hiking" value="Hiking" > Hiking
<input type="checkbox" name="surfing" value="Surfing" > Surfing
<input type="checkbox" name="powerkiting" value="Kiting" > Kiting
<input type="checkbox" name="gym" value="GYM" > GYM
<input type="checkbox" name="cycling" value="Cycling" > Cycling<br><br><br>
<input type="submit" value="Submit" id="updateInterest">
</form>
Ajax call, I have three variables but how do i assign the first, second and third ticked values to each individual variable so I can send post to three separate columns?
$(document).ready(function() {
$(document).on('click', '#updateInterest', function() {
var firstInterest = $('input[type=checkbox]:checked').val();
var secondInterest=$('input[type=checkbox]:checked').val();
var thirdInterest=$('input[type=checkbox]:checked').val();
$.ajax({
type: "POST",
url: "http://localhost:8888/link",
data: {
option1: firstInterest,
option2:secondInterest,
option3:thirdInterest
}
});
})
})
This will allow up to 3 options to be selected, and also put the data into the correct option fields for the ajax call.
$(document).ready(function() {
$(document).on('click', '#updateInterest', function(e) {
e.preventDefault(); //stop default postback behaviour
var valid = true;
var data = { option1 : null, option2 : null, option3 : null };
$("input[type=checkbox]:checked").each(function(i, obj) {
if (i < 3) {
data["option" + (i+1).toString()] = this.value;
}
else {
alert("Please select up to 3 items");
valid = false;
return;
}
});
if (valid == false) { return; }
alert(JSON.stringify(data)); //just to test
$.ajax({
type: "POST",
url: "http://localhost:8888/link",
data: data
});
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="interestSearchCriteria">
<input type="checkbox" name="walking" value="Walking"> Walking
<input type="checkbox" name="running" value="Running" > Running
<input type="checkbox" name="hiking" value="Hiking" > Hiking
<input type="checkbox" name="surfing" value="Surfing" > Surfing
<input type="checkbox" name="powerkiting" value="Kiting" > Kiting
<input type="checkbox" name="gym" value="GYM" > GYM
<input type="checkbox" name="cycling" value="Cycling" > Cycling<br><br><br>
<input type="submit" value="Submit" id="updateInterest">
</form>
$(document).on('click', '#updateInterest', function() {
var checked = $('input[type=checkbox]:checked');
var firstInterest = checked.eq(0).val();
var secondInterest = checked.length > 1 ? checked.eq(1).val() : "";
var thirdInterest = checked.length > 2 ? checked.eq(2).val() : "";
console.log(firstInterest);
console.log(secondInterest);
console.log(thirdInterest);
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="interestSearchCriteria">
<input type="checkbox" name="walking" value="Walking"> Walking
<input type="checkbox" name="running" value="Running"> Running
<input type="checkbox" name="hiking" value="Hiking"> Hiking
<input type="checkbox" name="surfing" value="Surfing"> Surfing
<input type="checkbox" name="powerkiting" value="Kiting"> Kiting
<input type="checkbox" name="gym" value="GYM"> GYM
<input type="checkbox" name="cycling" value="Cycling"> Cycling<br><br><br>
<input type="submit" value="Submit" id="updateInterest">
</form>
To select all checked checkboxes:
$('input[type=checkbox]:checked')
To get first, second, third or any other index(say n):
.eq(n)

Send array data through AJAX

I have the following issue.
I'm trying to send a AJAX call whenever a checkbox is checked. The value of the checkbox is send to my PHP file where the DB will be checked to get all the data of that value.
The problem is, I would like to show the data on the page but I don't know how.
Below is my code:
HTML:
<input type="checkbox" name="category[]" id="1" value="1" /> <label for="1">Administratieve Sector</label><br />
<input type="checkbox" name="category[]" id="2" value="2" /> <label for="2">Bouw Sector</label><br />
<input type="checkbox" name="category[]" id="3" value="3" /> <label for="3">Financiele Sector</label><br />
<input type="checkbox" name="category[]" id="4" value="4" /> <label for="4">Gezondheidszorg Sector</label><br />
<input type="checkbox" name="category[]" id="5" value="5" /> <label for="5">Horeca- en toerisme Sector</label><br />
JQuery:
function calculate() {
var arr = $.map($('input:checkbox:checked'), function(e, i) {
return +e.value;
});
$.ajax({
url: '/company/test.php',
data: {key: arr, i: 1},
type: 'post',
success: function(output) {
obj = JSON.parse(output);
console.log(obj);
// Don't know where to go next
}
});
}
calculate();
$("div[class='col-md-12'").delegate("input:checkbox[name='category[]']", 'click', calculate);
PHP:
<?php
require_once '../core/init.php';
$v = new Vacatures();
if(isset($_POST['key']) && isset($_POST['i']) && !empty($_POST['key'])) {
$key = $_POST['key'];
$i = $_POST['i'];
$vacs = $v->getFiltered($key, $i);
echo json_encode($v->data());
exit();
}
require_once VIEW_ROOT . '/company/test_view.php';
UPDATE (Content of obj)
[Object]0: Objectcategory: "1"company: "c1"content: "test"foto: "test"id: "2"region: ""title: "Test"__proto__: Objectlength: 1__proto__: Array[0]
Something like
$('body').append('<div><ul id="output"></ul></div>');
obj.data.forEach(function(x) {
$('#output').append("<li>"+x+"</li>");
});
Edit:
was some typo in there
forEach or $.each works only on json arrays, so you have to look whats inside your obj
I fixed it using the following AJAX call:
$.ajax({
url: '/company/test.php',
data: {key: arr, i: 1},
type: 'post',
dataType: "json",
success: function(output) {
$.each(output, function(key, element) {
$('#output').append("<li>"+element.title+"</li>");
});
}
});

Failed to process checkbox values with AJAX in PHP

I have an HTML form with text, radio and checkbox inputs. When I submit it with AJAX, I only get the last checkbox value in array.
My HTML file:
<form class="ajaxonsubmit" action="process.php" method="post">
<label>Name</label><input type="text" name="name">
<label>Father's Name</label><input type="text" name="father_name">
<label>Gender</label>
<input type="radio" value="1" name="gender">Male <br>
<input type="radio" value="2" name="gender">Female <br>
<label>Options</label>
<select name="campus">
<option value="1">Option1 </option>
<option value="2">Option2 </option>
</select>
<label>Check List</label>
<input type="checkbox" name="check[]" value="1">
<input type="checkbox" name="check[]" value="2">
<input type="checkbox" name="check[]" value="3">
<button name="submit" type="submit">Submit</button>
My JS file.
$('.ajaxonsubmit').on('submit', function() {
var that = $(this),
url = that.attr('action'),
type = that.attr('method'),
data = {};
that.find('[name]').each(function(index, value) {
var that = $(this),
name = that.attr('name'),
value = that.val();
data[name] = value;
});
$.ajax({
url: url,
type: type,
data: data,
success: function(data) {
$("#wrap").html(data);
}
});
return false;
});
I am using var_dump($_POST); function in process.php to check the array and I get ["check"]=> array(1) { [0]=> string(1) "3" }
You can serialize the form data , and access in PHP side
$('.ajaxonsubmit').on('submit', function(e) {
e.preventdefault();
$.ajax({
url: url,
type: type,
data: $(this).serialize(),
success: function(data) {
$("#wrap").html(data);
}
});
});
in PHP
print_r($_POST);
Add class="checkBoxClass" to your checkbox,
Then in your js, just add the following code to add the data into your chkArray
var chkArray = [];
$(".checkBoxClass:checked").each(function() {
chkArray.push($(this).val());
});
Finally append the array to the data you are posting
Cheers.

get an id of a specific form within several form on the same page (jquery)

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*/
...
}
}

Submiting form with jquery

I have a form and I need to add some data from database before submiting it.
My html code is:
<form action="https://91.199.226.106/services/authorize.php" id="arca" method="POST">
<input type="hidden" name="hostID" id="hostID"/>
<input type="hidden" name="mid" id="mid" />
<input type="hidden" name="tid" id="tid" />
<input type="hidden" name="additionalURL" id="additionalURL" />
<input type="hidden" name="orderID" id="orderID" />
<input type="hidden" name="currency" id="currency" />
<input type="hidden" name="opaque" />
amount<input type="text" name="amount" id="amount" value="" /><br>
<input type="submit" value="submit" />
</form>
<div id="script_area"></div>
<div id="error_area"></div>
And I have an event handler for form submit. Here is the code:
$("#arca").submit(function(e){
e.preventDefault();
var data="amount="+$("#amount").val()+"&&lang=eng";
$.ajax({
url: "ajax/get_arca_submit_params.php",
type: "POST",
data: data,
cache: false,
success: function (html) {
var splited=html.split("|",2);
if(splited[0]=="0")
{
$("#error_area").html(splited[1]);
}
else
{
$("#script_area").html(splited[1]);
$("#arca").submit();
//alert("aaaaa");
}
}
});
});
The PHP returns
"0|error message" or "1|script that sets fields values" that I place
in the div with id="script_area"
. The problem is that $("#arca").submit(); line ceeps on submiting the form on and on. How can I solve this problem? Thanks for help.
Replace $("#arca").submit(); with $("#arca")[0].submit();. This way you are calling the submit event on the underlying DOM element which won't trigger your callback and avoid the infinite loop.
You could change to bind a click event to submit button instead.
$("#arca").find('input[type="submit"]').click(function (e) {
e.preventDefault();
var data = "amount=" + $("#amount").val() + "&&lang=eng";
$.ajax({
url: "ajax/get_arca_submit_params.php",
type: "POST",
data: data,
cache: false,
success: function (html) {
var splited = html.split("|", 2);
if (splited[0] == "0") {
$("#error_area").html(splited[1]);
} else {
$("#script_area").html(splited[1]);
$("#arca").submit();
//alert("aaaaa");
}
}
});
});

Categories