將圖像作爲一個數組存儲數據時點擊

所以我一直在努力與此，我不是專業的網頁設計師。但基本上我有6種不同類型的天氣圖像，當他們被按下/點擊時，根據哪個，我想要什麼類型的天氣存儲在桌子上。所以如果你點擊雲的圖片，'雲'這個詞會存儲在我的MYSQL數據庫中。在被按下後，用戶最終會最終輸入關於天氣的名稱和帖子，他們可以在最終的網頁上查看該天氣。將圖像作爲一個數組存儲數據時點擊

所以我的問題是我不完全確定如何使圖像存儲該數據。我也希望觀衆能夠查看其他天氣故事的其他帖子，所以我知道我需要將信息放入數組中。我正在考慮在javascipt中使用php來保存信息，但我不完全確定如何實現它，幫助？！

<!DOCTYPE HTML> 
    <html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>WhethertheWeather.</title> 

    <!--<link rel="stylesheet" type="text/css" href="demo/css/screen.css" media="all" />--> 
     <script src="http://www.adrianpelletier.com/mint/?js" type="text/javascript"></script> 
     <script type="text/javascript" src="demo/scripts/jquery-1.3.2.min.js"> </script> 
     <script type="text/javascript" src="demo/scripts/jquery-ui-1.7.1.custom.min.js"></script> 
     <script type="text/javascript" src="demo/scripts/execute.js"></script> 


<script> 
function cloudy() 

{ 
    return "<?php 


$dbc=mysql_connect('asite.com','$user','$password','$db') ; 

mysql_select_db('$db',$dbc); 


    echo $_POST[weather];?>" 


} 


</script> 

<link href="style.css" rel="stylesheet" type="text/css"> 
</head> 

<body background="images/gradientsky.jpg"> 

<div id="logo"> 

WhethertheWeather. 

</div> 

<div id="question"> 

Whats your favorite weather? 

</div> 

<div id="weather"> 

<ul id="nav-reflection"> 
<form name="myform" method="post" action="cloudy_name.php"> 
    <li class="button-color-1"><a href="cloudy_name.php" id="weather[]" onclick="cloudy();" title="My fancy link"><img src="images/cloudybubble.png" width="211" height="180" align="left"></a></li> 
    <li class="button-color-1"><a href="sunny_name.php" id="weather[]" onclick="sunny();" title="My fancy link"><img src="images/sunnybubble.png" width="211" height="180" align="left"></a></li> 
    <li class="button-color-2"><a href="snowy_name.php" id="weather[]" onclick="snowy();" title="My fancy link"><img src="images/snowbubble.png" width="211" height="180" align="left"></a></li> 
    <li class="button-color-1"><a href="rainy_name.php" id="weather[]" onclick="rainy();" title="My fancy link"><img src="images/rainbubble.png" width="211" height="180" align="left"></a></li> 
    <li class="button-color-1"><a href="mixy_name.php" id="weather[]" onclick="mixy();" title="My fancy link"><img src="images/mixbubble.png" width="211" height="180" align="left"></a></li> 
    <li class="button-color-1"><a href="windy_name.php" id="weather[]" onclick="windy();" title="My fancy link"><img src="images/windybubble.png" width="211" height="180" align="left"></a></li> 

<input type="hidden" name="weather" value="weather" id="weather"> 
</form> 
</ul> 
</div> 

</body> 
</html>

這是我現在使用的代碼。

這裏是索引頁面，我將名稱更改爲天氣，所以它不會與我擁有的另一個名稱變量混淆。

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>WhethertheWeather.</title> 

<!--<link rel="stylesheet" type="text/css" href="demo/css/screen.css" media="all" />--> 
     <script src="http://www.adrianpelletier.com/mint/?js" type="text/javascript"></script> 
     <script type="text/javascript" src="demo/scripts/jquery-1.3.2.min.js"></script> 
     <script type="text/javascript" src="demo/scripts/jquery-ui-1.7.1.custom.min.js"></script> 
     <script type="text/javascript" src="demo/scripts/execute.js"></script> 


<script> 
    function showweather(weather) { 
    window.location = 'cloudy_name.php?w=' + weather; 
} 

</script> 

<link href="style.css" rel="stylesheet" type="text/css"> 
</head> 

<body background="images/gradientsky.jpg"> 

<div id="logo"> 

WhethertheWeather. 

</div> 

<div id="question"> 

Whats your favorite weather? 

</div> 

<div id="weather"> 

