如何让一个按钮既能提交表单,又能作为超链接<a>使用?

4

我搜遍了W3Schools、HTMLGoodies、Tizag和十几个其他网站,但没有找到真正解决这个问题的内容。我在StackOverflow上找到了“如何使链接提交表单”的问题,但目前我还不太理解。

我想PHP和HTML可以完成这项工作,但在过去的三年里有没有更先进的技术呢?还是必须使用JavaScript或其他语言,并且需要涉及DOM才能让它们一起工作?

我真的不想只用一个按钮将用户带到页面上需要的位置,然后再点击第二个按钮打开显示内容的div。我更希望他们能够点击一个名为“查看评论”的按钮,页面就会跳转到对应位置并显示内容。

我之前在这里问问题的两次经历都很好,特别是其中一次我非常感激。如果有人有答案,我会非常感激他们的帮助。

我可以发布100行代码;一个小演示,但现在先别发。此外,我也不想写出我尝试过但没效果的半打以上方法。 :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0     Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<?php error_reporting(E_ALL); $MeToo = mysql_connect('localhost','root','GuessHarder'); ?>
<?php if (!$MeToo) {die ('What ~ ARE you a Novice? !!! ? : ' . mysql_error());} ?>
<?php $InestimableUtility=99; ?>
<html><Head><Title>YESH Link VIEWER</Title>
<meta http-equiv="Content-Type" content="text/html; 06 charset=iso-8859-1 application/pdf  text/plain text/css text/php ">
<link rel="stylesheet" type="text/css" href="YESH Tha CSS.css"/><br />
<?php 
// 3 sets of catching POSTS and setting some Vars.
$LINKfetched1=$_POST["1"]; 
$SleightOfHandx1= substr('\$LINKfetched1 ', 13);
$LinkzFaithfulListener1=$_POST["NICExExplosions1"];
$NICExExplosions1=99;
$LINKfetched2=$_POST["2"]; 
$SleightOfHandx2= substr('\$LINKfetched2 ', 13);
$LinkzFaithfulListener2=$_POST["NICExExplosions2"];
$NICExExplosions2=99;
$LINKfetched3=$_POST["3"]; 
$SleightOfHandx3= substr('\$LINKfetched3 ', 13);
$LinkzFaithfulListener3=$_POST["NICExExplosions3"];
$NICExExplosions3=99; ?> 
</Head>
<body id="Corpus">
<div id="LinkDisplayMAIN">
<div id="TopOfLinksContainDiv">
<div id="TitlePageLxDiv"><div id="LinkViewerTitleHerSELF">
The Links Viewer
</div><!-- LinkViewerTitleHerSELF --></div><!-- TitlePageLxDiv -->
</div><!-- TopOfLinksContainDiv -->
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><hr />
<pre>
<br /><br /><a name="LinkItemDisplayDiv1">Link 1</a><br /><br />
<div id="AutoGenLINKxDIV1"><br />
<div id="ParamsTOPforLink1"><br />
<div id="DbLINKdataboxy1"><div id="abcLinkNum1"><?php
echo '&nbsp'; ?>Link DB :    Link # <?php echo "1"; ?></div><!-- abcLinkNum1 --></div><!-- DbLINKdataboxy1 -->
<div id="AfterLinkNumSpacer1"></div>
</div><!-- from ParamsTOPforLink1 -->
<br /><br /><br />
<?php if($LinkzFaithfulListener1==99 and $InestimableUtility==99){ ?>
<div id="YeahBabyShowThoseNotes1">
<div id="lameDivText1">
<?php echo "In the grand scheme of things, accept that  um... you know, well."; ?><br />
</div><!-- lameDivText1 -->
</div><!-- YeahBabyShowThoseNotes1 --><?php } ?>
<div id="BottleFerButtonz1">
<div id="BttnOfLinkx1y1"><div id="Fake11">
<form action="<?php echo $PHP_SELF; ?>"; method="post">
<input type="hidden"name="NICExExplosions1"value="<?php echo $NICExExplosions1; ?>"/>
<button type="submit">Show Notes About This Link</button></form>
<a href="#LinkItemDisplayDiv1">Goto Link 1</a>
</div><!-- from Fake11 --></div><!-- from BttnOfLinkx1y1 -->
</div><!-- from BottleFerButtonz1 --><br /><br /></div><!-- from AutoGenDBdtrmndDIV1 -->
</pre><hr /><br /><br /><br />

