Develop Reference

What should i add to the following code so that it can save button value onclick in php variable and i will send it in the email

Actually, i making a form and have many buttons in the form so I want to know that how it can be done whether when I click the button during form submission it will store that button value and after click to the final submit button a mail will send all input field values including button values that I have clicked.
<script type="text/javascript">
$(document).ready(function() {
$('#frmemail').submit(function(event) {
$.ajax({
type: 'POST',
url: '',
data: $('#frmemail').serialize(),
success: function() {
$('.success').fadeIn(1000)
}
});
});
});
</script>
<?php
if (isset($_POST['garden']))
{
$but= $_POST['garden'];
}
?>
<?php
$name = $_POST['form_name'];
$email = $_POST['form_email'];
$message = $_POST['form_msg'];
$garden = $_POST['garden'];
$to = "admin#rsfcrm.com";
$subject = "RIA Emails";
$body = "Name: ".$name."\nEmail: ".$email."\nGarden".$but."\nMessage:".$message;
$headers = "From: ". $email;
if (mail($to,$subject,$body,$headers))
{echo "<script>window.alert('Successfull!');
</script>";
}else
{echo "<script>window.alert('Fialed');
</script>";
}?>
<div class="container">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<form enctype="multipart/form-data" id="frmemail" method="post" action="test2">
<fieldset class="margin-b">
<legend>Contact Me</legend>
<label for="form_name">Name:<input name="form_name" type="text" value="" required autofocus ></label>
<label for="form_email">Email:<input name="form_email" type="email" value=""></label>
<label for="form_msg">Message:<textarea name="form_msg" rows="5"></textarea></label>
</fieldset>
<button type="submit" id="garage" name="garden" value="gardening">button</button>
<input type="submit" name="submit" id="submit" value="Submit">
</form>
</section>
</div> </body>`

You can use jquery and hidden variable functionality.
like on first button click store value in hidden field and on second button click submit form. if you want code then i can paste here

<input type='hidden' name='garage_val' id='garage_val' value='' />
<script>
$("#garage").click(function(){
$("#garage_val").val($(this).val());
});
</script>

In your form add this input field
<input type='hidden' name='gardening' value='gardening' />
In your Php code
<?php
$gardening= $_POST['gardening'];
echo $gardening;
?>
Jquery
$('#frmemail').submit(function(event) {
$.ajax({
type: 'POST',
url: 'yourphpfilename.php',
data: $('#frmemail').serialize(),
success: function() {
alert(data)
}
});
});
No jquery click functions are required to do this,this value will be passed along with the form,hope this helps
(Or)
If you wish the value to be passed only on button click use this
Html
<input type='hidden' name='gardening' class="hidden"/>
Jquery
$("#garage").click(function(e)
{
e.preventDefault();
$('.hidden').val('gardening');
});

jquery onclick function not defined

I have an ajax script and I am trying to post from a function. I am using a onlick href but its not coming up as undefined. This is using wordpress. I have tried to move the code around inside and outside the scope but I still cant seem to get it to work.
<div id="live">
<div class="container">
<?php the_content(); ?>
<div id="comment-display">
<form method="post" action="index.php" id="comments_submit">
<input type="hidden" id="nameBox" value="<?php echo $_SESSION['name'] ?>" name="name"/>
<input type="hidden" id="emailBox" name="email" value="<?php echo $_SESSION['email']; ?>"/>
<textarea id="chatBox" placeholder="Ask a question or make a comment" name="comment" class="form-control"></textarea>
Submit Comment
</form>
<br />
<div id="displayComments"></div>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(function($) {
setInterval(function(){
$.ajax({
method: "GET",
url: "<?php echo get_template_directory_uri()?>/get_chat.php"
}).done(function(html){
$('#displayComments').html(html);
});
}, 2000);
function submitComment(){
$.ajax({
method: "POST",
url: "template-live.php",
data: {submitComment:$('#chatBox').val(),submitName:$('#nameBox').val(),submitEmail:$('#emailBox').val()}
}).done(function(html){
alert('Your comment has been submitted, and will be displayed after approval.');
$('#chatBox').val('');
});
}
});
</script>
Thank you :)

When you do javascript:submitComment() that's calling a the global function submitComment. Since the submitComment is defined in the jQuery(function($) { ... }) function, it is not a global. Therefore, window.submitComment is undefined (hence undefined is not a function).
The globals are stored in the window object.
Therefore, you can expose that submitComment as a global:
window.submitComment = function () {...}
Note that you should avoid using globals as much as possible. In this case you can do that by adding:
$("#submit").click(submitComment);
// In this case, you shouldn't declare submitComment as a global anymore
And since you are in a form, you want to stop the default browser behavior when clicking the a element, by using return false at the end of the function.

Alternatively to #Ionică Bizău's solution.
You could use onclick="submitComment()" instead of href.
<a onclick="submitComment()" type="submit" id="submit" name="submit" class="btn cardh-bg text-white text-bold margin-top-5"> Submit Comment </a>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="live">
<div class="container">
<?php the_content(); ?>
<div id="comment-display">
<form method="post" action="index.php" id="comments_submit">
<input type="hidden" id="nameBox" value="<?php echo $_SESSION['name'] ?>" name="name" />
<input type="hidden" id="emailBox" name="email" value="<?php echo $_SESSION['email']; ?>" />
<textarea id="chatBox" placeholder="Ask a question or make a comment" name="comment" class="form-control"></textarea>
<a onclick="submitComment()" type="submit" id="submit" name="submit" class="btn cardh-bg text-white text-bold margin-top-5"> Submit Comment </a>
</form>
<br />
<div id="displayComments"></div>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(function($) {
setInterval(function() {
$.ajax({
method: "GET",
url: "<?php echo get_template_directory_uri()?>/get_chat.php"
}).done(function(html) {
$('#displayComments').html(html);
});
}, 2000);
window.submitComment = function(){
console.log('submitComment called!');
$.ajax({
method: "POST",
url: "template-live.php",
data: {
submitComment: $('#chatBox').val(),
submitName: $('#nameBox').val(),
submitEmail: $('#emailBox').val()
}
}).done(function(html) {
alert('Your comment has been submitted, and will be displayed after approval.');
$('#chatBox').val('');
});
}
});
</script>

Return executable Javascript and html content with load()

It's my understanding that eval() is more than likely the best option. But in my inserttest.php page it's a mixture of html and javascript. Only the javascript doesn't work when page load is completed and the content is put into the #light Div.
So my question is..Is the below the best method. And how would I go about editing it to allow all content to return as is.
<script type="text/javascript">
$(document).ready(function(){
$("form#myform").submit(function(event){
$('#light').load('inserttest.php');
});
});
</script>
I saw in this thread [Run script tags loaded with ajax
eval($('#container script').html());
I believe this would only return the script and no html/
UPDATE - Output of insertest.php
<form id="myformshareid" method="POST" class="form_statusinput">
<input type="hidden" name="toid" id="toid" value="<? echo $user1_id ?>">
<input type="hidden" name="streamitem_con" id="streamitem_con" value='<? echo $streamitem_data['streamitem_content'] ?>'/>
<input type="hidden" name="streamitem_idsharetype" id="streamitem_idsharetype" value="<? echo $noterypes['streamitem_type_id'] ?>">
<input type="hidden" name="streamitem_id" id="streamitem_id" value="<? echo $streamitem_data['streamitem_id'] ?>">
<div cols="40" rows="5" name="newmsg" id="newmsg" data-ph="Say something <? echo $data['first']; ?>..." contenteditable="true"></div>
<select id="privacy" name="privacy">
<option value="1">Public</option>
<option value="2">Friends</option>
</select>
<select id="comments" name="comments">
<option value="1">Comments On</option>
<option value="2">Comments Off</option>
</select>
<input title="Share <? echo $data["fullname"] ?>'s ststus to your wall" style="cursor:pointer;color:#FFF;" type="submit" id="button" value="Share">
</form>
<div id="display"></div>
<script type="text/javascript">
$(function(){
$('.pop').unbind().click(function() {
var streamitem_id = $(this).attr('id');
$.ajax({
type:"POST",
url: "sharecollect.php",
data: { streamitem_id: streamitem_id, },
success: function(data) {
$('.pop').css('overflow-y', 'auto');
$('body').css('overflow', 'hidden');
$("#sharecontent"+streamitem_id).html(data);
}
});
return false;
});
});
</script>

If you really need to eval a script, don't use eval but something like this :
void function(global) {
'use strict';
var betterEval;
betterEval = function(src, context) {
return Function.call(null, 'global', '"use strict";' + src)(context || global);
};
// usage
betterEval('console.log(global);');
}(this);

submitting a form through ajax for each ID

please guys, have some posts which i outputted from my database and now i want to make a comment form for each post and the form will be submitted through ajax method, but my problem is
the ajax method works for only the first outputted post and the form inserts into the database the mysqli_num_rows($query). ie if mysqli_num_rows($query) is =5, the form inserts into 5 rows in the database.
the remaining outputted forms reloads the page when the submit button is clicked.
This is what I want to achieve:
I want each form to be submitted without reloading.
I want the form to be inserted in only one row for each.
Here is my code:
<?php
$con = mysqli_connect('localhost', 'root', '') or die ('error');
mysqli_select_db($con, 'test') or die ('error');
$query = mysqli_query($con, "SELECT * FROM testing");
while($sql = mysqli_fetch_array($query)){
$id = $sql['id'];
$post = $sql['post'];
echo "<p>".$id.". ".$post."<br>";
$pop_id = $id."pop";
?>
<style>
.plop {
display:none;
height:200px;
border-bottom:1px solid #000;
}
</style>
<a href="javascript:;" style="float:right
;margin:20px 20px;" onclick="document.getElementById('<?php echo $pop_id; ?>').style.display='block'">comment</a></p><br>
<div id="<?php echo $pop_id; ?>" class="plop">
close
<script type="text/javascript" src="jquery.js"></script>
<form id="my-form">
<input type="text" id="comment" name="comment" />
<input type="hidden" id="post" name="post" value="<?php echo $id; ?>" />
<input type="submit" id="submit" value="post" />
</form><div id="tutorial"></div>
<script type="text/javascript">
$(document).ready(function() {
$('#my-form').submit(function(e) {
e.preventDefault();
$.ajax({
method: "GET",
url: "dote.php",
data: $(this).serialize(),
beforeSend: function(){
$('#tutorial').html("<img src='progress-dots.gif' />");
},
success: function(status) {
$('#post').val('');
$('#tutorial').html("");
}
});
});
});
</script>
</div>
<?php
}
?>

Change the input type="submit" to type="button" and make ajax on click of button.
For eg.:
<script type="text/javascript" src="jquery.js"></script>
<form id="my-form">
<input type="text" id="comment" name="comment" />
<input type="hidden" id="post" name="post" value="<?php echo $id; ?>" />
<input type="button" id="submit" value="post" />
</form><div id="tutorial"></div>
<script type="text/javascript">
$(document).ready(function() {
$('#submit').click(function(e) {
e.preventDefault();
$.ajax({
method: "GET",
url: "dote.php",
data: $("#my-form").serialize(),
beforeSend: function(){
$('#tutorial').html("<img src='progress-dots.gif' />");
},
success: function(status) {
$('#post').val('');
$('#tutorial').html("");
}
});
});
});
</script>
Above code will post the data without refreshing the page.

try this code
<?php
$con = mysqli_connect('localhost', 'root', '') or die ('error');
mysqli_select_db($con, 'test') or die ('error');
$query = mysqli_query($con, "SELECT * FROM testing");
while($sql = mysqli_fetch_array($query)){
$id = $sql['id'];
$post = $sql['post'];
echo "<p>".$id.". ".$post."<br>";
$pop_id = $id."pop";
?>
<style>
.plop {
display:none;
height:200px;
border-bottom:1px solid #000;
}
</style>
<a href="javascript:;" style="float:right
;margin:20px 20px;" onclick="document.getElementById('<?php echo $pop_id; ?>').style.display='block'">comment</a></p><br>
<div id="<?php echo $pop_id; ?>" class="plop">
close
<script type="text/javascript" src="jquery.js"></script>
<form id="my-form-"<?php echo $id; ?>>
<input type="text" id="comment" name="comment" />
<input type="hidden" id="post" name="post" value="<?php echo $id; ?>" />
<input type="submit" id="submit" value="post" />
</form><div id="tutorial"></div>
<script type="text/javascript">
$(document).ready(function() {
$('#my-form-<?php echo $id; ?>').submit(function(e) {
e.preventDefault();
$.ajax({
method: "GET",
url: "dote.php",
data: $(this).serialize(),
beforeSend: function(){
$('#tutorial').html("<img src='progress-dots.gif' />");
},
success: function(status) {
$('#post').val('');
$('#tutorial').html("");
}
});
});
});
</script>
</div>
<?php
}
?>

Jquery load() puts display and opacity in element style

I have an html that, by AJAX, fetches data from a php file and shows a table with the content ofthe database.
In another file, I try to call load(initial.html) to a div and the code shows up fine, but when I hit the button to retrieve the table, the element style of the div where the tabçe will be written shows up automatically "display: none; opacity: 0". And than in that table I have a tablesorter and it doesn't work.
But if I enter the original page all works, but I can't put it work if I load the html to another file.
Anyone can help me?
Thanks very much
EDIT:
I tried other way, but now the ("#teste").on('submit') doesn't work.
and if I put the code in the main page and forget the load() it works fine. Why is that?
Thank you for the help
Here is the code:
the main page, when o click link_1 I call load() to populate the div id="principal"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Teste </title>
</head>
<link rel="stylesheet" href="css/index.css" />
<link rel="stylesheet" href="css/procura.css" />
<link rel="stylesheet" href="css/theme.blue.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="js/procura.js"></script>
<script type="text/javascript" src="js/jquery.metadata.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.widgets.js"></script>
<body>
<div id="banner-image">
<img src="images/logo.jpg" />
</div>
<div id="banner-content">
<a id="link_1" href="">Procurar Colaborador</a>
<a id="link_2" href="">Confirmação de Colaboradores</a>
</div>
<div id="principal">
</div>
</body>
</html>
The Html that I call called procura.html
<form action="" id="teste" method="post" enctype="multipart/form-data">
<div id="itemRows">
<p>
<select name="tipo_procura[]" >
<option value="" selected></option>
<option value="loja_integracao">Loja de Integração</option>
<option value="nome_completo">Nome</option>
</select>
<input name="valor_procura[]" type="text" maxlength="255" size="50" />
<input onclick="addRow(this.form);" class="form_button" type="button" value="Adicionar Procura" />
</p>
</div>
<input id="submit_button" type="submit" value="Procurar" />
</form>
<div class="result" id="result">
</div>
THE JS file procura.js
$(document).ready(function() {
$("#link_1").click(function(event) {
$("#principal").load("procura.html");
event.preventDefault();
});
$('#teste').on('submit', function(event) {
$.ajax({
url : 'procura_colaborador.php',
data : $(this).serialize(),
type : 'POST',
success : function(data) {
console.log(data);
$("#result").fadeOut('slow', function() {
$(this).html(data);
}).fadeIn("slow");
}
});
event.preventDefault();
});
});
var rowNum = 0;
function addRow(frm) {
rowNum++;
var row = '<p id="rowNum' + rowNum + '"><select name="tipo_procura[]" ><option value="" selected></option><option value="loja_integracao">Loja de Integração</option><option value="nome_completo">Nome</option></select><input name="valor_procura[]" type="text" maxlength="255" size="50" /><input type="button" value="Remover Procura" class="form_button" onclick="removeRow(' + rowNum + ');"></p>';
jQuery('#itemRows').append(row);
}
function removeRow(rnum) {
jQuery('#rowNum' + rnum).remove();
}
And the PHP file
$query = "SELECT * FROM colaboradores";
$result = mysqli_query($con, $query) or die(mysqli_error($con));
echo '<table id="tabela_resultados" class="tablesorter-blue">';
echo '<thead><tr><th>Loja de Integração</th><th>Nome</th><th>Telemóvel</th><th>NIF</th><th>Data de Nascimento<th>Nacionalidade</th><th>Acção</th></tr></thead><tbody>';
while ($gear = mysqli_fetch_array($result)) {
echo "<tr><td>";
echo $gear['loja_integracao'];
echo "</td><td>";
echo $gear['nome_completo'];
echo "</td><td>";
echo $gear['num_tlm'];
echo "</td><td>";
echo $gear['num_nif'];
echo "</td><td>";
echo $gear['data_nascimento'];
echo "</td><td>";
echo $gear['nacionalidade'];
echo "</td><td><a href=''>Contrato</a></td></tr>";
}
echo '</tbody></table>';
echo '<script type="text/javascript">$("#tabela_resultados").tablesorter();</script>';

if i understand you correctly
try to change your json function to retrive html data , because you cant't retrive json when you
do echo in php file if you want to retrive your table you must add to json function , dataType: "html"
$('#teste').on('submit', function(event) {
$.ajax({
url : 'procura_colaborador.php',
data : $(this).serialize(),
type : 'POST',
dataType: "html",
success : function(data) {
console.log(data);
$("#result").fadeOut('slow', function() {
$(this).html(data);
}).fadeIn("slow");
}
});
event.preventDefault();
});
});