i m creating dynamic text box on onclick event the code is running properly text box are created but the problem is when i create new text box and fill the some value on the first text values are store properly and again create the new text box that time first text box value are automatically delete or null i m trying to solve this error but not getting answer properly please help me....
<html>
<head>
<title>Dynamic Form</title>
<script language="javascript" type="text/javascript" >
function changeIt()
{
createTextbox.innerHTML = createTextbox.innerHTML +"<br><input type='text' name='mytext' >"
}
</script>
</head>
<body>
<form name="form">
<input type="button" value="clickHere" onClick="changeIt()">
<div id="createTextbox"></div>
</form>
</body>
</html>
Please try this,
<script type="text/javascript" language="javascript">
function changeIt() {
var divTag = document.createElement("input");
document.body.appendChild(divTag);
}
</script>
<input type="button" value="Create"
onclick="changeIt();" />
createTextbox is not explicitly available. You'll have to get it by using document.getElementById. Like this...
var createTextbox = document.getElementById("createTextbox");
createTextbox.innerHTML = createTextbox.innerHTML +"<br><input type='text' name='mytext' >";
By using createTextbox.innerHTML =, you replace the current content of the div.
Use the appendChild function to solve it, here is one example:
function addInput(){
//get the div element
var d = document.getElementById('myDiv');
//create an input element
var i = document.createElement("input");
//add it to the div
d.appendChild(i);
}
<!DOCTYPE html>
<html>
<head>
<script>
function changeLink()
{
document.getElementById('createTB').innerHTML="<input type='text' />";
}
</script>
</head>
<body>
<div id="createTB"></div>
<input type="button" onclick="changeLink()" value="Change link">
</body>
</html>
Related
I'am using CKEditor and i have problem with upload into database. First of all I want take the value from textarea id (I dont want use textarea name but the id) and give the value in the hidden input.
HTML & Jquery (test.php)
<!DOCTYPE html>
<html>
<head>
<!-- CKEditor full package v4.7.3 -->
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<!-- Jquery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<form action="test2.php" method="POST" target="_blank">
<textarea id="description-down1"></textarea>
<script type="text/javascript">CKEDITOR.replace("description-down1")</script>
<br><br>
<input type="submit" name="save-button" value="Insert">
<!-- #3 take the value via name into php -->
<input type="hidden" name="insert-variable-value-name" id="insert-variable-value-id">
</form>
<script type="text/javascript">
$(document).ready(function(){
//#1 take value from textarea "id"
var data = // what code write here?
//#2 put the value of textarea into hidden input
document.getElementById('insert-variable-value-id').value = data;
});
</script>
</body>
</html>
PHP (test2.php)
<?php
//connection
$conn = new mysqli("localhost", "root", "", "test_engine");
// call the value from the hidden input
$description = $_POST['insert-variable-value-name'];
// Insert data
$insert_data = "INSERT INTO test (description)
VALUES('$description')";
$conn->query($insert_data);
?>
var data = CKEDITOR.instances['description-down1'].getData();
You need to remeber to set hidden input value before form submit or update that field in some interval.
Thanks Bart for the help. I find here the answer. First runs the code, then submit.
Previus Code:
<body>
<form action="test2.php" method="POST" target="_blank">
<textarea id="description-down1"></textarea>
<script type="text/javascript">CKEDITOR.replace("description-down1")</script>
<br><br>
<input type="submit" name="save-button" value="Insert">
<!-- #3 take the value via name into php -->
<input type="hidden" name="insert-variable-value-name" id="insert-variable-value-id">
</form>
<script type="text/javascript">
$(document).ready(function(){
//#1 take value from textarea "id"
var data = // what code write here?
//#2 put the value of textarea into hidden input
document.getElementById('insert-variable-value-id').value = data;
});
</script>
</body>
Edited Code:
<body>
<!-- Create form id='form-id' -->
<form action="test2.php" method="POST" target="_blank" id='form-id'>
<textarea id="description-down1"></textarea>
<script type="text/javascript">CKEDITOR.replace("description-down1")</script>
<br><br>
<!-- Create submit id='save-button' -->
<input type="submit" name="save-button" value="Insert" id='save-button'>
<!-- #3 take the value via name into php -->
<input type="hidden" name="insert-variable-value-name" id="insert-variable-value-id">
</form>
<script type="text/javascript">
$(document).ready(function(){
$('#save-button').click(function(e){
//Stop
e.preventDefault();
//The code
//#1 take value from textarea "id"
var data = CKEDITOR.instances['description-down1'].getData();
//#2 put the value of textarea into hidden input
document.getElementById('insert-variable-value-id').value = data;
//Proceed the submit
$('#form-id').submit();
});
});
</script>
</body>
I'm still a beginner in PHP programming. I need help on how can I prompt the selected date. A simple webpage which allows user to choose date (via javascript) then after it clicks the submit button. I'd like to prompt the user of the date but what it does is open up a new page and displays the current page.
My PHP file: rcl_stock_allocation.php
<html>
<head>
<LINK REL=StyleSheet HREF="inc/style.css" TYPE="text/css" MEDIA=screen>
<LINK REL=StyleSheet HREF="inc/cal_styles.css" TYPE="text/css" MEDIA=screen>
<script type="text/javascript" language="javascript" src="inc/myCalendar.js"></script>
<script type="text/javascript" src="inc/jquery-1.9.1.js"></script>
<script type="text/javascript">
function popCal(ThisValue){
calpop = new Epoch('epoch_popup','popup',document.getElementById(ThisValue));
calpop.toggle();
}
</script>
<title>RCL Stock Allocation</title>
</head>
<body>
<?php
echo "<form name='rcl_stock_allocation' action='' method='get' target=_blank >";
echo "<table border = '0'>";
echo "<tr><td colspan='2'><font size='2' ><b>RCL Stock Allocation for Bookshop</b></font></td></tr>";
print "<tr><td></br></td></tr>";
print <<<menu1
<tr><td align=right >Date of Transaction</td><td> <input type="text" id ="transactionDate" name="transactionDate" class = graytextbox readonly=true style='width:80px; text-align:center' value = '$transactionDate' /> Date Picker
menu1;
print "</td></tr>";
echo "<tr><td></td><td><input type='submit' name='load_data' id='load_data' value='Load Stocks' /></td></tr>";
echo "</table>";
echo "</form>";
//echo "lloyd";
?>
</body>
</html>
And here is my javascript: rcl_stkall.js
$(function() {
$('.error').hide();
$(".load_data").click(function() {
$('.error').hide();
var transactionDate = $("input#transactionDate").val();
if(transactionDate == ""){
$("label#transactionDate").show();
$("input#transactionDate").focus();
return false;
}
var dateOfTransaction = 'date=' + transactionDate;
alert(dateOfTransaction); return false;
});
});
Thanks in advance.
First of all you are using id="load_data" for submit button so
try this,
$(".load_data").click(function() { should be
$("#load_data").click(function() {
Here are some of the basics:
When you start the form, remove 'target=_blank' - this isn't necessary.
Then you can stop the form from submitting by preventing the default submit action.
Add this to your JS within the '$(function() {'
$('#rcl_stock_allocation').on('submit', function(e) {
e.preventDefault();
// add code here to show prompt the user of the date
});
if you then need to submit the form after the user has being prompted of the date, use:
$('#rcl_stock_allocation').submit();
to complete sending the form.
put type='button'
<input type='button' name='load_data' id='load_data' value='Load Stocks' />
Hi I am using http://www.fyneworks.com/jquery/multiple-file-upload/ for multiple upload file.
But I need the same feature for some dynamic file uploader also. so I crated a function addElement() for that. The problem is the dynamic element is creating correctly but multiple upload feature is not working.
<title>Add Element</title>
<script language="javascript">
this.num = 1;
function addElement(){
$top = document.getElementById('top');
newId = document.createElement('div');
id = 'my'+this.num;
newId.setAttribute('id', id );
newId.innerHTML = "<input type='file' name='DocumentFiles2' class='multi' />";
$top.appendChild(newId);
this.num++;
}
function removedThis( id ){
var d = document.getElementById('top');
d.removeChild(id);
}
</script>
</head>
<body>
<input type='file' name='DocumentFiles[]' class='multi' /><!-- This one is working -->
<input type="button" name="button" value="Add Element" onclick="addElement()" />
<div id="top" ></div>
</body>
</html>
There is any alternative way to do this or make this to work.?
Add this code after calling addElement and removedThis and check
function addElement(){
.....
.....
reinit();
}
function removedThis( id ){
.....
.....
reinit();
}
function reinit()
{
$('input[name="DocumentFiles[]"]').MultiFile({
// your code
});
}
The following codes are HTML and php code. I want if submit button is pressed than execute practice.php file(make test.txt file). But if I pressed the button php doesn't make file. Anyone know about this??
<HTML>
<HEAD>
</HEAD>
<BODY onLoad="tid=setInterval('refresh()',1000);">
<div id="outputDiv"></div>
<form method=post action="practice.php">
<script language="JavaScript">
function refresh()
{
var HTML = "";
HTML += "<input type=submit value=makefile>";
document.getElementById("outputDiv").innerHTML = HTML;
}
</script>
</form>
</BODY>
</HTML>
<html>
<head><meta http-equiv="Content-Type" content="text/html" charset="utf-8">
</head>
<body>
<?
$fp = fopen("test.txt", "w") or die("cannot open file");
$data = "!!!!!!!!!!!!!!!!!!!";
fwrite($fp, $data);
fclose($fp);
echo "!!!!!!!!!!!!!!!";
?>
</body>
</html>
Use "a" flag, If file is not there it will automatically be created.
$fp = fopen("test.txt", "a")
Use JQuery, It would be simple.
<input type="submit" value="Load file" id="button"/>
<script>
//If document is ready.
$(document).ready(function(){
//If button is clicked.
$("#button").click(function(){
//Load a file in "outputdiv" div.
$("#outputDiv").load("test.txt");
//Assuming you are trying to refresh div after 1000 ms sec, Therefor:
setInterval(function(){
$("#outputDiv").load("test.txt");
},1000);
});
});
</script>
You must put the submit button inside the form element. The script puts the submit button inside the <div id="outputDiv"></div> element which is outside of the form element. When you press submit the browser does not know which form to submit.
For example this would work better:
<HTML>
<HEAD>
</HEAD>
<BODY onLoad="tid=setInterval('refresh()',1000);">
<form method=post action="practice.php" id="form">
<script language="JavaScript">
function refresh()
{
var HTML = "";
HTML += "<input type=submit value=makefile>";
document.getElementById("form").innerHTML += HTML;
}
</script>
</form>
</BODY>
</HTML>
I'm trying to create page where the user can add & delete "soliders".
I'm looking for something like this:
[Text-box][Delete]
[Text-box][Delete]
[Add-Solider]
And I want it to support mysql, so the user can change the values later.
I've been searching, but i can't seem to find any with mysql-support.
It should also have a max-amount.
Have any of you dealt with something similar before? I would greatly appreciate any help!
I give here an example for Add and Remove elements.
<html>
<head>
<title>Add Element</title>
<script language="javascript">
this.num = 1;
function addElement(){
$top = document.getElementById('top');
newId = document.createElement('div');
id = 'my'+this.num;
newId.setAttribute('id', id );
newId.innerHTML = "<a href='javascript:void(0); ' onclick='removedThis( "+id +")' >Added Element"+id+"</a>";
$top.appendChild(newId);
this.num++;
}
function removedThis( id ){
var d = document.getElementById('top');
d.removeChild(id);
}
</script>
</head>
<body>
<input type="button" name="button" value="Add Element" onclick="addElement()" />
<div id="top" ></div>
</body>
</html>
Reference: javascript/php/mysal
I give here an example of jQuery. Then you can save <div id="boxes"> into mysql and induce again.
jQuery
<script type="text/javascript">
$(function () {
$("#add_new").click(function () {
var box = $("<div>[Text-box]<a class=\"del\" href=\"javascript:void;\">[Delete]</a></div>");
$("#boxes").append(box);
$(box).find(".del").click(function () {
$(box).remove();
});
});
});
</script>
HTML:
<div id="boxes"></div>
<button id="add_new">[Add-Solider]</button>