I need another name2 column where in it has a button(copy all) once you click it a dialog box will appear "Are you sure you want to copy |Yes/No". it'll clone the data from name to name2.
<table class="downpanel">
<thead>
<tr>
<th></th>
<th>Name</th>
<th></th>
<th>Name2</th>
<th></th>
<th colspan="">Count</th>
<th></th>
<th>Unit</th>
<th></th>
<th>Category</th>
<th></th>
<th>Data1</th>
<th></th>
<th>Data2</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="button" class="copyall">
</td>
<td>
<input type="text" size="25" name="name">
</td>
<td>
<input type="text" size="25" name="name2">
</td>
<td>
<input type="button" class="copy">
</td>
<td>
<input type="text" size="3" name="from">
</td>
<td>
<input type="text" size="3" name="to">
</td>
<td>
<input type="button" class="copy">
</td>
<td>
<select name="unit" style="width: 75px;">
<option value="blah">blah</option>
</select>
<br />
</td>
<td>
<input type="button" class="copy">
</td>
<td>
<select name="category" style="width: 275px;">
<option value="blah">blah</option>
</select>
<br />
</td>
<td>
<input type="button" class="copy">
</td>
<td>
<input type="text" size="10" id="datepicker" name="data1">
</td>
<td>
<input type="button" class="copy">
</td>
<td>
<input type="text" size="7" name="data2">
</td>
<td>
<input type="button" class="copy">
</td>
</tr>
</tbody>
</table>
http://jsfiddle.net/jakecigar/hq2GG/2/
check this http://jsfiddle.net/hq2GG/4/
var r = confirm("Are you sure you want to copy?");
in both copy and copy all
http://jsfiddle.net/hq2GG/6/
You are facing a mode mash up issue. You initiated your data using HTML and now you want to manipulate it via Javascript. The more complex your issues get, the more you will end up in coding chaos. This is NOT about mixing different coding practices but to break the conceptual rework by designing one part in HTML and the other in Javascript. So as javascript seems to be mandatory here first design everything as if your whole application would only consist of Javascript. Define a mode:
DOM-Node-Manipulation (would be state of the art and also easier for manipulation) OR
html compile style (using innerHTML)
Once you got a mode make your matrix a matrix. If you need to copy cells, respectively rows and columns, you need to be able to address those. In the DOM Model you could maintain a two-dimensional wrapper array, in the html compile style you would obviously fittle with IDs, such as cell1_3, which helps you to make use of the getElementById. At the point in time you are able to address elements, it is just a matter of formulating loops, to get things copied, moved or deleted in bulk mode.
Once you got all of the conceptional prework you can decide to prefill your html page with html (and not javascript) - however this must follow the rules you set yourself for the scripting mode.
Related
Let's say that I have an HTML structure that looks like this. Each left-context-field and right-context-field are related and in the backend it should be possible to link left to its right colleague.
<table>
<tbody>
<tr>
<td>
<input type="text" class="left-context-field" value="First left value">
</td>
<td>
<input type="text" class="right-context-field" value="First right value">
</td>
</tr>
<tr>
<td>
<input type="text" class="left-context-field" value="Second left value">
</td>
<td>
<input type="text" class="right-context-field" value="Second right value">
</td>
</tr>
<tr>
<td>
<input type="text" class="left-context-field" value="Third left value">
</td>
<td>
<input type="text" class="right-context-field" value="Third right value">
</td>
</tr>
<tr>
<td>
<input type="text" class="left-context-field" value="Fourth left value">
</td>
<td>
<input type="text" class="right-context-field" value="Fourth right value">
</td>
</tr>
</tbody>
</table>
and a user can add as many additional rows as they please. How would I go about posting the values to a PHP file?
Should I wrap all rows in one single huge form, and then call .serializeArray()? Or one form per row?
From a data-oriented approach, what's the best way to deal with this? I'll be sending the data to the back-end, but I want to make the data ass easily accessible for the the backend developer as possible.
I've Edited meda's Answer, but he is not approving that Edit, So I'm posting it here again.
In HTML forms the way you send arrays is using brackets.
For example
name="values[]"
like this.
<form name = 'vals_form' action = 'php_page.php' method = 'post'>
<table>
... <!-- Your all code -->
<tr>
<td>
<input type="text" class="left-context-field" value="First left value" name="values[]">
</td>
<td>
<input type="text" class="right-context-field" value="First right value" name="values[]">
</td>
</tr>
...
<input type = 'submit' value = 'Post Values' />
</table>
</form> <!--and close the form tag-->
In PHP you get the array back
$values = $_POST['values'];
In HTML forms the way you send arrays is using brackets.
For example
name="values[]"
like this.
<form name = 'vals_form' action = 'php_page.php' method = 'post'>
<table>
... <!-- Your all code -->
<tr>
<td>
<input type="text" class="left-context-field" value="First left value" name="values[]">
</td>
<td>
<input type="text" class="right-context-field" value="First right value" name="values[]">
</td>
</tr>
...
<input type = 'submit' value = 'Post Values' />
</table>
</form> <!--and close the form tag-->
In PHP you get the array back
$values = $_POST['values'];
I have multiple elements with the same class name and no id, I need to get the first element with the class name. so lets say the html looks like this:
<table class="default-table">
<thead>
<tr>
<th class="cell"><span class="text"> Title1</span></th>
<th class="cell"><span class="text"> Title2</span></th>
<th class="cell"><span class="text"> Title3</span></th>
<th class="cell"><span class="text"> Title4</span></th>
</tr>
</thead>
<tbody class="tb">
<tr>
<td class="theInput">
<input type="text" data-type="string" value="" class="text " data-model-key="item1">
</td>
<td class="theInput">
<input type="text" data-type="string" value="" class="text " data-model-key="item2">
</td>
<td class="theInput">
<input type="text" data-type="string" value="" class="text " data-model-key="item3">
</td>
<td class="theInput">
<input type="text" data-type="string" value="" class="text " data-model-key="item4">
</td>
</tr>
</tbody>
</table>
Now, I want to set the value of the first and third input fields with the class "text", I found a solution if I was using java that looks something like this:
classElement = driver.findElements(By.className("text"));
classElement.get(1).value("1234");
classElement.get(3).value("5678");
I'm not sure that it would work as I am not familiar with java but it looks logical, any solution like this in PHP? Or is it a better way then calling the class to access the element in this case?
I found a solution that looks like this:
$items = $this->elements($this->using('css selector')->value('table.default-table input.text'));
$items[0]->value('1234');
$items[2]->value('5678');
I have a form which is dynamically generated based on user input.
Initially the user is shown 3 fields to select from (datefrom, dateto, and pitchtype), they select their options, click submit and the script generates a table with inputs for each date in the range for them to edit.
An example of the generated form is below:
<table id="avtable">
<thead>
<tr>
<th>Date</th>
<th>Current bookings</th>
<th>Max bookings</th>
</tr>
</thead>
<tbody>
<form action="index.php?page=availability&task=edit&action=submit" method="post"></form>
<input type="hidden" name="pitchtype" value="1" />
<tr>
<td>2012-05-13</td>
<td>0</td>
<td><input type="text" value="10" class="spinner" maxlength="3" name="max"></td>
</tr>
<tr>
<td>2012-05-14</td>
<td>0</td>
<td><input type="text" value="10" class="spinner" maxlength="3" name="max"></td>
</tr>
<input type="submit" value="Save" name="Submit" />
</form>
</tbody>
</table>
In the recieving PHP file I need to be able to process the data for each date, and am clueless where to start! Typically if it was a static form I would just use something like
$max = $_REQUEST['max'];
To get the edited field.
Obviously what I need to do is pair up each edited field with its date, for me to then process the data as I normally would. I presume I would need some sort of php loop with the array of data from the form, but I'm not quite sure where to start... any ideas?
EDIT :
I presume I would need to edit my outputed form to something like this, so the name of each input was the same as the date column, so what I need to know is then how to get all dates in the receiving php file:
<table id="avtable">
<thead>
<tr>
<th>Date</th>
<th>Current bookings</th>
<th>Max bookings</th>
</tr>
</thead>
<tbody>
<form action="index.php?page=availability&task=edit&action=submit" method="post"></form>
<input type="hidden" name="pitchtype" value="1" />
<tr>
<td>2012-05-13</td>
<td>0</td>
<td><input type="text" value="10" class="spinner" maxlength="3" name="2012-05-13"></td>
</tr>
<tr>
<td>2012-05-14</td>
<td>0</td>
<td><input type="text" value="10" class="spinner" maxlength="3" name="2012-05-14"></td>
</tr>
<input type="submit" value="Save" name="Submit" />
</form>
</tbody>
</table>
Many thanks!
Kevin
In order to pass information first you need to give the text input's different names something like:
<table id="avtable">
<thead>
<tr>
<th>Date</th>
<th>Current bookings</th>
<th>Max bookings</th>
</tr>
</thead>
<tbody>
<form action="index.php?page=availability&task=edit&action=submit" method="post"></form>
<tr>
<td>2012-05-13</td>
<td>0</td>
<td><input type="text" value="10" class="spinner" maxlength="3" name="SpinMax"></td>
</tr>
<tr>
<td>2012-05-14</td>
<td>0</td>
<td><input type="text" value="10" class="spinner" maxlength="3" name="SpinMax2"></td>
</tr>
<input type="submit" value="Save" name="Submit" />
</form>
</tbody>
</table>
From there, your PHP script should be something like this:
$SpinMax = $_POST["SpinMax"];
$SpinMax2 = $_POST["SpinMax2"];
By using $_POST, you are able to assign the PHP variable based on the "name" you give it in the text area.
I am trying to get some form data from POST method.
Here's the code of form -
<form action="" method="post" name="form1" id="form1">
<input type="hidden" value="15" name="ad_id">
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="block">
<tbody><tr>
<td valign="top"> </td>
<td align="right">all fields are required</td>
</tr>
<tr>
<td valign="top"> </td>
<td align="center"></td>
</tr>
<tr>
<td valign="top" width="150"><label for="name">Advertisement Name</label>
*</td>
<td><input type="text" size="45" value="Banner" id="name" name="name">
e.g Home Banner</td>
</tr>
<tr>
<td valign="top"><label for="placement">Advertisement Placement</label></td>
<td><select id="placement" name="placement">
Wide Skyscrapper 160 x 600
</tr>
<tr>
<td valign="top"><label for="code">Advertisement Code</label></td>
<td><textarea rows="5" cols="45" id="code" name="code"></textarea></td>
</tr>
<tr>
<td>Status</td>
<td><label>
<input type="radio" checked="checked" value="1" name="status">
Active</label>
<label>
<input type="radio" value="0" name="status">
Inactive</label></td>
</tr>
<input type="hidden" value="1" name="banner_uploaded" id="banner_uploaded">
<tr>
<td>For Country - </td>
<td>
<select id="country" name="country">
<option>Not posting all the names of country</option>
</select>
</td>
</tr>
<tr>
<td><label for="Scheduling">Valid From </label></td>
<td><input type="text" value="" id="date-from" name="date-from"> Format : dd/mm/yyyy:hh/mm</td>
</tr>
<tr>
<td><label for="Scheduling">Valid Till </label></td>
<td><input type="text" value="" id="date-to" name="date-to"> Format : dd/mm/yyyy:hh/mm</td>
</tr>
<tr>
<td> </td>
<td align="right"><input type="submit" onclick="return validate_ad_form(add_adv)" value="Update Advertisement" class="button" name="update"></td>
</tr>
</tbody></table>
</form>
But I am getting $_POST['code'] empty when I am passing HTML code through it.
When I pass plain text, it works fine.
When I printed $_POST [i.e. used - print_r($_POST) ], I got the following output -
Array ( [ad_id] => 15 [name] => Banner [placement] => ad_468x60 [code] => [status] => 1 [banner_uploaded] => 1 [country] => IN [date-from] => [date-to] => [update] => Update Advertisement )
Please be known, I haven't entered the 'date-from','date-to' fields.
I have entered on purpose as StackOverflow don't allow me to post images!
People,any help will be highly appreciated.
The problem is you're print_r() is being displayed in a brower. If you've got HTML in your POST data, those tags will be interested as HTML when you dump the data back out. You'll have to force the output into plaintext mode (header('Content-type: text/plain);), or run the fields which can have HTML in them through htmlspecialchars() to escape the < and > characters.
If you view the source of the page you're doing the print_r() on, I suspect you'll see the HTML tags there. If you've only tested with that example.jpg image, you wouldn't see anything, because that image most likely doesn't exist, so it won't render, and then the <a> tag has nothing to underline and won't show up either.
I hope I can be clear enough in what I need here. What I have is a function that contains some html for an email client app I'm developing. This part of the app uses a common forward, reply and "reply to all" form. Since they are all basically the same, I figured I'd go the lean route and just use a single function to handle this. The only real differences I can see between the 3 actions I mentioned above are that in a reply to all, there will be multiple email addys in the CC part of the form. For a forward, no (cc) and the (to) box should be blank. I need to represent all of this functionality and I'm kind of confused on what the best way to do this is. Can anyone please offer any help? Thanks.
I can certainly post the html is need be, I just wanted to start light.
EDIT:
I almost forgot, there will be POST values when the user submits the form in the event that the form validation fails.
function compose($type,$contents=null)
{
echo'
<tr>
<td>
<tr>
<td valign="top">
<form method="post" action="">
<table width="100%" cellpadding="0" cellspacing="0" border="0" id="reply">
<tr>
<td><h2>'.$type.'</h2></td>
</tr>
<tr>
<td width="1%" valign="top" nowrap><b>To:</b><br><input name="to" id="focus" title="Enter a single system user here" value="" type="text" size="64"></td>
</tr>
<tr>
<td nowrap><b>Cc:</b><br><input name="cc"" value="" type="text" size="64"></td>
</tr>
<tr>
<td nowrap><b>Subject:</b><br><input name="subject" title="Enter your subject here" value="" type="text" size="64" maxlength="30"></td>
</tr>
<tr>
<td valign="top"><b>Message:</b><br><textarea name="message" title="Enter your message here" rows="5" cols="50" wrap="virtual"></textarea></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><input type="hidden" name="id" value=""><input type="submit" name="send" value="Send"></td>
</tr>
</table>
</form>
</td>
</tr>
</td>
</tr>';
}
EDIT: Example modification of posted code (I haven't added all the different cases or even changed the output really, just showing the concept - all that's here is a check for a type of Reply and a check for the 'to' POST value.)
function compose($type,$contents=null)
{
$toValue = '';
if(isset($_POST['to']))
{
// Might want to actually validate this to prevent XSS, but this is just a basic example
$toValue = $_POST['to'];
}
echo'
<tr>
<td>
<tr>
<td valign="top">
<form method="post" action="">
<table width="100%" cellpadding="0" cellspacing="0" border="0" id="reply">
<tr>
<td><h2>'.$type.'</h2></td>
</tr>';
if($type == "Reply") {
echo'
<tr>
<td width="1%" valign="top" nowrap><b>To:</b><br><input name="to" id="focus" title="Enter a single system user here" value="' . $toValue . '" type="text" size="64"></td>
</tr>
<tr>
<td nowrap><b>Cc:</b><br><input name="cc"" value="" type="text" size="64"></td>
</tr>';
}
echo'
<tr>
<td nowrap><b>Subject:</b><br><input name="subject" title="Enter your subject here" value="" type="text" size="64" maxlength="30"></td>
</tr>
<tr>
<td valign="top"><b>Message:</b><br><textarea name="message" title="Enter your message here" rows="5" cols="50" wrap="virtual"></textarea></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><input type="hidden" name="id" value=""><input type="submit" name="send" value="Send"></td>
</tr>
</table>
</form>
</td>
</tr>
</td>
</tr>';
}
(Original inquiry)
Is this function processing the results of the form, or is it displaying the form in the first place? Your question is a bit unclear about which point in the process you're talking about.