How to make my form post to its self - javascript

I have a form in which users can submit issues, what I want to happen is when users hit the add button, i want what they add to be posted in the box below. So say the add something, x out the window and come back to add something else later what they added previously will still be there.
here is my fiddle
http://jsfiddle.net/grahamwalsh/rCB9V/
IssueList(html)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Issue List</title>
<script src="Scripts/jquery-2.1.1.js"></script>
<script src="Scripts/knockout-3.1.0.js"></script>
<script src="Issuelist.js"></script>
<link type="text/css" rel="stylesheet" href="Issuelistcss.css" />
</head>
<body>
<div class='issuelist'>
<form data-bind="submit:addIssue">
Add Issue: <input type="text" data-bind='value:issueToAdd, valueUpdate: "afterkeydown"' />
<button type="submit" data-bind="enable: issueToAdd().length > 0">Add</button>
</form>
<p>Your Issues:</p>
<select multiple="multiple" data-bind="options:allIssues, selectedOptions:selectedIssues"> </select>
<div>
<button data-bind="click: removeSelected, enable: selectedIssues().length > 0">Remove</button>
<button data-bind="click: sortIssues, enable: allIssues().length > 1">Sort</button>
</div>
</div>
</body>
</html>
IssueList (js)
$(document).ready(function(){
var Issuelist = function () {
this.issueToAdd = ko.observable("");
this.allIssues = ko.observableArray(["test"]);
this.selectedIssues = ko.observableArray(["test"]);
this.addIssue = function () {
if ((this.issueToAdd() != "") && (this.allIssues.indexOf(this.issueToAdd()) < 0))
this.allIssues.push(this.issueToAdd());
this.issueToAdd("");
};
this.removeSelected = function () {
this.allIssues.removeAll(this.selectedIssues());
this.selectedIssues([]);
};
this.sortIssues = function () {
this.allIssues.sort();
};
};
ko.applyBindings(new Issuelist());
});
IssueListcss
body { font-family: arial; font-size: 14px; }
.issuelist { padding: 1em; background-color: #87CEEB; border: 1px solid #CCC; max-width: 655px; }
.issuelist input { font-family: Arial; }
.issuelist b { font-weight: bold; }
.issuelist p { margin-top: 0.9em; margin-bottom: 0.9em; }
.issuelist select[multiple] { width: 100%; height: 8em; }
.issuelist h2 { margin-top: 0.4em; }

You could have the form 'post' to its self then make an ajax request for their new issue and put it inside a div. I would also hold off on so much on the javascript or have support for those without it:
getissues.php
getissues.php
<?php
/*
connect to your database code
*/
$query = "select * from issues";
$result = mysql_query($query, $connect);
while($row = mysql_fetch_array($result))
{
echo $row['issues'];
echo '<hr>';
}
?>
process.php
process.php:
<?php
/*
connect to your database
*/
$issue = strip_tags$_POST['issue'];
$query = "insert into issues (issue) values ('$issue')";
$result = mysql_query($query, $connect);
?>
main form page:
<!DOCTYPE HTML>
<html>
<head>
<title>issue page</title>
<script src="Scripts/jquery-2.1.1.js"></script>
<script src="Scripts/knockout-3.1.0.js"></script>
<script src="Issuelist.js"></script>
<link type="text/css" rel="stylesheet" href="Issuelistcss.css" />
<script type="text/javascript">
function check()
{
var request = $.ajax({
url: "getissues.php",
type: "POST",
dataType: "html"
});
request.done(function(msg) {
$("#issues").html(msg);
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
}
function validate()
{
var issue = $("#issue");
var errcount = 0;
if (issue == "")
{
errcount++;
alert("enter something");
}
if (errcount == 0)
{
/*
make request to php script to put issue into database
*/
$.post("process.php",
{
issue:issue
},
function(data,status){
window.alert("Request done!");
check();
});
}
}
</script>
</head>
<body>
<form action="issuelist.html" method="post">
Add Issue: <input type="text" name="issue"/>
Add Issue: <input type="text" name="issue" id="issue"/>
<button onclick="validate()">submit</button>
</form>
<div id="issues" class="issues">
<!--your ajax fetched issues will appear here-->
</div>
</body>
</html>
hope this helps!

Related

Function runs immediately without setTimeout() in Javascript

I want to build a web with HTML, CSS, Javascript, PHP and MySQL. I want my web will have a feature that the customers want to download the file from the web, if they don't want to download faster, no need to go through the shorten link, they will enter the code and web will use PHP and MySQL to check if the code is in the database. If the code valid, they will press the Next button to go to download file.
This is all my code:
HTML + CSS + JS + PHP:
<!DOCTYPE html>
<html>
<head>
<title>HTML Document</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
function countWord() {
var x = document.getElementById("code").value;
if ((x.length)!=12) {
document.getElementById("ok").disabled = true;
} else if ((x.length)==12) {
document.getElementById("ok").disabled = false;
}
}
</script>
<style>
* {
padding:0;
margin:0;
box-sizing:border-box;
}
body {
background-color:#fff;
}
#code {
width:98%;
margin-left:1%;
}
#ok {
width:50%;
margin-left:25%;
margin-top:10px;
}
#nextbtn {
width:50%;
margin-left:25%;
margin-top:10px;
}
</style>
</head>
<body>
<form method="POST" name="code_form" id="code_form">
<input type="text" class="form-control" name="code" id="code" onkeyup="countWord();">
<input type="submit" name="ok" id="ok" class="btn btn-primary" disabled>
</form>
<button type="button" disabled class="btn btn-primary" id="nextbtn">Next</button>
<?php
$conn = mysqli_connect("","","","");
if (isset($_POST["ok"])) {
$code = $_POST["code"];
$sql = "SELECT * FROM code WHERE code='$code'";
$result = mysqli_query($conn,$sql);
if (mysqli_num_rows($result) == 1) {
echo "
<script>
var x = setTimeout(function(){
document.getElementById('nextbtn').disabled = false;
document.getElementById('nextbtn').onclick = function() {
window.open('https://www.youtube.com');
};
},0);
</script>
";
} else {
echo "<script>alert('Error');</script>";
}
}
?>
</body>
</html>
In the code below, I want to be able to run the function immediately without using the setTimeout() function:
echo "
<script>
var x = setTimeout(function(){
document.getElementById('nextbtn').disabled = false;
document.getElementById('nextbtn').onclick = function() {
window.open('https://www.youtube.com');
};
},0);
</script>
";
Please help me!
This function will be invoked immediately. IIFE
(function(){
document.getElementById('nextbtn').disabled = false;
document.getElementById('nextbtn').onclick = function() {
window.open('https://www.youtube.com');
})()
Is removing the setTimeout only not enough?
<script>
(function(){
document.getElementById('nextbtn').disabled = false;
document.getElementById('nextbtn').onclick = function() {
window.open('https://www.youtube.com');
})();
</script>
<script>
document.getElementById('nextbtn').disabled = false;
document.getElementById('nextbtn').onclick = function() {
window.open('https://www.youtube.com');
};
</script>
//---
<html>
<head>
<title>HTML Document</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
function countWord() {
var x = document.getElementById("code").value;
if ((x.length) != 12) {
document.getElementById("ok").disabled = true;
} else if ((x.length) == 12) {
document.getElementById("ok").disabled = false;
}
}
</script>
<style>
* {
padding:0;
margin:0;
box-sizing:border-box;
}
body {
background-color:#fff;
}
#code {
width:98%;
margin-left:1%;
}
#ok {
width:50%;
margin-left:25%;
margin-top:10px;
}
#nextbtn {
width:50%;
margin-left:25%;
margin-top:10px;
}
</style>
</head>
<body>
<form method="POST" name="code_form" id="code_form">
<input type="text" class="form-control" name="code" id="code" onkeyup="countWord();">
<input type="submit" name="ok" id="ok" class="btn btn-primary" disabled>
</form>
<button type="button" disabled class="btn btn-primary" id="nextbtn">Next</button>
<?php
//$conn = mysqli_connect("", "", "", "");
if (isset($_POST["ok"])) {
$code = $_POST["code"];
//$sql = "SELECT * FROM code WHERE code='$code'";
//$result = mysqli_query($conn, $sql);
//if (mysqli_num_rows($result) == 1) {
if (1 == 1) {
echo "<script>
document.getElementById('nextbtn').disabled = false;
document.getElementById('nextbtn').onclick = function() {
window.open('https://www.youtube.com');
};
</script>";
} else {
echo "<script>alert('Error');</script>";
}
}
?>
</body>

