In my form there is a textbox and submit button. When a user starts typing, after the 3rd letter the autocomplete script does it's magic.
There are two possibilities.
The user types a word, there are matches and he clicks on one match. This selected match is added to the textbox and then hits the submit button.
The user types a word, there/there are not matches but he decides to hit the submit button without selecting one of the suggested.
My question is how can I identify whether he hit the button in case 1 or in case 2.
rpc.php is the file that looks for suggested values through the mySQL.
A solution is to check the string if there is on the database but I do not want this.
Another solution is to transform the jQuery script and php code that shows the product name and instead of putting the product in the textbox, it should take him to the results page. This solves my problem also.
<script type="text/javascript">
$().ready(function() {
$("#s").autocomplete("rpc.php", {
width: 250,
selectFirst: false,
minChars: 3,
scroll:true,
matchContains: true,
scrollHeight: 250
});
});
</script>
<form method="get" action=".php">
<input type="text" name="s" id="s" class="inputsearch">
<input type="submit">
</form>
Use autocomplete's change method to set a flag in the form, eg
/// Create an hidden element to store the flag value,
/// 1 for AC used, 0 for user entered
var flag = $("<input>").attr("type", "hidden")
.attr("name", "ac_flag")
.val(0);
// append flag to form
$("form").append(flag);
$("#s").autocomplete("rpc.php", {
change: function(event, ui) {
flag.val(ui.item != null ? 1 : 0);
},
// and the rest
});
The "change" event fires when the value in the text field changes. When an AC item is chosen ui.item will contain an object reference to the selected item from the list. If no selection was made, ie the user simply entered text, ui.item will be null.
Your form handler can then check for $_GET['ac_flag'] to determine whether or not the value came from the autocomplete list.
Quick mockup example here - http://jsfiddle.net/9GQgh/
The simplest approach would be to modify the autocomplete plugin itself to set a flag when the user chooses a value from it, and clear it when the user modifies their selection. The flag could be anywhere, but for the sake of simplicity I'd suggest a hidden form field, like:
<form method="get" action=".php">
<input type="text" name="s" id="s" class="inputsearch">
<input type="hidden" id="flag" name="inputCameFromAutocomplete" value="false">
<input type="submit">
</form>
So in the autocomplete plugin, when the user makes a selection, you could add something like:
$("#flag").val("true");
If you wanted to you could make the id/selector of the flag element part of the plugin config/options so that it is more reusable.
You would also want to do something like:
$("#s").keypress(function() {
$("#flag").val("false");
});
...as part of your initial setup, so that the flag is reset whenever the user manually types something into the field.
Related
Okay the title might be confusing, as i myself still confused as how to phrase it.
Hi, i am a beginner in PHP, and definitely no experience in js or other languages.
I'm trying to make an input type (datalist), where when the user press enter, or select the options from the list, de input would passed into an array, then displayed as static text next to the original input field, while the original input field would be emptied, allowing user to type/select another option, and when the user chose other option/press enter, the new value would be added to the array. And then when the user click the submit button, the whole array of that field would be then passed as POST.
Well if my explanation still confusing, just imagine those sites where you can submit an articels, and we can type/chose the 'tags' for the articles.
I heard tou have to implement js on this one, can anyone please help explain it to me? I would really appreciate it
Thankyou
A way of doing that would be to setup a form with the input paired with a button plus divs for appending the user's input and then going through the logic below
the user inserts a value into the input and clicks a button
The button click activates a jquery event where the function obtains the user input
It then checks if the value is empty and then appends the value in a <p> tag to the display div and an input of type hidden to the hidden div with the name attribute as name[].
Later when you submit the form you can obtain the values using the names[] variable which will store them as an array. You can edit this to anyway you want.
For the html
<input id="name" name="name" type="text"/>
<font size="1">Add Name</font>
<div id="display"></div>
<div id="hidden"></div>
And then for the javascript
// Add name
$("#add_name").click(function (e) {
//prevent submit of form
e.preventDefault();
var name = $('#name').val();
//check if input is empty
if(name){
$("#display").append("<p>" + name + "</p>");
$("#hidden").append("<input type='hidden' name='names[]' value='" + name + "'>");
} else {
alert("Please insert name before submitting")
}
$('#name').val("");
});
Let me know if it helps or if i can help you further
I have this problem, a textbox is assigned to get the value of the datepicker. I have no problems doing it initially (meaning at first with no changes on the datepicker) since there's a button to be clicked to produce the hidden textbox. But the problem arises when the value of the datepicker is changed (after the textbox is generated). Here's the sample:
Datepicker:
<input type='text' name='devd' id="devd_1" class='pickdate' size='10' />
Hidden Textbox:
<input type='hidden' name='devd_box' id='devd_box_1'/>
The button that I mentioned should only be used once. So my problem now is how to populate the hidden textbox if the value of the datepicker has changed.
You may notice the last number of the ID, that is their common reference so that it can update the right box since it has multiple datepickers/boxes.
Thanks for all the help!
P.S: The last number after the IDs are dynamically populated thus I can't just hardcode the ID of the datepicker.
Actual solution for those who need it:
$('.pickdate').on('change', function (ev) {
var string_id = this.id;
var lastnum = string_id[string_id.length -1];
$('#devd_box_' + lastnum).val(this.value);
});
Simply look for the onChange event.
$('#devd_1').on('change', function (ev) {
$('#devd_box_1').val('Your text here');
});
This will change the text on the hidden field whenever there's a change made on the datepicker field.
Regarding the dynamic id part -
Make a javascript function for it and call it to get the actual id.
Note:
Please refer the question for the actual solution.
I'm trying to create a form that users can bring with them on other pages and drag around (like Twitter's submit form). So once you hit "Write," a div will show up with the draggable form. I want it to set up so when I hit X on the div, it will submit to a page that will set it as a session, so when I hit "Write" again, the form will have all the information in it. Here's how I have it set up - the form:
<div id="writeOverlay"><form action="process.php" id="writeForm">
<input type="text" name="title" value="<?php if(isset($_SESSION['writeTitle"])){
echo $_SESSION['writeTitle'];?>">
X
<button type="submit">Submit</button>
</form></div>
And when you click the X, jQuery handles it as such:
$('#writeExit').click(function(){
$('#writeOverlay').hide();
event.preventDefault();
$.post('site.com/writeHandle.php', $('#writeForm').serialize(),function(){ // the $('#writeForm') was originally just $(this) but I changed it to see if I'd get different results. I did not.
console.log('Closed.');
});
});
writeHandle.php works like this
<?php
session_start();
$_SESSION['writeTitle'] = $_POST['title'];
?>
Hitting the submit button works as it should, but when I hit exit, the session is not saved. So when I click "Write" again, the form will load as empty. I hope to be clear and concise with this issue. If more information is required, leave a comment and I'll be sure to update this.
There's an error. The title variable that you are trying to get in PHP is not sent properly. It should be send something like:
...,{title: "this is my title"}, function(){...}
So, edit your input tag:
<input id="title" ...... >
then your post code:
$.post(
'site.com/writeHandle.php',
{
title: $("#title").val()
},
function(){ // the $('#writeForm') was originally just $(this) but I changed it to see if I'd get different results. I did not.
console.log('Closed.');
}
);
How to set on click button value?
In my html form a set of users each having separate id. The users are auto generated, if new user register means they come into list.
Along with that i kept one button as "Invite". But this button id setting for whole users. If I kept on click button alert, it sets for whole users as alert msg.
EX:
If John as one user and have id as 5,if i click John's invite button means, for all users the alert is coming.
What I need is if John's invite I click means John only has to invited not all users.
How could I compare these user id and button id?
Here is a Code:
<script>
$(document).ready(function(){
$(".InviteTeacher").click(function(){
alert('Invited');
});
});
</script>
<div class="thumb_section bx-def-margin-sec-right">
__thumbnail__
</div>
<div class="button_wrapper">
<input type="button" value="Invite" name="InviteTeacher" class="InviteTeacher" id= "InviteTeacher"/>
</div>
Here thumbnail is a user information.
Store the values in hidden inputs.
<form>
<input type="hidden" name="from_id" value="1">
<input type="hidden" name="to_id" value="5">
<input type="submit" value="Invite">
</form>
At the place of generation buttons
$("#button" + userId).click(function(){
//do this
})
Suppose #invite0, #invite1, #invite2, ... are the html id attributes of the buttons to invite users[0],users[1],users[2],... and doInvite(j) is a function will invite the user at users[j].
You need to bind the current i value to the doInvite function, to get the actual handler.
See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
Note that doInvite(i) is wrong, that would invite them now, in the for loop, without pushing a button. And function(){ doInvite(i) } is wrong because i will have changed by the time the event handler is called.
But bind will create a new function for us with the loop value of i filled into the first parameter of the function. That can then be called as the event handler.
for(var i=0; i<users.length; ++i){
$('#invite'+i).click(doInvite.bind(null, i));
}
or this can also be written with a closure
for(var i=0; i<users.length; ++i){
$('#invite'+i).click( (function(j){
return function(){
doInvite(j);
}
})(i) );
}
in which case the loop value of i is stored in a new scope created by the top anonymous function, inside its j parameter. You can think of this nesting of anonoymos functions as returning slightly different event handler functions each time around the loop. The j's all exist in their own scopes, and store the values 0,1,2,3,... as the loop progresses.
For another example about closures and event handler setting in a loop, see Event handlers inside a Javascript loop - need a closure?
For more on what closures are and what they do see How do JavaScript closures work?
Just want to know if there is a way to detect how many times a user has clicked a button by using Jquery.
My main application has a button that can add input fields depend on the users. He/She can adds as many input fields as they need. When they submit the form, The add page will add the data to my database. My current idea is to create a hidden input field and set the value to zero. Every time a user clicks the button, jquery would update the attribute of the hidden input field value. Then the "add page" can detect the loop time. See the example below.
I just want to know if there are better practices to do this. Thanks for the helps.
main page
<form method='post' action='add.php'>
//omit
<input type="hidden" id="add" name="add" value="0"/>
<input type="button" id="addMatch" value="Add a match"/>
//omit
</form>
jquery
$(document).ready(function(){
var a =0;
$("#addMatch").live('click', function(){
//the input field will append //as many as the user wants.
$('#table').append("<input name='match"+a+"Name' />");
a++;
$('#add').attr('value', 'a'); //pass the a value to hidden input field
return false;
});
});
Add Page
$a=$_POST['a']; //
for($k=0;$k<$a;$k++){
//get all matchName input field
$matchName=$_POST['match'.$k.'Name'];
//insert the match
$updateQuery=mysql_query("INSERT INTO game (team)
values('$matchName')",$connection);
if(!$updateQuery){
DIE('mysql Error:'+mysql_error());
}
}
I'm a bit confused. After this:
$('#add').attr('name', 'a'); //pass the a value to hidden input field
shouldn't you actually store the value of a?
$('#add').attr('name', 'a').val(a);
$('#add').attr('name', 'a').val(a); ????
That's not correct, you should use:
$('#add').attr('value', a);
send the content of the "a" variable to the "value" property of element with ID "add"
I do believe that's what you want to do....