I have a form with a search suggestion that appears as the user types in the input. Now this search suggestion is clickable, where users are able to click on a particular item. when that item it clicks it take them to something like searchPage.php?user_query=the text of the item that was click (i.e. searchPage.php?user_query=html).
What I notice is that if the search suggestion item has a special character known as ASCII ISO 8859-1 Characters it will disregard it, and hence the result would be searchPage.php?user_query=
Under no circumstances can it be blank because its bad design if you click on a item and then it populates you the entire list.
Below is the search suggestion js:
$(function(){
$(".search").keyup(function()
{
var searchid = $(this).val();
var dataString = 'search='+ searchid;
if(searchid!='')
{
$.ajax({
type: "POST",
url: "search.php",
data: dataString,
cache: false,
success: function(html)
{
$("#result").html(html).show();
}
});
}return false;
});
jQuery("#result").live("click",function(e){
var $clicked = $(e.target);
var $name = $clicked.find('.name').html();
var decoded = $("<div/>").html($name).text();
window.open('searchPage.php?user_query=' + decoded,'_self',false);
$('#searchid').val(decoded);
});
jQuery(document).live("click", function(e) {
var $clicked = $(e.target);
if (! $clicked.hasClass("search")){
var $name = $clicked.find('.name').html();
var decoded = $("<div/>").html($name).text();
}
});
$('#searchid').click(function(){
jQuery("#result").fadeIn();
});
});
Below is the form:
<form method="get" action="searchPage.php" enctype="multipart/form-data" autocomplete="off">
<input type="text" class="search" id="searchid" name="user_query" id="searchBar" placeholder="Search for courses" />
<input type="submit" id="searchButton" name="search" value="search" class="btn btn-danger" autocomplete="off"/>
<div id="result"></div>
</form>
First, as commented by GolezTrol, I would use UTF8 everywhere: it is the recommendend most reliable way to avoid any issue like yours.
Then, in the particular case you have here, you may try to replace
var decoded = $("<div/>").html($name).text();
by
var decoded = encodeURIComponent($("<div/>").html($name).text());
(not absolutely sure it works fine...)
Related
I have an HTML form that Is only composed of a button with a value. I would like to leave it this way. I am using AJAX/JQuery to pass the form data to a PHP script. But, for some reason, the button value is not sent. What could I be doing wrong?
HTML:
<form id="friend-send" method="post" action="">
<button type="submit" class="foll" name="approve-friend" value="4"> Approve </button>
</form>
AJAX/JQUERY:
$(document).ready(function() {
$("#friend-send").submit(function(e) {
var $this = $(this);
var dataString = $this.serialize();
e.preventDefault();
$.ajax({
type: "POST",
url: "relate.php",
data: dataString,
async: false,
success: function() {
$this.hide();
}
});
});
});
JQuery won't serialize a button, use a hidden field instead
<form id="friend-send" method="post" action="">
<input type="hidden" name="approve-friend" value="4" />
<button type="submit" class="foll"> Approve </button>
</form>
Also, You need to serialze the form by id, not the button by id
Instead of this
$("#friend-request-buttons")
It should be this
$("#friend-send")
Lastly, since you are using ajax to post, you can simplfy your form open tag to this...
<form id="friend-send">
<button>
tags are not supported by serialize https://api.jquery.com/serialize/
You would need to use an input of some kind. A hidden one would work.
Don't use serialize, create the input data yourself:
var dataString = {};
var $button = $this.find("[type=submit]");
dataString[$button.attr('name')] = $button.val();
When you provide an object as the data: argument to $.ajax, jQuery will serialize it automatically.
This answer would be if you are set on using the button alone
$(document).ready(function() {
$("#friend-send").submit(function(e) {
var $this = $(this);
var dataString = "?" + $(this).find('button').attr('name') + "=" + $(this).find('button').attr('value');
e.preventDefault();
$.ajax({
type: "POST",
url: "relate.php",
data: dataString,
async: false,
success: function() {
$this.hide();
}
});
});
});
I have the following form:
<form id='confirm_reset' action='login/forgotPassword_action' method='post'>
<input type='hidden' name='user_email' value='user_email'>
Submit
</form>
<div id="alert_box_register"></div>
I am trying to submit this with Ajax to return JSON in the alert box:
$("#confirm_reset").on("submit", function(event) {
//disable default click operation
event.preventDefault();
var action_url = $(this).attr("action");
alert_box_register("Resetting password...");
console.log(action_url);
var postData = $(this).serializeArray();
console.log(postData);
$.post(action_url, postData, function(data) {
console.log(data);
var obj = $.parseJSON(data);
alert_box_register(obj.message);
});
});
This script returns no result (as if the link did not function). Where am I going wrong?
Not sure if this code is still a problem for you or not...?
A quick note about out your progress messages ("Resetting password..."): this code will probably run so fast that this message will just barely flash on the screen for the user. I don't know how your stuff is set up but you may never see this on the screen.
<!-- The following line was missing .php from the action -->
<!--form id='confirm_reset' action='login/forgotPassword_action' method='post'-->
<form id='confirm_reset' action='login/forgotPassword_action.php' method='post'>
<input name="txtbox" type="text" value="hello world"/>
<input type='hidden' name='user_email' value='user_email'>
<!-- submit_confirm_reset() is a function I made in the javascript tages-->
Submit
</form>
<div id="alert_box_register"></div>
<script>
function submit_confirm_reset() {
$("#confirm_reset").submit();
}
$("#confirm_reset").on("submit", function(event)
{
console.log('("#confirm_reset").on("submit", function(event)');
//disable default click operation
event.preventDefault();
var action_url = $(this).attr("action");
// you were using alert_box_register like it was a function
// but it doesn't exist in the code you posted in your question
// but a DOM element has this name so I assume you meant that
$("#alert_box_register").html("Resetting password...");
console.log(action_url);
var postData = $(this).serializeArray();
console.log(postData);
$.post(action_url, postData, function(data) {
console.log(data);
// if this response is already json, you don't need to parse it
var obj = $.parseJSON(data);
$("#alert_box_register").html(obj.message);
});
});
</script>
I wonder if anyone can help. I am using a script that autocompletes from a database, which is working fine apart from one issue I am wondering if someone maybe able to help me with.
When clicking on an autosuggestion it fills the textbox with the selection fine, but if you try to make another selection (by starting to type again), it doesnt fill the textbox with the new selection, it just retains the old selection.
Below is the code I have...
rtsearch.php (php removed to save space) that grabs the data to fill the html form & div:
<div class="display_box2" align="left">
<span class="name"><b><?php echo $country; ?></b>, <span class="bodyotxt"><?php echo $row['town']; ?></span></span>
</div>
<?php } } ?>
THE ACTUAL HTML FORM AUTOCOMPLETES:
<div><form action="<? $_SERVER['php self'];?>" method="post" enctype="multipart/form-data" name="form1" class="form" id="form1" autocomplete="off">
<input name="rt" type="text" class="search2" id="inputSearch2" value="" onclick="this.value='';" /></form>
<div id="divResult2"></div>
</div>
JQUERY:
$(document).ready(function(){
$(".search2").keyup(function()
{
var inputSearch2 = $(this).val();
var dataString = 'searchword='+ inputSearch2;
if(inputSearch2!='')
{
$.ajax({
type: "POST",
url: "autocomplete/rtsearch.php",
data: dataString,
cache: false,
success: function(html)
{
$("#divResult2").html(html).show();
}
});
}return false;
});
$("#divResult2, #divResult2 span").on("click",function(e){
//var $clicked = $(e.target);
if($(this).parent().attr("id")=="divResult2"){ var $clicked = $(this).parent(); }else{ var $clicked = $(e.currentTarget); }
var $name = $clicked.find('.name').html();
var decoded = $("<div/>").html($name).text();
$('#inputSearch2').val(decoded);
});
$(document).on("click", function(e) {
var $clicked = $(e.target);
if (! $clicked.hasClass("search2")){
$("#divResult2").fadeOut();
}
});
$('#inputSearch2').click(function(){
$("#divResult2").fadeIn();
});
});
I have gone through it and cannot seem to find the issue.
Thank you in advance to anyone who can shed some light on this
Have you tried using e.currentTarget instead of e.target ?
maybe as simple as:
jQuery("#divResult2, #divResult2 span").on("click",...
I've got a problem with submitting AJAX forms - using this tutorial.
My forms are in div#upform and when I'm trying to submit any of them via $.ajax it submits only the first one, here's the code:
$(function() {
$(".button").click(function() {
var txt = $(".tekst#test").val();
var dataString = 'tekst='+ tekscior;
$.ajax({
type: "POST",
url: "upload/base",
data: dataString,
success: function() {
$('#upform').html("<div id='message'></div>");
$('#message').html("<h2>described!</h2>")
.append("<p>thanks!</p>")
.hide()
.fadeIn(1500, function() {
$('#message').append("<img id='checkmark' src='http://artivia-dev2/i/check.png' />");
});
}
});
return false;
});
});
AND Here are my forms:
<!-- ONLY THIS ONE IS SUBMITTED, EVEN WHEN I'M SUBMITTING THE SECOND ONE! -->
<div class="slidingDiv">
<div id="upform">
<form name="contact" action="">
<input type="text" value="TESTFORM" class="tekst" id="test">
<input type="submit" name="submit" class="button" id="submit" value="Send" />
<form>
</div>
<div class="slidingDiv">
<div id="upform">
<form name="contact" action="">
<input type="text" value="TESTFORM" class="tekst" id="test">
<input type="submit" name="submit" class="button" id="submit" value="Send" />
<form>
</div>
##UPDATE
Problem, when I submit one form - it's great - but when after this one submit I want to submit the second - the data is submitted correctly, but the success messages are refreshed in both forms, that's the fix, which I've triend to use, but it doesn't work:
$.ajax({
type: "POST",
url: "upload/base",
data: dataString,
success: function() {
upform.html("<div class='message'></div>");
var mess = $(this).closest('.message');
mess.html("<h2>Described</h2>")
.append("<p>Thanks!</p>")
.hide()
.fadeIn(1500, function() {
mess.append("<img id='checkmark' src='http://ar-dev2/i/check.png' />");
});
}
});
First, you should not use same id to multiple element. Instead of that you may use class or name or data attribute.
$(".button").click(function() {
var upform = $(this).closest('.upform'); // keep reference of upform
var txt = $(this).prev(".tekst").val(); // this will retrieve the value of input
// nearest to the button
var dataString = 'tekst='+ tekscior;
......
$.ajax({
type: "POST",
url: "upload/base",
data: dataString,
success: function() {
upform.html();
.....
}
});
});
Problem with var txt = $(".tekst#test"); selector:
It has been started searching from top and when it found a match it stop journey and return the value and you always get the value of first one. If you use
var txt = $(".tekst"); without id, you will face the same problem.
IDs are singular. You can not have the same id on the page more than once!
If you want to repeat identifiers, use name.
You should be using different ids for both the forms. Both your forms have the same id upform
I'm trying to highlight the text that matches the query in a live search using jquery.highlight. The live search works fine but the styling for the highlighting applies then it disappears. Am I doing something wrong?
JQuery
$(document).ready(function() {
$("#search").bind("keyup", function() {
var form = $(this).parents("form");
var query = $(this).val();
var formData = form.serialize();
$.post("/questions/new/search", formData, function(html) {
$("#questionList").html(html);
});
$(".question").highlight(query);
});
});
HTML
<form action="/questions" method="get">
<input id="search" name="search" type="text" />
</form>
<div id="questionList">
<div class="question">What is the 1 + 1?</div>
<div class="answers">2</div>
</div>
Yes, you should execute $(".question").highlight(query) in the http request response handler right after $("#questionList").html(html) this way:
$(document).ready(function() {
$("#search").bind("keyup", function() {
var form = $(this).parents("form");
var query = $(this).val();
var formData = form.serialize();
$.post("/questions/new/search", formData, function(html) {
$("#questionList").html(html);
$(".question").highlight(query);
});
});
});