How can I save the value of a custom field to wordpress' user_meta after altering it with javascript?

I'm using a plugin to create fields in user_meta inside WordPress database.
To create a page, first I created a Template. Then I asked for the fields' value with the plugin's function:
<?php $pc = rp_user_data_func("pc","1"); ?>
Then I used javascript to convert the PHP variable to javascript.
<script type="text/javascript"> var pc = <?php echo $pc; ?>;</script>
And finally used the variable pc in several javascript functions, which will change the value of the variable.
Now I need to update the custom field and save the new value in the WordPress' database, once the user clicks in a "save" button.
Is there is a specific way to do it in WordPress?
That's a simplified version of the code:
<?php
$pc = rp_user_data_func("pc","1");
if ( empty($pc) ) $pc = '0';
if (isset($_POST['submit']))
{
myfnc();
}
function myfnc()
{
$user_id = 1;
add_user_meta( $user_id , $pc , $pp , false );
}
?>
<html>
<head>
<script type="text/javascript">
var pc = <?php echo $pc; ?>;
function pc_add () {
pc = pc + 1;
alert(pc);
}
function pc_sub () {
pc = pc - 1;
alert(pc);
}
</script>
<style>
.square_add{
width: 100px;
height: 100px;
Background-color: green;
float: left;
}
.square_sub{
width: 100px;
height: 100px;
Background-color: red;
float: left;
}
</style>
</head>
<body>
<div class="square_add" onclick="pc_add();">ADD</div>
<div class="square_sub" onclick="pc_sub();">SUB</div>
<form action="." method="post">
<input type="submit" name="submit" value="submit">
</form>
</body>
</html>
Here is the page with this code working (changing the variable but not saving): http://www.anastorm.ihostfull.com/teste/
Just got help.
Here is the code working if anyone has the same problem:
<?php
$pc = rp_user_data_func("pc", "1");
if (empty($pc))
$pc = '0';
function myfnc($pc2) {
$user_id = 1;
update_user_meta($user_id, 'pc', $pc2);
$pct = rp_user_data_func("pc", "1");
unset($_POST);
}
if (isset($_POST['submit']) && !empty($_POST['pc'])) {
myfnc($_POST['pc']);
}
?>
<html>
<head>
<script type="text/javascript">
var pc = <?php echo $pc; ?>;
function pc_add() {
pc = pc + 1;
alert(pc);
document.getElementById('pc').setAttribute('value',pc);
}
function pc_sub() {
pc = pc - 1;
alert(pc);
document.getElementById('pc').setAttribute('value',pc);
}
</script>
<style>
.square_add{ width: 100px; height: 100px; Background-color: green; float: left;}
.square_sub{ width: 100px; height: 100px; Background-color: red; float: left;}
</style>
</head>
<body>
<div class="square_add" onclick="pc_add();">ADD</div>
<div class="square_sub" onclick="pc_sub();">SUB</div>
<form action="." method="post">
<input type="hidden" name="pc" id="pc" value="" />
<input type="submit" name="submit" value="submit">
</form>
</body>

