I have a form that populates a select drop down using JavaScript + a PHP variable (that contains JSON information). The JavaScript creates the drop down perfectly however I can't work out how to retrieve the posted value on form submit.
I've tried retrieving the value using the simple post method to post the value, and retrieve it on the same page however nothing is passed through, does anyone know what I'm doing wrong here?
<?php
if (isset($_POST['save_settings_button']))
{
$site_name = $_POST["Site"];
}
?>
<form name='myform' method="POST" action=''>
<label for="Site">Site:</label>
<select id="Site"></select>
<div class=""><input class="cbp-mc-submit" type="submit" name="save_settings_button" value="Save Settings" /></div>
</form>
<script type="text/javascript">
var jsonData = {
"Table": <?php print $output;?>
};
$(document).ready(function () {
var listItems = '<option selected="selected" value="0">- Select -</option>';
for (var i = 0; i < jsonData.Table.length; i++) {
listItems += "<option value='" + jsonData.Table[i].id + "'>" + jsonData.Table[i].name + "</option>";
}
$("#Site").html(listItems);
});
</script>
You didn't put any name for dropdown(SELECT) input add name="Site" then you can get input from it.
<form name='myform' method="POST" action=''>
<label for="Site">Site:</label>
<select id="Site" name="Site"></select>
<div class=""><input class="cbp-mc-submit" type="submit" name="save_settings_button" value="Save Settings" /></div>
</form>
I am trying to get NicEdit to work only for all textareas with IDs of 'r_desc'. Currently this occurs only for the first instance of a form that is generated within a while loop, and not the others. What am I doing wrong?
JavaScript
<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">
bkLib.onDomLoaded(function() {
nicEditors.editors.push(
new nicEditor().panelInstance(
document.getElementById('r_desc')
)
);
});
</script>
PHP/HTML
$i=0;
while($i<5){ ?>
<form id="content" name="content" method="POST" action="index.php">
<textarea name="r_type" id="textarea"></textarea>
<textarea name="r_desc" id="r_desc"></textarea>
<textarea name="r_rate" id="textarea"></textarea>
<input type="submit" id="button" value="Update" />
</form>
<? $i++;
}
I have also tried:
bkLib.onDomLoaded(function () {
var textareas = document.getElementsByID("r_desc");
for(var i=0;i<textareas.length;i++)
{
var myNicEditor = new nicEditor();
myNicEditor.panelInstance(textareas[i]);
}
});
Elements are supposed to have unique IDs. The implementation of getElementById knows this and will only return the first element that matches the given ID.
You need to use a different approach of identifying elements that you want converted to Nicedit
If you use something like getElementsByClassName or getElementsByTagName instead (note that these return elementS not just an element)
PHP:
$i=0;
while($i<5){ ?>
<form id="content" name="content" method="POST" action="index.php">
<textarea name="r_type" class="to-nice"></textarea>
<textarea name="r_desc" ></textarea>
<textarea name="r_rate" class="to-nice"></textarea>
<input type="submit" id="button" value="Update" />
</form>
<? $i++;
}
JavaScript:
var els = document.getElementsByClassName("to-nice");
This is my continuation of my previous question: Modifying $i inside a form
So now I created the code like this:
<form method="post" action="actionhere">
<div id='clone_me'>
<?php
for($i=1; $i<=1;$i++) {
?>
<span id="title">Line <?php echo $i;?></span>
<input type='checkbox' name='ck[]'/>
<input type='text' name='tx[]'/>
<?php } ?>
</div>
<input type='submit' name='submit' value='Submit'/>
<input type="button" value="Add row" class="addrow" />
</form>
<script>
$(document).ready(function() {
$('.addrow').click(function(){
var n= $("#clone_me").length;
var new_n=n+1;
var new_line= $('#clone_me div:first').clone().append();
$("span#title", new_line).text("Line bet "+new_n+" ");
new_line.appendTo('#clone_me');
alert(new_n);
});
});
</script>
So I can add new row when I click the button, but I want to change the title inside span element, but I can't make it work. The 1st cloned, yes, the title is changed correctly (from 1 to 2), but the 2nd cloned still display "2", not "3".
What is the correct way?
EDIT
I only put $i=1 for testing purposes. In actual application I need to change it to 10 (so will loop 10 rows)
I have one HTML form:
<form name="modeladd" ethod="post" class="form label-inline" enctype="multipart/form-data" onSubmit="return check('modeladd');">
<?php for($i=0;$i<$tot;$i++) { ?>
<div class="field">
<label for="connect_msg">Connect Message </label>
<textarea rows="4" cols="50" name="connect_msg[<?php echo getField($langs[$lan]);?>]" id="connect_msg[]"><?php echo getField($row[$lan]); ?></textarea>
</div>
<div class="field">
<label for="call_msg">Call Message :</label>
<textarea rows="4" cols="50" name="call_msg[<?php echo getField($langs[$lan]);?>]" id="call_msg"><?php echo getField($row[$lan]); ?></textarea>
</div>
<div class="field">
<label for="stripline_msg">Stripline Message :</label>
<textarea rows="4" cols="50" name="stripline_msg[<?php echo getField($langs[$lan]);?>]" id="stripline_msg"><?php echo getField($row[$lan]); ?></textarea>
</div>
<div class="field">
<label for="cost_msg">Cost Message :</label>
<textarea rows="4" cols="50" name="cost_msg[<?php echo getField($langs[$lan])?>]" id="cost_msg"><?php echo getField($row[$lan]); ?></textarea>
</div>
<?php } ?>
<input type="submit" class="btn btn-grey" value="submit">
</form>
Here is the JavaScript for validation:
function check(form)
{
var name = new Array();
name =document.getElementById('connect_msg[]').value;
for(var i=0 ; i<=1; i++)
{
alert(name[i].value);
}
return true;
}
I am not getting value for both the connect_msg field which is array. I want to validate both the field value using JavaScript so please help me.
The id cannot have [] symbols. Please validate your markup: http://validator.w3.org/
The value returned from an element is type string, so you can't get an array. What you can do is parse the string to create your array.
Eg. Assuming the following is the outputted markup:
<textarea id="connect_msg">a,b,c,d,e,f,g</textarea>
You can do this in JavaScript:
var getConnectMsg = document.getElementById('connect_msg').value;
var connectMsgArray = getConnectMsg.split(',');
And connectMsgArray will contain ['a','b','c','d','e','f','g'].
You can read more about .split() here: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String/split
Edit: Since you say the textarea is in a loop, then it's more easier to retrieve the elements using class name attribute, and using jQuery will help you immensely.
So the HTML output would be like this:
<textarea class="connect_msg" id="connect_msg1">a,b,c,d,e,f,g</textarea>
<textarea class="connect_msg" id="connect_msg2">h,i,j,k,l,m,n</textarea>
<textarea class="connect_msg" id="connect_msg3">q,r,s,t,u,v</textarea>
var getConnectMsg = $('.connect_msg');
getConnectMsg.each(function(){
var getValue = $(this).val();
var connectMsgArray = getValue.split(',');
});
In each iteration of the .each(), the value of getValue would be:
a,b,c,d,e,f,g
h,i,j,k,l,m,n
q,r,s,t,u,v
You can do your form validation for a set of fields during each iteration.
the name can't be a multi-dimensional array change this:
name="connect_msg[<?php echo getField($langs[$lan]);?>]"
To this:
name="connect_msg[]"
And then address them in the post script with a foreach loop.
And about the id use this instead() I don't know if it's true that you can't use [] in the id but I know this worked for me:
id="connect_msg_<?php echo getField($langs[$lan]);?>"
Update:
I think your right, maybe using a class instead of id is the way to go.
class="connect_msg"
And then in the form check function instead of this:
var name = new Array();
name =document.getElementById('connect_msg[]').value;
Do this:
var connectMsg = document.getElementByClassName('connect_msg');
And then loop through the connectMsg array and get/validate the values.
Hope this help.
i am working on a upload section for my website.
When users want a new application to upload they need to fill out a form where the put the version number etc.
There are 27 different applications wich can be uploaded. for that i have made a while loop
example:
<select id="type">
<option value="choose" selected>choose here</option>
<?php
require("Function/applist.php");
while($showtablerow = mysql_fetch_array($showtablequery_result))
{
echo "<option value=".$showtablerow[0].">".$showtablerow[0]."</option>";
}
?>
</select>
</div>
<div id="choose" class="add" style="display:none;"></div>
<?php
require("Function/applist.php");
while($showtablerow = mysql_fetch_array($showtablequery_result))
{
echo "<div class='add' id=".$showtablerow[0]." style='display:none;'><h2 id='amx-label'>".$showtablerow[0]."</h2>
<div id='formadd' style='opacity:1;'>
<form name='addamx' id='addamx' method='post'>
<div id='version' class='uploadform' style='opacity:1;'>
Version: <input style='opacity:1;' required type='text' name='versie' id='versie' width='3' onchange='process1()' ><br>
</div>
<div id='date' class='uploadform' style='opacity:1;'>
Release Date(yyyy-mm-dd): <input required type='date' style='opacity:1;' size='10' maxlength='10' name='date' id='date'>
</div>
<div id='build' style='opacity:1;'>
Build By: <input required type='text' style='opacity:1;' size='5' maxlength='25' name='build' id='build' >
</div>
<div id='platform' style='opacity:1;'>
Platform: <span>32 Bit:</span><input required type='radio' style='opacity:1;' id='platform' name='platform' value='32bit'>
<span>64 Bit:</span><input required type='radio' style='opacity:1;' id='platform' name='platform' value='63bit'>
</div>
<div id='application'>
<input type='hidden' name='app' value=".$showtablerow[0]." />
</div>
<div id='notes' style='opacity:1;'>
Release Notes: <textarea id='notess' name='test' onblur='process1()'></textarea>
</div>
<div id='uploadfooter' style='opacity:1;'>
<button type='submit' id='uploadamx' name='uploadamx'>Upload
</div>
</form>
</div>
</div>";
}
?>
In the select box they choose wich application they want to upload, and depending on that selection they get a form.
In the text area they write their release notes.
I want that when they fill their version number that automatically that version number is filed in in the text area.
i got that kinda working with the following javascript:
function process1() {
var appname = document.getElementById('type').value;
var version = document.getElementById('versie').value;
var textvalue = "changes for " + appname + " version " + version;
document.getElementById("notess").value = textvalue;
}
the function works only for the first form div
When i try it on the second div that textarea stays empty and the version number from the second div gets inserted in the textarea from the first div
How i can make the function so that the textarea only gets filled with the version number from that form?
Any ideas?
EDIT***
the way AboQutiesh was the good startup, the only adjustment that it needed was
He wrote:
onblur='process1(".$showtablerow[0].")'
result was onblur='process1(argument)'
This didnt work because the argument needed onblur='process1('argument')'
because it is in a while loop i couldnt just put the '' because it would break up the entire onblure
thansk to a collegea of my who pointed me to the ascii table
SOLUTION:
i changed it to onblur=process1('".$showtablerow[0]."')
(delete the ; at the end of the asccii otherwhise it wouldnt show here properly)
Thanks for the startup AboQutiesh
you need to provide different ids for each text area like this in php :
<div id='notes' style='opacity:1;'>
Release Notes: <textarea id='notess_".$showtablerow[0]." name='test' onblur='process1(".$showtablerow[0].")'></textarea>
</div>
and in the js
function process1(appId) {
var appname = document.getElementById('type').value;
var version = document.getElementById('versie').value;
var textvalue = "changes for " + appname + " version " + version;
document.getElementById("notess_"+appId).value = textvalue;
}
i think that is what you need