We Keep Coding

simple javascript function not working inside form

I have a simple Javascript function, but its not working inside a form.
It looks like this:
echo "<tr><td><form name='formfolder' method='POST' action='?module=pindah_dok_index' >";
echo "<input type=hidden name='id_debt' value='$_GET[id_debt]' />";
echo "move docs</td><td>";
echo "<input type='text' name='index1_dok' id='xcvbn' onkeyup='xcvbn()' style='width:80px;' required />";
But when I place my input #xcvbn before / outside the form, it works perfectly.
My Javascript function is simple like this:
function xcvbn(){
var xx=document.getElementById("xcvbn");
var x = xx.value;
var str = x.replace(/[^0-9a-zA-Z\-_.]/g, '');
var str = str.toUpperCase();
xx.value = str;
}

Your input element's id is same as the function name.
Some browsers directly accept the form element's id in JS. See the below snippet (tested in FF).
console.log(asdf.value);
<form>
<input id="asdf" value="text" />
</form>
So it makes a conflict. That's why function was not triggered. use different name for input elements id and function.
Better you can pass this object in the function argument like below.
function xcvbn(elem) {
var x = elem.value;
var str = x.replace(/[^0-9a-zA-Z\-_.]/g, '');
var str = str.toUpperCase();
elem.value = str;
}
<tr>
<td>
<form name='formfolder' method='POST' action='?module=pindah_dok_index'>
<input type=hidden name='id_debt' value='$_GET[id_debt]' />move docs</td>
<td>
<input type='text' name='index1_dok' id='elemId' onkeyup='xcvbn(this)' style='width:80px;' required />

set img as value for input type='text'?

