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>
Related
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>';
}
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.
as title suggests, I am having issues running my script:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#subbut").click(function(e){
e.preventDefault();
$.ajax(
{
url : 'http://jsonplaceholder.typicode.com/users?email=Sincere#april.biz',
method : 'GET'
})
.then(
function(data) {
document.getElementById("street").value = data[0].address.street;
});
});
});
</script>
And my form is here:
<form id="myForm"
action="<%=response.encodeURL(request.getContextPath()
+ "/upisKorisnika.html")%>"
method="POST">
<table id='userInput' class="display" border="0"
style="font-family: Arial; font-size: 18px;">
<tr>
<td><c:out value="E-mail: " /></td>
<td><input type="text" name="email" id="email"></td>
</tr>
<tr>
<td colspan="2" style="text-align: center">
<input type="submit" name="subbut" class="btn btn-default" id="subbut" value="Submit">
</td>
</tr>
</table>
<input type="hidden" id="street" name="street" />
</form>
My first question is why doesn't anything happen when I click submit, what am I doing wrong?
And I would also like to know how could I get value of text field "Email", so I could use something like this:
url : 'http://jsonplaceholder.typicode.com/users?email='+mail,
First, is confusing the use of a form that not send data to the server and a submit button without submit form behavior.
Second you need use a debug tool like chrome developer tool. It will give you the trace of your calls.
To debug, add to the promise.then the error callback with a simple alert or a console.log to view what is happen with your call.
And responding your question,your code seen be right.
This is my first post on this site so hopefully you will go easy on me. I'm trying to create an HTML / PHP form and use a small piece of Javascript to add additional rows to a table when a button is clicked and increment the ID for the two fields.
The button works in adding the rows however it doesn't seem to increment the ID, just use the same ID as the previous row. Hopefully someone could help?
$(window).load(function(){
var table = $('#productanddates')[0];
var newIDSuffix = 2;
$(table).delegate('#button2', 'click', function () {
var thisRow = $(this).closest('tr')[0];
var cloned = $(thisRow).clone();
cloned.find('input, select').each(function () {
var id = $(this).attr('id');
id = id.substring(0, id.length - 1) + newIDSuffix;
$(this).attr('id', id);
});
cloned.insertAfter(thisRow).find('input:date').val('');
newIDSuffix++;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blue-bar ta-l">
<div class="container">
<h1>Submit Your Insurance Renewal Date(s)</h1>
</div>
</div>
<div class="grey-bar">
<div class="container">
<div class="rounded-box">
<div>
<label for="name">Name</label>
<input type="text" id="name" name="name" autocomplete="off" required />
</div>
<div>
<label for="name">Renewal Dates</label>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="5" id="productanddates" class="border">
<tr>
<td>
<select name="insurance_type1" id="insurance_type1">
<option></option>
<option>Car</option>
<option>Home</option>
<option>Van</option>
<option>Business</option>
<option>GAP</option>
<option>Travel</option>
</select>
</td>
<td>
<input type="date" name="renewal_date1" id="renewal_date1" />
</td>
<td>
<input type="button" name="button2" id="button2" value="+" />
</td>
</tr>
</table>
<div>
<label for="telephone_number">Contact Number</label>
<input type="tel" id="telephone_number" name="telephone_number" pattern="\d{11}" autocomplete="off" required />
</div>
<div>
<label for="email">Email Address</label>
<input type="email" id="email" name="email" autocomplete="off" required />
</div>
<div>
<input name="submit" type="submit" value="Submit" class="btn">
</div>
</div>
cloned.insertAfter(thisRow).find('input:date').val('');
This line isn't correct. It will throw an invalid selector error.
You need to change it to:
cloned.insertAfter(thisRow).find('input[type="date"]').val('');
jQuery actually does support the :INPUT-TYPE format in selectors, but not the new HTML5 input types (yet): so using input[type="date"] here is the correct way for now to select an element with an HTML5 type. Please notice the quotes around the value. If you want to select an attribute with a certain value.
A selector overview of css selectors here: W3schools.
Because this line is throwing an error your newIDSuffix never gets updated, because the script halts at the line before that because of the script error.
#Charlietfl raises a valid point about learning more about classes and DOM traversal. However that will not fix this code. Or explain why your code isn't working. Nevertheless it's a good tip.
I've gone ahead an taken a stab at a cleaner version of what I think that you are trying to accomplish. I'll walk through the major updates:
Updated the button id and name from "button2" to "button1" - I assumed that you would want to keep the indices in sync across the inputs in each row.
Changing $(window).load(function() { to $("document").ready(function() { - While either will work, the former will wait until all images have finished loading, while the latter while fire once the DOM has completed building. Unless you REALLY want the images to load first, I'd recommend $("document").ready(), for faster triggering of the code.
Removing the [0] references - the primary reason to use [0] after a jQuery selector collection is to reference the DOM version of the selected jQuery element, in order to us a "vanilla" JavaScript method on it. In all cases, you were re-rwapping the variables in $(...), which just converted the DOM element back into a jQuery object, so that extra step was not needed.
Changed the .delegate() method to .on() - as Howard Renollet noted, that is the correct method to use for modern versions of jQuery. Note that the "event" and "target" parameters have swapped places in on, from where they were in delegate.
Changed the event target from #button2 to :button - this will make sure that all of the buttons in the new rows will also allow you to add additional rows, not just the first one.
Switched the clone target from the clicked row to the last row in the table - this will help keep your row numbering consistant and in ascending order. The cloned row will always be the last one, regardless of which one was clicked, and the new row will always be placed at the end, after it.
Changed the indexing to use the last row's index as the base for the new row and use a regular expression to determine it - with the table being ordered now, you can always count on the last row to have the highest index. By using the regular expression /^(.+)(\d+)$/i, you can split up the index value into "everything before the index" and "the index (i.e., on or more numbers, at the end of the value)". Then, you simply increment the index by 1 and reattach it, for the new value. Using the regex approach also allows you to easily adapt, it there ever get to be more than 9 rows (i.e., double-digit indices).
Updated both the id and name attributes for each input - I assumed that you would want the id and name attributes to be the same for each individual element, based on the initial row, and, you were only updating the id in your code, which would have caused problems when sending the data.
Changed $("input:date") to $("input[type='date']) - as Mouser pointed out, this was really the core reason why your code was failing, initially. All of the other changes will help you avoid additional issues in the future or were simply "code quality"-related changes.
So . . . those were the major updates. :) Let me know if I misunderstood what you were trying to do or if you have any questions.
$("document").ready(function() {
$('#productanddates').on('click', ':button', function () {
var lastRow = $(this).closest('table').find("tr:last-child");
var cloned = lastRow.clone();
cloned.find('input, select').each(function () {
var id = $(this).attr('id');
var regIdMatch = /^(.+)(\d+)$/;
var aIdParts = id.match(regIdMatch);
var newId = aIdParts[1] + (parseInt(aIdParts[2], 10) + 1);
$(this).attr('id', newId);
$(this).attr('name', newId);
});
cloned.find("input[type='date']").val('');
cloned.insertAfter(lastRow);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blue-bar ta-l">
<div class="container">
<h1>Submit Your Insurance Renewal Date(s)</h1>
</div>
</div>
<div class="grey-bar">
<div class="container">
<div class="rounded-box">
<div>
<label for="name">Name</label>
<input type="text" id="name" name="name" autocomplete="off" required />
</div>
<div>
<label for="name">Renewal Dates</label>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="5" id="productanddates" class="border">
<tr>
<td>
<select name="insurance_type1" id="insurance_type1">
<option></option>
<option>Car</option>
<option>Home</option>
<option>Van</option>
<option>Business</option>
<option>GAP</option>
<option>Travel</option>
</select>
</td>
<td>
<input type="date" name="renewal_date1" id="renewal_date1" />
</td>
<td>
<input type="button" name="button1" id="button1" value="+" />
</td>
</tr>
</table>
<div>
<label for="telephone_number">Contact Number</label>
<input type="tel" id="telephone_number" name="telephone_number" pattern="\d{11}" autocomplete="off" required />
</div>
<div>
<label for="email">Email Address</label>
<input type="email" id="email" name="email" autocomplete="off" required />
</div>
<div>
<input name="submit" type="submit" value="Submit" class="btn">
</div>
</div>
cloned.insertAfter(thisRow).find('input[type="date"]').val('');
I am trying to write a html form to submit a few variables to an external asp file that creates a chat window.
The example that has been provided for me to use you can see by this link, but this involves a two step process.
In the example provided, the customer fills out the fields, clicks on "Submit" and is then taken to a separate page to click on a dynamically generated javascript link to launch the chat window.
I want do to this on a single page instead, but am having trouble finding a way to pass variables from my HTML form correctly to the external script
<script language='JavaScript' src='https://na.ntrsupport.com/nv/inquiero/web/an/ann4.asp?login=41403&lang=us&button=connect&cat=&cob=&oper=&skin=&urloffline=&urlbusy=&sur=&surpre=&bgcolor=&txtcolor=&ref2=/o1https://na.ntrsupport.com/nv/Webintegration/Connectwise/entrypoint.asp?p=1;email%40address.com;Description;Customers+Name;Company+Name&ref=Customers+Name&clientid=Company+Name'> </script>
In the code above I've entered generic text into the fields like "Company Name" and "email#address.com" to get that example link.
I've tried doing this a number of ways but none have resulted the desired result, such as using javascript direct to url with variables from the form, and url in the action part of the html form.
I don't have any control over how the script at na.ntrsupport.com works or receives the request so I have to get this working from my end.
Any help is going to be appreciated, and let me know if I've missed anything of importance.
My code so far
<!DOCTYPE html>
<html>
<head>
<title>Chat</title>
<script>
function launchChat()
{
var name = document.getElementById('name').value;
var company = document.getElementById('company').value;
var email = document.getElementById('email').value;
var description = document.getElementById('description').value;
var url = "https://na.ntrsupport.com/nv/inquiero/web/an/ann4.asp?login=41403&lang=us&button=connect&cat=&cob=&oper=&skin=&urloffline=&urlbusy=&sur=&surpre=&bgcolor=&txtcolor=&ref2=/o1https://na.ntrsupport.com/nv/Webintegration/Connectwise/entrypoint.asp?p=1;" + email + ";" + description + ";" + name + ";" + company + "&ref=" + name + "&clientid=" + company;
window.location(url);
return false;
}
</script>
<style>
div{
width:400px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin-left:-100px; /* Negative half the width*/
margin-top:-100px; /* Negative half the height */
}
</style>
</head>
<body>
<div>
<form onsubmit="return launchChat();">
<table>
<tr>
<td colspan=2>
Put Banner here
</td>
</tr>
<tr>
<td>
Name:
</td>
<td>
<input type="text" id=="name" name="name" required>
</td>
</tr>
<tr>
<td>
Company:
</td>
<td>
<input type="text" id="company" name="company" required>
</td>
</tr>
<tr>
<td>
Email:
</td>
<td>
<input type="email" id=name="email" name="email" required>
</td>
</tr>
<tr>
<td>
Description:
</td>
<td>
<input type="text" id="description" name="description" required>
</td>
</tr>
<tr>
<td colspan=2>
<input type="submit" id="submit" name="submit" value="Start Chatting"/>
</td>
</tr>
</table>
</form>
</div>
</html>
Alright, so you made it a bit too complicated there.
First thing: you need to use encodeURIComponent (this is the key!) on those variables you're concatting to the string because chances are some of them will have characters not allowed in the url.
Second: using GET method on the form will automatically build urls like that. For example:
<form action="a.html" method="GET">
<input name="var1" value="value1" />
<input name="var1" value="value1" />
</form>
will automatically build the link that looks like: a.html?var1=value1&var2=value2, which is a part of what you need and can make your life easier. I know you basically need to build two of those (the main url, which I'm not sure will remain hardcoded; and the ref2 part).
Another thing:
window.location(url);
should be:
window.location = url;