and a few more blocks, but that is the heart of the script;

并且一些闭合标签。

    *** Following Day Edit by OP ***

因此,经过清理的示例代码块只是:

<pre>
<a name="Anchored3"></a>
<div id="AutoGenLINKxDIV3">
<div id="ParamsTOPforLink3">
<div id="DbLINKdataboxy3"><div id="abcLinkNum3"><?php
echo'&nbsp'; ?>Link DB: Link #<?php echo "3";?></div></div></div>
<?php if($LinkzFaithfulListener3==99 and $InestimableUtility==99){?>
<div id="YeahBabyShowThoseNotes3">
<div id="lameDivText3">
<?php echo "$someVariableRepresentingTextorImageOrContentofsometype";?><br />
</div></div><?php }?>
<div id="BttnOfRelease3"><div id="FakeGetOuttaJail3">
<form action="<?php echo $PHP_SELF; ?>#Anchored3"method="post">
<?php $PayloadMeNow3=$DaGoodez3; ?>
<input type="hidden"name="Liberte"value="<?php echo $Liberte; ?>"/>
<input type="hidden"name="EveryDangStepNeedsAVariable3"value="
   <?php echo $EveryDangStepNeedsAVariable3; ?>"/>
<button type="submit">Return To Link Viewing</button></form>
</div></div></pre>

可以通过使用一个在单击锚点时运行的JavaScript函数来实现。使用这个JavaScript函数来提交表单,然后重定向到新链接。 - JimmyBanks
@SenorAmor 嗯,<button type="submit"><a href="#xyz"></a>查看评论</button> 将按钮转换为链接,但表单不会被处理;而类似的变体都失败了。将链接放在表单内,效果也不太好。 - MountainMan
@sberry,也谢谢你。我会阅读那2到3页的材料,并会再次查看它。 - MountainMan
6个回答

1

我误解了问题。唯一在不离开页面的情况下提交表单的方法是使用ajax进行提交。因此,您需要通过ajax进行提交,然后调用您想要执行的任何操作,例如打开显示内容的div。请参见此处http://www.simonerodriguez.com/ajax-form-submit-example/

<form name="MyForm" action="response_normal.php" method="post" onsubmit="xmlhttpPost('response_ajax.php', 'MyForm', 'MyResult', '<img src=\'pleasewait.gif\'>'); return false; YOURFUNCTIONHERE">

1
如果您想要发送POST和GET变量,可以通过将它们传递到表单操作属性中来实现,例如:
<form action="mypage.php?var1=1&var2=2&etc=n" method="post">

这将使用POST方法发送您的字段数据,并在请求中传递GET变量


谢谢,但是自从你回答后,我在问题中添加了一些代码。它强调了我想要通过链接进行POST和重新定位/重定向的关键点,在单个按钮点击中完成。$POSTing?没问题,有很多方法可以做到这一点。安装一个链接并使其工作?好吧,可以在整个农场放置链接,两者都可以,不用谢。如果您有任何想法,提前感谢。 - MountainMan
1
你可以在你的php脚本中进行重定向,当处理完表单数据后,可以使用以下代码:header( "location:" . "mypage.php?var1=1&var2=2&etc=n" ); exit(); - Harry

0

你需要使用JavaScript来完成这个任务。以下是一种可能的方法,使其作为普通链接回退:

既然你在谈论评论,我认为以博客为例子会更合适。假设你的主体内容如下:

<body>
  <h1>My blog post!</h1>
  <p>My content</p>
  <a href="http://site.com/blog/my-blog-post/comments/">View Comments</a>
  <div id="comments></div>
