How can I insert an additional input textbox after an onchange event in a selectbox with the YUI library?
It is required to use YUI and the form is created with the PEAR Quickforms lib.
What I have yet is this:
$form->addElement('select', 'names', "Choose Name", $options, array('style'=>'width:300px', 'onchange' => 'name_changed(this.value);'));
$js =
<<<EOS
<script type="text/javascript">
function name_changed(name) {
alert('name is changed');
}
</script>
EOS;
$form->addElement('static', 'jsembed', '', utf8_encode($js));
The alert pops up if I change the option in the selectbox, this works for testing.
Now I need to check the chosen option and if this equals 'NEW', there should appear a text input field to enter a new name under the select box.
My problem is, that I don't know to do it right that the entered name is also passed to the submitted quickform data.
So I've created the element normally with $form->addElement('input',...) and copied the html source of this. On the option change event I've tried to insert the raw html code at the right position with this:
var htmlContent = '<div id="fitem_id_dbname" class="fitem fitem_ftext"><div class="fitemtitle"><label for="id_dbname">Create new DB </label></div><div class="felement ftext" id="yui_275"><input size="60" name="dbname" type="text" value="" id="id_dbname"></div></div>';
document.getElementsByClassName('fcontainer clearfix').innerHTML = htmlContent;
But this doesn't work, there appears no input field in the browser.
Could anybody show me how to do it right?
Lots of thanks!
I solved it for me now with the...
'style'=>'display:none'
...property in the quickform textinput element and use...
document.getElementById('id of the input element').style.display = 'block';
... which is called on the onchange event.
Related
I have textarea on simple html form. I want to display selected value of that text area just like selected value in dropdown. I searched google where I found textarea has no value attribute. So is there any option to display selected textarea value in html?
I want to show it's value while editing form just like selected value in dropdown list while editing..
you have to try this coding..
$('#formId :textarea').click(function() {
alert(this.tagName != 'TEXTAREA' ? this.tagName : this.type);
});
I put like this..and it's working..
<textarea name="yojana" id="yojana"cols="50" rows="3"><?php echo $delivery_memo_info->yojana;?></textarea>
Hope this link helps you
http://plnkr.co/edit/ocl4Zcmv4qjXSIxE7IyF?p=preview
jQuery not required. With plain Java Script, you can achieve this functionality.
HTML :
<textarea id='123' onkeyup='getvalue()'>
TEXTAREA
</textarea>
JS :
function getvalue(){
var a = document.getElementById('123').value;
alert(a)
}
i am trying to insert a checkbox or textfield dynamicly on a mouse click at the mouseposition anywhere on the page or even better a drag and drop of textfields and checkboxes to any position of the page.
goal is it to add editable textfields and checkboxes to a page like this
would be great if someone could help me with it.
Sorry for replying late, was testing actually ;) Try SOMETHING(modify the logic according to your needs) like this:
$('body').click(function(e){ $('body').append($('<input />').css({position:'absolute',left:e.pageX,top:e.pageY}).focus());})
You can use Draggle-Jquery plugin. Documentation and Demo
You just have to add jquery files and this simple code:
$(function() {
$( "#draggable" ).draggable();
});
html(you can use other html elements):
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
Some more demos
Quick thought:
Create a reusable input field (template)
var $textinput = '<input type="text" value="" style="position:absolute" />';
Add click handler to the page
// Using jquery
$('body').on('click', function(event) {
var posX = event.offsetX;
var posY = event.offsetY;
var $input = $textinput
this.append($input);
$input.css('{x: posX, y: posY}');
});
Then just send all the values back to server on save
see my client site first to get an idea.
In above site, i have a giftfinder box in right side. There are 3 select boxes. currently I'm using 3 forms for these 3 select boxes which means each drop down select box is embedded into form. When you select the first drop down select box, it picks one and second select box's value will be determined which value is selected from first select box. So if you choose Man, then all athe related occasions of Man will be dispalyed into seconds drop down select box. Its working fine.
But the problem is it refreshes everytime you select the first drop down box.
I don't want to refresh page. it must select the value and pass the value so seconds select box can determine its related values.
so I'm thinking to us ajax. but no success.
So i included some code for the first drop down select box.
this is mix of html and php and wordpress.
<div class="select-one">
<form id="searrec" method="post" action="">
<select name="selectionRecipient" id="selectionRecipient" onchange="this.form.submit();">
<?php
$results_rec = get_option('current_recipient');
if(isset($_POST['selectionRecipient'])){
$results_rec = $_POST['selectionRecipient'];
update_option('current_recipient', $results_rec);
$results_rec = get_option('current_recipient');
}
?>
<?php
//asort($result_rec);
$t_name_arr = array();
foreach($result_rec as $rec):
$t_id = $rec->term_id;
$term = get_term($t_id , 'category' );
$t_name_arr[] = $term->name;
endforeach;
//print_r($t_name_arr);
rsort($t_name_arr);
foreach ($t_name_arr as $t_name):?><option class="rec_val"<?php if($results_rec==$t_name){ echo 'selected="selected"';}?>value="<?php echo $t_name;?>"><?php echo $t_name;?></option>
<?php endforeach;?>
</select>
<input type="hidden" id="submitrec" value="Search" />
</form> -->
</div>
So I'm am using form method post and using $_POST to retrieve the selected value and pass it to $results_rec variable.
Later in the code, I'm using if.. else to determine if $results_rec =='Man' then display certain items which are related to Man and so forth.
So what I want is not to refresh the page while I select item from first drop down select box.
Please help.
change this:
<select name="selectionRecipient" id="selectionRecipient" onchange="this.form.submit();">
to this:
<select name="selectionRecipient" id="selectionRecipient">
and the jquery:
$("#searrec").submit(function(e) {
e.preventDefault();
// your code
return false;
});
EDITED:
use this to get the selected index (number)
var index = $("#selectionRecipient")[0].selectedIndex;
or value:
var value = $("#selectionRecipient")[0].value;
Then you can call an ajax perhaps: (assuming the other selection box has "id=other_select"
$.ajax({url:"index.php",type:"POST",data {type:"populate",index:2,value:"option1"},dataType:"json",
success: function(data) {
// data (json) returned from server so populate other selection boxes with that..
// in this example 'data' is an array, coming directly from server (see below the .php)
$("#other_select")[0].selectedIndex = 0;
for(var x in data) {
$("#other_select")[0].options[x] = new Option(data[x]);
}
}
})
in your .php i assume you get a list (etc. database) to populate the other selection list (in client). This code could looks like:
if (isset($_POST["type"]) && $_POST["type"]=="populate") {
echo json_encode(array("option1","option2","option3"));
exit(1);
}
$('#searrec').submit(function () {
//do some form submit work here
return false;
});
You'll have to use an AJAX call to populate the other select boxes based on whatever you've selected in the first one without reloading the page.
I suggest you take a look at jQuery's AJAX functionality. Read up on $.ajax and $.post - with them you could submit the value that you've selected in the first listbox to a PHP script and then based on that value return and populate the other select boxes.
Use AJAX to update the other selects without refreshing the page. Use jQuery to make AJAX easy.
This question will help:
Change the selected value of a drop-down list with jQuery
$('#searrec').submit(function(e){
e.preventDefault();
});
You should delete event onchange="this.form.submit(); from combobox
And use ajax with jquery:
$("#searrec").onchange(function() {
$.ajax({
url:"",
success:function(response){
alert("success");
}
});
});
Guys its fixed.
Plz have a look at http://giftideasitems.com/.
See gift finder box and see how it works.
I used iframe and embedded the forms, drop down coding there. thats it.
Even I used onchange="this.form.submit()" and page doesnot referesh, actually page refresh .... but not the main page, only the iframe is refreshing which is fine. this is exactly what i wanted.
<div id="gift-finder">
<div class="gift-finder-form">
<iframe name="inlineframe" src="code.php" frameborder="0"
scrolling="auto" width="200" height="180"
marginwidth="0" marginheight="0" id="gift-iframe">
</iframe>
</div>
This is my iframe code and see src, i used code.php; so all code is in separate place.
Though I had to modify some css, but anyways this is fine.
Thanks everyone who contributed yesterday.
I have a list of countries and their area codes in a database. I am trying to auto update a text field with the countries area code when a select option is selected.
ex.
<select name="country">
<option value="CA" code="+1">Canada</option>
...
</select>
<input type="text" name="phone" />
I need to pass on to the script the value CA and the users need to see Canada. Basically what I'm asking is can I create a new option code and have jQuery update the text field that I choose to it.
Is this possible to do? or is there another way I can accomplish this?
Edit: "code" is supposed to be the country's area code. So when a user selects Canada for example the text field phone gets updated with +1. I know I can just set value to +1 and then use .change() to update phone's .val() but I need the current value to pass on to the script that processes it.
I suggest you use an HTML5 data- attribute instead of a custom attribute:
<select name="country">
<option value="CA" data-code="+1">Canada</option>
...
</select>
<input type="text" name="phone" />
and then bind a handler to the change event:
$('select[name="country"]').change(function() {
$('input[name="phone"]').val($(this).children('option:selected').data('code'));
});
or with less jQuery:
$('select[name="country"]').change(function() {
$('input[name="phone"]').val(this.options[this.selectedIndex].getAttribute('data-code'));
});
Another option would be to have a country -> code map in JavaScript
var map = {
'CA': '+1',
...
};
and then look up the code.
Be sure to assign each element an id.
var code = $('#country option:selected').attr('code');
$('#phone').val(code);
If "code" doesn't work. Use "title".
Not entirely sure what you're asking, but dos this help?
$('select[name=country]').change(function() {
$('input[name=phone]').val($(this).find('option:selected').attr('code'));
alert('Do something else with this: ' + $(this).val());
});
$("select[name='country']").change(function() {
$("input[name='phone']").val($(this).find('option:selected'));
});
You can try this. It ties into the select menus change event and then gets the "code" attribute value and sets the text of the input to it.
Using some code to create a form dynamically which I got here: http://www.trans4mind.com/personal_development/JavaScript2/createSelectDynamically.htm
This works great. However I have a regular html table I generate with html/php to get data out of a DB. I want to replace that data with a form so when users click the edit button the original entry is replaced with a form (either textbox or pull down menu). The user makes a selection and the new table comes back with the appropriate edit.
So for example one part of the data has this in the table:
<td><?php echo $result[0] ?></td>
Using the link about to create a form dynamically I change this to:
<td id="paraID"><form id="form1" name="form1" method="post" action enctype="text/plain" alt=""><?php echo $result[0] ?></form></td>
Also note the onclick event for the edit button:
This is hard to explain but hoping someone can help me with this interaction. I need some way to say:
if (user clicks edit button)
then
replace html table with form for each entry (for example, the table returns a name called foo and a textbox will appear with foo in it but now they can edit to change the name).
If you can start out with an id for the td then it will make things easier. Then you will need an edit button somewhere. Notice: It might be nice to replace "result_0" with the name for the value/field:
<td id="result_0_parent"><?php echo $result[0] ?><input type="button" onClick="editField('result_0','select')" value="Edit" /></td>
Then in your javascript you will have the editField function defined so that it sets the content of the td to be the dynamic form. Looking at makeForm function in the example javascript, you see this happening with appendChild(myform); The function editField will be like the makeForm function except you will pass in the field_id and field_type as parameters:
function editField(field_id, field_type)
I suggest you change the line that defines mypara to define mytd or better yet, field_parent instead since in your case it will not be a paragraph element, but a td (or possibly some other type of element):
field_parent = document.getElementById(field_id+"_parent");
The example code create a select (dropdown), but I am guessing you want to create other field input types so I recommended having field_type as a second parameter to the function. This means that it would make more sense for your implementation to use myfield instead of myselect and then use the field_type parameter to decide what myfield will be.
Replace the line in the makeForm / editField function:
myselect.setAttribute("id","selectID");
with
myfield.setAttribute("id",field_id);
One more thing: To set the initial value of the input field to be the displayed content, you will need to copy the "innerHTML" of the "parent" element. So place something like this right after defining field_parent:
initial_value = field_parent.innerHTML;
and I think you can figure out the rest. If not, I can elaborate a little more.
This works great. However I have a regular html table I generate with
html/php to get data out of a DB. I want to replace that data with a
form so when users click the edit button the original entry is
replaced with a form (either textbox or pull down menu). The user
makes a selection and the new table comes back with the appropriate
edit.
This is a script that allows with a double click on values to edit them and has a button to send them back. Maybe it would be of some help to use it (or use parts of it).
<?PHP
if(count($_POST)>0)
{
echo 'You gave:<br><per>';
print_r($_POST);
echo '<a href=http://localhost/temp/run.php>Start over</a>';
exit;
}
?>
<html>
<head>
<script type="text/javascript">
/**formEditor Class
*/
function formEditorCls( )
{
/**
Constructor simulator
*/
this.lastFieldEditedId = null;
/** Change span with input box, hide the eddit button and store theses IDS
*/
this.edit=
function (field)
{
//if there was a field edited previously
if(this.lastFieldEditedId != null)
this.save();
//get the inner element of the div, it can be span or input text
var childElem = document.getElementById(field).getElementsByTagName('*')[0];
//then replace the span element with a input element
document.getElementById(field).innerHTML="<input type=text name=n_"+field+
" id=id_"+field+" value="+childElem.innerText+">";
//store what was the last field edited
this.lastFieldEditedId =field;
}//func
this.save=
function ()
{
dbq="\"";sq='\'';
//get the last value
var lastValue = document.getElementById(this.lastFieldEditedId).
getElementsByTagName('*')[0].value;
//store it as span
document.getElementById(this.lastFieldEditedId).innerHTML="<span ondblclick="+dbq+
"formEditor.edit("+sq+this.lastFieldEditedId+sq+");"+dbq+" >"+lastValue+"</span>" ;
//now must reset the class field attribute
this.lastFieldEditedId=null;
}//func
this.submit=
function (path)
{
this.save();//if ay field was edited put new values in span elements
var form = document.createElement("form");//create a new form
form.setAttribute("method", "post");
form.setAttribute("action", path);
var myDiv = document.getElementById( "fieldsDiv" );//get the div that contains the fields
var inputArr = myDiv.getElementsByTagName( "SPAN" );//get all span elements in an array
//for each span element
for (var i = 0; i < inputArr.length; i++)
{
var hiddenField = document.createElement("input");//create an input elemet
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", i);
hiddenField.setAttribute("value", inputArr[i].innerText);
form.appendChild(hiddenField);//append the input element
}
document.body.appendChild(form);//append the form
form.submit();//submit the form
}//func
}//class
formEditor = new formEditorCls( );
</script>
</head>
<body onclick="rt();">
Double click any value to change it..<br><br>
<div id="fieldsDiv">
Name:<font id="nameField">
<span ondblclick="formEditor.edit('nameField');" >Mark</span>
</font><br>
Surname:<font id="surnameField" >
<span ondblclick="formEditor.edit('surnameField');">Smith</span>
</font><br>
</div>
<input type=submit name="submit"
onclick="formEditor.submit('http://localhost/temp/run.php');" value="Submit">
</body>
</html>