<input type='text' id='txt'>
<input type='button' id='btn' onclick='upv()' value='01'>
<script>
function upv()
{
document.getElementById("txt").value +="<IMG SRC='pics/smile/01.png'>";
}
</script>
I am trying to make a function with js, it means that if a user clicks on an image , make input `value+= 'img'', I tried it with different ways and can't do it!
can any one suggest a solution?

You Can Get Image Name By using following Function
function getName() {
var fullPath = document.getElementById("img1").src;
var filename = fullPath.replace(/^.*[\\\/]/, '');
// or, try this,
// var filename = fullPath.split("/").pop();
document.getElementById("result").value = filename;}

populating a dynamic form with javascript

I am trying to get a forloop with input elements to run between a form and create a form dynamically with javascript
1: in scenario one , the form in the script is getting closed before the input elements populate.
2: in scenario two , when i put the for loop variable between the form ,the error that comes is undefined .
PLEASE HELP
SCENARIO ONE
<form>
No of Feilds <input type="text" id= "numberoffeilds">
<input type="button" value = "Create Feilds" onclick= "addfeilds1();">
</form>
<div id= "div4" style= "color:gray"></div>
<script>
function addfeilds1()
{
var totalfeilds = document.getElementById("numberoffeilds").value;
var i;
document.getElementById("div4").innerHTML += '<form action= "issue.html" method = "POST">';
for(i=0;i<totalfeilds;i++)
{
document.getElementById("div4").innerHTML += '<input type = "text">';
}
document.getElementById("div4").innerHTML += '<input type = "submit" value="submit" name="submit">';
}
</script>
SCENARIO TWO
<form>
No of Feilds <input type="text" id= "numberoffeilds">
<input type="button" value = "Create Feilds" onclick= "addfeilds2();">
</form>
<div id= "div4" style= "color:gray"></div>
<script>
function addfeilds2()
{
var totalfeilds = document.getElementById("numberoffeilds").value;
var i;
function forloop()
{
for(i=1 ;i<totalfeilds;i++)
{
document.getElementById("div4").innerHTML += '<input type = "text">';
}
}
var loopvar = forloop();
document.getElementById("div4").innerHTML += '<form action= "issue.html" method = "POST">'+
'<input type = "text">'+
loopvar + // it shows the loop as undefined
'<input type = "text">'+
'<input type = "text">'+
'<input type = "submit" value="submit" name="submit">';
}
</script>

You need to build the HTML elements in a string first and add them to the div as a last step.
Fixed scenario 1:
function addfeilds1()
{
var totalfeilds = document.getElementById("numberoffeilds").value;
var i;
var htmlString = "";
htmlString += '<form action= "issue.html" method = "POST">';
for(i=0;i<totalfeilds;i++)
{
htmlString += '<input type = "text">';
}
htmlString += '<input type = "submit" value="submit" name="submit">';
document.getElementById("div4").innerHTML = htmlString;
}
This prevents the form tag from being closed before it's populated with inputs.
Fixing scenario 2:
function forloop()
{
var htmlString = "";
for(i=1 ;i<totalfeilds;i++)
{
htmlString += '<input type = "text">';
}
return htmlString; // now forloop returns a string that can be added to the element. It no longers returns undefined.
}
Actually scenario 2 was fixing scenario 1, but you didn't include a return in your function. If you expect a function to create some text and concat that into a string you need your function to return a string.
Third example (advanced)
function addfeilds1()
{
var totalFields = parseInt(document.getElementById("numberoffeilds").value); //parse integer from value
if (isNaN(totalFields) || totalFields < 1)
{
//check if the input is valid, if not alert.
alert("Value is not a valid number or lower than 1.");
}
var container = document.getElementById("div4");
//create the form
var form = document.createElement("form");
form.setAttribute("action", "issue.html");
form.setAttribute("method", "POST");
for(var i=0; i<totalFields; ++i)
{
var node = document.createElement("input");
node.setAttribute("name", "field[]"); //this sends a array to the request page containing all input field values.
form.appendChild(node); //add the fields to the form.
}
//create the submit button.
var button = document.createElement("input");
button.setAttribute("type", "submit");
button.setAttribute("value", "submit");
button.setAttribute("name", "submit");
form.appendChild(button);
container.appendChild(form); //append the form to the div.
}

Add input fields to div container (javascript)

I want to add some html data to the end of a div container.
Currently, I do it with using innerHtml:
<script language="javascript">
var addid = 0;
function addInput(id){
var docstyle = document.getElementById('addlist').style.display;
if(docstyle == 'none')
document.getElementById('addlist').style.display = '';
addid++;
var text = "<div id='additem_"+addid+"'><input type='text' size='100' value='' class='buckinput' name='items[]' style='padding:5px;' /> <a href='javascript:void(0);' onclick='addInput("+addid+")' id='addlink_"+addid+"'>add more</a></div>";
document.getElementById('addlist').innerHTML += text;
}
</script>
<div id="addlist" class="alt1" style="padding:10px;">
New list items are added to the bottom of the list.
<br /><br />
</div>
The problem is that the value that was entered in the input fields is removed once another input field is added.
How can I add content without and keep the entered data?
PS: I do not use jquery.

innerHTML changes reset form elements. Instead use appendChild. See this demo http://jsfiddle.net/5sWA2/
function addInput(id) {
var addList = document.getElementById('addlist');
var docstyle = addList.style.display;
if (docstyle == 'none') addList.style.display = '';
addid++;
var text = document.createElement('div');
text.id = 'additem_' + addid;
text.innerHTML = "<input type='text' value='' class='buckinput' name='items[]' style='padding:5px;' /> <a href='javascript:void(0);' onclick='addInput(" + addid + ")' id='addlink_" + addid + "'>add more</a>";
addList.appendChild(text);
}

Take a look at this http://reference.sitepoint.com/javascript/Node/appendChild
So something like
document.getElementById('addlist').appendChild(text);

JavaScript appendChild() not working? (first time with appendChild())

I am trying to build a little resume builder. I want the user to be able to enter any number of phone numbers. However, the appendChild() is not working as expected. Actually, it's not working at all. It does nothing. Any ideas?
HTML:
<div id="phoneNumbers">
<?php
if(isset($_SESSION['phoneNumber'])){
for($i = 0; $i<sizeof($_SESSION['phoneNumber']); $i++){
echo "<input type=\"text\" size=\"20\" name = \"phoneNumber[".$i."]\"
value=\"".$_SESSION['phoneNumber'][$i]."\" />
<br />";
}
}
else{
?>
<input type="text" size="20" name = "phoneNumber[0]"
value="" />
<br />
<?php
}
?>
</div>
<input type="button" value="Add another phone number" onclick="addPhoneNumber()">
Javascript:
var numberOfPhoneInputs = 1;
function addPhoneNumber()
{
// Found out the following doesn't work as expected...
// var newPhoneNumberInput = "<input type=\"text\" size=\"20\" name = \"phoneNumber[" +
// numberOfPhoneInputs +"]\" value=\"\" />" +
// "<br />"
// document.getElementById("phoneNumbers").innerHTML += newPhoneNumberInput;
var div = document.getElementByID("phoneNumbers");
var newPhoneNumberInput = document.createElement('input');
newPhoneNumberInput.setAttribute('type', 'text');
newPhoneNumberInput.setAttribute('name', 'phoneNumber['+numberOfPhoneInputs+']');
newPhoneNumberInput.setAttribute('size', '20');
newPhoneNumberInput.setAttribute('value', '');
div.appendChild(newPhoneNumberInput);
numberOfPhoneInputs ++;
}

document.getElementByID needs to be document.getElementById
This error should show in your console.

You need to return false; from the click handler to prevent the button's default action of submitting the page.

you need to make these changes ...
change document.getElementByID("phoneNumbers"); to document.getElementById("phoneNumbers");
(optional) It will be good if you change var div to var phoneNumbersDiv or something
fiddle example : http://jsfiddle.net/v8rF3/
Updated code:
var numberOfPhoneInputs = 1;
function addPhoneNumber(){
var div1 = document.getElementById("phoneNumbers");
var newPhoneNumberInput = document.createElement('input');
newPhoneNumberInput.setAttribute('type', 'text'); newPhoneNumberInput.setAttribute('name', 'phoneNumber['+numberOfPhoneInputs+']');
newPhoneNumberInput.setAttribute('size', '20');
newPhoneNumberInput.setAttribute('value', '');
div1.appendChild(newPhoneNumberInput);
numberOfPhoneInputs ++;
}