So I want to know how I should make a table, written in PHP 8, that updates as soon a new insert has been made in the database table (SQL Server 2019). I've created a simple table like this:
<table>
<thead>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
</tr>
</thead>
<tbody>
<tr>
<td>text1.1</td>
<td>text1.2</td>
<td>text1.3</td>
</tr>
</tbody>
</table>
Then I've added a button that creates some input fields, and when these are submitted, the data is inserted into the database. But the only way I know to update the table is to reload the page so the table now has the new row. But I've seen websites that do this without reloading the site, and want to know how? My guess is to make some kind of listener, but how I dont know.
the submit button with some inputs could be something like this:
<form>
<input type="text" id="html" name="fav_language" value="">
<label for="html">HTML</label><br>
<input type="text" id="css" name="fav_language" value="">
<label for="css">CSS</label><br>
<input type="text" id="javascript" name="fav_language" value="">
<label for="javascript">JavaScript</label>
<input type="submit" value="Submit">
</form>
All this should just be pure self written code, not JQuery or something like that.
If you want your forms to submit without reloading, you should use AJAX.
E.g. Almost all of the chat boxes in the websites use AJAX to submit information.
I think this question will help you.
If you want to use AJAX with PHP you can simply make AJAX to call your PHP file for submitting information.
Look at this page to learn more.
If you want to use AJAX without any library you can do that with XMLHttpRequest. more info
Related
Hello I am seeking for a help, its my first time in javascript. So I dont have any idea how to do this.
To do :
1. CRUD function..
- it seems that create, retrieve and delete is working well. About the update I been having a hard time doing this.
Tasks
When Edit button will be click it, data will be displayed in the input fields and as I clicke the add button it should not add another field but instead it should update the choosen data.
Please refer below and I am happy for any help and advices.
<form action="javascript:void(0);" method="POST" onsubmit="add()">
<table align='center' cellspacing=2 cellpadding=5>
<tr>
<th>Image Link</th>
<th>Title</th>
<th>Description</th>
</tr>
<tr>
<td><input type="text" id="new_image"></td>
<td><input type="text" id="new_title"></td>
<td><input type="text" id="new_description"></td>
<td><input type="submit" value="Add"></td>
</tr>
</table>
</form>
you can check the whole code here.
https://jsfiddle.net/kotesting/xpvt214o/354274/
Your jsfiddle javascript load type setting is onLoad, it will wrap all js stuff into
window.onload = function() {...}
Your function is out of scope, so it's undefined. You should choose either inside head or body.
I'm creating a website, and I have a form that gets created by Django. Once the page is loaded, the user can add text inputs to the form by clicking a button. The problem is that when the submit button is clicked, only the text inputs that were originally created by Django get submitted. In other words, the extra text inputs that were added dynamically don't get submitted.
I'm guessing that this is due to the fact that the submit button is only "aware" of form elements that were present when the page was loaded, and not dynamically loaded elements. With that in mind, I'm guessing I need to use some kind of Javascript in order to submit all of the form elements, including the dynamically added ones, but I can't figure out how to do it.
I've tried the jQuery submit function, but I don't really know what I'm supposed to do with it. Any tips would be appreciated!
EDIT: Here's a code snippet, which shows what the HTML looks like after 2 more text inputs have been added dynamically to the "origin"
<table>
<form class="dataInput" action="/foner/116" method="post">
<input type='hidden' name='csrfmiddlewaretoken' value='YYuqTzXUVosu1s2HD3zS00DpoPwQ7N0k' />
<tbody class="origin">
<tr>
<th>
<label>Origin:</label>
</th>
<td>
<input id="id_Origin-0" maxlength="200" name="Origin-0" type="text" value="A native of Georgia" /> // PRESENT AT PAGE LOAD
</td>
<td>
<button class="adder origin">+</button> // USER CLICKS THIS TO APPEND MORE TEXT INPUTS TO THE FORM
</td>
</tr>
<tr>
<th>
</th>
<td>
<input type="text" value="" maxlength="200" name="origin[]"></input> // DYNAMICALLY ADDED
</td>
</tr>
<tr>
<th>
</th>
<td>
<input type="text" value="" maxlength="200" name="origin[]"></input> // DYNAMICALLY ADDED
</td>
</tr>
</tbody>
<tr>
<th>
<label>Notes:</label>
</th>
<td>
<input class="submitButton" type="submit" value="S" />
</td>
</tr>
</form>
</table>
Ok, I was able to solve the problem. I had a table that was arranging all of the text inputs for the form, and the table also enclosed the form itself. It turns out that by inverting this, and enclosing the table inside of the form, all of the dynamically generated inputs get POSTed successfully. Thanks again to those who gave input in the comments above -- it's always helpful to get other opinions & perspectives.
So my question is (I know you're not supposed to ask questions in answers, but in case anyone feels like responding...): How was I supposed to know this? If you're using a compiled language, this is something that a compiler would probably catch for you. Is it just the kind of thing that you get the hang of with experience? Are there any books that would help me to get a handle on elementary problems like this? I find web development to be very tedious and frustrating because I often get hung up for long periods of time on trivial errors like this, and I'm assuming it doesn't have to be this way; I just don't quite know how to improve.
I have a form. I have pre-populated the values using JSON/Web Service.
Ex:
<tr id="">
<td class="tleft">
<label for="nickname" class="fieldLabel"><span class="ui-small-text">Nick Name:</span></label>
</td class="tright">
<td class="tright">
<input name="nickname" type="text" class="nickname" />
</td>
</tr>
Populated Using:
$(".nickname").val(person.nickname);
I am sending the form back to another URL using JSON. I verified that works by using a hidden field that isnt populated to see if its updating, but for some reason, all fields being populated, when changed on the screen, still send the same values they were populated with.
Full Code: http://pastebin.com/F3dt8ncC
Thank You.
I want to ask about how can I put a form with method GET in a table tag.
In the table element I have a text field. When I submit this form it should validate. My validation works fine but this form doesn't actually submit itself, so I can't get any value at the URL.
Below is the code:
<form method="GET" id="my_form">
<table>
<tr>
<td>
<input type="text" name="company" form="my_form">
</td>
<button type="button" form="my_form" onclick="return submitvalidation();">ok</button>
</td>
</tr>
</table>
</form>
Your problem has nothing to do with putting a form in a table.
You just need to have a submit button.
A plain button is designed to hang JS off and nothing else. It won't submit the form.
Use type="submit" not type="button".
You should make sure that your button is in inside a table cell though. You either have an extra </td> or a midding <td>.
There doesn't seem to be any reason to use a table here at all though.
Return true after the validation completed.
hey guys so this page im trying to create has tabs with the names of months for each tab and the content of the tabs is a form and a submit button. The problem im facing is, for example, if im on the February tab and i have filled in the form and when i click submit the page reloads(the data inserted into database) and goes back to the first tab which is January. how do i stop that from happening? meaning after clicking on submit and data is inserted successfully it still stays on the February tab. i read that i have to use tag with onClick attribute but thats it. my knowledge of javascript is minimal.
part of the tab with content:
<div class="tabContent" id="feb">
<form method="post" action="income.php">
<input type="hidden" name="feb" value="February">
<center><h2>February </h2></center>
<div>
<div style="height:0px;">
<div class="rmtotal">
<h3>Your Total Income :</br> RM <input type="text" id="febtotal"
name="febtotal" size="11" readonly value="<?php if(#$fsql) {echo
htmlentities(#$fprev['total']);} if(isset($_POST['febtotal']))
{echo htmlentities($_POST['febtotal']);}?>" ></h3>
</div>
<input type="submit" value="Save" class="save" name="febsave">
<button type="submit" class="prev" name="febprev" id="button"
onClick="">Select from previous Month</button>
</div>
<table border="1" rules="groups" cellpadding="10px;" class="tableincome">
<thead>
<th>Monthly Salary</th>
<th></th>
<th>RM</th>
</thead>
<tr>
<td>Basic Salary</td>
<td></td>
<td><center><input type="text" class="feb" placeholder="0"
name="febbasic" size="11" value="<?php if(#$fsql) {echo
htmlentities(#$fprev['basic']);} if(isset($_POST['febbasic'])){echo
htmlentities($_POST['febbasic']);}?>"></center></td>
</tr>
</table>
</form>
</div>
</div>
You can write a custom function that will be executed when someone clicks the submit button.
That function needs to return false to prevent the default behavior.
For the function itself I would use Ajax to send an asynchronous request to the server that can store the data in the database. If you use jQuery it will be very easy to use Ajax:
function handleClick(){
//send the data to the server
$.post(/*...see jQuery documentation*/)
//prevent the form from submitting and the page from reloading
return false;
}
EDIT: Or just follow the posted link :D, just saw it has the same solution