<ul id="nav-reflection"> 
<form method="post" action="cloudy_name.php"> 
     <li class="button-color-1"><a href="cloudy_name.php" id="weather[]" onclick="showweather('cloudy');" title="My fancy link"><img src="images/cloudybubble.png" width="211" height="180" align="left"></a></li> 
    <li class="button-color-1"><a href="sunny_name.php" title="My fancy link"><img src="images/sunnybubble.png" width="211" height="180" align="left"></a></li> 
    <li class="button-color-2"><a href="snowy_name.php" title="My fancy link"><img src="images/snowbubble.png" width="211" height="180" align="left"></a></li> 
    <li class="button-color-1"><a href="snowy_name.php" title="My fancy link"><img src="images/rainbubble.png" width="211" height="180" align="left"></a></li> 
    <li class="button-color-1"><a href="mixy_name.php" title="My fancy link"><img src="images/mixbubble.png" width="211" height="180" align="left"></a></li> 
    <li class="button-color-1"><a href="windy_name.php" title="My fancy link"><img src="images/windybubble.png" width="211" height="180" align="left"></a></li> 

<input type="hidden" name="weather" value="none" id="myweather"> 
</form> 
</ul> 
</div> 

</body> 
</html>

這裏是cloudy_name.php頁面，U輸入名稱。

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>WhethertheWeather</title> 
<link href="style.css" rel="stylesheet" type="text/css"> 
</head> 

<body background="images/cloudysky.jpg"> 

<div id="name"> 
First of all, what is your name? 
</div> 

    <form method="post" action="cloudy_story.php?w=<?php echo htmlspecialchars($_GET['weather'])?>"> 
      <table width="20%" border="1" align="center" cellpadding="1" cellspacing="1"> 

       <td width="100%"><label>Name: <input type="text" name="name" value="<?php echo $_POST[name]; ?>"></input></label> 

        <input type="submit" value="Submit"> 


      </table> 
     </form> 


</body> 
</html>

這裏是clouds_story.php。

<html> 
    <head> 
     <title>Forum</title> 
    <link href="style.css" rel="stylesheet" type="text/css"> 
    </head> 
    <body background="images/cloudysky.jpg"> 

    <div id="cloudy"> 
    Cloudy 
    </div> 
    <div id="white"> 
     <div id="blue"> 
     <div id="grey"> 
      <div id="container"> 
      <form method="post" action="cloudy_update.php?w=<?php echo htmlspecialchars($_GET['weather']); echo htmlspecialchars($_POST['name'])?>"> 
       <table width="800px" border="1" align="center" cellpadding="3" cellspacing="1"> 
       <tr> 
        <td width="800px"><h5><?php echo 'Hi, '. $_POST[name] ?>! 
        Write your story about your favorite weather. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quam urna, rutrum ut hendrerit sit amet, dictum ut dui. Cras id sem at tortor ornare porttitor at id dolor. Proin quis nulla sit amet felis tempus imperdiet eu id felis. Vivamus ac ultricies ipsum. Aliquam nec enim nec turpis mattis aliquam. Aliquam eu quam libero. Quisque vel ligula ante, ut tempor sapien. Nullam molestie elementum urna et consequat. Fusce turpis dolor, consectetur vel placerat vel, tempor vel justo. Donec odio orci, imperdiet quis varius dignissim, pulvinar id erat. Proin lectus enim, ornare tincidunt facilisis et, accumsan eget purus. Phasellus dolor mi, . </h5></td> 
       </tr> 
       <tr> 
        <td width="300px"><label>Story : 
        <textarea rows="10" cols="100" name="story" ><?php echo $_POST[story]; ?></textarea> 
        </label></td> 
       </tr> 
       <tr> 
        <td width="300px"><input type="submit" value="Post"></td> 
       </tr> 
       </table> 
       <input type="hidden" name="name" value="<?php echo $_POST[name]?>"> 
      </form> 
      </div> 
     </div> 
     </div> 
    </div> 

    </body> 
</html>

以下是更新它的全部內容（cloudy_update.php）並將其放在m數據庫的表中的頁面。

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Untitled Document</title> 
</head> 

<body> 
<?php 

$dbc=mysql_connect('localsite','user','pw','db') ; 
mysql_select_db('db',$dbc); 

    ///////////////////////////////////////////////// 
    //let's insert our data into the database  // 
    ///////////////////////////////////////////////// 


