送信ボタンを使用せずにリンクをクリックしてフォームを送信する

送信ボタンを使用せずにリンクをクリックしてフォームを送信しようとしています。フォームの各要素は、クリックされたときに提出されなければならない値を持ちます。それは動作しません。 JavaScriptやjQueryを使うことができました。オフィールのバルークsuggestions-作品で送信ボタンを使用せずにリンクをクリックしてフォームを送信する

<head> 
    <style> 
    div { 
    width: 100px; 
    height: 100px; 
    padding: 10px; 
    margin: 10px; 
    background-color: #EEEEEE; 
    } 
</style> 
</head> 
<body> 
<form name="myform" action="test.php" method="post"> 
<div> 
<a href="javascript: submitform()" value='h1'>h1</a><br> 
<a href="javascript: submitform()" value='h2'>h2</a><br> 
<a href="javascript: submitform()" value='h3'>h3</a><br> 
</div> 
</form> 
<script type="text/javascript"> 
function submitform() 
{ 
    document.myform.submit(); 
} 
</script> 
<div> 
<?php 
$form=$_POST['myform']; 
echo $form.' bla<br>'; 
?> 
</div> 
</body> 
</html>

!!!：コードで見てみてください。

<head> 
<script src="jquery.js" type="text/javascript"></script> 
    <style> 
    div { 
    width: 100px; 
    height: 100px; 
    padding: 10px; 
    margin: 10px; 
    background-color: #EEEEEE; 
    } 
</style> 
</head> 
<body> 
<form name="myform" action="test.php" method="post"> 
<input type='hidden' id='hx' name='hx' value=''> 

<div> 
<a href="javascript: submitform('h1')">h1</a><br> 
<a href="javascript: submitform('h2')">h2</a><br> 
<a href="javascript: submitform('h3')">h3</a><br> 
</div> 
</form> 
<script type="text/javascript"> 
function submitform(val) 
{ 
    $("#hx").val(val); 
    document.myform.submit(); 
} 
</script> 
<div> 
<?php 
echo $_POST['hx']; 
?> 
</div> 
</body> 
</html>

出典

2012-03-10 user985456

<form...>後に次の行を追加します。

<input type='hidden' id='hx' name='hx' value=''>

をその後にあなたの呼び出し元の関数を変更します。

<a href="javascript: submitform('h1')">h1</a><br>

あなたの機能：

<script type="text/javascript"> 
function submitform(val) 
{ 
    $("#hx").val(val); 
    document.myform.submit(); 
} 
</script>

あなたのPHPで：

echo $_POST['hx'];

どのように動作しますか？

1.Youは、リンクをクリックし

2. JS機能は非表示の入力フィールド

3. JS関数の値は、フォーム

4を提出変更します。$ _ POSTはに関し、フォームを送信していない隠された入力値

出典

2012-03-10 13:15:47

動作しません:(あなたは私の例にあなたのアイデアを表示することができ – user985456

それは私がやったまさに何ですか？。あなたが動作しないかについて、より具体的なことはできますか？（エラーが出る？） –

を私はちょうどあなたの提案でコードを掲載しました。あなたは、リンクをクリックしたときには何も返しません。 – user985456

<a href="javascript: submitform('h1')">h1</a> 

function submitform(val) 
{ 
    $.post('.', { myform: val }); 
}

出典

2012-03-10 13:11:45 Anber

。これはAjaxリクエストを作成します。 – Quentin

@Quentin - form.submit（）と$ .post（）も同じことをします。つまり、Webサーバーに対してPOSTアクションを実行します。唯一の違いは、2番目のものが非同期ポストリクエストであることです。 –

まず第一に、私は、フォームにあるmyFormを変更、フォームにごsubmitForm方法で

<input type="hidden" value="" id="hiddenId" />

を隠しフィールドを追加しますhref="#" onclick="submitForm(this)"

を使用する代わりに、href="javascript:submitForm();"を使用していないだろう[0]。私はより多くのクロスブラウザになるだろうと信じています。 Anywho ...隠しフィールドの値を設定できるように、メソッドにパラメータを追加します。

<script type="text/javascript"> 
function submitform(el) 
{ 
    document.getElementById('hiddenId').value = el.value; 
    document.forms[0].submit(el); 
} 
</script>

出典

2012-03-10 13:12:53

これは、クロスブラウザには適していませんし、それでも値を送信しません。 – Quentin

@Quentin - はい、値を送信するのは間違いありません。 –

私はすでにこの方法を提案しました。 –

<!DOCTYPE html> 
<html> 
    <head> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
     <script> 
      $(function() { 
       $("form a").click(function() { 
        var value = $(this).data('value'); 
        $.post('.', { myform: value }); 
        return false; 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <form> 
      <a href="" data-value="h1">h1</a> 
      <a href="" data-value="h2">h2</a> 
      <a href="" data-value="h3">h3</a> 
     </form> 
    </body> 
</html>

出典

2012-03-10 13:16:50 Anber

投稿された値はどのように取得できますか？ 'code' <？php $ form = $ _ POST ['myform']; echo $ form。 ' bla
'; ？> 'code' – user985456

** $。post ** [here]（http://api.jquery.com/jQuery.post/）を参照してください。 – Anber

送信ボタンを使用せずにリンクをクリックしてフォームを送信する

答えて

関連する問題