There is demo Demo link showing how JQWidget jqxcombobox is working with form submission. But if we look the demo closely we can see the results are changing when we use mouse or keyboard.
For example Alfreds Futterkiste is the Display Member and value is Maria Anders.
We will get the correct value (Maria Andres) when we submit the form using Mouse click, if we use the keyboard we get the same Display-member value Alfreds Futterkiste.
I think if i can add a hidden text box with below code then it may work.
Bind to the change by type: jqxComboBox.
$('#jqxComboBox').on('change', function (event)
{
var args = event.args;
if (args) {
// index represents the item's index.
var index = args.index;
var item = args.item;
// get item's label and value.
var label = item.label;
var value = item.value;
}
});
But how I populate the hidden text box with the above function...
Thanks.
I found the answer myself :)
I found a small solution for this....
1. Create a hidden field to store the value of the combobox
2. Use event.args.item.value to change the value of the hidden field.
// trigger the select event.
$("#combobox").on('select', function (event) {
var elem = document.getElementById("mytext");
elem.value = event.args.item.value;
in Body
<form class="form" id="form" target="form-iframe" method="post" action="echo.php" style="font-size: 13px; font-family: Verdana; width: 650px;">
<div name="list" id="combobox">
<input name="productvalue" type="hidden" id="mytext">
<input style="margin-top: 10px;" type="submit" value="Submit" id="sendButton" />
</form>
echo.php
<?php
echo "Wrong Data =";
echo $_POST["list"];
echo "<br />";
echo "Value through hidden feild =";
echo $_POST["productvalue"];
?>
hope this will work for someone :)
Related
I have a table that lists my students.. and the License Number Column will either shown the license number or if there is no number in the DB it will show a textbox..
Upon submit (note: no submit button, to keep it need i just press return)
The results from the PHP script will be shown via Ajax.
My complete code is here.
http://pastebin.com/9k0EKXA9
Here is the code within the license number cell on each row:
<td><?php // check if license number exists.
if($row['license_no'] == '')
{
//show form.
?>
<form method="POST" id="license_no_update"">
<input type="text" name="license_no" value="License Number" />
<input type="hidden" value="<?php echo $row['student_id']; ?>" name="student_id" />
</form>
<div id="output"></div>
<?php
}else{
//show license no.
echo $row['license_no'];
}
?></td>
Here Is the JQUERY
<script type="text/javascript">
$(document).ready(function() {
$("#license_no_update").submit(function() {
var license_no_update = $(this).serialize();
$.post('license_update.php', license_no_update, function(data) {
// We not pop the output inside the #output DIV.
$("#output").html(data);
});
return false;
});
});
</script>
The problem i am having, even after searching google many times..
I know i have to have a new form & element id for each row of the table.
but even when i do have those, i do not know how to get JQUERY to find that unique number..
currently with the code attached if i submit on the first row of the table, the correct results are displayed, if i submit on any other row nothing is displayed..
I hope that all makes sense.
Regards
Aaron
Use .find() to find the value of the hidden input within the clicked form. Notice the use of $(this) which is the form itself, and then you can narrow down the input by it's name, since you know the name.
However, it is unclear what you want to do with the id so I left that up to you.
$("#license_no_update").submit(function() {
var studentID = $(this).find("input[name='student_id']").val();
var license_no_update = $(this).serialize();
$.post('license_update.php', license_no_update, function(data) {
// We not pop the output inside the #output DIV.
$("#output-" + studentID).html(data);
});
return false;
});
Update:
Here is one way of creating unique ID's for each output:
if($row['license_no'] == '')
{
//show form.
?>
<form method="POST" id="license_no_update"">
<input type="text" name="license_no" value="License Number" />
<input type="hidden" value="<?php echo $row['student_id']; ?>" name="student_id" />
</form>
<div id="output-<?php echo $row['student_id']; ?>"></div>
<?php
}else{
//show license no.
echo $row['license_no'];
}
I am working on a program for my company to process different product types and create files.
I have a form that will eventually grow to close to 150 checkbox options over the course of a few months. I'm trying to get input on the best way to do this and save me time in the long run.
So for example I have this:
<input type="checkbox" value="NOT" name="size">NOT<br />
<input type="checkbox" value="THA" name="size">THA<br />
<input type="checkbox" value="TAB22" name="size">TAB22<br />
What I need is that for every checkbox that is clicked, i need to reveal a text area w/ a simple title that is equal to the checkbox value above it within a div called <div id="inputArea"> From here the user will then paste in file names in the corresponding text areas. Basically each text area is tied to a checkbox option.
I use PHP to process the form, so when it is submitted, at that point I will need to store the value of each text area that has values into separate variables. Is there a way to do that dynamically as well?
I'm open to jquery, javascript, php or anything.
I'm just curious as the best to do this. Otherwise my knowledge is only good enough to manually create 150 checkboxes, then create 150 text areas, then create 150 jQuery hide/reveal methods, then create 150 php checks to determine what text areas have values and assign them to variables.
You may try this
HTML
<form action="some_action.php" method="post">
<input type="checkbox" value="NOT" name="size">NOT<br />
<input type="checkbox" value="THA" name="size">THA<br />
<input type="checkbox" value="TAB22" name="size">TAB22<br />
....
</form>
JS
$('input:checkbox[name="size"]').on('click', function(){
if($(this).is(':checked'))
{
$('<div class="inputArea"></div>') // inputArea is a class not an ID because ID should be anique
.append($('<textarea />', {id:'txtArea_'+$(this).val(), name:'txtArea_'+$(this).val()}))
.insertAfter($(this).next('br'));
}
else
{
$(this).next('br').next('div.inputArea').remove();
}
});
DEMO.
Every textarea has name and id with prefix txtArea_ with value of it's corresponding checkbox so if a checkbox is submitted and it's value is NOT then you can retrive the value of that corresponding textarea in php as
$txtArea_NOT=$_POST['txtArea_NOT']; // When form's method is post
If you're using jQuery, you should be able to use/modify the following as a base.
$('input[type=checkbox]').click(function() {
var value = $(this).val();
$(this).append(value +'<br /><textarea name="'+ value +'"></textarea>');
});
You can try to use the Wrap and unwrap methods to get your things done.
Remember ID's should be unique in a page. So instead of id I have assigned it a class for the textarea div..
$('input[type=checkbox]').on('click', function() {
var isChecked = $(this).is(':checked');
if (isChecked) {
$(this).wrap('<div class="inputArea"></div>');
$(this).closest('div').prepend('<textarea class="text-area" cols="10" rows="2"></textarea>');
}
else{
$(this).closest('div').find('.text-area').remove();
$(this).unwrap();
}
});
DEMO HERE
So basically your are wrapping your checkbox inside a div and assigning it.. When you uncheck it , the wrapper is removed... This is independent of other checkboxe's. So it should work for any number of checkboxes.
HTML
You should have unique ids for the checkboxes, just as good practice. This also will show/hide textareas, to preserve any text that has already been entered -- this could be a good or a bad thing, depending on your requirements.
<form name="frmSize" method="POST" action="somePage.php">
<div><input id="cbNot" class="cbFileList" type="checkbox" value="NOT" name="not">NOT</div>
<div><input id="cbTha" class="cbFileList" type="checkbox" value="THA" name="tha">THA</div>
<div><input id="cbTab22" class="cbFileList" type="checkbox" value="TAB22" name="tab22">TAB22</div>
</form>
JavaScript
var cbList = document.getElementsByClassName( 'cbFileList' );
var i;
for ( i = 0; i < cbList.length; i++ ) {
createTextArea( cbList[i] );
cbList[i].addEventListener( 'click', function() {
var cb = this;
if ( cb.checked ) {
showTextArea( cb );
} else {
hideTextArea( cb );
}
});
}
function showTextArea( cb ) {
document.getElementById( 'div-' + cb.id).style.display = '';
}
function hideTextArea( cb ) {
document.getElementById( 'div-' + cb.id).style.display = 'none';
}
function createTextArea( cb ) {
var newDiv = document.createElement( 'div' );
var newTextArea = document.createElement( 'textarea' );
newDiv.setAttribute( 'id', 'div-' + cb.id );
newDiv.innerHTML = '<b>' + cb.value + '</b><br/>'; // Create bold text using checkbox's value
newTextArea.setAttribute( 'id', 'ta-' + cb.id );
newTextArea.setAttribute( 'name', 'ta-' + cb.id );
newTextArea.innerHTML = cb.value;
newDiv.appendChild( newTextArea );
cb.parentNode.appendChild( newDiv );
}
The Output
<div>
<input id="cbNot" class="cbFileList" type="checkbox" value="NOT" name="not">NOT
<div id="div-cbNot">
<b>NOT</b><br/>
<textarea id="ta-cbNot"></textarea>
</div>
</div>
<div>
<input id="cbTha" class="cbFileList" type="checkbox" value="THA" name="tha">THA
<div id="div-cbTha">
<b>THA</b><br/>
<textarea id="ta-cbTha" name="ta-cbTha"></textarea>
</div>
</div>
...
PHP
<?
// run a for loop through $_POST[] and check for any field prefixed with 'ta-'
foreach( $_POST as $key => $value ) {
if ( strpos( $key, 'ta-' ) !== false && strlen( $value ) > 0 ) {
// Found a textarea with content!
// Do something with $_POST[$key], which contains the contents of textarea
}
}
?>
I have a requirement for adding values selected in a select box to a input box with the same form and am not sure how to best go about this. The select box contains user email addresses and the input box needs to contain multiple email addresses. The idea is that when you select a email address from the select box it is then added to the input either automatically, or by clicking the add button which reload the page in PHP adding to a variable that is the value of the input box. I have tried to do this by having a form within a form but that does not work is there a better way of doing this?
Many thanks.
Well, in the select's onchange event, set the inputs value to all of the selected options concatenated together.
Here's some psuedo-code:
on select changed {
str= ''
for every element
if checked
str = str + value + ','
set input's value to the variable str
Again in jQuery:
$('select').onchange(function(){
str='';
$('option:selected').each(function(){
str+=this.value+','; });
$('input:text').value(str); });
Edit: Here's what you wanted, without multi-select.
$('select').onchange(function(){
$('option:selected').each(function(){
$('input:text').val($('input:text').val()+$(this).val()+',');})
.removeAttr('selected'); });
You can try this:
Write this code in the top of the page before DOCTYPE.
<?php
if(isset($_POST['add']))
{
$previous_email = $_POST['txt_email'];
$emails = $_POST['select_email'].",".$previous_email;
}
else
{
$emails = '';
}
?>
The javascript: you can put it in the head section of your html document
<script>
function add_email()
{
document.getElementById('txt_email').value = document.getElementById('select_email').value +','+ document.getElementById('txt_email').value;
}
</script>
And finally the html:
<body>
<form method="post" action="" name="myform">
<select name="select_email" id="select_email" onchange="add_email();">
<option value="email1#test.com">email1#test.com</option>
<option value="email2#test.com">email2#test.com</option>
<option value="email3#test.com">email3#test.com</option>
</select>
<textarea name="txt_email" id="txt_email"><?=$emails;?></textarea>
<input type="submit" value="add" name="add"/>
</form>
</body>
Hope it helps
I call some links (opening table in the div) in the form
<A HREF="#1" onClick = ?????>button 1<A>
<A HREF="#2" onClick = ?????>button 2<A>
<A HREF="#3" onClick = ?????>button 3<A>
I would like through the onClick function to send data (numbers: 1, 2, 3) and receive it in PHP in the same document. I guess I have to commit to this form.
How to do it?
EDIT -------------------------------------
I try the #gilly3 way
<script language="JavaScript">
function submitValue (n) {
var f = document.forms.myform_1;
f.myNumber.value = n;
f.submit();
}
</script>
<?php
global $PHP_SELF;
echo "<form action='". htmlentities($PHP_SELF)."' method=\"POST\" id=\"myform_1\">";
?>
<input type="hidden" name="myNumber" />
button 1
button 2
button 3
</form>
tested - working ok. thnks for your help
Add hidden fields to your form. In your click handler, write whatever value you want to the hidden fields and call form.submit().
function submitValue (n) {
var f = document.forms.myForm;
f.myNumber.value = n;
f.submit();
}
Use it like this:
<input type="hidden" name="myNumber" />
button 1
button 2
button 3
Or get the value from $_GET and skip the JavaScript:
button 1
button 2
button 3
use jQuery
$('#anchorid').click(function(){
$.post('self.php',{data:'1'},function(){
});
});
Is it possible?
I want a user to post an array full of 1-5 pieces of data.
At first there would be only one text field on show, but on clicking a 'plus' icon next to it, it would create another text field below it for more user input.
I would also want to have a delete icon next to text boxes 2-5, to remove them if necessary.
My JQuery knowledge is limited, and I can work out how to append text boxes to a list, but not to keep track of them/delete them. Ideally I would also want to pass them as an array to php, so I can easily loop through them.
<input type="text" size="15" maxlength="15" name="1"><img src="add.png" onclick="add();">
<!-- Below is hidden by default, and each one shows on click of the add image -->
<input type="text" size="15" maxlength="15" name="2"><img src="delete.png" onclick="delete(2);">
<input type="text" size="15" maxlength="15" name="3"><img src="delete.png" onclick="delete(3);">
<input type="text" size="15" maxlength="15" name="4"><img src="delete.png" onclick="delete(4);">
<input type="text" size="15" maxlength="15" name="5"><img src="delete.png" onclick="delete(5);">
jQuery clone() is very handy for this. A small example how it could be done (working example on jsfiddle)
<ul>
<li><input type="text" name="textbox[]" /></li>
</ul>
<input type="button" id="addTextbox" value="Add textbox" />
<script type="text/javascript">
$(function(){
$('#addTextbox').click(function(){
var li = $('ul li:first').clone().appendTo($('ul'));
// empty the value if something is already filled in the cloned copy
li.children('input').val('');
li.append($('<button />').click(function(){
li.remove();
// don't need to check how many there are, since it will be less than 5.
$('#addTextbox').attr('disabled',false);
}).text('Remove'));
// disable button if its the 5th that was added
if ($('ul').children().length==5){
$(this).attr('disabled',true);
}
});
});
</script>
For the server-side part, you could then do a foreach() loop through the $_POST['textbox']
As long as you give each text box a name like "my_input[]", then when the form is submitted, PHP can get the answer(s) as an array.
$_REQUEST['my_input']; would be an array of the values stored in each text box.
Source: Add and Remove items with jQuery
Add
Remove
<p><input type="text" value="1" /></p>
<script type="text/javascript">
$(function() { // when document has loaded
var i = $('input').size() + 1; // check how many input exists on the document and add 1 for the add command to work
$('a#add').click(function() { // when you click the add link
$('<p><input type="text" value="' + i + '" /></p>').appendTo('body'); // append (add) a new input to the document.
// if you have the input inside a form, change body to form in the appendTo
i++; //after the click i will be i = 3 if you click again i will be i = 4
});
$('a#remove').click(function() { // similar to the previous, when you click remove link
if(i > 1) { // if you have at least 1 input on the form
$('input:last').remove(); //remove the last input
i--; //deduct 1 from i so if i = 3, after i--, i will be i = 2
}
});
$('a.reset').click(function() {
while(i > 2) { // while you have more than 1 input on the page
$('input:last').remove(); // remove inputs
i--;
}
});
});
</script>
You will need to create DOM elements dynamically. See how it is done for example in this question. Notice that
document.createElement
is faster then using jquery's syntax like
$('<div></div>')
Using that technick, you could create inputs like
<input name="id1"/>
<input name="id2"/>
<input name="id3"/>
<input name="id4"/>
<input name="id5"/>
On submitting your form you'll get all them in your query string like
...id1=someval1&id2=someval2&...
Having that, you could process this query as you want on server side.
<form method="POST" id="myform">
<input />
Add textbox
<input type="submit" value="Submit" />
</form>
<script type="text/javascript">
$(document).ready(function(){
$('#add_textbox').click(function(){
var form=$(this).closest('form');
var count=form.find('input').length();
form.append('<div class="removable_textbox"><input />delete</div>');
$('.delete_input').click(function(){
$(this).find('.removable_textbox').remove();
return false;
});
return false;
});
$('#myform').submit(function(){
var i=1;
$(this).find('input').each(function(){
$(this).attr('name','input-'+i);
i++;
})
});
});
</script>
<?php
if(isset($_POST['input-1'])){
$input_array=$_POST;
}
?>
something like this?
I wrote a litte jQuery plugin called textbox. You can find it here: http://jsfiddle.net/mkuklis/pQyYy/2/
You can initialize it on the form element like this:
$('#form').textbox({
maxNum: 5,
values: ["test1"],
name: "textbox",
onSubmit: function(data) {
// do something with form data
}
});
the settings are optional and they indicate:
maxNum - the max number of elements rendered on the screen
values - an array of initial values (you can use this to pass initial values which for example could come from server)
name - the name of the input text field
onSubmit - onSubmit callback executed when save button is clicked. The passed data parameter holds serialized form data.
The plugin is not perfect but it could be a good start.