calling a html function inside script in external js file

I have written a javascript function inside script tag of html file...
<!DOCTYPE html>
<html>
<head>
<title> Sample Application </title>
</head>
<body>
<h1 style="text-align: left">Test</h1>
<div id="conversation" style="width: 600px; height: 400px; border: 1px solid #ccc; background-color: #eee; padding: 4px; overflow: scroll"></div>
<form id="chatform" style="margin-top: 10px" onsubmit="return pushChat();">
<input type="text" id="wisdom" size="80" value="" placeholder="Type your issue">
</form>
<script type="text/javascript">
// set the focus to the input box
document.getElementById("wisdom").focus();
function pushChat() {
// if there is text to be sent...
var wisdomText = document.getElementById('wisdom');
if (wisdomText && wisdomText.value && wisdomText.value.trim().length > 0) {
// disable input to show we're sending it
var wisdom = wisdomText.value.trim();
wisdomText.value = '';
wisdomText.locked = false;
showRequest(wisdom);
// send it to the Lex runtime
botaction(wisdom);
}
// we always cancel form submission
return false;
}
function botaction(action){
console.log("action: " + JSON.stringify(action));
switch (action.intentName) {
case "details":
var Id = action.userid;
var arguments = [Id];
verify(arguments);
break;
default:
console.log('No action found.');
console.log('executing the default action based on response');
break;
}
}
function verify(arguments){
}
</script>
</body>
</html>
i need to move the function verify(arguments) to an external js file.i have to move that because i am calling a nodejs child process which requires a module to be included.
How can i move the function to a external js file and subsequently call verify function from html file.
Make three files as such. It will solve your issue.
index.html
<!DOCTYPE html>
<html>
<head>
<title> Sample Application </title>
<!-- insert these two lines -->
<script type="text/javascript" src="verify.js" ></script>
<script type="text/javascript" src="filename.js" ></script>
</head>
<body>
<h1 style="text-align: left">Test</h1>
<div id="conversation" style="width: 600px; height: 400px; border: 1px solid #ccc; background-color: #eee; padding: 4px; overflow: scroll">
</div>
<form id="chatform" style="margin-top: 10px" onsubmit="return pushChat();">
<input type="text" id="wisdom" size="80" value="" placeholder="Type your issue">
</form>
</body>
</html>
verify.js
function verify() {
}
other.js
document.getElementById("wisdom").focus();
function pushChat() {
// if there is text to be sent...
var wisdomText = document.getElementById('wisdom');
if (wisdomText && wisdomText.value && wisdomText.value.trim().length > 0) {
// disable input to show we're sending it
var wisdom = wisdomText.value.trim();
wisdomText.value = '';
wisdomText.locked = false;
showRequest(wisdom);
// send it to the Lex runtime
botaction(wisdom);
}
// we always cancel form submission
return false;
}
function botaction(action){
console.log("action: " + JSON.stringify(action));
switch (action.intentName) {
case "details":
var Id = action.userid;
var arguments = [Id];
verify(arguments);
break;
default:
console.log('No action found.');
console.log('executing the default action based on response');
break;
}
}
You can just copy paste the function to a .js file (ex:verifys.js) and include the .js file in the HTML using

