This is my code currently, how could I change the current code So I'm able to input data from the form after submitting then adds to the table below, I know I got to do more with JS to achieve this, but can't find anything online that will help me accomplish what I want to do
Edit: What Im trying to accomplish which I cant seem to find online resources to help me, to be exact when I put in the movie name and date, after submitting the values should be put in the table below the form
<html>
<head>
<title>Movie Details</title>
<script type="text/javascript">
function movieName(){
var name = document.getElementById("movie").value;
if (true)
{
alert(name);
}
}
function date(){
var released = document.getElementById("dateRelease").value;
if (true)
{
alert(released);
}
}
</script>
</head>
<body>
<div id="add">
<form name="movieAdd" method="GET">
<fieldset>
<legend>Movie Details</legend>
<p>
<label for="movie">Movie Name:</label>
<input type="text" required placeholder="Movie Name" name="movie" id="movie"/>
</p>
<p>
<label for="date">Date Released:</label>
<input type="date" required name="date" id="date"/>
</p>
</fieldset>
<p>
<input type="submit" name="submitButton" value="Submit">
</p>
</form>
</div>
<table id="movieTable" width="350px" border="1">
<tr>
<th>Number</th>
<th>Movie Name</th>
<th>Date Released</th>
</tr>
</table>
</body>
</html>
I'd recommend using jQuery (http://jquery.com/). You can use it to easily select elements from your form, for example:
var movie = $('#movie').val();
You can then easily append a table row with the necessary data, for example:
var $td = $('<td>').text(movie);
$('#movieTable').append($td);
I hope this points you in the right direction.
if you are using php, then you can use post method to achieve this. once the form is posted you can populate the table.
if(isset($_POST['submitButton'])){
echo '<table id="movieTable" width="350px" border="1">';
echo '<tr>';
echo '<th>'.$_POST['moviename'].'</th>';
echo '</tr>';
echo '</table>';
}
Related
I've written a JQuery function, to generate a HTML table. That's all working fine. I'm now trying to write another JQuery function (populateUpdateFilm), to access those table values and populate separate HTML fields on the same screen. I've bound this new function to the 'Update Film' button on the webform.
I've referred to the JQuery documentation and written a function, but it's not working as expected. There are no errors in the browser, when I use 'Inspect Element'.
Can anyone help? Code attached.
Webform.xhtml
<fieldset>
<legend>Get Film By ID</legend>
<form action="#">
<label>Film ID: <input type="text" id="filmid"/></label><br></br>
<input type="button" value="XML"
onclick="getFilmById('GetFilmById', 'xml', 'filmid')"/>
<input type="button" value="JSON"
onclick="getFilmById('GetFilmById', 'json', 'filmid')"/>
<input type="button" value="TEXT"
onclick="getFilmById('GetFilmById', 'text', 'filmid')"/>
<input type="button" value="Update Film"
onclick="populateUpdateFilm()"/>
</form>
<p/>
<div id="getfilmbyid"></div>
</fieldset><br></br>
<fieldset>
<legend>Update Film Details</legend>
<form action="#">
<label>Film Name: <input type="text" id="u_filmname"/></label><br></br>
<label>Year: <input type="text" id="u_year"/></label><br></br>
<label>Cast: <input type="text" id="u_stars"/></label><br></br>
<label>Director: <input type="text" id="u_director"/></label><br></br>
<label>Plot: <input type="text" id="u_review"/></label><br></br>
</form>
<p/>
<div id="updatefilm"></div>
</fieldset><br></br>
JQuery Function
function populateUpdateFilm() {
$("#getfilmbyid"), function() {
let tableRow = $(this).closest("tr");
// starts at index 1, as I don't need the first td value (id)
let u_filmname = tableRow.find("td:eq(1)").text();
let u_year = tableRow.find("td:eq(2)").text();
let u_stars = tableRow.find("td:eq(3)").text();
let u_director = tableRow.find("td:eq(4)").text();
let u_review = tableRow.find("td:eq(5)").text();
$("#u_filmname").append(u_filmname);
$("#u_year").append(u_year);
$("#u_stars").append(u_stars);
$("#u_director").append(u_director);
$("#u_review").append(u_review);
}
}
Browser Element Output For Table
<div xmlns="http://www.w3.org/1999/xhtml" id="getfilmbyid">
<table border="1" class="ajaxTable">
<tr>
<th>Film Id</th>
<th>Name</th>
<th>Year</th>
<th>Director</th>
<th>Cast</th>
<th>Plot</th>
</tr>
<tr>
<td>10008</td>
<td>A FEW GOOD MEN</td>
<td>1992</td>
<td>ROB REINER</td>
<td>TOM CRUISE, JACK NICHOLSON</td>
<td>After the mysterious death of a young Marine in the barracks, a young navy Lawyer (Cruise) is called in to investigate. The further he delves into the mystery the more he is thwarted by the fearsome and unyielding Colonel Nathan Jessup (Nicholson), a man who knows the truth and is determined to conceal it....</td>
</tr>
</table>
</div>
I am trying to create a custom page in powerschool (test server). I have written some piece of code. Actually the problem is that the script is never getting triggered. i was thinking that script will get fired since the password textbox has the keyup event on it. Not sure that i am doing it right. I am new to web pages. Can anyone help?
<!DOCTYPE html>
<html>
<!-- start right frame -->
<head>
<title>Student Information</title>
</head>
<body>
<form id="StudentInformationForm" action="/admin/changesrecorded.white.html" method="POST">
<!-- start of content and bounding box -->
<div class="box-round">
<table border="0" cellspacing="0" cellpadding="3" class="linkDescList">
<colgroup><col><col></colgroup>
<td colspan="2"> </td>
</tr>
<tr class="headerRow">
<td colspan="2" class="bold">-Student Information</td>
</tr>
<tr class="Information">
<td>
<div>
<label>Student Email Address</label>
<input type="text" name="studentEmailAddress" />
</div>
<div>
<label>Student Password</label>
<input type="text" name="studentWebPassword" />
</div>
<div>
<label>Grade</label>
<label name="studentGrade">3<label/>
</div>
<div>
<button name="submit" type="button" disabled>Submit</button>
</div>
</td>
</tr>
</table>
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$j(function(){
$j("body").on("keyup","input[name='studentWebPassword']",function(){
var current_password = $j("input[name='studentWebPassword']").val();
var studentGrade = $j("input[name='studentGrade']").val();
var password_valid = true;
var hasNumber = /\d/;
var hasSpeacialCharacters=/^[a-zA-Z0-9- ]*$/;
if(studentGrade>=6) //for the students in Grade 3 to 6
{
//password should be of 5 characters and must contain a number
if (current_password.length<5 && current_password>8 && !hasNumber.test(current_password))
{
password_valid=false;
}
}
if (password_valid && current_password!='') {
$j("#submit").show();
}
});
});
</script>
</body>
</html><!-- end right frame -->
jQuery is never assigned to $j.
You can either replace $j with $ or just add $j = $ in the beginning of the script.
Here's a jsFiddle with the added fix of $j = $
The issue with your script is that you are calling an id that doesn't exist $j("#submit") as <button name="submit" type="button" disabled>Submit</button> doesn't have an id. Additionally the show function doesn't remove the disabled attribute, you will want to use prop('disabled', false).
Here's a jsFiddle with the script fixed and $j = $ fixed as well.
My Code: "edited, added "var" in front of all variable, thanks. I tried removing the <form> but it wouldn't function when I did.
<head>
<title>Calculator</title>
<script language="javascript">
function calculate()
{
var v=parseInt(document.forms[0].txt1st.value);
var w=parseInt(document.forms[0].txt2nd.value);
var x=parseInt(document.forms[0].txt3rd.value);
var y=703;
var z = (v/w/x*y).toFixed(3);
document.getElementById("display").innerHTML=z;
}
</script>
</head>
<body>
<form name="cal" method="post" action="">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input name="txt1st" type="text" id="txt1st"></td>
<td><input name="txt2nd" type="text" id="txt2nd"></td>
<td><input name="txt3rd" type="text" id="txt3rd"></td>
<td>x 703</td>
</tr>
</table>
<button onclick="calculate()">Calculate</button>
<div id="display"></div>
</body>
When I click the "Calculate" button the result displays in the div, but only for a split second then disappears. Keep in mind I'm very new to JavaScript. Any help appreciated, thanks.
You are submitting the form and so the page is refreshing.
Add return false; to the end of your calculate function to prevent the form submission.
I have explored so many topics here but couldn't get answer yet. please help me to resolve my issue
I have created an html generator with different functions which giving me result in a textarea box. I want to export the textarea value into html file
<html>
<head>
<script type='text/javascript'>
function output() {
var lkpp = document['getElementsByName']('linkurl')[0]['value'];
var tpwa = document['getElementsByName']('imgrlink')[0]['value'];
var ttiwidget = document['getElementsByName']('widget.content')[0];
ttiwidget['value'] = ''+lkpp+''+tpwa+''
};
</script>
</head>
<body>
<div>
<table width="100%">
<tr>
<td width='40%'>
<label for='linkurl' >value1</label>
</td>
<td width='60%'>
<input type='text' name='linkurl' value='' size='40'>
</td>
</tr>
<tr>
<td width='40%'>
<label for='imgrlink' >Value2</label>
</td>
<td width='60%'>
<input type='text' name='imgrlink' value='' size='40'>
</td>
</tr>
</table>
<br>
<input value='Generate' type='button' onclick='javascript:output();' />
<br>
<textarea name="widget.content" onfocus="this.select()" onmouseover="this.focus()" onclick="this.focus();this.select()" readonly='readonly'></textarea>
</body>
</html>
I want to export/save the generated value into an HTML file.
Check this is my file
We need more info to give valid feedback. Precisely what is the roadblock?
Assuming the issue is getting the textarea content into a js variable: see this fiddle
You can get the value inside the Textarea with
document.getElementById('taGenerate').value;
After that, you can do whatever you want with it after that.
If you've made it that far, and your trouble is writing local fs: you will want to read this SO thread. Browser compatibility is going to be your biggest hurdle here.
My Code: "edited, added "var" in front of all variable, thanks. I tried removing the <form> but it wouldn't function when I did.
<head>
<title>Calculator</title>
<script language="javascript">
function calculate()
{
var v=parseInt(document.forms[0].txt1st.value);
var w=parseInt(document.forms[0].txt2nd.value);
var x=parseInt(document.forms[0].txt3rd.value);
var y=703;
var z = (v/w/x*y).toFixed(3);
document.getElementById("display").innerHTML=z;
}
</script>
</head>
<body>
<form name="cal" method="post" action="">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input name="txt1st" type="text" id="txt1st"></td>
<td><input name="txt2nd" type="text" id="txt2nd"></td>
<td><input name="txt3rd" type="text" id="txt3rd"></td>
<td>x 703</td>
</tr>
</table>
<button onclick="calculate()">Calculate</button>
<div id="display"></div>
</body>
When I click the "Calculate" button the result displays in the div, but only for a split second then disappears. Keep in mind I'm very new to JavaScript. Any help appreciated, thanks.
You are submitting the form and so the page is refreshing.
Add return false; to the end of your calculate function to prevent the form submission.