Develop Reference

How to know when a message has been dismissed with php

I am adding announcements into my app which is basically a personal message to users. They recieve the message then if they dismissed it I want to stop showing that specific again.
this is my php
<? $the_ID = $res_announcement->formal_announcement_id; ?>
<form action method="POST">
<div class="fade in pi-alert-warning pi-no-margin-bottom hide_msg_announcement">
<div class="pi-section pi-row-sm hide_msg_announcement">
<p class="pi-weight-600 pi-no-margin-bottom hide_msg_announcement">
<i class="fa fa-exclamation-triangle pi-text-orange yellow blink_me" aria-hidden="true"></i>
<span class="pi-text-dark"><?= $content_body ?></span>
<?= $url_setup_pm ?>.
</p>
<div class=" pull-right checkbox checkbox-inline" style="margin-top: -16px;">
<input type="checkbox" class="hide_msg_announcement" name="hide_msg" id="hide_msg_announcement" value="yes">
<label class="pi-smaller-text pi-text-grey" for="hide_msg_announcement">dismiss</label>
</div>
</div>
</div>
</form>
then I am hiding it with Jquery but i dont know how to store this specific messages ID or how get it from anywhere. I tried passing php variables but always gets null. I need a way to store the messages ID so I know not to display that message again to the user
jQuery('body').on('change', '.hide_msg_announcement', function(e) {
jQuery(".hide_msg_announcement").hide();
if($(this).is(":checked")) {
$.ajax({
url: 'on_off.php',
dataType:'json',
async:true,
type: 'POST',
data: { strID:$(this)},
error: function(jqXHR, textStatus, errorThrown){
}
});
}
});

Put $the_ID in the HTML so that jQuery can access it. You can use a data- attribute for this.
<input type="checkbox" class="hide_msg_announcement" name="hide_msg" id="hide_msg_announcement" data-msg="<?php echo $the_ID; ?>" value="yes">
Then jQUery can use:
data: {strID: $(this).data("msg");},

Reload Div when using multiple Rows but keeping element id

I have a set of records in a database and list them out in rows.
Each row has to be a unique element id so i achieved this as follows and this is inside the main loop.
#right<?php echo $row['Id']; ?> {
display: inline-block;
width:250px;
float:left;
text-align: left;
height:auto;
font-family:Arial;
font-size: 12px;
text-decoration: none;
}
Each record therefore has its own css as above.
I have a submit form button on each row whihc also uses unique <?php echo $row['Id']; ?> so each form has its own name as well.
I submit form and use ajax to make the current div reload so it changes color as row status changes.
The problem I have is once i have submitted this form once, it will then no longer submit a second time without loading the entire page , I assume this is something to do with the element id ?
here is the ajax
<script>
$(document).ready(function() {
$("#submit<?php echo $row['Id']; ?>").submit(function() {
var frm = $('#submit<?php echo $row['Id']; ?>');
$.ajax({
type: frm.attr('method'),
url: 'Update.php',
data: frm.serialize(),
success: function (data) {
$('#right<?php echo $row['Id']?>').load(' #right<?php echo $row['Id']?> ',function(){
$("#image<?php echo $row['Id']; ?>").show(); }
) ;
}, error: function(jqXHR, textStatus, errorThrown){
console.log(" The following error occured: "+ textStatus, errorThrown );
} });
return false;
});
});
</script>
This seems to work completely fine the first time i submite the div reloads and does as intended , its when you click it a second time.
Am i doing this completely the wrong way ?
I know i can do the submit button outside of the reloaded divs and then it keeps working but wanted to reload the entire div so i can change the buttons to other options etc.
Any help would be appreciated.
Here is the html/php
<div id="right<?php echo $row['Id']; ?>">
<form id="submit<?php echo $row['Id']; ?>" method="post" autocomplete="off">
<input type="hidden" value="<?php echo $row['Id']?>" name="id">
<input class="input-2" type="text" name="returnid" value="<?php echo $row['returnID']; ?>">
<input type="submit" name="submit-form" class="buttonSubmitHide" />
</form>
</div>

the code that you wrote is not gonna hide the #loading element after process.
i need to see your html code at first if its possible and if its impossible so you need to hide your #loading element when your process done and after that you will able to show it again.
How your code is work well at first time when loading is not hiding and its just showing?
if its'll be delete after load so you'll need to load #loading element too as well.

