jQuery: Update a certain textbox on if DatePicker UI is changed - php

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.

Related

PHP Form, collect several input on single input fields

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

Getting the the input value after focus out

I want to add a number of input fields in form which depends on value of previous input fields.
For example:
I have two inputs
if user
1.<tr><td>Number of Articles/Posts/Pages:</td><td><input type="number" name="count" ></td></tr>
2.<tr><td>Keywords:</td><td><?php
$number_of_keywords=$_POST['count'];
i="<input type='text' name='keyword'>";
i++;
i==$number_of_articles;
echo i;
?></td></tr>
For example if user type 3 in count field, then i want to show 3 input field. Number of input fields depend on how much user type in count field.
Please tell me that if this above code will work here and how can i get the count field value at run time?
No, you can't get the count field value at run time, the value must be submitted via a form or passed as a parameter in a query string, so that PHP knows about it.
This question is more appropriated to be tagged as a javascript question, than a PHP question. if you want to do it at run time. If you would like to do it strictly using PHP, then you will have to pass the count value to the server somehow, either by submitting a form, or by sending it via a parameter in a query string, as I have told you before.
Please take into consideration that if this is your real code, it will create n inputs with the attribute
name="keyword"
which is not correct and it might get you into a lot of problems later on.
I would simply use some JS and a php file for this.
What i would do is have an onchange on the first input like
<input type="number" name="count" onchange="getval(this);">
The getval is a JS function that it will according to the input fill in a class with the according number of inputs you like.
function getval(sel){
var load = $.get('yourPHPFILE.php',{number:sel.value);
$(".someClass").html('Refreshing');
load.error(function() {
console.log("Mlkia kaneis");
$(".someClass").html('failed to load');
// do something here if request failed
});
load.success(function( res ) {
console.log( "Success GET VA" );
$(".someClass").html(res);
});
load.done(function() {
console.log( "Completed GET VA" );
});
}
You then in the php file get the value by $_GET['number']
and with a loop there you echo the according number of inputs you like.
someClass is going to be the class that you would like to populate with the inputs.

How to identify if the submitted value came from the autocomplete script?

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.

Changing an checkbox input name with a button click function

I'm running into a problem with changing the name attribute on an input element when a button is clicked.
I have 3 buttons:
* Add Renter
* Delete Customer
* Update Customer
This is the input element:
<input type=\"checkbox\" name=\"todelete[]\" value=\"$busRow[0]\" class=\"check\" />
$busRow is the user's id..
The form is submitted to a php script that checks to see what button was set and does different actions for that button. When the user clicks the delete it loops through and deletes each customer that was in the todelete[] array. When the user clicks the Update Customer button i want to change the checkbox input's name to "id". Then my php script will grab the user's id instead of grabbing the array value and then redirect the user to the Update Customer page with the id stored on the URL.
This is the javascript i'm using at the bottom of the page:
<script type="text/javascript">
$("button").click(function () {
if ($(this).text() == "Update Customer") {
$('input.check').attr("name", "id");
}
});
</script>
When i get to the Update Customer page the id is not there in the URL and i can't pull any values based upon the ID :(
You're setting the name value to "id", instead of the value stored in value. Try this:
$("button").click(function () {
if ($(this).text() == "Update Customer") {
var element = $('input.check');
element.attr("name", element.attr("value"));
}
});
Although, I think you could just simply pass the value of the input tag instead of the name when the btn clicked is 'Update'. That would save you the hassle of changing these different attributes and could save you trouble.
Edit: I'm reading the OP again and see you want to set the name att to "id" and not the user's id??? You're question is vague and hard to understand what you're trying to do. You're leaving out crucial code that grabs this "id" and redirects the user.
Edit2: What's up with the semi-colon between your string concat? I hope that's not in your source code. Now seeing your redirect code. I think your problem lies in trying to change the tag's attributes/values with an 'input.check' selector. I would also say you should redesign the way you are implementing this. Your checkboxes shouldn't hold your user information. But regardless, I don't think you need to even change the name value. If update isset() then just make $id = (its current name value); Download firebug to debug your javascript code. Firebug will also show you errors in your code that wouldn't see otherwise. It should help you out a lot
Try putting an alert inside the if statement to check if that is actually becoming true, to narrow down what might be the cause.
Also I've never seen input.check used as a selector. Perhaps give the button an id making it:
<input id=\"customercheck\" type=\"checkbox\" name=\"todelete[]\" value=\"$busRow[0]\" class=\"check\" />
Then change the attribute via the ID like so:
$('#customercheck').attr("name", "id");
that also saves you if you add another input to the field later down the road.

Detect how many times the users have click the button

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....

Categories