将图像作为一个数组存储数据时点击

所以我一直在努力与此，我不是专业的网页设计师。但基本上我有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

将图像作为一个数组存储数据时点击

回答

相关问题