Put a class on every row and remove the id. Take advantage of the ability to get all elements which match a class, and hook the event to every element matching the class. Then use $(this).parent() in the function to get the row, and from there navigate to the children.
This is just a strategy to improve your code rather than a concrete answer, but if you follow this, it might be easier to reason about where your error is.
$(document).ready(function() {
$(".js-action").submit(function() {
var row = $(this).parent('.row');
$.ajax({
type: $(this).attr('method'),
url: 'Update.php',
data: $(this).serialize(),
success: function (data) {
row.find('.response-image').show();
},
error: function(jqXHR, textStatus, errorThrown){
console.log("The following error occured: "+textStatus,errorThrown);
}
});
});
<!-- this gets repeated a bunch of times. No need for ids -->
<div class="row">
<form class="response" method="post" autocomplete="off">
<input type="hidden" value="<?php echo $row['Id']?>" name="id">
<input class="input-2" type="text" name="returnid" value="<?php echo $row['returnID']; ?>">
<input type="submit" name="submit-form" class="buttonSubmitHide" />
</form>
</div>

Get value from input text in php without pressing Enter

Hay I'm new to php and I have made php code like this :
<?php
session_start();
echo 'Hellow Hisoka';
?>
<form name="form" method="post">
<div class="col-sm-3">
<label class:>Nama :</label>
</div>
<div class="col-sm-9">
<input type="text" name="nama_tamu" id='nama_tamu' class="form-control" placeholder="Nama Lengkap">
<?php
$myValue = $_POST['nama_tamu'];
?>
</div>
<br/><br/>
<?php
echo $myValue;
?>
</form>
When I want to show the echo message, I need to hit enter on my keyboard first in order to get the value of $_POST['nama_tamu'];. My question is can I get the value of nama_tamu input without pressing enter, or maybe without using POST or GET and then assign it to $myvalue?

You will need to use Javascript. You can use the Jquery events :
<script>
$( "#nama_tamu" ).keyup(function() {
alert( $this.val() );// alerting the value of the input field
});
</script>

Web development is all about communication. In this case, communication between two (2) parties, over the HTTP protocol:
The Server - This party is responsible for serving pages.
The Client - This party requests pages from the Server, and displays them to the user. In most cases, the client is a web browser.
Each side's programming, refers to code which runs at the specific machine, the server's or the client's.
You cannot get values without submitting for the user has not entered any yet. PHP is a server side language. To get values before submit and do certain actions with them you will need javascript (a client side programming language).
The simplest method to get a value is using the getElementById().
var something = document.getElementById('someid');
<input type="text" name="something" id="someid">
You can also use jQuery:
var something = $('#someid').val();
Conclusion
The simple answer to your question is: This is not possible.
Why not? I hear you asking. Because PHP doesn't know the values of your form before you send the form to your webserver.

Use keyup().
function check(id)
{
document.getElementById("result").innerHTML = id;
}
<input type="text" name="test" id="test" onkeyup="check(this.value);">
Your value: <span id="result"> </span>
$(document).ready(function() {
$("#check").keyup(function(){
alert($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="check" >

For this purpose you should use .keyup function/event. Following are the snippet :
$(document).ready(function () {
$("#nama_tamu").keyup(function(){
$("#enterdata").html($("#nama_tamu").val());
$.ajax({
type: 'POST',
url: "getdata.php",
data: "nama_tamu="+$("#nama_tamu").val(),
success: function(res)
{
$("#outputdata").html(res);
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<?php
session_start();
echo 'Hellow Hisoka';
?>
<form name="form" method="post">
<div class="col-sm-3">
<label class:>Nama :</label>
</div>
<div class="col-sm-9">
<input type="text" name="nama_tamu" id='nama_tamu' class="form-control" placeholder="Nama Lengkap">
<?php
$myValue = $_POST['nama_tamu'];
?>
<br> You press following character:<div id="enterdata"> </div>
</div>
<br/><br/>
<div id="outputdata"></div>
<?php
echo $myValue;
?>
</form>
Also create one file for the required output.
Now in getdata.php file
echo $nama_tamu=$_POST['nama_tamu'];

Refreshing div with AJAX

Index.php
...
<form id="calculator_form" name="form" action="" method="get" >
<input name="one" type="text">
<input name="two" type="text">
<input type="submit">
</form>
...
<!-- refresh area -->
<?php if(isset($_GET["one"])) { ?>
<div>
<?php echo $_GET["one"] . " " . $_GET["two"]; ?>
</div>
<?php } ?>
<------------------->
I would like to submit the form and reload the refresh area indicated above. I know this can be achieved by using AJAX but I'm not quite sure how.
I have tried putting the refresh area in a separate ajax.php file and using JQuery but it didn't work;
$(document).ready(function() {
$("#calculator_form").submit(function(event) {
event.preventDefault();
$("#divtoappend").load("ajax.php", data);
})
})
I've also tried using $.get() but to no avail.
I'm able to send the data back and forth to a seperate php page but I'm stuck trying to achieve what I am looking for.
EDIT:
The code that I posted was quickly written and the syntax isn't the issue in question, I'm merely wondering how I can refresh a <div> under the form so that it will once again do the if(isset($_GET["one"])) check and print the updated php variables.
EDIT 2:
My code is now as follows:
Index.php
...
<form id="calculator_form" name="form" action="" method="get" >
<input name="one" type="text">
<input name="two" type="text">
<input type="submit">
</form>
...
<div id="append">
<!-- where I want the ajax response to show -->
</div>
...
ajax.php
<?php if(isset($_GET["one"])) { ?>
<div>
<?php echo $_GET["one"] . " " . 4_GET["two"]; ?>
</div>
<!-- assume there's n number of divs -->
<?php } ?>
Now I want the ajax.php div to append to the #append div in index.php. There has to be a better way than altering the ajax.php and using echo:
ajax.php (with echo)
<?php
if(isset($_GET["one"])) {
echo "<div>". $_GET["one"] . " " . $_GET["two"] . "</div>";
}
?>
So, as ajax.php could be very large, is there a better solution than
just echoing data from ajax.php to index.php?

Now this can be done in many ways.. One of them is Following.. Try this:
Index.php file
<form method="get" id="calculator_form">
<input name="one" type="text" id="one">
<input name="two" type="text" id="two">
<input type="submit" name="submit">
</form>
<div class="result"></div>
<script type="text/javascript">
$(document).ready(function(){
$("#calculator_form").on('submit', function(event){
event.preventDefault();
var one = $('#one').val(); // Taking value of input one
var two = $('#two').val(); // Taking value of input two
$.get( "ajax.php", { one:one, two:two }). done( function( data ) {
$('.result').html(data); // Printing result into result class div
});
});
});
</script>
ajax.php
<?php if(isset($_GET["one"])) { ?>
<div>
<?php echo $_GET["one"] . " " . $_GET["two"]; ?>
</div>
<?php } ?>

Use this,
$(document).ready(function() {
$(document).on('submit',"#calculator_form",function(event) {
event.preventDefault();
$.get(
'ajax.php',
function(ret_data){
$("#divtoappend").html(ret_data);
}
);
});
}) ;
The original syntax for $.get is,
$.get(
URL,
{
VAR_NAME1:VAL1,
VAR_NAME2:VAL2
},
function(response){
// your action after ajax complete
}
);

Typo: You have accidentally used $(document).read( instead of $(document).ready(! That will stop your code running.
Note: jQuery has a handy shortcut for the document ready handler:
$(function(){
// your code here
});

I'm not sure if I understand the question correctly, but here is what you can do: Assign some ID or at least the css Class name to the target div and paint the stuff you are getting from AJAX response something like below.
$(document).ready(function() {
$("#calculator_form").submit(function(event) {
event.preventDefault();
$.ajax({
url: "Ajax_URL",
success: function(result) {
$("#targetDiv").html(result.one + " " + result.two); //assuming you have assigned ID to the target div.
}
});
})
})

jQuery two forms in same page - value change

I've a list of all my users in a table. The last td element will contain a form,
either a form for opening the account or a form for closing the account based on if the user
is already been closed or not. I'm using jQuery AJAX form plugin from http://malsup.com/jquery/form/ which is working.
What I'd like to do is the change the value of button before the form is been submitted.
Here's my JS for now:
$(document).ready(function() {
$('form').ajaxForm({
beforeSubmit: function() {
$('form').find('input').val('Wait...');
},
success: function(data) {
$('body').html(data);
}
});
return false;
});
and here's my HTML markup:
<td>
<?php if($user['closed'] == 0):?>
<?php $attributes = ['class' => 'account']; ?>
<?php echo form_open('admin/closeAccount', $attributes);?>
<input type="hidden" name="user_id" value="<?=$user['user_id']?>"/>
<input type="hidden" name="user_email" value="<?=$user['email']?>"/>
<input type="submit" name="close_account" class="btn btn-danger btn-sm" id="trigger" value="Close" >
<?php echo form_close();?>
<?php else:?>
<?php $attributes = ['class' => 'account'];?>
<?php echo form_open('admin/openAccount');?>
<input type="hidden" name="user_id" value="<?=$user['user_id']?>"/>
<input type="submit" data-loading-text="Odota..." name="open_account" class="btn btn-success btn-sm" id="trigger" value="Open" >
<?php echo form_close();?>
<?php endif ?>
</td>
The problem is that every time I try to submit the form, it will now change the value of all buttons to "Wait..." instead of just the one I clicked. I tried
to replace $('form') with $(this) in $('form').find('input').val('Wait...'); but that didn't help me at all.

According to the plugin documentation (http://malsup.com/jquery/form/#options-object)
$form passed to beforeSubmit callback should give you access to the current form being submitted.
try:
$('form').ajaxForm({
beforeSubmit: function(arr, $form, options) {
$form.find('.btn').val('Wait...');
},
success: function(data) {
$('body').html(data);
}
});

Just try this code
$('.btn').val('Wait...');
or
$('.btn-danger').val('Wait...');
or
$('.btn-sm').val('Wait...');

Try adding more specificity to your CSS selector. Inside your ajaxForm() call try this to change submit button value:
$(this).find('input[type="submit"]').val('Wait...');

If i understood you right you need just change your selector to - $('input[type="submit"]').
So it will be -
$('form').find('input[type="submit"]').val('Wait...');
Or
use :submit selector

Your button has an id, why aren't you using that selector?
$("#trigger").val("Wait...");
Is the form itself loaded via ajax? If so then delegate.
$(document).on("customevent", "#trigger", function() {
$(this).val("Wait...");
});
and then in the beforesubmit just $(document).trigger("customevent");