</body>

以下是您可以做的:

  • 如果用户启用了JavaScript,请使用JQuery、YUI或您喜欢的JS库向http://site.com/blog/my-blog-post/comments/发送请求。您的服务器可以检测到请求是否为AJAX,发送回包含评论的HTML片段,然后将其插入到comments div中。

  • 如果用户未启用JavaScript,则用户将单击链接http://site.com/blog/my-blog-post/comments/。服务器可以识别链接中的comments标志,因此它将呈现包括评论在内的整个页面。

这样,您就可以为启用JavaScript的用户提供良好的AJAX加载,并为没有JS的用户提供备选方案。


根据我的理解,链接将起到在页面开始时阻止加载和显示的作用。我需要实现的效果是,当用户向下滚动页面时,他们看到一个希望查看更多信息的项目,点击“查看”按钮后,脚本使用name="foo"锚点来防止页面回到顶部,并且当然,展开一个div来显示内容。当整个页面一次性完全可见时,使用php和html进行动态变化非常容易;但页面强制打开到顶部则有些特殊。请注意。 - MountainMan

0
问题是如何提交表单并链接到同一页上的特定位置:需要在单击一个按钮时完成。不仅要停留在同一页上,而且要停留在页面的相同位置;不要在单击查看其他信息后将页面找到顶部。
我的问题是我错误地认为需要一个Goto XYZ与锚点Here: XYZ配对,并尝试了各种放置这些项目的方式,导致我担心我必须需要其他机制来实现提交表单的目标,以控制打开div以显示用户内容,但不会使页面加载到顶部。还有一个相关的愿望是允许用户单击关闭按钮隐藏div,一旦查看了内容,再次不要打开页面顶部。
解决方案是通过大量的试错发现这个简单的语法:
<form action="<?php echo $PHP_SELF; ?>#Anchored3"method="post">

只要第一个组件 Anchor 3 定位好了,其他语句就不需要在脚本中出现。我的经验是,在我尝试放置它的大多数地方,它都会带来负面影响。仅凭锚点就足够了。这多么简单易行啊!

0
您可以使用表单的 action 参数和 <input> 按钮的 type 参数作为 submit 提交表单,也可以添加一个带有属性的 <a> 链接,例如 href='#+your div id',以在提交表单后在同一页上获取它。
希望这能帮到您。

0
我也有类似的需求,唯一找到的解决方案是使用表单将数据POST到同一个php文件中,在该文件中进行数据库插入操作,处理POST数据,然后在利用curl提取POST数据、修改/添加更多POST值,并将其发送到另一个php文件中,以便发送电子邮件;
    //send an email
        //extract data from the post
        $name = $_POST['fname']." ".$_POST['lname'];
        $email = $_POST['email'];
        $web = "";
        $group_name = $_POST['group_name'];
        $message = "";
        $username = $_POST['username'];
        $user_id = mysql_insert_id();
        //point to script
        $url = 'scripts/emailer.php';
        //set POST variables
        $fields = array(
                    'article_id'=>urlencode($article_id),
                    'name'=>urlencode($name),
                    'email'=>urlencode($email),
                    'web'=>urlencode($web),
                    'message'=>urlencode($message),
                    'username'=>urlencode($username),
                    'user_id'=>urlencode($user_id),
                    'group_name'=>urlencode($group_name),
                    'messagetype'=>'new_user'
                );

        //url-ify the data for the POST
        foreach($fields as $key=>$value) { $fields_string .= $key.'='.$value.'&'; }
        rtrim($fields_string,'&');

        //open connection
        $email_post = curl_init();

        //set the url, number of POST vars, POST data
        curl_setopt($email_post,CURLOPT_URL,$url);
        curl_setopt($email_post,CURLOPT_POST,count($fields));
        curl_setopt($email_post,CURLOPT_POSTFIELDS,$fields_string);

        //execute post
        $result = curl_exec($email_post); //echo $result for testing

        //close connection
        curl_close($email_post);
    // end email approvers section

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接