Use button value as button ID in javascript

Here is the image of the situation i'm facing
screenshot IMAGE I have 2 buttons which get their values from a html form, i am using node js and sockets for this. when i click a button in one tab button in other tab with same id is getting clicked, but what i want is when i click a button with value 1(example) the button with value 1 should get clicked which is not happening here. i was thinking for a way where i can use button value as button id can anyone help me.
EDIT
I was thinking to use IF/ELSE condition where when we click a button it will search for a button with the value of the clicked button and trigger it
app.js
const io = require('socket.io')(3000);
io.on('connection', function (socket) {
console.log('a client has connected');
socket.on('clicked', function() {
io.emit('clicked');
});
socket.on('clicked1', function() {
io.emit('clicked1');
});
});
console.log('socket.io server started at port 3000');
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script>
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--webfonts-->
<link href='http://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
<!--//webfonts-->
</head>
<body bgcolor="#3C4C55">
<script>
if (document.all||document.getElementById){
document.write('<style>.tictac{')
document.write('width:50px;height:30px;padding: 5px; font-weight: bold; cursor: pointer; border-radius: 5px; border: 1px solid #D9D9D9; font-size: 75%;')
document.write('}</style>')
}
</script>
<div class="main">
<center>
</br></br></br></br></br></br>
<form method="get" action="button.html">
<table id="employeeTable" border="15" cellpadding="5" align="center" style="background-color:orange" >
<tr>
<td>
<input type="number" id="sq1" name="sqrone" placeholder="Value" class="tictac" />
</td>
<td>
<input type="number" id="sq2" name="sqrtwo" placeholder="Value" class="tictac" />
</td>
</tr>
</table>
</br></br>
<div class="submit">
<input type="submit" value="Submit" onclick="saveVal()">
</div>
<script type="text/javascript">
function saveVal() {
var squ1 = document.getElementById("sq1").value;
localStorage.setItem("sq1", squ1);
squ1 = localStorage.getItem("sq1");
var squ2 = document.getElementById("sq2").value;
localStorage.setItem("sq2", squ2);
squ2 = localStorage.getItem("sq2");
}
</script>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "dskstkcm"
}], "*")
}
</script>
</form>
</center>
</div>
</body>
</html>
button.html
<!doctype html>
<html>
<head>
<title>Testing socket.io</title>
<style>.tictac{
width:100px;height:100px;
padding: 10px;
font-weight: bold;
background:#16ed07;
color: #000000;
cursor: pointer;
border-radius: 10px;
border: 1px solid #D9D9D9;
font-size: 150%;
}
</style>
</head>
<body>
<form>
<input type="button" id="sq1" NAME="sqr1" class="tictac" value="Send!" onClick="onClickHandler(this)"/>
<input type="button" id="sq2" NAME="sqr2" class="tictac" value="Get!" onClick="onClickHandler(this)"/>
</form>
<script type="text/javascript">
var square1 = document.getElementById("sq1");
square1.value = localStorage.getItem("sq1");
var square2 = document.getElementById("sq2");
square2.value = localStorage.getItem("sq2");
</script>
<h2 id="alert"> waiting...</h2>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.min.js"></script>
<script>
var socket = io("http://localhost:3000");
socket.on('connect', function() {
document.getElementById("sq1").addEventListener("click", function () {
socket.emit("clicked");
});
document.getElementById("sq2").addEventListener("click", function () {
socket.emit("clicked1");
});
});
socket.on('clicked', function() {
var button = document.getElementById('sq1');
console.log('clicked');
document.getElementById("alert").innerHTML = "1 clicked";
onClickHandler(sq1);
});
socket.on('clicked1', function() {
var button = document.getElementById('sq2');
console.log('clicked1');
document.getElementById("alert").innerHTML = "2 clicked";
onClickHandler(sq2);
});
</script>
<script type="text/javascript">
function onClickHandler(elem) {
elem.style.background = 'red';
elem.style.color = 'black';
}
</script>
</body>
</html>
What you probably want to do is extract information on what button was clicked and then emit that data with socket.io. The second parameter of socket.emit can be an object that will be passed to listeners of socket.on('event', function(data){ /* data passed from socket.emit */ }). You will probably need to re-emit this data from the server in the same way.
Client example: https://jsfiddle.net/wcmtk5mj/
Make sure you remove the onClicked simulation when utilizing socket.emit and socket.on in the example above.

