How to compare values and show the output after making the selection on checkbox? I am using jQuery to do it. After selection had been made, it will not show the output. It will just show for first click only. Then, if we click again, the output will not be changed. Below is my code written so far,
jQuery
$("input:checkbox").on('click', function() {
var $box = $(this),
$price = $( "input[name='price_range']:checked").val(),
$nama_pemohon = "<?php echo $nama_pemohon; ?>",
$submited_id = <?php echo $submited_id; ?>,
$jawatan_pemohon = "<?php echo $jawatan_pemohon; ?>",
$jabatan_pemohon = "<?php echo $jabatan_pemohon; ?>",
$submited_by = <?php echo $submited_by; ?>,
$nama = "<?php echo $nama; ?>",
$jawatan = "<?php echo $jawatan; ?>",
$jabatan = "<?php echo $jabatan; ?>";
if($price == "< RM 10,000"){
$("#submited_by option").val($submited_by).text($nama);
$("#jawatan_pemohon").text($jawatan);
$("#jabatan_pemohon").text($jabatan);
} else {
$("#submited_by option").val($submited_id).text($nama_pemohon);
$("#jawatan_pemohon").text($jawatan_pemohon);
$("#jabatan_pemohon").text($jabatan_pemohon);
}
});
HTML
<input type="checkbox" name="price_range" value="< RM 10,000" class="checker"> < RM 10,000.00
<input type="checkbox" name="price_range" value="< RM 200,000" class="checker"> < RM 200,000.00
<select name="submited_by" id="submited_by">
<option value="<?php echo $submited_by; ?>"><?php echo $nama;?></option>
</select>
As you can see in this fiddle, you get change on every click on first checkbox, but only first time on second checkbox.
This is because of your logic in:
if($price == "< RM 10,000"){
$("#submited_by option").val($submited_by).text($nama);
$("#jawatan_pemohon").text($jawatan);
$("#jabatan_pemohon").text($jabatan);
} else {
$("#submited_by option").val($submited_id).text($nama_pemohon);
$("#jawatan_pemohon").text($jawatan_pemohon);
$("#jabatan_pemohon").text($jabatan_pemohon);
}
Example a:
click on first checkbox -> option changes to "nama", because it comes into if.
click on any checkbox -> option changes to "pemohon", because it comes into else.
Example b:
click on second checkbox -> option changes to "pemohon", because it comes into else.
click on second checkbox again -> option doesn't change, because it comes into else again.
I think that you should create a "global" variable outside of your jQuery function.
var clicked = false;
$("input:checkbox").on('click', function() {
if(!clicked) {
var $box = $(this),
$price = $( "input[name='price_range']:checked").val(),
$nama_pemohon = "<?php echo $nama_pemohon; ?>",
$submited_id = <?php echo $submited_id; ?>,
$jawatan_pemohon = "<?php echo $jawatan_pemohon; ?>",
$jabatan_pemohon = "<?php echo $jabatan_pemohon; ?>",
$submited_by = <?php echo $submited_by; ?>,
$nama = "<?php echo $nama; ?>",
$jawatan = "<?php echo $jawatan; ?>",
$jabatan = "<?php echo $jabatan; ?>";
if($price == "< RM 10,000"){
$("#submited_by option").val($submited_by).text($nama);
$("#jawatan_pemohon").text($jawatan);
$("#jabatan_pemohon").text($jabatan);
} else {
$("#submited_by option").val($submited_id).text($nama_pemohon);
$("#jawatan_pemohon").text($jawatan_pemohon);
$("#jabatan_pemohon").text($jabatan_pemohon);
}
clicked = true;
}
});
Related
I used this select which show counteries
<section class="shipping-calculator-form-shortcode" >
<p class="form-row form-row-wide" id="calc_shipping_country_field">
<label >Shipping options to</label>
<select onchange="myFunctionShipping(this)" name="calc_shipping_country" id="calc_shipping_country" class="ss-woo-shipping-calculator" rel="ss-woo-shipping-calculator">
<option value="1"><?php _e( 'Select a country…', 'woocommerce' ); ?></option>
<?php
foreach ( WC()->countries->get_shipping_countries() as $key => $value )
echo '<option value="' . esc_attr( $key ) . '"' . selected( WC()->customer->get_shipping_country(), esc_attr( $key ), false ) . '>' . esc_html( $value ) . '</option>';
?>
</select>
</p>
<span id="ss-woo-shipping-calculator-loading" style="display:none"><img src='<?php echo plugins_url( '/default.gif', __FILE__ ) ?>' /></span>
</p>
<?php wp_nonce_field( 'woocommerce-cart' ); ?>
<div id="ss-woo-shipping-result">
</div>
</section>
then by javascript code to retrieve the shipping options for it
<script type="text/javascript">
var $s = jQuery.noConflict();
function myFunctionShipping(item) {
$s(document).ready(function($) {
$("select").change(function(){
var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
var country = item.value;
$("#ss-woo-shipping-calculator-loading").show();
var data = {'action': 'ss_woo_shipping_calculator','country': country};
$.post("<?php echo get_home_url(); ?>", data, function(response) {
$("#ss-woo-shipping-calculator-loading").hide();
response = JSON.parse(response);
if(response.result == 1){
$("#ss-woo-shipping-result").html(response.message);
}else{
$("#ss-woo-shipping-result").html("");
}
return false;
});
return false;});
});
}
the problem that:- it trigger if also any other select control changed
also it is only trigger after changing the selection twice (after page loading)
It "says" that action apply to any select $("select").change(). You can change to limit action only to select with chosen id like
$("#calc_shipping_country").change(function()
or you can choose to use select class name.
EDIT.
My mistake, I didnt figure out that the action is called by function and not select action. Try to remove completely the $("select").change(function() wrap and make look something like this
<script type="text/javascript">
var $s = jQuery.noConflict();
function myFunctionShipping(item) {
$s(document).ready(function($) {
var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
var country = item.value;
$("#ss-woo-shipping-calculator-loading").show();
var data = {'action': 'ss_woo_shipping_calculator','country': country};
$.post("<?php echo get_home_url(); ?>", data, function(response) {
$("#ss-woo-shipping-calculator-loading").hide();
response = JSON.parse(response);
if(response.result == 1){
$("#ss-woo-shipping-result").html(response.message);
}else{
$("#ss-woo-shipping-result").html("");
}
return false;
});
return false;
});
}
</script>
I check if the user is logged in with, if they are then i pull their details from the database, i then want to auto fill this data into part of my form.
while(OCIFetch($stmt)) {
if(OCIResult($stmt,"PASSWORD")==$Password) {
$flag=true;
$First=OCIResult($stmt,"FIRSTNAME");
$Sur=OCIResult($stmt,"SURNAME");
$Email=OCIResult($stmt,"EMAIL");
$Phone=OCIResult($stmt,"PHONE");
$Address=OCIResult($stmt,"ADDRESS");
$City=OCIResult($stmt, "CITY");
$Post=OCIResult($stmt, "POSTCODE");
//set up session - Declare session variables and assign their corresponding values
session_start();
$_SESSION['RegUser'] = OCIResult($stmt,"USERNAME");
$_SESSION['RegFirst'] = $First;
$_SESSION['RegSur'] = $Sur;
$_SESSION['RegEmail'] = $Email;
$_SESSION['RegPhone'] = $Phone;
$_SESSION['RegAdd'] = $Address;
$_SESSION['RegCity'] = $City;
$_SESSION['RegPost'] = $Post;
}
This is the code im currently attempting to use to auto fill but the fields still appear blank
//Autofill the details if the user is logged in
window.onload = function() {
document.forms['Order']['RegFirst'].value = "<?php echo $First?>";
document.forms['Order']['RegSur'].value = "<?php echo $Sur?>";
document.forms['Order']['RegEmail'].value = "<?php echo $Email?>";
document.forms['Order']['RegPhone'].value = "<?php echo $Phone?>";
document.forms['Order']['RegAdd'].value = "<?php echo $Address?>";
document.forms['Order']['RegCity'].value = "<?php echo $City?>";
document.forms['Order']['RegPost'].value = "<?php echo $Post?>";
}
You don't need javascript for this, just echo the values into your html form fields
<input id="example" value="<?php echo $Post?>" />
Rinse and repeat for all other form fields.
Try this,
//Autofill the details if the user is logged in
window.onload = function() {
document.forms['Order']['RegFirst'].value = "<?php echo $_SESSION['RegFirst'];?>";
document.forms['Order']['RegSur'].value = "<?php echo $_SESSION['RegSur'];?>";
document.forms['Order']['RegEmail'].value = "<?php echo $_SESSION['RegPhone'];?>";
document.forms['Order']['RegPhone'].value = "<?php echo $_SESSION['RegPhone'];?>";
document.forms['Order']['RegAdd'].value = "<?php echo $_SESSION['RegAdd'];?>";
document.forms['Order']['RegCity'].value = "<?php echo$_SESSION['RegCity'];?>";
document.forms['Order']['RegPost'].value = "<?php echo $_SESSION['RegPost'];?>";
}
Hello friends this i am facing some problem...I have multiple check boxes and by selecting each check box i am inserting the users details to database by Ajax. the records records are inserting to database but my problem is that , suppose i have 5 users in the page, suppose i am selecting the 3 user check boxes and submit , and if the insertion succeed then i want that the 3 selected users will not shown on page. i use Google many tips but can't solve the problem.
//this is the menu.php
<li class="invitetab"><span>Invite</span></li>
$('.invitetab').one('click', function(){
var rp = '<?php echo $baseUrl ;?>/themes/gr-mist/pagemenu/parts/';
var v = '<?php echo $_GET['pageid'];?>';
var userid = '<?php echo $_SESSION['db_user_info']['id'] ?>';
$( document ).ready(function() {
$.ajax({
url: ""+rp+"invite.php?pageid="+v+"&userid="+userid,
type: 'POST',
beforeSend: function()
{
$("#loading_img").show();
},
success: function(data)
{
$("#loading_img").hide();
$("#Invite").append(data);
}
});
});
});
//And this is the invite.php
$('.gr-post-btn-submit').click(function(){ // when a feature button is selected
var rp = '<?php echo $config->baseUrl ;?>/themes/gr-mist/pagemenu/parts/';
var v = '<?php echo $_GET['pageid'];?>';
var userid = '<?php echo $user_id ?>';
var serialize = $('.abc').serialize(); // takes all the values of the filter
$.ajax({
type : 'POST',
url: ""+rp+"sendinv.php?pageid="+v+"&userid="+userid, // sends the values to ajax file
data : serialize,
beforeSend: function()
{
$("#loading_own").show();
$("#Invite").css({ opacity: 0.5 });
},
success: function(data)
{
$("#loading_own").hide();
$("#Invite").css({ opacity: 5.6 });
// $("#Invite").show();
//this is the portion where we have to do some thing to hide the inserting check boxes
}
});
});
<form method="post" class="abc" id="" name="inviteform"
enctype="multipart/form-data" action="#">
<?php
$sql = "select * from gr_user_friendships where toid=$user_id and status = 1";
$pagd = $_GET['pageid'];
$liked_users = $db->select($sql);
$count = 0;
for($i=0; $i<count($liked_users); $i++)
{
$extrct_fr = "select * from gr_page_likes where page_id=".$pagd." and receiver_id=".$liked_users[$i]['fromid'];
//echo $extrct_fr;
$frnd = $db->select($extrct_fr);
if(count($frnd)>0)
{
$invt = $db->select("select * from gr_user_friendships where toid=$user_id and fromid!=$frnd[0]['receiver_id']");
$invt_id = $invt[0]['fromid'];
}
else
{
$invt_id = $liked_users[$i]['fromid'];
}
if(!empty($invt_id))
$count = 1;
$user = "Select * from gr_users where id = $invt_id";
//echo $user;
$table = mysql_query($user);
$dbc = mysql_fetch_array($table);
$usid= $dbc['id'];
$bab = $dbc['name'];
$imgs = $dbc['avatar'];
$image_of_fr = $_SERVER['DOCUMENT_ROOT']."/uploads/users/".$usid."/profile/profile-pic/thumb/".$imgs;
$image_location_f = $config->baseUrl."/uploads/users/".$usid."/profile/profile-pic/thumb/".$imgs;
if(file_exists($image_of_fr))
{
$imgp = $image_location_f;
}
else
{
$imgp = $config->baseUrl."/themes/gr-mist/includes/images.jpg";
}
if(!empty($invt_id)){
?>
<style type="text/css">
#users_<?php echo $invt_id ?>
{
width:147px;
height:54px;
display:inline-block;
}
</style>
<input type="checkbox" class="checkbox1" id="gcc_<?php echo $invt_id ?>" name="pgliker[]" value="<?php echo $invt_id ?>"/>
<img width="30" height="30" src="<?php echo $imgp;?>"/>
<?php echo $bab; ?>
<?php
}
}//end of for
?>
<br>
<?php if($count){ ?>
<span style="color:blue; font-weight:bold;" >
<input type="checkbox" id="selecctall"/> Select All</span>
<input type="button" name="gr_submits" class="gr-post-btn-submit" value="invite" id="submits"/>
<?php } ?>
</form>
and this is the sendinv.php
global $db;
$myliker = $_POST['pgliker'];
$pageid = $_GET['pageid'];
$userid = $_GET['userid'];
foreach($myliker as $tps)
{
$sql = "Insert into gr_page_likes values('',$pageid,$userid,$tps,0)";
$db->insert($sql);
}
/**In you invite.php put the element which you want to hide after success
form submission into one div*//
//replace your one with this one.
<div id="gcc_<?php echo $invt_id ?>">
<input type="checkbox" class="checkbox1" name="pgliker[]" value="<?php echo $invt_id ?>"/>
<img width="30" height="30" src="<?php echo $imgp;?>"/>
<?php echo $bab; ?>
</div>
/**Now make an array in your sendinv.php and encode it with json incode***/
//replace your sendinv.php with this one.
$arr = array();
foreach($myliker as $tps)
{
$sql = "Insert into gr_page_likes values('',$pageid,$userid,$tps,0)";
$db->insert($sql);
$arr[] = $tps;
}
echo json_encode($arr);
exit;
/**After in your invite.php in the success block run
jquery foreach with the data and hide the checked boxes with the ids associted after submission. */
$.each( data, function( key, value ) {
// alert( key + ": " + value );
$("#gcc_"+value).hide();//the div for each checked user
});
I'm trying to echo javascript code using php and trying to retrieve data from my database within this very echo-code... Does anybody know what I'm doing wrong? Is it because javascript is only client-side? (Technically, I'm trying to reach the database with php...) I would appreciate some help!
<?php
if($condition == true){
//connect to the database
//-select the database to use
//-query the database table
//-run the query against the mysql query function
//-create while loop and loop through result set
echo "<script>
items_set = [
{
src : '<?php echo ".$row['imageURL']." ?>',
url : '<?php echo ".$row['URL']." ?>',
category: '<?php echo ".$row['DetailCategory']." ?>',
title : '<?php echo ".$row['Name']." ?>',
description : '<?php echo ".$row['Description']." ?>',
price : '<?php echo ".$row['Price']." ?>',
location : '<?php echo ".$row['Postcode']." ?>',
thirdparty : '<?php echo ".$row['ThirdParty']." ?>',
thirdparty_mobile : '<?php echo ".$row['Thirdparty']." ?>'
}
];
jQuery('#list').portfolio_addon({
load_count : 1,
items : items_set
});
</script>";
}}
?>
Thanks in advance!
(In Dreamweaver the colors of the code look right, unlike here)
Make sure you separate what gets executed in your server (PHP) and what is passed to the client and executed in the browser:
<?php if(condition == true){ ?>
<script>
items_set = [
{src : "<?php echo $row['imageURL']; ?>",
url : "<?php echo $row['URL']; ?>",
category: "<?php echo $row['DetailCategory']; ?>",
title : "<?php echo $row['Name']; ?>",
description : "<?php echo $row['Description']; ?>",
price : "<?php echo $row['Price']; ?>",
location : "<?php echo $row['Postcode']; ?>",
thirdparty : "<?php echo $row['ThirdParty']; ?>",
thirdparty_mobile : "<?php echo $row['Thirdparty']; ?>"}
];
jQuery('#list').portfolio_addon({
load_count : 1,
items : items_set
});
</script>
<?php } ?>
Notice I modified your code to make strings variables, given that the $row variable is part of your PHP code, not your JavaScript.
in your php:
//specify header..
header("content-type:application/json");
//create variables for your values
$row['values'];
//create oo array
arrayResult =
array(
array("variable-name" => $variable,"imageURL" => $imageURL)
);
In your html..
//get data using JSON
<script type="text/javascript">
$j.getJSON( "cellJson.php", function( json ) {
$j.each(json, function(i, item) {
//example
var imageURL = item.imageURL;
//then in your script
items_set = [
{
src : ''+imageURL+'',
url : ''+URL+'',
category: ''+DetailCategory+'',
title : ''+Name+''
}
];
jQuery('#list').portfolio_addon({
load_count : 1,
items : items_set
});
});
</script>
issue : i am able to set and get run time variable value ?
steps: onlick button random number,
expected output :alert pop in broswer and number should be shows inside alert .
<html>
<head>
<title>Pass variable from PHP to JavaScript - Cyberster's Blog'</title>
</head>
<body>
<input type="button" value="random number " onclick="location='php2js2.php'" />
<script>
// var js_var = "<?php echo $php_var; echo $randomString ?>";
//alert(js_var);
var js_var_key = "<?php echo $RandomString(6); ?>";
alert(js_var_key);
</script>
</body>
</html>
<?php
function RandomString($length) {
$keys = array_merge(range(0,9), range('a', 'z'));
for($i=0; $i < $length; $i++) {
$key .= $keys[array_rand($keys)];
}
return $key;
}
#$php_var = "Hello world from PHP";
#$length = 10;
#$randomString = substr(str_shuffle("0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"), 0, $length);
?>
==
You should not keep $ infront of RandomString..Please remove that and check and add this .. you will find the alert with a random number
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document ).ready(function() {
var js_var_key = "<?php echo RandomString(6); ?>";
alert(js_var_key);
});
</script>
var js_var_key = "<?php echo $RandomString(6); ?>";
change this line to (remove $)
var js_var_key = "<?php echo RandomString(6); ?>";
and add
$key="" before
for($i=0; $i < $length; $i++) {