$query = "insert into stories values('" . mysql_real_escape_string($_GET['weather']) . "', '" . mysql_real_escape_string($_POST['name']) . "' , '" . mysql_real_escape_string($_POST['story']) . "')" 

    or die ("Error - Couldn't register user."); 

    echo "Thank you $_POST[name]! You've been successfully posted<br /><br /> 
     Please view all the posts <a href='view_forum.php'><b>here</b></a>."; 


    ///////////////////////////////////////////////// 
    // finished inserting our data into the database // 
    ///////////////////////////////////////////////// 


    exit(); 
?>

對不起...我只是真的爲此而努力......可能是一些小的是我太傻看..

來源

2012-04-14 Christine Austin

我的上帝！你的源代碼令人難以置信的奇怪。 – 2012-04-14 21:17:54

歡迎來到Stack Overflow！ – 2012-04-14 21:21:50

你需要http://w3schools.com/php/和http://www.w3schools.com/js/ – 2012-04-14 21:22:17

首先，涼爽的背景。非常好。標題字體需要更改，但我相信你知道這一點。在這裏設置它看起來像每個按鈕都會將您發送到爲該天氣類型（sunny_name.php）構建的獨特頁面。所以你不需要存儲第一頁的任何變量。但是，在第二頁上，您可以通過您在sunny_name.php上的表單傳遞天氣變量+名稱變量。

<form action="sunny_story.php?weather=sunny" method="post">

最後你有你的第三頁（sunny_story.php）的輸入您的信息（除非你有一個故事，在這裏增加，在這種情況下，你會在網址名稱VAR存儲與天氣等一起final_page.php？weather = sunny & name = John）。無論你選擇做什麼，結局都是類似的：

<?php 
//connect to db 
$con=mysql_connect('localhost','username','pw'); 

if(!$con){ 
die('Could not connect to the db: ' .mysql_error()); 
} 

mysql_select_db('yourdb',$con); 

//enter query 
$query = "INSERT INTO `table` VALUES ('".mysql_real_escape_string($_GET['weather'])."', 
     '".mysql_real_escape_string($_GET['name'])."', 
     '".mysql_real_escape_string($_POST['story'])."')" 

$result = mysql_query($query);

注意：查詢中值的順序取決於mysql表中列的順序。此外，故事的Post方法取決於您用來訪問最後一頁的表單方法。沒有測試過，但應該工作。

來源

2012-04-14 21:49:16

當然，我需要知道你的mysql表格格式，因爲我懷疑它只是一列。 – 2012-04-14 21:50:54

我正在計劃讓圖標鏈接到另一個頁面，用戶可以在那裏輸入名字，如果這就是你所指的內容。繼承人的網站，它顯然沒有完成，所以要爲錯誤和醜惡做好準備！ http://www.tcnjart.com/christineaustin/whethertheweather/index.php – 2012-04-14 21:53:58

桌上有名字，天氣和故事欄。 – 2012-04-14 22:00:34

一兩件事你可以做的是不是這樣的：

<li class="button-color-1"><a href="cloudy_name.php" id="weather[]" onclick="cloudy();" title="My fancy link"><img src="images/cloudybubble.png" width="211" height="180" align="left"></a></li>

你可以寫稱爲showName()一個JavaScript函數，它會將用戶發送到相應的頁面，如：

<li class="button-color-1"><a href="cloudy_name.php" id="weather[]" onclick="showName('cloudy');" title="My fancy link"><img src="images/cloudybubble.png" width="211" height="180" align="left"></a></li>

在showName()功能，你可以簡單地寫：

function showName(Name) { 
    window.location = 'name.php?w=' + Name; 
}

現在在name.php可以輸出與action屬性的形式爲：

<form method="post" action="next.php?w=<?php echo htmlspecialchars($_GET['w'])?>"> 

</form>

在next.php您可以通過$_POST['name']通過$_GET['w']和名稱訪問的天氣，並通過使用一個簡單的插入查詢像它們添加到數據庫：

$query = "insert into tablename values('" . mysql_real_escape_string($_GET['w']) . "', '" . mysql_real_escape_string($_POST['name']) . "')";

來源

2012-04-15 07:59:25 vedarthk

這很有趣，我只是停留在next.php的$ query部分。將這些代碼放在我有用戶輸入故事（story.php）的地方嗎？或者我會把它放在更新論壇的下一頁（update_forum.php）中。 – 2012-04-16 03:40:20

順便說一句，代碼我有update_forum.php看起來像這樣（雖然我知道它需要改變） - <？php $ dbc = mysql_connect（'localhost'，'user'，'pw'，'db'）; mysql_select_db（'db'，$ dbc）; $查詢=請求mysql_query（「INSERT INTO故事 \t（天氣，故事的名字） \t VALUES \t（ '$ _ POST [天氣]'， '$ _ POST [故事]'， '$ _ POST [名]'）」） \t或死（「錯誤 - 找不到海報。」）; \t \t回聲「謝謝$ _ POST [名]你已成功發佈