PHP Weather website

This is a Weather project
http://mohammadhalawi.6te.net/Weather/index.php
when the user enters a correct city it return the weather and if he didn't enter anything there is an alert but when he enters a false one, this is when the problem happens, it's not returning an alert as it is supposed to do.
check out the link to test it.
so how do I make it return an alert that this city does not exist, also I'm using bootstrap
there is 3 divs with alert classes the id #success and #noCity are working but the #fail it's always empty.
so the point is I'm retrieving info from a weather website , and if this city exists the data will be in the div with id #success otherwise it if there is no such city the div with id #fail with show up , but it's not working.
Error Image
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Weather App</title>
<link rel="stylesheet" href="css/Normalize.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<!--[if IE]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<h1 class="text-center grey">Weather Prediction</h1>
<p class="lead text-center grey">Enter your city below to get the forecast weather.</p>
<form>
<div class="form-group">
<input type="text" class="form-control" name="city" id="city" placeholder="Eg. London, Paris, Beirut...">
</div>
<button class="btn btn-success btn-lg" id="FindMyWeather" name="Weather">Find my weather</button>
</form>
<div class="alert alert-success" id="success"></div>
<div class="alert alert-danger" id="fail">This city does not exist, please try again.</div>
<div class="alert alert-danger" id="noCity">Please Enter a City.</div>
</div>
</div>
</div>
<script src="js/JQuery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
</body>
</html>
script.js
$(function() {
$('#FindMyWeather').click(function(event) {
event.preventDefault();
$('.alert').hide();
if ($('#city').val() != "") {
$.get("scraper.php?city=" + $('#city').val(), function(data) {
if (data=="") {
$('#fail').fadeIn(500);
} else {
$('#success').html(data).fadeIn(500);
}
});
} else {
$('#noCity').fadeIn(500);
}
});
});
scraper.php
<?php
$city=$_GET['city'];
$city=str_replace(" ","",$city);
$contents=file_get_contents("http://www.weather-forecast.com/locations/".$city."/forecasts/latest");
preg_match('/3 Day Weather Forecast Summary:<\/b><span class="read-more-small"><span class="read-more-content"> <span class="phrase">(.*?)</s',$contents,$matches);
echo $matches[1];
?>
style.css
html
{
height: 100%;
}
body
{
background: url('../img/nature.jpg') center center no-repeat;
background-size: cover;
}
.grey
{
color: dimgrey;
}
p
{
padding: 3% 0% 0%;
}
button
{
margin-top: 5%;
}
.container
{
padding-top: 15%;
}
.alert
{
margin-top: 5%;
display: none;
text-align: center;
font-size: 1.23em;
}
When i debug your script i found
$(function() {
$('#FindMyWeather').click(function(event) {
event.preventDefault();
$('.alert').hide();
if ($('#city').val() != "") {
$.get("scraper.php?city=" + $('#city').val(), function(data) {
if (data=="") {
$('#fail').fadeIn(500);
} else {
$('#success').html(data).fadeIn(500);
}
});
} else {
$('#noCity').fadeIn(500);
}
});
});
your data response getting two enter spaces its not empty (it container two enters) that why its showing blank space check with debugger
try with
$(function() {
$('#FindMyWeather').click(function(event) {
event.preventDefault();
$('.alert').hide();
if ($('#city').val() != "") {
$.get("scraper.php?city=" + $('#city').val(), function(data) {
data.replace(/\r?\n|\r/g, "");
if (data=="") {
$('#fail').fadeIn(500);
} else {
$('#success').html(data).fadeIn(500);
}
});
} else {
$('#noCity').fadeIn(500);
}
});
});
Hope this will solve your problem
Change Your scraper.php
<?php
$city=$_GET['city'];
$city=str_replace(" ","",$city);
$site="http://www.weather-forecast.com/locations/".$city."/forecasts/latest";
$old_error_reporting = error_reporting(E_ALL ^ E_WARNING);
$content = file_get_contents($site);
error_reporting($old_error_reporting);
if ($content === FALSE) {
$error = true;
} else {
$tweets = $content;
preg_match('/3 Day Weather Forecast Summary:<\/b><span class="read-more-small"><span class="read-more-content"> <span class="phrase">(.*?)</s',$tweets,$matches);
$error = false;
}
if(!$error){
echo $matches[0];
}else{
echo "error";
}
?>
Script.js
if (data=="") {
$('#fail').fadeIn(500);
}
else if(data == "error"){
$('#fail').html('City Not Exist').fadeIn(500);
}
else {
$('#success').html(data).fadeIn(500);
}
Hope it will work

Categories