Here is the Mailchimp shortcode used in the Wordpress:
Here is the code →
<div class="email-button-one-line">
<input type="text" name="email" id="email-<?php echo $random?>" value="" class="field-email-oneline" placeholder="<?php _e('Your Email Address', 'charito');?>"/><input type="submit" class="button field-email-button" name="mailchimp_submit" id="mailchimp_submit-<?php echo $random?>" value="<?php _e("Subscribe", 'charito');?>" />
<div class="clearfix"></div>
</div>
<script>
jQuery.noConflict();
jQuery(document).ready(function()
{
jQuery('#mailchimp_submit-<?php echo $random?>').click(function()
{
jQuery('#process-<?php echo $random?>').css('display','block');
var datastring = '&name=' + escape(jQuery('#name-<?php echo $random?>').val()) + '&email=' + escape(jQuery('#email-<?php echo $random?>').val()) + '&api_key=<?php echo get_theme_mod('blogeto_mailchimp_api_key');?>&list_id=<?php echo get_theme_mod('blogeto_mailchimp_list_id');?>';
jQuery.ajax({
url: '<?php echo rest_url('/mc/rest/pchimp/');?>',
data: datastring,
success: function(msg)
{
jQuery('#process-<?php echo $random?>').css('display','none');
jQuery('#newsletter_msg-<?php echo $random?>').html(msg);
},
error: function(msg)
{
jQuery('#process-<?php echo $random?>').css('display','none');
jQuery('#newsletter_msg-<?php echo $random?>').html(msg);
}
});
return false;
});
});
</script>
Issue→
This code portion is an issue to be discussed:
<input type="submit" class="button field-email-button" name="mailchimp_submit" id="mailchimp_submit-<?php echo $random?>" value="<?php _e("Subscribe", 'charito');?>" />
I wish to change this to button, but as soon as I do this →
<button type="submit" class="button field-email-button" name="mailchimp_submit" id="mailchimp_submit-<?php echo $random?>" value="<?php _e("Subscribe", 'charito');?>" /> <i class="fa fa-envelope" aria-hidden="true"> </i> Subscribe </button>
It stops working.
You might argue why button?
Reason →
there are various other options such as Aweber, Feedburner etc; in
total 7 and the CSS IS wrote in such a way to use the button
secondly, I have to also use this : <i class="fa fa-envelope" aria-hidden="true"> </i> Subscribe which is not possible in <input>
when I change the input to button why it doesn't work, and what is the fix?
Related
I create a form with hidden input forms that submit the value to a PHP script and store each value in an array of sessions by reloading the page with AJAX. It returns an HTML success alert message to <p id ="msg"></p>. I need help on how to send $count to <p id="count"></p> and success alert message to <p id ="msg"></p> at the point of success: in AJAX. And also I will like the success alert to disappear after 3 seconds of the display. Below is my code:
my_add_cart.php
<?php
session_start();
$_SESSION['title'][]=$_POST['title'];
$_SESSION['price'][]=$_POST['price'];
$_SESSION['img_src'][]=$_POST['img_src'];
$count = count($_SESSION["title"]);
echo $count;
echo '<div class="alert">
<span class="closebtn" onclick="this.parentElement.style.display=\'none\';">×</span>
<center>Product added successfully to cart.</center>
</div>';
exit();
?>
Above is my_add_cart.php and below is my HTML and javascript:
<script type="text/javascript">
function clickButton(){
var title=document.getElementById('title').value;
var price=document.getElementById('price').value;
var img_src=document.getElementById('img_src').value;
$.ajax({
type:"post",
url:"my_add_cart.php",
data:
{
'title' :title,
'price' :price,
'img_src' :img_src
},
cache:false,
success: function (html)
{
$('#msg').html(html);
}
});
return false;
}
</script>
<html>
<p id="msg"></p>
<p id="count"></p>
<form onsubmit="clickButton()">
<input type="hidden" value="<? echo $title ?>" name = "title" id="title" >
<input type="hidden" value="<? echo number_format($price); ?>" name = "price" id="price" >
<input type="hidden" value="<? echo "https://mikeandcathy.com.ng/admin/UploadFolder/".$row_product_img[0]; ?>" name = "img_src" id="img_src">
<button type="submit" id="add_to_cart" name="add_to_cart" class="btn btn-outline-secondary btn-sm" value="Add to cart" onclick="return clickButton();">Add Cart</button>
</form>
</html>
I Suggest turning your server code into a json api
Solution
change my_add_cart.php to this
<?php
session_start();
$_SESSION['title'][]=$_POST['title'];
$_SESSION['price'][]=$_POST['price'];
$_SESSION['img_src'][]=$_POST['img_src'];
$count = count($_SESSION["title"]);
header('Content-Type: application/json; charset=utf-8');
echo json_encode(
[
'count' => $count,
'message' => '<div class="alert"><span class="closebtn" onclick="this.parentElement.style.display=\'none\';">×</span> <center>Product added successfully to cart.</center></div>';
]
);
exit();
?>
change your frontend code to this
<script type="text/javascript">
function clickButton(){
var title=document.getElementById('title').value;
var price=document.getElementById('price').value;
var img_src=document.getElementById('img_src').value;
$.ajax({
type:"post",
url:"my_add_cart.php",
data:
{
'title' :title,
'price' :price,
'img_src' :img_src
},
cache:false,
success: function (data)
{
$('#msg').html(data['message']);
$('#count').html(data['count']);
}
});
return false;
}
</script>
<html>
<p id="msg"></p>
<p id="count"></p>
<form onsubmit="clickButton()">
<input type="hidden" value="<? echo $title ?>" name = "title" id="title" >
<input type="hidden" value="<? echo number_format($price); ?>" name = "price" id="price" >
<input type="hidden" value="<? echo "https://mikeandcathy.com.ng/admin/UploadFolder/".$row_product_img[0]; ?>" name = "img_src" id="img_src">
<button type="submit" id="add_to_cart" name="add_to_cart" class="btn btn-outline-secondary btn-sm" value="Add to cart" onclick="return clickButton();">Add Cart</button>
</form>
</html>
-when i update with ajax , he changed but he only took to 'id' not the new variable
But I want to insert my E-Mail to database through Ajax. I don't want my page to get redirected, because every time the page got refreshed, null value got inserted to the database..
1)and ajax
function editdata(str){
var id= str;
var name = $('#nameofequipe-'+str).val();
$.ajax({
type:"post",
url: "<?php echo API;?>equipe/update.php",
data:"nameofequipe="+name+"&id="+id,
success:function(data){
alert('success update data ');}
2)and modal bootstrap
<div
class="modal fade"
id="edit-<?php echo $row['id']; ?>"
role="dialog"
aria-labelledby="updatelLabel-<?php echo $row['id']; ?>
<input
type="hidden"
id="<?php echo $row['id']; ?>"
value="<?php echo $row['id']; ?>" >
<input
type="text"
class="form-control"
id="nameofequipe-<?php echo $row['id']; ?>"
value="<?php echo $row['equipe']; ?>">
if somoene know how i can do This can He help me
//use this in script section
function editdata(str){
var id= str;
var name = $('#nameofequipe-'+str).val();
$.ajax({
dataType: "json",
type:"post",
url: "<?php echo API;?>equipe/update.php",
data:"{nameofequipe:"+name+",id:"+id+"}",
success:function(data){
alert('success update data ');
}
//whereas this one in your PHP file where you use this data nameOfEquipe and Id to update you database.
if(isset($_POST['nameofequipe'], $_POST['id']) {
$nameOfEquip=$_POST['nameofequipe'];
$id=$_POST['id'];
}
This Is all code
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button>
</div>
<form>
<div class="modal-body">
<input type="hidden" id="<?php echo $row['id']; ?>" value="<?php echo $row['id']; ?>" >
<input type="text" class="form-control" name="nameofequipe-<?php echo $row['id']; ?>" value="<?php echo $row['equipe']; ?>">
</div>
<button type="submit" onclick='editdata(<?php echo $row['id']; ?>)' class="btn btn-primary">Save changes</button>
</div>
</form>
ajax and js
function editdata(str)
{
var id= str;
var name= $('#nameofequipe-'+str).val();
$.ajax ({
type:"post",
url: "<?php echo API;?>equipe/update.php",
data:"nameofequipe="+name+"&id="+id,
success: function(data){
alert("Data Save: " + data);
}
}); }
update. PHP
$id = $_POST['id'];
$name=$_POST['nameofequipe'];
$result = $o->SelectQuery("UPDATE rh_equipes SET equipe='$name' WHERE id='$id'");
if($result){
echo 'data update';
}
I need some help. I have a page where I display database records as a bootstrap button pill in a display div. I also have an Ajax Submit input that saves new records to the database and dynamically creates a button pill for the new record using the db record id for the button id. The jQuery below allows me to click on the new dynamically created button but it always displays ID = 1 and not the ID shown in view source.
Can someone please explain what I am doing wrong here?
Code of Button Pills created from PHP:
<div class="row">
<div class="col-md-8 col-sm-10 mx-auto mb-3">
<div class="decision-box">
<div class="decision-icon bg-orange-grad"><img src="../assets/img/logos/Sparck-Logo-Icon-Lg-White.png" alt="Sparck-Logo-Icon-Lg" width="40" height="40" /></div>
<div class="decision-text">
<form id="accolorform">
<input type="hidden" name="action" value="colorsave">
<input type="hidden" name="interesttype" value="Favorite Color">
<input type="hidden" name="userid" value="<?php echo $_SESSION['userid']; ?>">
Favorite Color:
<input type="text" class="form-control-inline col-auto no-border no-shadow" id="ac_color" name="interest" placeholder="Type something" autocomplete="off" style="min-width: 200px;">
<span class="float-right" style="margin-right: 15px;">
<button type="submit" class="btn btn-light" id="colorbtn">Add</button>
</span>
</form>
</div>
</div>
<div id="color_pills">
<?php if(!empty($resultlist) && isset($resultlist)){
foreach($resultlist as $r){
if($r['interesttype'] = "Favorite Color"){ ?>
<button id="btn<?php echo $r['id']; ?>" class="btnpill" title="Are you sure you want to delete <?php echo $r['interest']; ?>?"><?php echo $r['interest']; ?> <i id="<?php echo $r['id']; ?>" class="fal fa-minus-circle delete"></i></button>
<?php }
}
}?>
</div>
</div>
</div>
Code of jQuery aJax that creates dynamic button
$("#accolorform").validate({
rules: {
ac_color: {
required: true
}
},
messages: {
ac_color: {
required: 'Please select a Color'
}
},
submitHandler: function(form) {
$.ajax({
type: "POST",
url: "ajaxsubmit.php",
data: $(form).serialize(),
success: function(id){
//alert("Color Added");
var name = $("#ac_color").val();
var newpill = '<button id="btn'+id+'" class="btnpill" title="Are you sure you want to delete '+name+'?">'+name+' <i id="'+id+'" class="fal fa-minus-circle delete"></i></button>';
$("#color_pills").append(newpill);
$("#accolorform")[0].reset();
},
error: function(){
alert("Error");
}
});
}
});
Code of Ajax Delete where I am trying to grab dynamic button id:
$(document).on('click', '.delete', function(){
var id = $(this).attr('id');
var title = $('#btn'+id).attr('title');
var string = 'source=interests&id='+ id ;
if (confirm(title)) {
$.ajax({
type: "POST",
url: "ajaxdelete.php",
data: string,
cache: false,
success: function(){
$('#btn'+id).remove();
}
});
}
return false;
});
The above code looks like it should work and view source shows a button tag that is formatted like the ones created by PHP that work perfectly.
I appreciate any help!
hi guys i am trying to get a button id that is in a for loop so whenever the button click the unique id that can be differentiated from other ids should be able to work. let me show you my code.
<?php foreach ($message as $key ) : ?>
<?php echo $senders_user_id=$key['senders_id']; ?>
<div class="senders_id" S_id="<?php echo $key['senders_id']; ?>" style="display: none;"></div>
<a class="list-group-item">
<div class="checkbox">
<label>
<?php echo form_open(,['id'=>'sender_user_id']); ?>
<input type="checkbox">
<button id="senders_id" class="Read" S_id="<?php echo $key['senders_id'];?>" onclick="readbyuser($senders_user_id);">Read</button>
<button id="senders_id" class="unread" S_id="<?php echo $key['senders_id'];?>" onclick="unreadbyuser($senders_user_id);">Unread</button>
</label>
</div>
<span class="glyphicon glyphicon-star-empty"></span><span class="name" style="min-width: 120px;
display: inline-block;"><?php echo $key['uname']; ?></span> <span class=""><?php echo $key['textdata']; ?></span>
<span class="text-muted" style="font-size: 11px;"></span> <span class="badge">12:10 AM</span> <span class="pull-right"><span class="glyphicon glyphicon-paperclip">
<?php echo form_close(); ?>
</span></span></a>
<?php endforeach; ?>
</div>
Now here there are three post meaning three 'senders_id' so when i click on button Read the id of that should pass but the same id is passing again and again no matter which button i click on
Here is my code
function readbyuser()
{
var senders_id=$('#senders_id').attr('S_id');
var Recievers_id=$('.Recievers_id').attr('R_id');
jQuery.ajax({
type:'post',
url:'<?php echo base_url("user/read_by_user"); ?>',
data:{id:senders_id,R_id:Recievers_id},
dataType:'json',
success:function(data)
{
console.log(data);
alert(data);
$('.unread').removeClass('unread_user');
$('.Read').addClass('read_user');
}
});
}
function unreadbyuser()
{
var senders_id=$('#senders_id').attr('S_id');
var Recievers_id=$('.Recievers_id').attr('R_id');
jQuery.ajax({
type:'post',
url:'<?php echo base_url("user/unread_by_user"); ?>',
data:{id:senders_id,R_id:Recievers_id},
dataType:'json',
success:function(data)
{
$('.Read').removeClass('read_user');
$('.unread').addClass('unread_user');
}
});
}
please tell me what i am doing wrong
<button id="senders_id" class="Read" S_id="<?php echo $key['senders_id'];?>" onclick="readbyuser($senders_user_id);">Read</button>
<button id="senders_id" class="unread" S_id="<?php echo $key['senders_id'];?>" onclick="unreadbyuser($senders_user_id);">Unread</button>
Two elements cannot have samei id. Use class name instead.
Also you can pass PHP values directly in this.
onclick="readbyuser($senders_user_id);"
as
onclick="readbyuser(<?php echo $key['senders_id'];?>);"
I have a form that has a text field that is a required entry for one(1) of my two(2) buttons. The first(1st) button applies a code, in the text field, to the products in the cart section of my store. The second(2nd) removes all codes from all products in the cart section.
What's the best way of going about this?
Thx.
<div id="cart-coupon-menu" class="coupon-menu-hide">
<form id="discount-coupon-form" action="<?php echo $this->getUrl('checkout/cart/couponPost') ?>" method="post">
<div class="discount">
<div class="discount-form">
<input type="hidden" name="remove" id="remove-coupone" value="0" />
<div class="input-box">
<input class="input-text" id="coupon_code" name="coupon_code" value="<?php echo $this->escapeHtml($this->getCouponCode()) ?>" placeholder="Enter a Coupon or Promo Code" autocomplete="off"/>
</div>
<div class="buttons-set">
<button type="button" title="<?php echo $this->__('Apply Coupon') ?>" class="button" onclick="discountForm.submit(false)" value="<?php echo $this->__('Apply Coupon') ?>"><span><span><?php echo $this->__('Apply Coupon') ?></span></span></button>
<button type="button" title="<?php echo $this->__('Cancel Coupon') ?>" class="button" onclick="discountForm.submit(true)" value="<?php echo $this->__('Cancel Coupon') ?>"><span><span><?php echo $this->__('Cancel Coupon') ?></span></span></button>
</div>
</div>
</div>
</form>
</div>
The above form will be serialized and set to a controller via AJAX and an appropriate response will be returned.
When the input box is null I want the input box to act as a required field and disallow submission via the first button. However, when it is null the second button should still allow for submission. When text is entered into the input box they both behave normally.
Currently i'm attempting to do something like this:
<script type="text/javascript">
//<![CDATA[
var discountForm = new VarienForm('discount-coupon-form');
discountForm.submit = function (isRemove) {
if (isRemove) {
$('coupon_code').removeClassName('required-entry');
$('remove-coupone').value = "1";
} else {
$('coupon_code').addClassName('required-entry');
$('remove-coupone').value = "0";
}
if(something where I identify if it is required and the field is null){return null;}
else{continue with ajax call;}
I think it's just a simple javascript something like:
<button type="button" title="<?php echo $this->__('Apply Coupon') ?>" class="button" onclick="isValid() ? discountForm.submit(false) : handleInvalid()" value="<?php echo $this->__('Apply Coupon') ?>"><span><span><?php echo $this->__('Apply Coupon') ?></span></span></button>
I used a ternary operator in there... so basically it says if isValid() returns true, execute: discountForm.submit(false) otherwise execute: handleInvalid().
Then the javascript functions would be:
function isValid() {
var couponCode = document.getElementById('coupon_code').value;
return /* whatever logic you want here... */
}
function handleInvalid() {
// do whatever you want to the coupon_code input to indicate it's required and pop up an error message
alert("Please enter a coupon code!");
}
You should give knockout a try. It updates your view(html) according to changes in your js code. See this example.