\t \t請查看所有職位here！」; \t exit（）; ？> – 2012-04-16 03:42:30

最後一個問題......對不起！對於showName（Name），是否必須爲每個天氣輸入名稱...如此類似於showName（多雲）功能{ window.location ='cloudy_mon_ name.php？w ='+ Cloudy; }對不起，如果我聽起來完全愚蠢.. – 2012-04-16 05:06:41

請嘗試像這樣做。我沒有添加任何樣式。

<!DOCTYPE HTML> 
    <html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>WhethertheWeather.</title> 

    <!--<link rel="stylesheet" type="text/css" href="demo/css/screen.css" media="all" />--> 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script> 


<script> 
    $(document).ready(function(){ 
     $('#nav-reflection li a img').click(function(){ 
      var value = $(this).parent().attr('id'); 
      $('#weatherVal').val(value); 
      $('#detailsDiv').slideDown(); 
     }) 
     $('#save').click(function(){ 
      $.post('insert.php',$("#weatherForm").serialize(), 
       function(data){ 
        console.log(data); 
       } 
      ) 
     }); 
    }); 
</script> 

<link href="style.css" rel="stylesheet" type="text/css"> 
</head> 

<body background="images/gradientsky.jpg"> 

<div id="logo"> 

WhethertheWeather. 

</div> 

<div id="question"> 

Whats your favorite weather? 

</div> 

<div id="weather"> 
<form method="post" id="weatherForm"> 

    <ul id="nav-reflection"> 
     <li class="button-color-1"><a href="javascript:void(0);" id="cloudy" title="My fancy link"><img src="images/cloudybubble.png" width="211" height="180" align="left"></a></li> 
     <li class="button-color-1"><a href="javascript:void(0);" id="sunny" title="My fancy link"><img src="images/sunnybubble.png" width="211" height="180" align="left"></a></li> 
     <li class="button-color-2"><a href="javascript:void(0);" id="snowy" title="My fancy link"><img src="images/snowbubble.png" width="211" height="180" align="left"></a></li> 
     <li class="button-color-1"><a href="javascript:void(0);" id="rainy" title="My fancy link"><img src="images/rainbubble.png" width="211" height="180" align="left"></a></li> 
     <li class="button-color-1"><a href="javascript:void(0);" id="mixy" title="My fancy link"><img src="images/mixbubble.png" width="211" height="180" align="left"></a></li> 
     <li class="button-color-1"><a href="javascript:void(0);" id="windy" title="My fancy link"><img src="images/windybubble.png" width="211" height="180" align="left"></a></li> 
    </ul> 
    <input type="hidden" name="weatherVal" id="weatherVal"> 
    <div id="detailsDiv" style="display: none;"> 
     <input type="text" name="name" id="name"> 
     <textarea type="text" name="story" id="story"></textarea> 
     <input type="button" name="save" id="save" value="Save"> 
    </div> 
</form> 
</div> 

</body> 
</html>

使用jquery你可以將值發佈到另一個文件並在那裏做數據庫操作。

<?php 
    $dbc=mysql_connect('localhost','root','','test') ; 
    if(!$dbc){ 
     die('Could not connect to the db: ' .mysql_error()); 
    } 
    else 
    { 
     $query = "INSERT INTO `weather` VALUES ('','".mysql_real_escape_string($_POST['weatherVal'])."', 
     '".mysql_real_escape_string($_POST['name'])."', 
     '".mysql_real_escape_string($_POST['story'])."')"; 
     echo $query; 
     $result = mysql_query($query); 
     return $result; 

    } 
?>

來源

2012-04-15 08:36:01

這不幸中斷了我的懸停javascipt我有。我不確定如何撤消那個笑話。 – 2012-04-16 03:36:25

懸停問題。請指定 – 2012-04-16 06:22:48

對不起，我所指的是我在我的小圖標上的jquery懸停效果;當你翻轉它們時，它們會形成一個懸停效果，但我拉了一個愚蠢的和編碼混亂，這就是爲什麼它打破了，哈哈。但我不完全是這樣設置的粉絲。我寧願將它鏈接到其他頁面，而不是僅僅點擊一個圖標，然後讓它與該頁面上的表單一起顯示。但我會保留這個選項。 – 2012-04-17 03:39:12

將圖像作爲一個數組存儲數據時點擊

回答

相關問題