I am using php for filling some data in below div tag
<div id="div_content">
<?=$text_content?>
</div>
from the below form contents
<form action="javascript:fill_content(parm)">
<table>
<tr>
<td><textarea name='content_name' id='content_id'>This is a test</textarea> </td>
</tr>
</table>
<input name='form_submit' type="submit" value='submit'>
</form>
I used jquery:
<script type="text/javascript">
function fill_content(textarea_content) {
$('#div_content').load('/process.php?content=' + textarea_content);
}
</script>
How can i get textarea value in javascript:fill_content(parm) as parm.
I used document.getElementByID('content_id').value and also document.getElementsByName('content_name')[0] instead of parm, but they did not work.
Many Thanks.
fill_content($("#content_id").val());
Why don't you use jQuery again to address the textarea? U can use $('#div_content').find('#content_id').val()
Related
I have the following table dynamically generated using php and MySQL. The number of rows and number of buttons generated are dynamic.
<?php
if($resultCheck != 0){
while($result = mysqli_fetch_array($tableQueryExecute)){
$normalShiftDuration = $result['shift1Duration'];
?>
<tr> <form method="post" id="vtagViewTwo">
<td name=""><select class="form-control" name="normalShiftOa" id="normalShiftOa"><option>1</option></select></td>
<td>
<input type="submit" class="btn btn-primary" name="editButton" id="editButton" value="Save">
</td>
</form></tr>
<?php
}
}
?>
I want to get value of the <td> which is normalShiftOa value with the button click using jQuery click event as below.
$("#editButton").click(function(){
alert("Clicked");
});
But since there are many button generating for each row with the same id, I am not able to do it. Does anyone know how to do it? I am able to do it using php $_POST['editButton'] method. But I want to do it using jQuery.
Edit 1
I changed the id editButton to class and tried the following. But it is not working
$(".editButton").click(function(){
alert($(this).$("#normalShiftOa").val());
});
Instead of using ids, use class editButton. Then, if you want to get the value of the select, use jQuery like shown below:
$(".editButton").click(function(){
let tdValue = $(this).closest("form").find("select").val();
});
Edit: Code snippet that works.
$(".editButton").click(function(event){
let tdValue = $(this).closest("form").find("select").val();
alert(tdValue);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr> <form method="post" id="vtagViewTwo">
<td name=""><select class="form-control" name="normalShiftOa" id="normalShiftOa"><option>1</option></select></td>
<td>
<input type="submit" class="editButton btn btn-primary" name="editButton" id="editButton" value="Save">
</td>
</form></tr>
I have a table where it's rows are generated by a foreach loop.
Each table row has two columns, one with a form and the other with the forms submitted data, which I have called notes. (and updates using a jQuery library without refreshing the browser).
<script>
$(".notes_column").each(function(){
var $myform = $(this).find('.notes_form');
var $mynotes = $(this).find('.notes');
$myform.validate({
submitHandler: function(form) {
$.post('process.php', $myform.serialize(), function(data) {
$mynotes.html(data);
});
}
});
}); // each function
</script>
<table id="myTable" class="tablesorter" border="1" cellpadding="5">
<thead>
<tr>
<th>Notes</th>
<th>Submit Note</th>
</tr>
</thead>
<tbody>
<?php
foreach($myarray as $myvar){
echo '
<tr>
<td>ID LIKE TO PLACE THE content of the div class="notes" HERE, HOW CAN I DO IT?</td>
<td class="notes_column">
<form class="notes_form" action="" method="post">
<input class="q" type="text" name="notes" size="30" placeholder="Place your notes here..." />
<input class="searchsubmit" type="submit" name="submit" value="Submit" />
</form>
<div class="notes"></div>
</td>
</tr>
';
}
?>
</tbody>
</table>
Right now I use a jQuery each function which iterates through each table column, and for each column with the class name ".notes_column" populates a div with the class "notes" with the submitted data.
The question is listed inside the code with capitalized letters, how can I populate the other column with the forms submitted data?
Any ideas?
Ty
I would create a <div> in the first <td> such as
<td>
<div class="put_notes_here">ID LIKE TO PLACE THE content of the div class="notes" HERE, HOW CAN I DO IT?</div>
</td>
Then populate it the same as you did before
$mynotes.closest("tr").find(".put_notes_here").html(data);
Change the selector for your each to $('#myTable tr'), then you can iterate through each in your table.
Then you could either do an each on the tr object to access each td, or make use of jQuery's :first-child and nth-child(2) etc in a subsequent selector
I have an html table built from a database query which loops through and creates a button for each camera name found and puts them in a table:
<?php
for($i=0;$i<$num_rows;$i++)
{
?>
<tr>
<td>
<input type="submit" class="play" data-hash="<?php echo $result_cameras[$i]["camera_hash"]; ?>" value="<?php echo $result_cameras[$i]["camera_name"]; ?>">
</td>
</tr>
<?php
}
?>
This resolves to something like this:
<tr>
<td>
<input type="submit" class="play" data-hash="0d3d0ac6e54a640c73f1149d4d0bbc38e99d10f5" value="Office Window">
</td>
</tr>
<tr>
<td>
<input type="submit" class="play" data-hash="b824cba374c3d5ab7806ad8260c939323c03147b" value="aaa">
</td>
</tr>
<tr>
<td>
<input type="submit" class="play" data-hash="ec9658f0c1855e2e2ac09ae284f5e6990dbf445d" value="laptop">
</td>
</tr>
Notice the data hash attribute is different for each button. I want to process this button with my jquery code:
$(".play").click(function(){
var camerahash = $('input').data('hash');
console.log($('input').data('hash'));
});
No matter which button I click I will always get the hash from the first button I click: 0d3d0ac6e54a640c73f1149d4d0bbc38e99d10f5. Any help is appreciated.
$('input').data('hash') gives you the data attribute of the first input in the selection use $(this).data('hash') to get the data attribute of the currently clicked input
You need to specify which input element to read.
Try something like:
$(".play").click(function(){
$this = $(this);
var camerahash = $this.data('hash');
console.log($this.data('hash'));
});
You are always calling the first object of .play. This would be a correct way:
$('.play').on('click', function(){
var camerahash = $(this).data('hash');
});
You could always grab them by using the .attr(data-hash) html5 attribute.
Try:
$('.play').on('click', function() {
var _hash = $(this).attr('data-hash');
console.log(_hash);
});
Your selector will return the first one that it comes to. Use this instead
<script>
$("input.play").click(function() {
alert($(this).data('hash'));
});
</script>
Is something wrong with my code?
<script>
function add(){
/* Get your form */
form = document.getElementById("test");
/* Create your input element */
input = document.createElement("input");
input.type="text";
input.name="array['artists']";
/* Append to form */
form.appendChild(input);
alert("done");
}
</script>
<table>
<tr>
<td align="right">Artist/s:</td>
<td><form id="test" enctype="multipart/data-form" method="post">
<input type="text" name="artists"/>
<input type="button" onclick='javascript: add()'/></form></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Submit"></td>
</tr>
</table>
Im trying to add another textbox below another but nothing happened. What should i do?
Seems to be working for me too.
When I first put it into an html file, Internet Explorer wouldn't let me run the javascript because the html file was local to my computer. Try another browser if that's what you're using. Or just click yest to allow it in IE if that's the case.
Seems to be working - fiddle
I just put a call to add() inside a setTimeout so it would execute a second after the page loads.
Are you just missing the call to add()?
edit: I didnt originally see the onclick bound. new working fiddle2
Works for me as well. Try testing in another browser..
Your HTML-formatting is not right. This is why the input-box (TextBox) is added after the 'add'-button and not underneath it as you would like.
You can try the following code:
var table = document.getElementById("tableAddRows");
var row = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
td2.appendChild(input);
row.appendChild(td1);
row.appendChild(td2);
table.appendChild(row);
Add an id to the table (in the sample "tableAddRows").
Also, I added the Submit-button in a different table, like so (there are neater solutions):
<table>
<tr>
<td colspan="2"><input type="submit" value="Submit"></td>
</tr>
</table>
Also place the form-element around both tables.
I would also suggest to use JSRender or jQuery Templates to achieve your purpose.
Here's the sample code, if your still trying to figure it out.
Basically what I'm trying to do is to DYNAMICALLY APPEND elements in a form and save their values to MySQL using PHP so far I've started adding but I don't know how to post their values.. Here is what I've done so far:
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js" ></script>
<script>
$('document').ready(function(){
$('#save').live('click',function(e){
/*
this should be the function that gets and post all elements in php
*/
//maybe the use of $.post or .load() or ajax
});
$('#add').click(function(){
$("<br><input type='text' class='do'name='do'>").appendTo('form');
});
});
</script></head>
<body>
<form> //this was the form that im appending
<input type='text' class='do' name="do"><br>
<input type='text' class='do' name="do"><br>
<input type='text' class='do' name="do"><br>
</form>
<input type='button' id='add' value='[+]'>
<input type='button' id='save' value='go2'><br>
<div id='res'></div>
</body>
</html>
and i want to save all values in database using php so just for example here is the php
<?php
//
mysql_query("INSERT <blablabla HERE>");
?>
please help me with this stuff... thanks..
I think a simple snippet of code can answer this for you:
HTML:
<form method="post">
<input type="submit" id="btn_submit">
</form>
JQuery:
$("#btn_submit").mousedown(function() {
$("form").append("<input name='foo' value='bar'>");
});
PHP:
$myValue = $_POST["foo"];
mysql_query("insert into myTable (foo), ($myValue)");
On every add click, you need to make an ajax call to a page, where (the ajax-called page) the mysql-insert would be performed.
Consider using Jquery.ajax
Instead of trying to append the form while saving the information to a database, why not just pull the list from the database (Holding all significant values), then reload using AJAX after the 'appending', which will programmatically be just adding the value to the end of the database. Voila! Problem solved.
Please refer the jquery form plugin .http://jquery.malsup.com/form/
Here form submitted using ajax , so it will not refresh the form and also you will get all the values posted as what php does
change name of the form text boxes 'do' to do[]
$('#save').live('click',function(e){
/*
this should be the function that gets and post all elements in php
*/
//maybe the use of $.post or .load() or ajax
});
$('#add').click(function(){
$("<br><input type='text' class='do' name='do[]'>").appendTo('form');
});
<form> //this was the form that im appending
**<input type='text' class='do' name="do[]"><br>
<input type='text' class='do' name="do[]"><br>
<input type='text' class='do' name="do[]"><br>**
</form>
<input type='button' id='add' value='[+]'>
<input type='button' id='save' value='go2'><br>