Javascript, Jquery - Adding url images - javascript

i am trying to get an image from a given url. but i am unsure where i am going wrong in my coding. The url link is displayed but not the image of the url
for example, i would like to paste this url link
https://www.petfinder.com/wp-content/uploads/2012/11/dog-how-to-select-your-new-best-friend-thinkstock99062463.jpg
for my coding to display the image and not the link
Any help would be much appreciated
$(function() {
var dialog, form,
// From http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state-%28type=email%29
emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+#[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
url = $("#url"),
// url = $('#elementId').attr('src');
name = $("#name"),
email = $("#email"),
company = $("#company"),
password = $("#password"),
allFields = $([]).add(url).add(name).add(email).add(company).add(password),
tips = $(".validateTips");
function updateTips(t) {
tips
.text(t)
.addClass("ui-state-highlight");
setTimeout(function() {
tips.removeClass("ui-state-highlight", 1500);
}, 500);
}
function checkLength(o, n, min, max) {
if (o.val().length > max || o.val().length < min) {
o.addClass("ui-state-error");
updateTips("Length of " + n + " must be between " +
min + " and " + max + ".");
return false;
} else {
return true;
}
}
function checkRegexp(o, regexp, n) {
if (!(regexp.test(o.val()))) {
o.addClass("ui-state-error");
updateTips(n);
return false;
} else {
return true;
}
}
function addUser() {
var valid = true;
allFields.removeClass("ui-state-error");
valid = valid && checkLength(name, "username", 3, 16);
valid = valid && checkLength(email, "email", 6, 80);
valid = valid && checkLength(name, "company", 3, 16);
valid = valid && checkLength(password, "password", 5, 16);
valid = valid && checkRegexp(name, /^[a-z]([0-9a-z_\s])+$/i, "Username may consist of a-z, 0-9, underscores, spaces and must begin with a letter.");
valid = valid && checkRegexp(email, emailRegex, "eg. ui#jquery.com");
valid = valid && checkRegexp(password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9");
if (valid) {
$("#users tbody").append("<tr>" +
"<td>" + url.val() + "</td>" +
"<td>" + name.val() + "</td>" +
"<td>" + email.val() + "</td>" +
"<td>" + company.val() + "</td>" +
"<td>" + password.val() + "</td>" +
"</tr>");
dialog.dialog("close");
}
return valid;
}
dialog = $("#dialog-form").dialog({
autoOpen: false,
height: 510,
width: 400,
modal: true,
buttons: {
// addClass: "account-btn",
"GET STARTED": addUser,
// Cancel: function() {
// dialog.dialog( "close" );
// }
},
close: function() {
form[0].reset();
allFields.removeClass("ui-state-error");
}
});
form = dialog.find("form").on("submit", function(event) {
event.preventDefault();
addUser();
});
$("#create-user").button().on("click", function() {
dialog.dialog("open");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- modal/dialog form -->
<div id="dialog-form" title="">
<form>
<fieldset>
<label for="name">Your Name:</label>
<input type="text" name="name" id="name" value="username" class="text ui-widget-content ui-corner-all">
<label for="email">Your Email:</label>
<input type="text" name="email" id="email" value="username#example.com" class="text ui-widget-content ui-corner-all">
<label for="company">Your Company Name:</label>
<input type="text" name="company" id="company" value="example ltd" class="text ui-widget-content ui-corner-all">
<label for="password">Your Password:</label>
<input type="password" name="password" id="password" value="xxxxxxx" class="text ui-widget-content ui-corner-all">
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
<label for="url">Image Url</label>
<input type="text" name="url" id="url" value="http://example.com/picture.jpg" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
</div>
<!-- table -->
<div class="L-1-1" id="users-contain" class="ui-widget">
<h1 class="table_title">Existing Users</h1>
<table id="users" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th class="first">Image</th>
<th>Name</th>
<th>Email</th>
<th>Company Name</th>
<th class="last">Password</th>
</tr>
</thead>
<tbody>
<tr>
<td>image</td>
<td>Richill Tamakloe</td>
<td>richill.tamakloe#example.com</td>
<td>Example Ltd</td>
<td>coder1</td>
</tr>
</tbody>
</table>
</div>
<button id="create-user">CREATE NEW USER</button>

You should replace this line:
"<td>" + url.val() + "</td>" +
with something like this:
"<td><img src='" + url.val() + "' /></td>" +
so that the actual image is shown in the table cell.

Related

Generate Serial Number on adding new line and adjust serial no when any line removed

I am cloning four field (sl no,stationery type ,quantity, Remove ) of a form by using java script.I can very well append or remove these field
I am not able to generate the serial no on the first column and if I delete any row in between this should also adjust the serial no.How can i achieve this My code is below
$(document).ready(function() {
$(document).on('click', '.add', function() {
var html = '';
html += '<tr>';
html += '<td><input type="text" name="item_name[]" class="form-control item_name" ></td>';
html += '<td><select name="item_unit[]" class="form-control item_unit" id="datalist"><option value="">Select Stationery Type</option><option value="A4 Green Ream">A4 Green Ream</option><option value="A4 Green Ream">A4 Green Ream</option><option value="Cellotape(Brown)">Cellotape(Brown)</option><option value="Cellotape(Transparent)">Cellotape(Transparent)</option><option value="Gluestick">Gluestick</option><option value="Highlighter">Highlighter</option><option value="Marker(Thick)">Marker(Thick)</option><option value="Marker(Thin)">Marker(Thin)</option><option value="Meeting Pen">Meeting Pen</option><option value="Normal Envelope">Normal Envelope</option></select></td>';
html += '<td><input type="text" name="item_quantity[]" class="form-control number_only item_quantity" /></td>';
html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
$('#item_table').append(html);
});
$(document).on('click', '.remove', function() {
$(this).closest('tr').remove();
});
$('#insert_form').on('submit', function(event) {
event.preventDefault();
var error = '';
$('.item_name').each(function() {
var count = 1;
if ($(this).val() == '') {
error += "<p>Enter Item Name at " + count + " Row</p>";
return false;
}
count = count + 1;
});
$('.item_quantity').each(function() {
var count = 1;
if ($(this).val() == '') {
error += "<p>Enter Item Quantity at " + count + " Row</p>";
return false;
}
count = count + 1;
});
$('.item_unit').each(function() {
var count = 1;
if ($(this).val() == '') {
error += "<p>Select Unit at " + count + " Row</p>";
return false;
}
count = count + 1;
});
var form_data = $(this).serialize();
if (error == '') {
$.ajax({
url: "insert.php",
method: "POST",
data: form_data,
success: function(data) {
if (data == 'ok') {
$('#item_table').find("tr:gt(0)").remove();
$('#error').html('<div class="alert alert-success">Item Details Saved</div>');
}
}
});
} else {
$('#error').html('<div class="alert alert-danger">' + error + '</div>');
}
});
$(document).on('keypress', '.number_only', function(e) {
return isNumbers(e, this);
});
function isNumbers(evt, element) {
var charCode = (evt.which) ? evt.which : event.keyCode;
if (
(charCode != 46 || $(element).val().indexOf('.') != -1) && // “.” CHECK DOT, AND ONLY ONE.
(charCode < 48 || charCode > 57))
return false;
return true;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<br />
<div class="container" style="border: 2px solid #B22222;border-radius: 10px;margin-top: 25px;margin-bottom: 15px;>
<div class=" row ">
<div class="col-md-4 ">
</div>
<div class="col-sm-12 ">
<h4 align="center "><b><u>Add Stationery Stock<b></u></h4>
<br />
<form method="post " id="insert_form ">
<div class="col-sm-6 ">
<input type="text " name="Order No. " class="form-control " placeholder="Order NO "/>
</div>
<div class="col-sm-6 ">
<input type="date " name="Date " class="form-control " placeholder="Date " />
</div>
<div> </div>
<div> </div>
<div> </div>
<h4 align="center "><b><u>Stationery Details<b></u></h4>
<div> </div>
<div class="table-repsonsive ">
<span id="error "></span>
<table class="table table-bordered " id="item_table ">
<tr>
<th>Sl.No.</th>
<th>Select Stationery Type</th>
<th>Enter Quantity</th>
<th><button type="button " name="add " class="btn btn-success btn-sm add "><span class="glyphicon glyphicon-plus "></span></button></th>
</tr>
</table>
<div align="center ">
<input type="submit " name="submit " class="btn btn-info "style="margin-bottom:20px " value="Insert " />
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Using
html += '<td><input type="text" name="item_name[]" class="form-control item_name"></td>';
you can do
const renum = () => {
let cnt = 0;
$(".item_name").each(function() {
this.value = ++cnt;
})
};
when needed
I fixed your invalid HTML (u and b not correctly closed and a missing quote on the first inline style)
I ALSO remove the name="submit" - you never want to have name="submit" on a form you plan to submit using script
const renum = () => {
let cnt = 0;
$(".item_name").each(function() {
this.value = ++cnt;
})
};
$(function() {
$("#item_table").on('click', '.add', function() {
var html = '';
html += '<tr>';
html += '<td><input type="text" name="item_name[]" class="form-control item_name" ></td>';
html += '<td><select name="item_unit[]" class="form-control item_unit" id="datalist"><option value="">Select Stationery Type</option><option value="A4 Green Ream">A4 Green Ream</option><option value="A4 Green Ream">A4 Green Ream</option><option value="Cellotape(Brown)">Cellotape(Brown)</option><option value="Cellotape(Transparent)">Cellotape(Transparent)</option><option value="Gluestick">Gluestick</option><option value="Highlighter">Highlighter</option><option value="Marker(Thick)">Marker(Thick)</option><option value="Marker(Thin)">Marker(Thin)</option><option value="Meeting Pen">Meeting Pen</option><option value="Normal Envelope">Normal Envelope</option></select></td>';
html += '<td><input type="text" name="item_quantity[]" class="form-control number_only item_quantity" /></td>';
html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
$('#item_table').append(html);
renum()
});
$(document).on('click', '.remove', function() {
$(this).closest('tr').remove();
renum()
});
$('#insert_form').on('submit', function(event) {
event.preventDefault();
var error = '';
$('.item_name').each(function() {
var count = 1;
if ($(this).val() == '') {
error += "<p>Enter Item Name at " + count + " Row</p>";
return false;
}
count = count + 1;
});
$('.item_quantity').each(function() {
var count = 1;
if ($(this).val() == '') {
error += "<p>Enter Item Quantity at " + count + " Row</p>";
return false;
}
count = count + 1;
});
$('.item_unit').each(function() {
var count = 1;
if ($(this).val() == '') {
error += "<p>Select Unit at " + count + " Row</p>";
return false;
}
count = count + 1;
});
var form_data = $(this).serialize();
if (error == '') {
$.ajax({
url: "insert.php",
method: "POST",
data: form_data,
success: function(data) {
if (data == 'ok') {
$('#item_table').find("tr:gt(0)").remove();
$('#error').html('<div class="alert alert-success">Item Details Saved</div>');
}
}
});
} else {
$('#error').html('<div class="alert alert-danger">' + error + '</div>');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<div class="container" style="border: 2px solid #B22222;border-radius: 10px;margin-top: 25px;margin-bottom: 15px;">
<div class="row">
<div class="col-md-4"></div>
<div class="col-sm-12">
<h4 align="center"><b><u>Add Stationery Stock</u></b></h4>
<form method="post" id="insert_form">
<div class="col-sm-6"><input type="text" name="Order No." class="form-control" placeholder="Order NO " /></div>
<div class="col-sm-6"><input type="date" name="Date" class="form-control" placeholder="Date" /></div>
<div> </div>
<div> </div>
<div> </div>
<h4 align="center"><b><u>Stationery Details</u></b></h4>
<div> </div>
<div class="table-repsonsive"><span id="error"></span>
<table class="table table-bordered" id="item_table">
<tr>
<th>Sl.No.</th>
<th>Select Stationery Type</th>
<th>Enter Quantity</th>
<th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span></button></th>
</tr>
</table>
<div align="center"><input type="submit" class="btn btn-info" style="margin-bottom:20px" value="Insert" /></div>
</div>
</form>
</div>
</div>
</div>

JQuery | How to display variables when associated checkbox is checked

I'm creating a website that grabs weather information based on the location entered by the user. At the moment there are some features on the page with no functionality, it is still a work in progress. I apologies for the sloppy code.
I have 9 checkboxes at the top of my form that have the info that should be displayed and I'm not sure of the best method to edit the output accordingly.
In my JS file there is a block that grabs all of the relevant weather data and assigns it to variables. These variables are then used to generate a <p> element containing all of this info. How can I edit it to only display the variables that are selected via checkboxes?
$(document).ready(function() {
var inputType = 1;
$("#Radio1").click(function() {
$("#lbl1").text("City Name:");
$("#lbl2").text("Country Code:");
$("#Firstbox").removeAttr("min max step");
$("#Secondbox").removeAttr("min max step");
document.getElementById('Firstbox').value = '';
document.getElementById('Secondbox').value = '';
$("#Firstbox").attr({
"type": "text",
"pattern": "[a-zA-Z]{2,}",
"placeholder": "Regina"
});
$("#Secondbox").attr({
"type": "text",
"pattern": "[a-zA-Z]{2}",
"placeholder": "ca"
});
inputType = 1;
});
$("#Radio2").click(function() {
$("#lbl1").text("Postal Code:");
$("#lbl2").text("Country Code:");
$("#Firstbox").removeAttr("min max step");
$("#Secondbox").removeAttr("min max step");
document.getElementById('Firstbox').value = '';
document.getElementById('Secondbox').value = '';
$("#Firstbox").attr({
"type": "text",
"pattern": "[A-Z][0-9][A-Z]",
"placeholder": "S4X"
});
$("#Secondbox").attr({
"type": "text",
"pattern": "[a-zA-Z]{2}",
"placeholder": "ca"
});
inputType = 2;
});
$("#Radio3").click(function() {
$("#lbl1").text("Latitude:");
$("#lbl2").text("Longitude:");
$("#Firstbox").removeAttr("pattern");
$("#Secondbox").removeAttr("pattern");
document.getElementById('Firstbox').value = '';
document.getElementById('Secondbox').value = '';
$("#Firstbox").attr({
"type": "number",
"min": "-90",
"max": "90",
"step": "any",
"placeholder": "50.4"
});
$("#Secondbox").attr({
"type": "number",
"min": "-180",
"max": "180",
"step": "any",
"placeholder": "-105.5"
});
inputType = 3;
});
$("#SearchButton").click(function() {
if (checkValidity()) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var SearchResponse = this.responseText;
var obj = JSON.parse(SearchResponse);
var city_name = obj["name"];
var country_name = obj["sys"]["country"];
var longitude = obj["coord"]["lon"];
var latitude = obj["coord"]["lat"];
var weather_description = obj["weather"][0]["description"];
var temp = obj["main"]["temp"] - 273.15;
var pressure = obj["main"]["pressure"];
var humidity = obj["main"]["humidity"];
var wind_speed = obj["wind"]["speed"];
var wind_direction = obj["wind"]["deg"];
var sunrise = new Date(obj["sys"]["sunrise"] * 1000);
var sunset = new Date(obj["sys"]["sunset"] * 1000);
var SearchResultsHTML = "City: " + city_name + "<br />" +
"Country: " + country_name + "<br />" +
"Longitude: " + longitude + "<br />" +
"Latitude: " + latitude + "<br />" +
"Weather: " + weather_description + "<br />" +
"Temperature: " + temp + "<br />" +
"Pressure: " + pressure + "<br />" +
"Humidity: " + humidity + "<br />" +
"Wind Speed: " + wind_speed + "<br />" +
"Wind Direction: " + wind_direction + "<br />" +
"Sunrise: " + sunrise.toLocaleTimeString() + "<br />" +
"Sunset: " + sunset.toLocaleTimeString() + "<br />";
$("#SearchResults").html(SearchResultsHTML);
}
}
var Firstbox = $("#Firstbox").val();
var Secondbox = $("#Secondbox").val();
var apiKey = "52453f34dee0d65b1a41a02656142c6b";
if (inputType == 1) {
var SearchString = "https://api.openweathermap.org/data/2.5/weather" +
"?q=" + Firstbox + "," + Secondbox +
"&APPID=" + apiKey;
} else if (inputType == 2) {
var SearchString = "http://api.openweathermap.org/data/2.5/weather" +
"?zip=" + Firstbox + "," + Secondbox +
"&APPID=" + apiKey;
} else if (inputType == 3) {
var SearchString = "http://api.openweathermap.org/data/2.5/weather" +
"?lat=" + Firstbox + "&lon=" + Secondbox +
"&APPID=" + apiKey;
}
xhttp.open("GET", SearchString, true);
xhttp.send();
}
});
function displayError() {
var first = document.getElementById('Firstbox');
var second = document.getElementById('Secondbox');
if (first.validity.valid) {
if (inputType == 1 || inputType == 2) {
alert("Country code must be 2 characters in length.");
} else {
alert("Longitude must be between -180 and 180");
}
} else {
if (inputType == 1) {
alert("City name must be longer than 1 character.");
} else if (inputType == 2) {
alert("Postal code must be 3 characters in length, following the format 'S4X'");
} else {
alert("Latitude must be between -90 and 90");
}
}
}
function checkValidity() {
var first = document.getElementById('Firstbox');
var second = document.getElementById('Secondbox');
if (first.validity.valid && second.validity.valid) {
return true;
} else {
displayError();
return false;
}
}
function checksSelected() {
}
});
.validated:valid {
background-color: #BDF0A8;
}
.validated:invalid {
background-color: #FAC3C9;
}
.row {
margin-bottom: 10px;
}
.ticksel {
border: solid black 1px;
}
tr,
td {
border: solid black 1px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<title>Final Project</title>
<link rel="stylesheet" type="text/css" href="weather.css">
<form id="searchForm" method="POST" action="URL">
<div class="row col-md-12">
<h2>OpenWeatherMap Weather Search</h2>
</div>
<div class="row">
<div class="col-md-6">
<h4>Search by:</h4>
<input id="Radio1" name="searchBy" type="radio" checked /> City Name<br/>
<input id="Radio2" name="searchBy" type="radio"> Postal Code<br/>
<input id="Radio3" name="searchBy" type="radio" /> Latitude / Longitude<br/>
</div>
<div class="col-md-6">
<h4>Show in search results:</h4>
<div class="row">
<div class="col ticksel"><input type="checkbox" checked id="" value=""> Longitude</div>
<div class="col ticksel"><input type="checkbox" checked id="" value=""> Latitude</div>
<div class="col ticksel"><input type="checkbox" checked id="" value=""> Temperature</div>
</div>
<div class="row">
<div class="col ticksel"><input type="checkbox" checked id="" value=""> Pressure</div>
<div class="col ticksel"><input type="checkbox" checked id="" value=""> Humidity</div>
<div class="col ticksel"><input type="checkbox" checked id="" value=""> Wind Speed</div>
</div>
<div class="row">
<div class="col ticksel"><input type="checkbox" checked id="" value=""> Wind Direction</div>
<div class="col ticksel"><input type="checkbox" checked id="" value=""> Sunrise</div>
<div class="col ticksel"><input type="checkbox" checked id="" value=""> Sunset</div>
</div>
</div>
</div>
<div class="row col-md-12">
<label id="lbl1">City Name:</label><input id="Firstbox" class="validated" type="text" required pattern=".{2,}" placeholder="Regina" />
<label id="lbl2">Country Code:</label><input id="Secondbox" class="validated" type="text" required pattern="[a-zA-Z]{2}" placeholder="ca" />
<input id="SearchButton" type="button" value="Search" />
</div>
</form>
<div class="row col-md-12">
<h4>Current Weather</h4>
</div>
<div class="row col-md-12">
<p id="SearchResults"></p>
</div>
<div class="row col-md-12">
<table width="100%">
<thead>
<tr>
<th>City</th>
<th>Country</th>
<th>Longitude</th>
<th>Latitude</th>
<th>Weather</th>
<th>Temperature</th>
<th>Pressure</th>
<th>Humidity</th>
<th>Wind Speed</th>
<th>Wind Direction</th>
<th>Sunrise</th>
<th>Sunst</th>
<th><a class="deleteAll" href="#">Clear Log</a></th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
Here is a version that will take the checked boxes and show their corresponding values
I changed your xmlhttp to getJSON
You can do
let SearchResultsHTML = []
SearchResultsHTML.push("City: " + city_name);
SearchResultsHTML.push("Country: " + country_name);
SearchResultsHTML.push("Weather: " + weather_description);
if ($("#long").is(":checked")) SearchResultsHTML.push("Longitude: " + longitude);
if ($("#lat").is(":checked")) SearchResultsHTML.push("Latitude: " + latitude);
if ($("#temp").is(":checked")) SearchResultsHTML.push("Temperature: " + temp);
if ($("#pres").is(":checked")) SearchResultsHTML.push("Pressure: " + pressure);
if ($("#hum").is(":checked")) SearchResultsHTML.push("Humidity: " + humidity);
if ($("#ws").is(":checked")) SearchResultsHTML.push("Wind Speed: " + wind_speed);
if ($("#wd").is(":checked")) SearchResultsHTML.push("Wind Direction: " + wind_direction);
if ($("#sunup").is(":checked")) SearchResultsHTML.push("Sunrise: " + sunrise.toLocaleTimeString());
if ($("#sundown").is(":checked")) SearchResultsHTML.push("Sunset: " + sunset.toLocaleTimeString());
$("#SearchResults").html(SearchResultsHTML.join("<br/>"));
or more elegantly add a span and toggle this at show time or even after
let SearchResultsHTML = []
SearchResultsHTML.push("City: " + city_name);
SearchResultsHTML.push("Country: " + country_name);
SearchResultsHTML.push("Weather: " + weather_description);
SearchResultsHTML.push("<span id='longSpan'>Longitude: " + longitude + "</span>");
SearchResultsHTML.push("<span id='latSpan'>Latitude: " + latitude + "</span>");
SearchResultsHTML.push("<span id='tempSpan'>Temperature: " + temp + "</span>");
SearchResultsHTML.push("<span id='pressSpan'>Pressure: " + pressure + "</span>");
SearchResultsHTML.push("<span id='humSpan'>Humidity: " + humidity + "</span>");
SearchResultsHTML.push("<span id='wsSpan'>Wind Speed: " + wind_speed + "</span>");
SearchResultsHTML.push("<span id='wdSpan'>Wind Direction: " + wind_direction + "</span>");
SearchResultsHTML.push("<span id='sunupSpan'>Sunrise: " + sunrise.toLocaleTimeString + "</span>");
SearchResultsHTML.push("<span id='sundownSpan'>Sunset: " + sunset.toLocaleTimeString() + "</span>");
$("#SearchResults").html(SearchResultsHTML.join("<br/>"));
showSpans();
})
}
using
$(".ticksel").on("change", showSpans);
function showSpans() {
$(".ticksel input").each(function() {
const id = this.id;
const checked = this.checked;
if (id) {
const $span = $("#" + id + "span");
if ($span) $span.toggle(checked);
}
})
}
$(document).ready(function() {
var inputType = 1;
$("#Radio1").click(function() {
$("#lbl1").text("City Name:");
$("#lbl2").text("Country Code:");
$("#Firstbox").removeAttr("min max step");
$("#Secondbox").removeAttr("min max step");
document.getElementById('Firstbox').value = '';
document.getElementById('Secondbox').value = '';
$("#Firstbox").attr({
"type": "text",
"pattern": "[a-zA-Z]{2,}",
"placeholder": "Regina"
});
$("#Secondbox").attr({
"type": "text",
"pattern": "[a-zA-Z]{2}",
"placeholder": "ca"
});
inputType = 1;
});
$("#Radio2").click(function() {
$("#lbl1").text("Postal Code:");
$("#lbl2").text("Country Code:");
$("#Firstbox").removeAttr("min max step");
$("#Secondbox").removeAttr("min max step");
document.getElementById('Firstbox').value = '';
document.getElementById('Secondbox').value = '';
$("#Firstbox").attr({
"type": "text",
"pattern": "[A-Z][0-9][A-Z]",
"placeholder": "S4X"
});
$("#Secondbox").attr({
"type": "text",
"pattern": "[a-zA-Z]{2}",
"placeholder": "ca"
});
inputType = 2;
});
$("#Radio3").click(function() {
$("#lbl1").text("Latitude:");
$("#lbl2").text("Longitude:");
$("#Firstbox").removeAttr("pattern");
$("#Secondbox").removeAttr("pattern");
document.getElementById('Firstbox').value = '';
document.getElementById('Secondbox').value = '';
$("#Firstbox").attr({
"type": "number",
"min": "-90",
"max": "90",
"step": "any",
"placeholder": "50.4"
});
$("#Secondbox").attr({
"type": "number",
"min": "-180",
"max": "180",
"step": "any",
"placeholder": "-105.5"
});
inputType = 3;
});
$("#SearchButton").click(function() {
if (checkValidity()) {
var Firstbox = $("#Firstbox").val();
var Secondbox = $("#Secondbox").val();
var apiKey = "52453f34dee0d65b1a41a02656142c6b";
if (inputType == 1) {
var SearchString = "https://api.openweathermap.org/data/2.5/weather" +
"?q=" + Firstbox + "," + Secondbox +
"&APPID=" + apiKey;
} else if (inputType == 2) {
var SearchString = "http://api.openweathermap.org/data/2.5/weather" +
"?zip=" + Firstbox + "," + Secondbox +
"&APPID=" + apiKey;
} else if (inputType == 3) {
var SearchString = "http://api.openweathermap.org/data/2.5/weather" +
"?lat=" + Firstbox + "&lon=" + Secondbox +
"&APPID=" + apiKey;
}
$.getJSON(SearchString, function(obj) {
var city_name = obj["name"];
var country_name = obj["sys"]["country"];
var longitude = obj["coord"]["lon"];
var latitude = obj["coord"]["lat"];
var weather_description = obj["weather"][0]["description"];
var temp = obj["main"]["temp"] - 273.15;
var pressure = obj["main"]["pressure"];
var humidity = obj["main"]["humidity"];
var wind_speed = obj["wind"]["speed"];
var wind_direction = obj["wind"]["deg"];
var sunrise = new Date(obj["sys"]["sunrise"] * 1000);
var sunset = new Date(obj["sys"]["sunset"] * 1000);
let SearchResultsHTML = []
SearchResultsHTML.push("City: " + city_name);
SearchResultsHTML.push("Country: " + country_name);
SearchResultsHTML.push("Weather: " + weather_description);
SearchResultsHTML.push("<span id='longSpan'>Longitude: " + longitude + "</span>");
SearchResultsHTML.push("<span id='latSpan'>Latitude: " + latitude + "</span>");
SearchResultsHTML.push("<span id='tempSpan'>Temperature: " + temp + "</span>");
SearchResultsHTML.push("<span id='pressSpan'>Pressure: " + pressure + "</span>");
SearchResultsHTML.push("<span id='humSpan'>Humidity: " + humidity + "</span>");
SearchResultsHTML.push("<span id='wsSpan'>Wind Speed: " + wind_speed + "</span>");
SearchResultsHTML.push("<span id='wdSpan'>Wind Direction: " + wind_direction + "</span>");
SearchResultsHTML.push("<span id='sunupSpan'>Sunrise: " + sunrise.toLocaleTimeString + "</span>");
SearchResultsHTML.push("<span id='sundownSpan'>Sunset: " + sunset.toLocaleTimeString() + "</span>");
$("#SearchResults").html(SearchResultsHTML.join("<br/>"));
showSpans();
})
}
});
$(".ticksel").on("change", showSpans);
function showSpans() {
$(".ticksel input").each(function() {
const id = this.id;
const checked = this.checked;
if (id) {
const $span = $("#" + id + "span");
if ($span) $span.toggle(checked);
}
})
}
function displayError() {
var first = document.getElementById('Firstbox');
var second = document.getElementById('Secondbox');
if (first.validity.valid) {
if (inputType == 1 || inputType == 2) {
alert("Country code must be 2 characters in length.");
} else {
alert("Longitude must be between -180 and 180");
}
} else {
if (inputType == 1) {
alert("City name must be longer than 1 character.");
} else if (inputType == 2) {
alert("Postal code must be 3 characters in length, following the format 'S4X'");
} else {
alert("Latitude must be between -90 and 90");
}
}
}
function checkValidity() {
var first = document.getElementById('Firstbox');
var second = document.getElementById('Secondbox');
if (first.validity.valid && second.validity.valid) {
return true;
} else {
displayError();
return false;
}
}
function checksSelected() {
}
});
.validated:valid {
background-color: #BDF0A8;
}
.validated:invalid {
background-color: #FAC3C9;
}
.row {
margin-bottom: 10px;
}
.ticksel {
border: solid black 1px;
}
tr,
td {
border: solid black 1px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<title>Final Project</title>
<link rel="stylesheet" type="text/css" href="weather.css">
<form id="searchForm" method="POST" action="URL">
<div class="row col-md-12">
<h2>OpenWeatherMap Weather Search</h2>
</div>
<div class="row">
<div class="col-md-6">
<h4>Search by:</h4>
<input id="Radio1" name="searchBy" type="radio" checked /> City Name<br/>
<input id="Radio2" name="searchBy" type="radio"> Postal Code<br/>
<input id="Radio3" name="searchBy" type="radio" /> Latitude / Longitude<br/>
</div>
<div class="col-md-6">
<h4>Show in search results:</h4>
<div class="row">
<div class="col ticksel"><input type="checkbox" checked id="long" value="yes"> Longitude</div>
<div class="col ticksel"><input type="checkbox" checked id="lat" value=""> Latitude</div>
<div class="col ticksel"><input type="checkbox" checked id="temp" value=""> Temperature</div>
</div>
<div class="row">
<div class="col ticksel"><input type="checkbox" checked id="press" value=""> Pressure</div>
<div class="col ticksel"><input type="checkbox" checked id="hum" value=""> Humidity</div>
<div class="col ticksel"><input type="checkbox" checked id="ws" value=""> Wind Speed</div>
</div>
<div class="row">
<div class="col ticksel"><input type="checkbox" checked id="wd" value=""> Wind Direction</div>
<div class="col ticksel"><input type="checkbox" checked id="sunup" value=""> Sunrise</div>
<div class="col ticksel"><input type="checkbox" checked id="sundown" value=""> Sunset</div>
</div>
</div>
</div>
<div class="row col-md-12">
<label id="lbl1">City Name:</label><input id="Firstbox" class="validated" type="text" required pattern=".{2,}" placeholder="Regina" />
<label id="lbl2">Country Code:</label><input id="Secondbox" class="validated" type="text" required pattern="[a-zA-Z]{2}" placeholder="ca" />
<input id="SearchButton" type="button" value="Search" />
</div>
</form>
<div class="row col-md-12">
<h4>Current Weather</h4>
</div>
<div class="row col-md-12">
<p id="SearchResults"></p>
</div>
<div class="row col-md-12">
<table width="100%">
<thead>
<tr>
<th>City</th>
<th>Country</th>
<th>Longitude</th>
<th>Latitude</th>
<th>Weather</th>
<th>Temperature</th>
<th>Pressure</th>
<th>Humidity</th>
<th>Wind Speed</th>
<th>Wind Direction</th>
<th>Sunrise</th>
<th>Sunst</th>
<th><a class="deleteAll" href="#">Clear Log</a></th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>

I'm relatively new to Javascript. I'm creating a CRUD based application and I need help in the Edit function

I am trying to create a pure Javascript CRUD application. The data is displayed in an HTML Table.
I have created the Create, Read and delete function. In the Edit function, I want the data to be displayed on a text box when the edit link is clicked and should also have a save button.
How should I proceed ?
var name = document.getElementById('Name').value;
var age = document.getElementById('Age').value;
var email = document.getElementById('Email').value;
var password = document.getElementById('Password').value;
var confirmpassword = document.getElementById('ConfirmPassword').value;
var dob = document.getElementById('DOB').value;
//add
var users = [];
function data(name, age, email, dob) {
var user = {
"name": name,
"age": age,
"email": email,
"dob": dob
}
users.push(user);
read(users);
console.log(users);
}
//Read
function read(users) {
var html = "<table border='1|1'>";
html += "<tr>";
html += "<th>" + "Name" + "</th>"
html += "<th>" + "Age" + "</th>"
html += "<th>" + "Email" + "</th>";
html += "<th>" + "DOB" + "</th>";
html += "<th>" + "Edit" + "</th>";
html += "<th>" + "Delete" + "</th>";
html += "</tr>"
var userhtml = document.getElementById('user');
userhtml.innerHTML = '';
for (var i = 0; i < users.length; i++) {
html += "<tr>";
html += "<td>" + users[i].name + "</td>";
html += "<td>" + users[i].age + "</td>";
html += "<td>" + users[i].email + "</td>";
html += "<td>" + users[i].dob + "</td>";
html += "<td>" + "<a href='#' onclick='editUsers()'>Edit</a>" + "</td>";
html += "<td>" + "<a href='#' onclick='deleteUsers()'>Delete</a>" + "</td>";
html += "</tr>";
}
html += "</table>";
document.getElementById("user").innerHTML = html;
}
function deleteUsers(i) {
debugger;
users.splice(i, 1)
read();
console.log(users);
}
<form action="#" onsubmit="data(name, age, email, dob)">
<div class="form-group">
<label class="form-text">Name :</label>
<input type="text" id="Name" placeholder="Enter Name" class="form-control" />
<span id="ErrorName" class="text-danger"></span>
</div>
<div class="form-group">
<label class="form-text">Age :</label>
<input type="text" id="Age" placeholder="Enter Age" class="form-control" />
<span id="ErrorAge" class="text-danger"></span>
</div>
<div class="form-group">
<label class="form-text">Email :</label>
<input type="text" id="Email" placeholder="Enter Email" class="form-control" />
<span id="ErrorEmail" class="text-danger" />
</div>
<div class="form-group">
<label class="form-text">Password :</label>
<input type="password" id="Password" placeholder="Enter Password" class="form-control" />
<span id="ErrorPassword" class="text-danger"></span>
</div>
<div class="form-group">
<label class="form-text">Confirm Password :</label>
<input type="password" id="ConfirmPassword" placeholder="Confirm Password" />
<span id="ErrorConfirmPassword" class="text-danger"></span>
</div>
<div class="form-group">
<label class="form-text">Date of Birth :</label>
<input type="date" id="DOB" class="form-control" />
<span id="ErrorDOB" class="text-danger"></span>
</div>
<div class="form-group col-xl-4 text-center">
<input type="submit" id="Submit" class="btn btn-success" />
</div>
</form>
<div class="user" id="user">
</div>
function editUsers(index) {
var x = document.getElementById('edit');
x.style.display = "block";
debugger;
var userhtml1 = document.getElementById('edit');
userhtml1.innerHTML = '';
for (var i = 0; i < users.length; i++) {
if (i == index) {
userhtml1.innerHTML += ' <div class="form-group"> Name :<input class="form-control" id="EditName" type="text" value ="' + users[i].name + '"><br />' +
'Age :<input class="form-control" id="EditAge" type="text" value="' + users[i].age + '"> <br /> ' +
'Email :<input class="form-control" id="EditEmail" type="text" value="' + users[i].email + '"> <br /> ' +
'DOB :<input class="form-control" id="EditDOB" type="text" value="' + users[i].dob + '"> <br /> ' +
'<button class="edit" onclick="updateUser(' + i + ')">Update</button>';
}
else {
userhtml1.innerHTML += '';
}
}
}
//CRUD - UPDATE
function updateUser(index) {
debugger;
var updatename = document.getElementById('EditName').value;
var updateage = document.getElementById('EditAge').value;
var updateemail = document.getElementById('EditEmail').value;
var updatedob = document.getElementById('EditDOB').value;
if (updatename == '' || updateemail == '' || updateage == '' || updatedob == '') {
alert("Please Fill the Fields!");
}
else {
users[index].name = updatename;
users[index].email = updateemail;
users[index].age = updateage;
users[index].dob = updatedob;
read(users);
var x = document.getElementById('edit');
x.style.display = "none";
}
}

How to Create a Loop Jquery

I have this HTML + this JQuery.JS
The Script works like this. When you Press the Add Button a Form will appear over the Table, when you press the hide button it will hide it When you press the Edit button any text that you will add in the form input cases will be added to a new TR that will be created with the Submit button.
What I want to do now is. On each TD line, I want my ADD/HIDE/Edit buttons to reappear but this time when I push Edit. I want to edit the new text that is in the new TR.
For Example, I have in first TR a, a, a, a, a I press Edit I put b, b, b, b, b, Submit it a new TR will be created with the bbbbb and when I push the Edit button again that is on the bbbbb tr. I want it to edit the bbbbb Line. I don't know how to explain it better than this. I can reach via skype if you guys want idk.
$(document).ready(function () {
$('#submit').on('click', function () {
var valid = true,
message = '';
$('form input').each(function () {
var $this = $(this);
if (!$this.val()) {
var inputName = $this.attr('name');
valid = false;
message += 'Please enter your ' + inputName + '\n';
}
});
if (!valid) {
alert(message);
} else {
$('table').append('' +
'<tr>' +
'<td>' + $('#btd1').val() + '</td>' +
'<td>' + $('#btd2').val() + '</td>' +
'<td>' + $('#btd3').val() + '</td>' +
'<td>' + $('#btd4').val() + '</td>' +
'<td>' + $('#btd5').val() + '</td>' +
'</tr>' +
'');
for(var x = 1; x < $('input').length; x++) {
$('#btd' + x ).val('');
}
$('.buttons').attr('rowspan', $('tr').length);
}
});
$(".hide").click(function () {
$("form").hide();
});
$(".add").click(function () {
$("form").show();
});
$(".edit").click(function () {
$("form").show();
$.each($(this).parent().parent().find('td'), function (key, val) {
$("form input[type=text]").eq(key).val($(val).text());
})
});
$("#show").click(function () {
//$("form").show();
//$("#btd1").val("Vlad");
//$("#btd2").val("Andrei");
//$("#btd3").val("vTask");
// $("#btd4").val("Ceva");
//$("#btd5").val("Alceva");
});
});
<!DOCTYPE html>
<html >
<head >
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<title ></title >
</head >
<body >
<form class="a" action="" method="post" hidden>
<input type="text" name="nume" id="btd1" value="" >
<input type="text" name="prenume" id="btd2" value="" >
<input type="text" name="email" id="btd3" value="" >
<input type="text" name="telefon" id="btd4" value="" >
<input type="text" name="parola" id="btd5" value="" >
<input type="button" id="submit" value="Submit" name="submit" />
</form >
<table border="2" >
<tr >
<td >Vlad</td >
<td >Andrei</td >
<td >vTask</td >
<td >Ceva</td >
<td >Alceva</td >
<td class="buttons" style="vertical-align: top">
<button class="add" >Add</button >
<button class="hide" >Hide</button >
<button class="edit" >Edit</button >
</td >
</tr >
</table >
</body >
</html >
Thanks for the help in advance
My fellow romanian you need something like this:
$(document).ready(function () {
$('#submit').on('click', function () {
var valid = true,
message = '';
$('form input').each(function () {
var $this = $(this);
if (!$this.val()) {
var inputName = $this.attr('name');
valid = false;
message += 'Please enter your ' + inputName + '\n';
}
});
if (!valid) {
alert(message);
} else {
$('table').append('' +
'<tr>' +
'<td>' + $('#btd1').val() + '</td>' +
'<td>' + $('#btd2').val() + '</td>' +
'<td>' + $('#btd3').val() + '</td>' +
'<td>' + $('#btd4').val() + '</td>' +
'<td>' + $('#btd5').val() + '</td>' +
'<td class="buttons" style="vertical-align: top"><button class="add" >Add</button><button class="hide" >Hide</button><button class="edit">Edit</button></td >'+
'</tr>' +
'');
for(var x = 1; x < $('input').length; x++) {
$('#btd' + x ).val('');
}
}
});
$("body").on('click','.hide',function () {
$("form").hide();
});
$("body").on('click','.add',function () {
$("form").show();
});
$("body").on('click','.edit',function () {
$("form").show();
$.each($(this).closest('tr').find('td:not(".buttons")'), function (key, val) {
$("form input[type=text]").eq(key).val($(val).text());
})
});
$("#show").click(function () {
//$("form").show();
//$("#btd1").val("Vlad");
//$("#btd2").val("Andrei");
//$("#btd3").val("vTask");
// $("#btd4").val("Ceva");
//$("#btd5").val("Alceva");
});
});
<!DOCTYPE html>
<html >
<head >
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<title ></title >
</head >
<body >
<form class="a" action="" method="post" hidden>
<input type="text" name="nume" id="btd1" value="" >
<input type="text" name="prenume" id="btd2" value="" >
<input type="text" name="email" id="btd3" value="" >
<input type="text" name="telefon" id="btd4" value="" >
<input type="text" name="parola" id="btd5" value="" >
<input type="button" id="submit" value="Submit" name="submit" />
</form >
<table border="2" >
<tr >
<td >Vlad</td >
<td >Andrei</td >
<td >vTask</td >
<td >Ceva</td >
<td >Alceva</td >
<td class="buttons">
<button class="add" >Add</button >
<button class="hide" >Hide</button >
<button class="edit" >Edit</button >
</td >
</tr >
</table >
</body >
</html >

php ajax based form displaying blank page

I have created a eBay Item search form. I want to make form.html to form.php but when I change it to .php the form doesn't work and display blank page. you can see form.html here:
<script>
function showDetail(name){
$("."+name).collapse('toggle');
}
function getPage(num){
var data = {
"action": "test",
"pageNumber": num
};
data = $('form').serialize() + "&" + $.param(data);
// jQuery AJAX call to PHP Script with JSON Return
$.ajax({
type: "GET",
dataType: "json",
url: "advancedItemSearchTest.php", //Relative or absolute path to response.php file
data: data,
success: function(new_data) {
$( ".container" ).hide();
$( ".the-return" ).html( "" );// clear all the contents first
if(new_data['ack'] != 'Success' || new_data['resultCount'] <= 0){
$( ".the-return" ).html( "<h2>No Results were found</h2>" );
}
else{
for ( var i = 0; i < new_data.itemCount; i++ ) {
var $media = $( '<div class = "media"></div>');
var $media_body = $( '<div class = "media-body"></div>');
var $a_class = $('<a class= "pull-left"></a>');
var $name = 'name' + i;
//<img class = "media-object" src = alt = "Item Image" />
//<?php echo $item->title ?>
var $item = new_data['item'][i];
var $imageURL = $item['basicInfo']['galleryURL'];
var $price = $item['basicInfo']['convertedCurrentPrice']
var $title = '<a href = '+ $item['basicInfo']['viewItemURL']+ '>' + $item['basicInfo']['title'] + '</a>';
var $image = '<img class = "media-object" src =' + $imageURL +'alt = "Item Image" style="width:96px;height:96px" data-toggle="modal" data-target="#myModal'+ $name +'"/>';// concatenating string must use+ for variable!!
var $modal = $('<div class="modal fade" id="myModal'+ $name +'" role="dialog"></div>');
var $modalDialog = $('<div class="modal-dialog"></div>');
var $modalContent = $('<div class="modal-content"></div>');
$modalContent.append($('<div class="modal-header"></div>').append('<h4 class="modal-title">'+$item['basicInfo']['title']+'</h4>'));
$modalContent.append($('<div class="modal-body"></div>').append('<img src='+$item['basicInfo']['pictureURLSuperSize']+' alt="Item image" style="width:512px;height:512px" align="middle">'));
$modalContent.append($('<div class="modal-footer"></div>').append('<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>'));
$modalDialog.append($modalContent);
$modal.append($modalDialog);
var $shippingCost = "(Free Shipping)";
if($item['basicInfo']['shippingServiceCost'] > 0){
$shippingCost = "(+$" + $item['basicInfo']['shippingServiceCost'] + ")";
}
$price = "<b>" + "Price:$" + $price + "</b>";
var $location = "<i>" + "Location:"+ $item['basicInfo']['location'] + "</i>";
var $topRated = "";
if($item['basicInfo']['topRatedListing']){
$topRated = '<img src =' + 'http://cs-server.usc.edu:45678/hw/hw8/itemTopRated.jpg' +' alt = "Top Rated" style="width:32px;height:24px" />';
}
var $collapse = $('<div class="collapse '+ $name +'"></div>');//
var $ul = $('<ul class="nav nav-tabs"></ul>');
$ul.append($('<li class="active"><a data-toggle="tab" href="#basic'+ $name +'">Basic Info</a></li>'));
$ul.append($('<li><a data-toggle="tab" href="#seller'+ $name +'">Seller Info</a></li>'));
$ul.append($('<li><a data-toggle="tab" href="#shipping'+ $name +'">Shipping Info</a></li>'));
$collapse.append($ul);
var $tabContend = $('<div class="tab-content"></div>');
var $basic = $('<div id="basic'+ $name +'" class="tab-pane fade in active"></div>');
var $table = $('<tbody></tbody>');//$('<table class = "table table-striped" ></table>');
var $tr = $('<tr></tr>');
$tr.append('<td><b>Condition</b></td>' + '<td>'+$item['basicInfo']['conditionDisplayName']+'</td>');
$table.append($tr);
$tr = $('<tr></tr>');
$tr.append('<td><b>Category Name</b></td>' + '<td>'+$item['basicInfo']['categoryName']+'</td>');
$table.append($tr);
$tabContend.append($basic.append($('<table class = "table table-striped" ></table>').append($table)));
var $seller = $('<div id="seller'+ $name +'" class="tab-pane fade"></div>');
$table = $('<tbody></tbody>');//$('<table class = "table table-striped""></table>');
$tr = $('<tr></tr>');
$tr.append('<td><b>User name</b></td>' + '<td>'+$item['sellerInfo']['sellerUserName']+'</td>');
$table.append($tr);
$tr = $('<tr></tr>');
$tr.append('<td><b>Feedback score</b></td>' + '<td>'+$item['sellerInfo']['feedbackScore']+'</td>');
$table.append($tr);
$tr = $('<tr></tr>');
$tr.append('<td><b>Positive feedback</b></td>' + '<td>'+$item['sellerInfo']['positiveFeedbackPercent']+'</td>');
$table.append($tr);
$tr = $('<tr></tr>');
var $storeName = 'N/A';
if($item['sellerInfo']['sellerStoreName']!=''){
$storeName = $item['sellerInfo']['sellerStoreName'];
}
$tr.append('<td><b>Store name</b></td>' + '<td>'+$storeName+'</td>');
$table.append($tr);
$tabContend.append($seller.append($('<table class = "table table-striped" ></table>').append($table)));
var $shipping = $('<div id="shipping'+ $name +'" class="tab-pane fade"></div>');
$table = $('<tbody></tbody>');//$('<table class = "table table-striped""></table>');
$tr = $('<tr></tr>');
$tr.append('<td><b>Shipping type</b></td>' + '<td>'+$item['shippingInfo']['shippingType']+'</td>');
$table.append($tr);
$tr = $('<tr></tr>');
$tr.append('<td><b>Handling time</b></td>' + '<td>'+$item['shippingInfo']['handlingTime']+'</td>');
$table.append($tr);
$tr = $('<tr></tr>');
$tr.append('<td><b>Shipping locations</b></td>' + '<td>'+$item['shippingInfo']['shipToLocations']+'</td>');
$table.append($tr);
$tr = $('<tr></tr>');
//&#10004(correct) &#10008(wrong)
var $mark = "&#10008";
if($item['shippingInfo']['expeditedShipping']){
$mark = "&#10004";
}
$tr.append('<td><b>Expedited shipping</b></td>' + '<td>'+ $mark +'</td>');
$table.append($tr);
$tr = $('<tr></tr>');
//&#10004(correct) &#10008(wrong)
var $mark = "&#10008";
if($item['shippingInfo']['returnsAccepted']){
$mark = "&#10004";
}
$tr.append('<td><b>Return accepted</b></td>' + '<td>'+ $mark +'</td>');
$table.append($tr);
$tr = $('<tr></tr>');
//&#10004(correct) &#10008(wrong)
var $mark = "&#10008";
if($item['shippingInfo']['oneDayShippingAvailable']){
$mark = "&#10004";
}
$tr.append('<td><b>One day shipping</b></td>' + '<td>'+ $mark +'</td>');
$table.append($tr);
$tabContend.append($shipping.append($('<table class = "table table-striped" ></table>').append($table)));
$collapse.append($tabContend);
var $viewDetail= '<a onclick="showDetail(\'' + $name +'\')">View Detail</a>';//'+$name+'
$media.append($a_class.html( $image));
$media_body.append($collapse);
$media_body.prepend( '<font size="4">' + $title + '</font>' + '<br/>' + $price + $shippingCost + ' ' + $location + ' ' + $topRated + ' ' + $viewDetail );
$media.append($media_body);
$media.appendTo( $( ".the-return" ) );
$modal.appendTo( $( ".the-return" ) );
}
var $pagination = $('<div class = "pagination"></div>');
var $ul = $('<ul class="pagination"></ul>');
var $prev = num - 1;
if( num == 1){
$pagination.append($ul.append('<li class="disabled">' + '<<' + '</li>'));
}
else{
$pagination.append($ul.append('<li>' + '<<' + '</li>'));
}
for( var i = num; i < num+5; i++ ){
$pagination.append($ul.append('<li>' + i + '</li>'));
}
var $next = num + 1;
if( num == new_data['totalPages']){
$pagination.append($ul.append('<li class="disabled">' + '>>' + '</li>'));
}
else{
$pagination.append($ul.append('<li>' + '>>' + '</li>'));
}
var $itemFrom = (num-1) * Number(new_data.itemCount) + 1;
var $itemTo = $itemFrom + Number(new_data.itemCount) - 1;
var $resultNum = $( '<div class = "resultNum" ></div>').append( '<b><font size="5">'+$itemFrom +'-'+ $itemTo + ' items out of ' + new_data['resultCount'] +'</font></b>');
$resultNum.prependTo($( ".the-return" ));
$pagination.appendTo( $( ".the-return" ) );
}
},
error: function(jqXHR, textStatus, errorThrown){
//alert('error: ' + textStatus + ': ' + errorThrown);
}
});
}
$(document).ready(function(){
$('form').validate({
rules: {
keyword: { // should be name, not id!
required: true
},
priceLow: {
number: true,
digits: true
},
priceHigh: {
number: true,
digits: true
},
shippingTime:{
number: true,
digits: true
}
},
messages:{
keyword: { // should be name, not id!
required: "Please enter a keyword"
},
priceLow: {
number: "Price should be a valid number",
digits: "Price should be a valid number",
min : "Minimum price cannot be below 0"
},
priceHigh: {
number: "Price should be a valid number",
digits: "Price should be a valid number",
min : "Maximum price cannot be less than minimum price or below 0"
},
shippingTime:{
number: "Max handling time should be a valid digit",
digits: "Max handling time should be a valid digit",
min: "Max handling time should be greater than or equal to 1"
}
},
highlight: function(element) {
$(element).closest('.form-group').addClass('has-error');
},
unhighlight: function(element) {
$(element).closest('.form-group').removeClass('has-error');
},
errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function(error, element) {
if(element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
}
});
$('form').submit(function(){
//var num = 1;
getPage(1);
return false;
});
}); // end document.ready
</script>
</head>
<body>
<style>
.center_div{
margin: 0 auto;
width:80%;
}
</style>
<div class = "container center_div" >
<img src = " http://cs-server.usc.edu:45678/hw/hw8/ebay.jpg" class="img-responsive"><br>
<form class = "form-horizontal" action = "advancedItemSearchTest.php" method="GET" role = "form" id = "myForm" accept-charset="utf-8">
<div class = "form-group">
<label class="control-label col-sm-2" for="keyword">Key words:*</label>
<div class="col-sm-8">
<input type = "text" class="form-control" id = "keyword" name = "keyword" placeholder="Enter keyword">
</div>
<label class="control-label col-sm-2" for="keyword">APP ID</label>
<div class="col-sm-8">
<input type = "text" class="form-control" id = "appid" name = "appid" placeholder="Enter appID">
</div>
</div>
<div class = "form-group row">
<label class="control-label col-sm-2" for="priceLow">Price range: </label>
<div class="col-sm-4">
<input type = "number" class="form-control" name = "priceLow" id = "priceLow" min="0" placeholder="from($)">
</div>
<label class="control-label " for="priceHigh"> </label>
<div class="col-sm-4">
<input type = "number" class="form-control" name = "priceHigh" id = "priceHigh" min="0" placeholder="to($)">
</div>
</div>
<div class = "form-group">
<label class="control-label col-sm-2" for="conditionNew">Condition: </label>
<div class="col-sm-8">
<label class="checkbox-inline"><input type="checkbox" id = "conditionNew" name = "condition[]" value=1000>New</label>
<label class="checkbox-inline"><input type="checkbox" name = "condition[]" value=3000>Used</label>
<label class="checkbox-inline"><input type="checkbox" name = "condition[]" value=4000>Very Good</label>
<label class="checkbox-inline"><input type="checkbox" name = "condition[]" value=3000>Good</label>
<label class="checkbox-inline"><input type="checkbox" name = "condition[]" value=4000>Acceptable</label>
</div>
</div>
<div class = "form-group">
<label class="control-label col-sm-2" for="formats">Buying formats: </label>
<div class="col-sm-8">
<label class="checkbox-inline"><input type="checkbox" id = "formats" name = "BuyFormat[]" value="FixedPrice">Buy It Now</label>
<label class="checkbox-inline"><input type="checkbox" name = "BuyFormat[]" value="Auction">Auction</label>
<label class="checkbox-inline"><input type="checkbox" name = "BuyFormat[]" value="Classified">Classified Ad</label>
</div>
</div>
<div class = "form-group">
<label class="control-label col-sm-2" for="shipping">Shipping: </label>
<div class="col-sm-8">
<label class="checkbox-inline"><input type="checkbox" id = "shipping" name = "FreeShippingOnly" value="true">Free Shipping</label>
<label class="checkbox-inline"><input type="checkbox" name = "ExpeditedShippingType" value="Expedited">Expedited shipping</label>
</div>
</div>
<div class = "form-group">
<label class="control-label col-sm-2" for="shippingTime"> </label>
<div class="col-sm-8">
<input type = "number" class="form-control" name = "shippingTime" id = "shippingTime" min="1" placeholder="Max handling time(days)">
</div>
</div>
</div>
</div>
<div class="form-group col-sm-10" align="right">
<input type="reset" class="btn btn-default" value="Clear" >
<input type="submit" class="btn btn-primary" value="Search">
</div>
</form>
when form is in .html extension it works fine but when I change it to .php it display blank page.
Change the last button type from submit to button.
In submit It will redirect on new page.

Categories

Resources