I have a form with some fields of type text and 2 fields (name and second name) that have a value by default, and these 2 fields are of type="hidden".
Now, I would like to add a link on the form "Fill an order for another person". If the user click on this link the fields name and second name must be of type text to allow the user enter a name/second name. I tried to use jQuery to remove the existing hidden field, and create a new textbox in it's place, with the same value as the hidden one.
Here is an example of what I want: http://jsfiddle.net/FT2B3/1/
Can you tell me whats wrong? Thanks in advance.
(...)
if ($field_label=="First name")
{
return sprintf("<div class='ginput_container'>$fname<input name='n1' id='$fname1' type='hidden' value='$fname' class='ginput_container/></div>");
?>
<script type="text/javascript">
$(function(){
$('#nform').click(function()
{
$nbox1 = $("<div class='ginput_container'><input id='$fn1' type='text' class='ginput_container'/></div>").val($('#fname1').val());
$('#fname1').after($nbox1).remove();
});
});
</script>
Link
<?php
}
(...)
How about this?
HTML:
<input id="hiddenname" type="hidden" value="secret value" /><br />
Show me the hidden field!
Javascript:
$(function() {
$('#showLink').click(function() {
$('#hiddenname').prop('type', 'text');
});
});
Because a div element is wrapping input element when you try to set value with .val() jQuery tries to set value to that div element. You can set the value while you create the input field like this;
$nbox1 = $("<div class='ginput_container'><input id='$fn1' type='text' class='ginput_container' value='" + $('#fname1').val() + "' /></div>");
Related
i have a form where two fields are dynamically generated through java script when a button is clicked.when the button is clicked each time,the two text field will generate again and again.now i have got the count of text field generated in a hidden field in JavaScript.How can i get the value of hiddenfield in controller and insert the values of text fields in database,by appending comma in data when the text box value is entered each time.please help me.
my javascript is
<script>
var countbox=0;
var textbox1=0;
var textbox2=0;
function getField()
{
var newtextbox1="name1"+countbox;
var newtextbox2="name2"+countbox;
document.getElementById('renderDiv').innerHTML+='<br/><input type="text" id="'+newtextbox1+'" name="'+newtextbox1+'" /><br/><input type="text" id="'+newtextbox2+'" name="'+newtextbox2+'" />';
document.getElementById('renderDiv').innerHTML+='<br/><input type="hidden" id="hiddentextField" name="hiddentextField" value="'+countbox+'" />';
countbox +=1;
}
</script>
my html code is
<input type="button" id="button1" onclick=getField();/>
<div id="renderDiv">
</div>
inside this div the two textfield is generated along with the hidden field
i am not getting the value of textfield in controller while submitting and i am not getting the count of textfield.i tried like $hiddenfield=$this->input->post('hiddentextField');
you will have to post the variable inorder to pass this to the server
<script>
var countbox=0;
var textbox1=0;
var textbox2=0;
function getField()
{
var newtextbox1="name1"+countbox;
var newtextbox2="name2"+countbox;
document.getElementById('renderDiv').innerHTML+='<br/><input type="text" id="'+newtextbox1+'" name="'+newtextbox1+'" /><br/><input type="text" id="'+newtextbox2+'" name="'+newtextbox2+'" />';
document.getElementById('renderDiv').innerHTML+='<br/><input type="hidden" id="hiddentextField" name="hiddentextField" value="'+countbox+'" />';
countbox +=1;
window.location.href = "index.php?name=" + countbox-1;
//change index.php to your page name
}
</script>
then in the same page
<?php
$hiddenfield=$_GET["name"];
?>
I had the same problem before, what I did is I insert those text box inside a table, lets say, tableSample
then I use jQuery find
var _content = '';
var _findcontent = $("#tableSample");
_findcontent.find("tr").each(function(){
$(this).find("td").each(function(){
$(this).find("input").each(function(){
_content += $(this).val+'~'+$(this).attr("id")+'|';
});
});
});
Then use ajax to pass it to your PHP
$.post("<?php echo site_url('controller_name/method_name'); ?>",
{
content : _content
}
,function( _data){
jAlert("alert",_data,"alert");
});
In your PHP, you can use explode to get the desired values,
$content_from_page = $this->input->post("content");
$explode_string = array();
$explode_string = explode("|",$content_from_page );
$explode_arr = array()
for($x=0;$x<count($explode_string)-1;$x++)
{
$explode_arr[] = explode("~",$explode_string[$x];
}
then print_r($explode_arr); to check
*Note: The only problem with this approach is that, if the character that is inserted into the textbox is ~ or |, coz that is the delimiter used.
I have two fields, one of which has the jQuery autoComplete plugin.
<input type='text' name='primary_diagnosis' id='icd1-diagnosis'/>
<input type='text' name='ICD_No1' id='icd1-num' />
$(document).ready(function(){
$("#icd1-diagnosis").autocomplete("autocomplete-icd.php",
{
selectFirst: true
});
});
Is there a way to automatically fill up the second text input once a value has been selected for the first? For example, selecting "Dengue fever [classical dengue]" for the first text input, then query the database for certain value to yeild "A90" as the value for the second text input.
Here's autocomplete-icd.php
<?php
include('config.php');
$q=$_GET['q'];
$my_data=$q;
$sql=mysql_query("SELECT col9 FROM tb_data_icd WHERE col9 LIKE '%$my_data%' ORDER BY col9",$con);
if($sql)
{
while($row=mysql_fetch_array($sql))
{
$col9=$row['col9'];
echo "$col9"."\n";
}
}
?>
You should be able to use the change event to fire off some javascript to update the second input's value. Something like this:
$("#icd1-diagnosis").change(function(){
//retrieve your value
var val = 'sample';
$('#icd1-num').val(val);
});
I have a simple div used to display user account info such as first name:
<div id="firstNameChange"><?=$firstName?></div>
I have jquery code used to turn it into an input element:
//execute when nameChange DIV is clicked
$("#firstNameChange").click(function(){
//check if there are any existing input elements
if ($(this).children('input').length == 0){
$("#saveFirstName").css("display", "inline");
//variable that contains input HTML to replace
var inputbox = "<input type='text' class='inputbox' name='firstName' value=\""+$(this).text()+"\">";
//insert the HTML intp the div
$(this).html(inputbox);
//automatically give focus to the input box
$("this .inputbox").focus();
//maintain the input when it changes back to a div
$("this .inputbox").blur(function(){
var value = $(this).val();
$("#firstNameChange").text(value);
});
}
});
I created a PHP variable to grab the contents of the input element but it is not filling the variable. For some reason, the variable is not being set with the name value of the JS input element that i created above. any ideas why this is happening?
if(isset($_POST['submit'])){
$firstName = $_POST['firstName'];
$sql = "UPDATE `user_accounts` SET `first_name`='$firstName' WHERE email='" . $_SESSION['email'] . "' AND user_id=" . $_SESSION['userID'] ;
$_dbConn->update($sql) or die(mysql_error());
Redirect_To('index.php?page=userProfile');
}
The problem is you replace your input element when you do this:
$("#firstNameChange").text(value);
One solution is to change your HTML to this:
<div id="firstNameChange"><?=$firstName?></div><input type="hidden" name="firstName" id="firstNameHidden"/>
Then in your blur function set the hidden input value to the text input value like this:
$("#firstNameHidden").val( value );
Why are you doing this? $("this .inputbox").focus();
First of all, "this .inputbox" makes no sense to begin with.
$(inputbox).focus();
//maintain the input when it changes back to a div
$(inputbox).blur(function(){
var value = $(this).val();
$("#firstNameChange").text(value);
});
Also, do you realize that when you do $(this).html(inputbox); you replace all content of your DIV with the newly created input element? So, your <?=$firstName?> is gone at that point.
I ve been trying to obtain the value of my form input elements, but I am just not having any luck with it.
I have the following form within a while loop in PHP, so there will be multiple forms.
<form method='POST' action=".$_SERVER['SCRIPT_NAME']." name='form_set_deadline' class='form_set_deadline'>
<input type='hidden' value='".$data3['unique_name']."' name='file_id' class='file_id' />
<input type='hidden' value='".$user_id."' name='client_id' class='client_id' />
<table>
<tr>
<td align='left'><input type='button' name='set_file_options' value='Submit' class='set_file_options' /></td>
</tr>
</table>
</form>
Now, I am trying to get the value of the hidden fields of jquery, but just don't know how to access the hidden field values. Remember, there are multiple of these forms on the page. Here is the jquery form, contained within a function.
function setFileOptions(){
$('.set_file_options').each(function(e){
$(this).unbind("click").click(function(e){
e.preventDefault();
//set form variables
var file_id = // DON'T KNOW HOW TO GET THE HIDDEN FIELD INPUT VALUE?
alert(file_id);
}); //END THIS CLICK FUNCTION
});
} //END MAIN FUNCTION
Thanks for the help/tips!
So after all the input received from you all, I have decided to use the following to get all the form data:
var form_data = $(this).closest('form').serialize();
Thanks again!
var file_id = $(this).closest('form').find('.file_id').val();
Alternatively, a pure JS solution:
var file_id = this.form.elements['form_id'].value;
A selector to select all <input type="hidden"/> elements:
var hiddens = $(this).closest('form').find(':hidden');
//hiddens.eq(0) = file_id
//hiddens.eq(1) = client_id
If you do not have anything attached to your classnames, I recommend to drop these attributes, and use the name-attribute selector:
var file_id = $(this).closest('form').find('[name="file_id"]').val();
Try this,
$(this).closest('form').find(':hidden'); //should get you the hidden fields inside the form
And there could be more than one fields so you may need iterate to get all the hidden fields,
var field_val = [];
$.each ($(this).closest('form').find(':hidden'), function (index) {
field_val [$(this).attr('class')] = $(this).val();
});
var file_id = $(this).closest('table').siblings('.file_id').val()
Have you tried:
var file_id = $('input[name="file_id"]').val();
Try this:
var fileid = $(this).parents('form').find('.file_id').val();
I need to pull the contents of some input text boxes into a database. The first box is displayed but I'm using this Javascript to create some of them dynamically:
var counter = 1;
var limit = 10;
function addInput(divName){
if (counter !== limit) {
var newdiv = document.createElement('div');
newdiv.innerHTML = " <input type='text' name='myInputs[]' size=40>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
How can I add a value to the form which will be different for each box created so I can reference them in PHP?
Thanks!
Edit: scratch that, I've never tried using an array to group inputs, but it works so use that instead. Keep the name of your inputs as myInputs[] but reference in php like this:
$_POST[myInputs][0]
for your first field and
$_POST[myInputs][1]
for the second etc..
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>//use jQuery. it makes life easy.
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.4.2.js"%3E%3C/script%3E'))</script>
<script>
$(document).ready(function(){//fire when the page is ready
$('.addFields').click(function(){//any time someone clicks on a element with the class addFields
if( $('.myInputs').length < 10 ){ // if there are less than 10 input fields...
$($(this).attr('rel')).append("<br/><input type='text' name='myInputs[]' class='myInputs' size='40' id='myInputs"+($('.myInputs').length)+"'>");
// add another input field with an ID equal to it's place in line.
}
});
});
</script>
</head>
<body >
<a rel="#addToMe" class="addFields" href="#">Add a field</a><!-- the triggering element this can be anything that can be clicked on-->
<div id="addToMe"><!-- the element holding our input fields, new ones get added to the back of here, note that the trigger's rel attribute is the ID of this attribute and started with a "#' ID identifier-->
<input type='text' name='myInputs[]' class='myInputs' size='40' id='myInputs0'>
</div>
</body>