I am trying to get the query results by hitting the enter button on the drop down of the autocomplete results. It works fine if I use the mouse to click the result i want but wont work if i use the enter key.
The first function gets the autocomplete results and the second submits the result to get the data from that particular id.
JQUERY
$(document).ready(function () {
$("#equipment").autocomplete({
source: "search.php",
minLength: 2,
select: function(event, ui) {
$('#eq_id').val(ui.item.id);
}
});
$(document).off("keypress", "#equipment");
$(document).on("keypress", "#equipment", function(event) {
//if (!e) e = window.event;
if (event.keyCode == '13'){
$('#loading').show();
var eq_id = $("#eq_id").val();
var dataString = 'eq_id=' + eq_id;
$.ajax({
type: "POST",
url: "updateForm.php",
data: dataString,
success: function(html){
$("#formAddEquip").hide();
$("#showuserresult").show();
$("#showuserresult").html(html);
$("#equipment").val("");
$('#loading').hide();
}
});
return false;
}
});
});
And here is the form
<form action="" method="post" id="#somesearch">
<label for="equipment" id="eq_id_label">Search Equipment</label>
<input type="text" id="equipment" name="equipment" />
<input type="hidden" id="eq_id" name="eq_id" />
</form>
Start with these improvements
$(function() { // only one "load"
$("#equipment").autocomplete({
source: "search.php",
minLength: 2,
select: function(event, ui) {
$('#eq_id').val(ui.item.id);
}
});
$("#somesearch ").on("submit", function(e) {
e.preventDefault(); // stop submission
});
$(document).on("keypress", "#equipment", function(event) {
//if (!e) e = window.event;
if (event.keyCode == '13') {
$('#loading').show();
var eq_id = $("#eq_id").val();
var dataString = 'eq_id=' + eq_id;
$.ajax({
type: "POST",
url: "updateForm.php",
data: dataString,
success: function(html) {
$("#formAddEquip").hide();
$("#showuserresult").show();
$("#showuserresult").html(html);
$("#equipment").val("");
$('#loading').hide();
}
});
}
});
});
Related
When I click the submit on button, the appended elements are not submitted. I already tried to change append() to appendTo() and html(). Please help.
$('select[name="bidang"]').on('change', function(e) {
e.preventDefault();
var id_bidang = $(this).val();
// AJAX request
$.ajax({
url: '<?php echo base_url()?>form_jurnal/getSubBidang',
method: 'GET',
data: {
id_bidang: id_bidang
},
dataType: "json",
success: function(response) {
$('select[id="sub_bidang"]').empty();
$.each(response, function(key, value) {
$('select[id="sub_bidang"]')
.append('<option value="' + value.id_subbidang + '
selected ">'+ value.nama_subbidang +'</option>');
});
}
});
});
<label>Sub Bidang :</label>
<select id="sub_bidang" name="sub_bidang">
<option>--Pilih Sub Bidang--</option>
</select>
I tried to serialize rather to push the elements value but still I get the array with no value. please anyone to help me figure out my problem
this is what I am trying to
<input type="checkbox" class="benf" name="benf[]" value="Angelus">
var arr=[];
$('input[name*="benf"]').each(function(){
if($(this).attr('checked')){
arr.push($(this).attr('value'))
}
});
var p = $('input .benf').serializeArray();
console.log(p);
console.log(arr);
$.ajax({
url:'myphp.php',
type:'post',
dataType:'text',
data:{mylist:arr},
success:function(data){
console.log(data);
},
error:function(xx){
console.log(xx);
}
});
You can do like this:
var arr=[];
$("input:checkbox[name*=benf]:checked").each(function(){
arr.push($(this).val());
});
var p = $('input.benf').serializeArray();
console.log(p);
console.log(arr);
$.ajax({
url:'myphp.php',
type:'post',
dataType:'text',
data:{mylist:arr},
success:function(data){
console.log(data);
},
error:function(xx){
console.log(xx);
}
});
var arr=[];
$.each($("input[name='approve_blog']:checked"), function(){
arr.push($(this).val());
});
console.log(arr);
$.ajax({
url:'myphp.php',
type:'post',
data:{'mylist' : arr },
success:function(data){
console.log(data);
},
error:function(xx){
console.log(xx);
}
});
<input type="checkbox" class="blog_checkbox" name="approve_blog" value="1" />
<input type="checkbox" class="blog_checkbox" name="approve_blog" value="2" />
Been looking at some tutorials, since I'm not quite sure how this works (which is the reason to why I'm here: my script is not working as it should). Anyway, what I'm trying to do is to insert data into my database using a PHP file called shoutboxform.php BUT since I plan to use it as some sort of a chat/shoutbox, I don't want it to reload the page when it submits the form.
jQuery:
$(document).ready(function() {
$(document).on('submit', 'form#shoutboxform', function () {
$.ajax({
type: 'POST',
url: 'shoutboxform.php',
data: form.serialize(),
dataType:'html',
success: function(data) {alert('yes');},
error: function(data) {
alert('no');
}
});
return false;
});
});
PHP:
<?php
require_once("core/global.php");
if(isset($_POST["subsbox"])) {
$sboxmsg = $kunaiDB->real_escape_string($_POST["shtbox_msg"]);
if(!empty($sboxmsg)) {
$addmsg = $kunaiDB->query("INSERT INTO kunai_shoutbox (poster, message, date) VALUES('".$_SESSION['username']."', '".$sboxmsg."'. '".date('Y-m-d H:i:s')."')");
}
}
And HTML:
<form method="post" id="shoutboxform" action="">
<input type="text" class="as-input" style="width: 100%;margin-bottom:-10px;" id="shbox_field" name="shtbox_msg" placeholder="Insert a message here..." maxlength="155">
<input type="submit" name="subsbox" id="shbox_button" value="Post">
</form>
When I submit anything, it just reloads the page and nothing is added to the database.
Prevent the default submit behavior
$(document).on('submit', 'form#shoutboxform', function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: 'shoutboxform.php',
data: $(this).serialize(),
dataType: 'html',
success: function(data) {
alert('yes');
},
error: function(data) {
alert('no');
}
});
return false;
});
Use the following structure:
$('form#shoutboxform').on('submit', function(e) {
e.preventDefault();
// your ajax
}
Or https://api.jquery.com/submit/ :
$("form#shoutboxform").submit(function(e) {
e.preventDefault();
// your ajax
});
i have a website with a jquery search form. I have the searchboxes in every page of the site indide the header. Once you enter the searchwords there it redirects you the the search.php
What i want to do is to make the form submitted as soon as the page loads, because i send the data to the searchbox inside the search.php
Example: in page 1 i enter something and click submit. In search.php loads and in the main search field i have somethis(what i entered before). But i have to click again the submit to see the results. Any idea how can i make the form autosubmit when im being redirected? So i can see the results instantly.
Here's the code:
<form method="get" id="myForm" name="myForm" >
<input type="text" name="search" id="search_box" value="<?php $_GET['q']; ?>" placeholder="Enter band, artist, name..." autofocus/>
<input type="submit" value="Go" />
<br />
</form>
and the jquery:
<script type="text/javascript">
$(function() {
//-------------- Update Button-----------------
$(".search_button").click(function() {
var search_word = $("#search_box").val();
var dataString = 'search_word='+ search_word;
if(search_word==''){
} else {
$.ajax({
type: "GET",
url: "searchdata.php",
data: dataString,
cache: false,
beforeSend: function(html) {
document.getElementById("insert_search").innerHTML = '';
$("#flash").show();
$("#searchword").show();
$(".searchword").html(search_word);
$("#flash").html('<p style="text-align:center;">Loading Results...</p>');
},
success: function(html){
$("#insert_search").show();
$("#insert_search").append(html);
$("#flash").hide();
}
});
}
return false;
});
//---------------- Delete Button----------------
});
</script>
$(function(){
$('#myForm').trigger('submit');
});
When the page is ready you simply trigger the submit using jquery.
$(function() {
$(".search_button").click(function() {
var search_word = $("#search_box").val();
var dataString = 'search_word='+ search_word;
if(search_word==''){
} else {
$.ajax({
type: "GET",
url: "searchdata.php",
data: dataString,
cache: false,
beforeSend: function(html) {
document.getElementById("insert_search").innerHTML = '';
$("#flash").show();
$("#searchword").show();
$(".searchword").html(search_word);
$("#flash").html('<p style="text-align:center;">Loading Results...</p>');
},
success: function(html){
$("#insert_search").show();
$("#insert_search").append(html);
$("#flash").hide();
}
});
}
return false;
});
});
$(document).ready(function(){
$('#myForm').submit();
});
You can try this way.
<form method="get" id="myForm" name="myForm" >
<input type="text" name="search" id="search_box" value="" placeholder="Enter band, artist, name..." autofocus/>
<input id="button-submit" type="submit" value="Go" />
</form>
<script type="text/javascript">
$(function() {
function _myFunction () {
var search_word = $("#search_box").val();
var dataString = 'search_word='+ search_word;
if(search_word==''){
} else {
$.ajax({
type: "GET",
url: "searchdata.php",
data: dataString,
cache: false,
beforeSend: function(html) {
document.getElementById("insert_search").innerHTML = '';
$("#flash").show();
$("#searchword").show();
$(".searchword").html(search_word);
$("#flash").html('<p style="text-align:center;">Loading Results...</p>');
},
success: function(html){
$("#insert_search").show();
$("#insert_search").append(html);
$("#flash").hide();
}
});
}
return false;
}
$("#button-submit").click(function(e) {
e.preventDefault();
_myFunction();
return false;
});
_myFunction(); //This is where the magic happens
});
</script>
By doing that, the page will trigger on loading the function that is used when you click on the button.
I have to implement two functions, append and delete on set of comments. The insertion and deletion are working properly unless in one case.
When i try to remove newly added comment (before refreshing page), it wont remove. But when i refresh the page that comment removes swiftly.
Here's some code.
Following ajax is appending and removing the comment div.
<script type="text/javascript">
$(function() {
$(".commentbutton").click(function()
{
var element = $(this);
var postid = element.attr("id");
var commenttext = $("#commenttext"+postid).val();
var dataString = 'commenttext='+ commenttext+'&postid='+postid;
var postseq='#post'+postid;
if(commenttext=='')
{
alert("Please enter your comment");
}
else
{
//$("#flash").show();
//$("#flash").fadeIn(400).html('<img src="ajax.gif" align="absmiddle"> <span class="loading">Loading Update...</span>');
$.ajax({
type: "POST",
url: "insdelcomment.php",
data: dataString,
dataType:'html',
cache: false,
success: function(html){
$(postseq).append(html);
$(postseq).slideDown();
document.getElementById('commenttext'+postid).value='';
}
});
}
return false;
});
$('.delcombutton').click(function()
{
var commid = $(this).attr("id");
var dataString = 'delcomm=1&commid='+commid;
var delcomment = '#comment'+commid;
if(confirm("Sure you want to delete this update? There is NO undo!"))
{
$.ajax({
type: "POST",
url: "insdelcomment.php",
data: dataString,
cache: false,
success: function(html){
$(delcomment).slideUp('slow', function() {$(this).remove();});
}
});
}
return false;
});
});
</script>
Structure of my div
echo "<div id='post{$postseq}'>";
while($commentonpost=mysql_fetch_array($resultcomm)){
if($commentonpost['visible']==1){
echo '
<div style="width:90%;float:left;margin-left:5%;margin-right:15%;margin-top:10px;" id="comment'.$commentonpost['commentid'].'">
<div style="width:10%;float:left;"><a href="profile.php?user='.$commentonpost['usernick'].'" >'.$commentonpost['fname']." ".$commentonpost['lname'].'</a></div>
<div style="width:78%;float:left;margin-left:2%;">'.$commentonpost['comment'].'</div>
<div style="width:8%;float:right;margin-left:2%;">
';
if($commentonpost['usernick']==$_SESSION['user_nick']){
echo ' <form action="" method="post">
<input type="submit" name="delcomm" value="X" class="delcombutton" id="'.$commentonpost['commentid'].'">
</form>
';
}
echo '<h5 class="msg">'.datetime($commentonpost['date']).'</h5>
</div>
<br/>
</div>
';
}
}
echo "</div>";
echo '
<form name = "form'.$postseq.'" method = "post" action="" onsubmit="return validateform()" style="width:100%">
<div style="width:90%;float:left;margin-left:5%;margin-right:15%;margin-top:10px;">
<div style="width:10%;float:left;"><a href="profile.php?user='.$_SESSION['user_nick'].'" >'.$_SESSION['user_fname']." ".$_SESSION['user_lname'].'</a></div>
<div style="width:78%;float:left;margin-left:2%;"><textarea placeholder="Comment..." name="commenttext" id="commenttext'.$postseq.'" class="inputcomment" ></textarea></div>
<br>
<input type="submit" id="'.$postseq.'" name="SubmitComment" value="Comment " class="commentbutton" style="font-size:1em;width:100px;float:right;margin-top:4px;margin-right:9%;">
</div>
</form>
</div>
';
PS: Sorry for such a raw code, i have very limited internet now.
You have to use delegation for dynamically added elements:
$(document).on('click','.delcombutton',function(){...});
Use event delegation model with .on() for dynamically added elements
$(function() {
$(document).on('click', '.commentbutton', function() {
var element = $(this);
var postid = element.attr("id");
var commenttext = $("#commenttext"+postid).val();
var dataString = 'commenttext='+ commenttext+'&postid='+postid;
var postseq='#post'+postid;
if(commenttext=='') {
alert("Please enter your comment");
}
else {
//$("#flash").show();
//$("#flash").fadeIn(400).html('<img src="ajax.gif" align="absmiddle"> <span class="loading">Loading Update...</span>');
$.ajax({
type: "POST",
url: "insdelcomment.php",
data: dataString,
dataType:'html',
cache: false,
success: function(html){
$(postseq).append(html);
$(postseq).slideDown();
document.getElementById('commenttext'+postid).value='';
}
});
}
return false;
});
$(document).on('click', '.delcombutton', function() {
var commid = $(this).attr("id");
var dataString = 'delcomm=1&commid='+commid;
var delcomment = '#comment'+commid;
if(confirm("Sure you want to delete this update? There is NO undo!"))
{
$.ajax({
type: "POST",
url: "insdelcomment.php",
data: dataString,
cache: false,
success: function(html){
$(delcomment).slideUp('slow', function() {$(this).remove();});
}
});
}
return false;
});
});