Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I have a table containing 2 columns named S.No. and Book. In S.No. Value 1 2 3... And in Book column there is a submit button for each row. If I click on first submit button then it should print 1 and if I click on 2nd submit button then it should print 2 on different page (data.php)
After you posted your table (in a comment!) I believe I understand what you want to achieve. I created two files, copy-pasted your code, and made some very little changes:
In "books.php" the submit buttons are enclosed in "form" tags.
"data.php" gets the book number from "$_POST".
Here are the files:
books.php
<table border="1">
<tr>
<th>S.No.</th>
<th>Book</th>
</tr>
<tr>
<td>1</td>
<td> <!-- THE BOOK NUMBER IS IN A HIDDEN FIELD OF THE FORM -->
<form method="post" action="data.php">
<input type="text" value="1" name="book" hidden>
<input type="submit" value="Submit">
</form>
</td>
</tr>
<tr>
<td>2</td>
<td> <!-- THE BOOK NUMBER IS IN A HIDDEN FIELD OF THE FORM -->
<form method="post" action="data.php">
<input type="text" value="2" name="book" hidden>
<input type="submit" value="Submit">
</form>
</td>
</tr>
</table>
data.php
<?php
// GET BOOK NUMBER FROM PREVIOUS PAGE.
if ( isSet( $_POST["book"] ) )
$book = $_POST["book"];
else $book = "";
?>
<form>
<label for="sno">S.No.</label>
<input type="text" value="<?php echo $book;?>"> <!-- DISPLAY BOOK NUMBER -->
<input type="submit" value="Submit">
</form>
What SHiV with JARVIS must do is to create two files with the given names, copy-paste previous code, open your browser and run localhost/books.php.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 months ago.
Improve this question
I'm new to the front-end and I'm currently training in a project HTML - CSS - javascript , I'm having an issue with Table HTML element, I created a table
A header
Another header
First
row
Second
row
and the header of the table is search-input that searches through the table data, and I'm trying to show a maximum of 5 rows (pagination) but when searching shows search results of all the data.
<table id="userstable" class="content-table">
<thead>
<tr>
<th> <input type="text" class="search-input" placeholder="UserName"></th>
<th> <input type="text" class="search-input" placeholder="Full Name"></th>
<th> <input type="text" class="search-input" placeholder="Address"></th>
<th> <input type="text" class="search-input" placeholder="PhoneNum"></th>
<th> <input type="text" class="search-input" placeholder="Service"></th>
<th> <input type="text" class="search-input" placeholder="FUP"></th>
<th> <input type="text" class="search-input" placeholder="IP Address"></th>
<th> <input type="text" class="search-input" placeholder="Location"></th>
</thead>
<tbody>
<tr>
<td>Ali</td>
<td>Domenic</td>
<td>Kobbeih</td>
<td>+96170473654</td>
<td>2M-4GB-230,000</td>
<td>0</td>
<td>192.324.422</td>
<td>432.343,42.2342</td>
</tr>
my question is how i can add pagination to my current table to show max of 5 results per page?
You would want get the inner html of the table you are working with. Next you would want to edit the html so that for each "page", a new div is made. To show any specific page, you can edit the "visibility" css class. I would save each table page in a seperate variable in a array, so with each button click you could hide the previous page and make each next page visible.
let tableHtml = document.getElementById('pageOne').innerHtml;
tableHtml = /*your table html*/;
<tbody id="pageOne">
<!-- your rows content -->
</tbody>
I have a webpage with three buttons, two of the buttons action the form submitting data to the server, it then sends back the appropriate page.
The third button is meant to just open a new webpage in a new tab, the current page does not need to be reloaded so this button is just a button element with some onclick() code, its is not part of an input element
The trouble is that when I click on the third button it actions the form action the form even though its not an input type, why does it do this ?
<main>
<form action="/license.process" name="process" id="process" method="post">
<label>
Please enter your license information as provided in your license email
</label>
<table>
<tr>
<td><label title="Email">Email</label></td><td><input type="text" name="licenseEmail" value="paultaylor#jthink.net" class="licenseinputfield"></td>
</tr>
<tr>
<td>
<label title="License Key 1">
License Key 1
</label>
</td>
<td>
<input type="text" name="licenseKey1" value="50302c02147f23ed809a8f2579338121a2b1594f967bb18" class="licenseinputfield">
</td>
</tr>
<tr>
<td>
<label title="License Key 2">
License Key 2
</label>
</td>
<td>
<input type="text" name="licenseKey2" value="0ff02146cd1777d7e0890e659b10218761869212d7b0d60" class="licenseinputfield">
</td>
</tr>
</table>
<input type="submit" name="cancel" value="Cancel">
<input type="submit" name="save" value="Save">
<button onclick="window.open('http://www.jthink.net/songkong/buy.jsp','_blank');">
Get License
</button>
</form>
</main>
I can make it work properly by moving this third button outside of the form. But then I get formatting problem because button is shown on next line, regardless I want to understand why having the butto within the form triggers the form.
The default type of a <button> is submit.
If you want it to be type=button then you have to say so explicitly.
You need to add the type="button" attribute to prevent the form from being submitted.
I'm not entirely sure why but came across this last week.
This question already has answers here:
HTML Forms - Are name and id required?
(9 answers)
Closed 6 years ago.
I have the following form:
<form name="frmSearch" id="frmSearch" action="search_results.html" method="get">
<table>
<tr>
<td><input type="text" id="txtQuery" placeholder="What are you hungry for ?" required="true"></td>
</tr>
<tr>
<td><input type="text" id="txtLocation" placeholder="Your location" required="true">
</tr>
<tr>
<td align="middle"><input type="submit" placeholder="Let's Eat!" ></td>
</tr>
</table>
</form>
When I click on the 'Let's Eat' button(the submit button), URL of the new page launched does not include the values from the two input fields:
http://localhost:8000/search_results.html?
Why is this ?
Your inputs need name attributes.
I have a big form in PHP with several tables, each of one calculates a sum (of price and quantity) and then there's one at the end that calculates the total.
The structure is, more or less, this:
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" id="purchase_form">
<div id="purchase_1">
<table>
<input id="price_1">
<input id="quantity_1">
<input type="submit" name="calculate" value="Click here to calculate the partial">
</table>
</div>
<div id="purchase_2">
<table>
<input id="price_2">
<input id="quantity_2">
<input type="submit" name="calculate" value="Click here to calculate the partial">
</table>
</div>
<tr>
<td id="price_sum"><?php *script* ?></td>
<td id="quantity_sum"><?php *script* ?></td>
</tr>
</form>
Now, when I click on submit to calculate the "partial", it gives me the total, at the same time. I know it's not a state-of-the-art form, but anyway, just try to turn a blind eye on that.
What I want is, when I click on submit button, to have the page reloaded showing the form I have clicked on. Like, if I click on submit of the #purchase_1 table, I want the page to reload on #purchase_1 table, and so on.
Is it possible to do that with javascript?
I had an idea to help me work better and create tools for myself to work faster.
I intend to make documents to save my QA work to the db and to my server.
All that works so far on my local, but the problem im sitting with is that the TinyMCE editor i want to use is not working.
I have a dynamic table added to my form that helps me add and delete rows in my form. In one of the columns i have added the TinyMCE editor in to describe the process i did with my qa testing. I have added the tag "", but when i want to add another row, the editor has stopped working. I would like to know what can i do to create a new row but still be able to have the editor work in eack column/ row
<fieldset class="row2">
<legend>Process</legend>
<p>
<input type="button" value="Add Row" onClick="addRow('dataTable')" />
<input type="button" value="Remove Row" onClick="deleteRow('dataTable')" />
<p>(All acions apply only to entries with check marked check boxes only.)</p>
</p>
<table id="dataTable" class="form" border="1">
<tbody>
<tr>
<p>
<td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
<td>
<label>Name</label>
<input type="text" required="required" name="BX_STEP[]">
</td>
<td>
<label for="BX_process">Age</label>
<textarea type="text" required="required" class="small" name="BX_process[]"></textarea>
</td>
<td>
<label for="BX_pass-fail">Gender</label>
<select id="BX_pass-fail" name="BX_pass-fail" required="required">
<option>....</option>
<option>Pass</option>
<option>Fail</option>
</select>
</td>
<td>
<label for="BX_comment">Berth Pre</label>
<input id="BX_comment" name="BX_comment" required="required">
</td>
</p>
</tr>
</tbody>
</table>
<div class="clear"></div>
</fieldset>
<script src="//tinymce.cachefly.net/4.2/tinymce.min.js"></script>
<script>tinymce.init({selector:'textarea'});</script>
I would just like to know how to generate a new text editor for every row i add?
I think you need to initialize each of the textareas independently. For example:
<script>
tinymce.init({selector:'#ta1'});
tinymce.init({selector:'#ta2'});
</script>
<h1>My First Text Area</h1>
<textarea id="ta1">Hello! Look at me, I'm an editable textarea!</textarea>
<h1>My Other Text Area</h1>
<textarea id="ta2">Whoa! Now there are two of us!</textarea>
See my jsfiddle: https://jsfiddle.net/wr8rh6b8/
You might also want to read up on selectors. The same selector syntax is used for CSS and for identifying DOM elements from your JavaScript code. See: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors