どのようにフォームアクションを介して次のページでjs変数を渡す

Question

ここでは、機能が正常に機能する1つのochnage関数を書いていますvar city_id私はhome.phpを渡したいですか？この値を取得することができますhome.phpで

$('.options').on('change', function() { 
    var city_id = $('#options option[value="' + $('#location12').val() + '"]').data('id'); 

var url = 'home.php?city=' + city_id; 
window.location.href = url; 
// This will redirect user to **home.php** with selected city. 
}); 

：home.phpページで私はあなたのようなクエリ文字列でこれを渡すことができ、市内のIDと都市名

$('.options').on('change', function() { 
 
    var city_id = $('#options option[value="' + $('#location12').val() + '"]').data('id'); 
 
\t \t alert(city_id); 
 
\t \t 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<form method="POST" action="home.php"> 
 
<input list="options" type="name" class="form-control options" style="border-radius:0px;height: 36px;" name="location12" id="location12" placeholder="City" > 
 
\t <datalist id="options"> 
 
\t <option data-id="1" value="Bangalore"></option> 
 
\t <option data-id="2" value="Chennai"></option> 
 
\t <option data-id="3" value="Karur"></option> 
 
</datalist> 
 
<input type="submit" value="submit"> 
 
</form>

Answer 1

あなたは、提出された隠し入力を追加し、それにCITY_IDを設定しようとフォーム

$('.options').on('change', function() { 
 
    var city_id = $('#options option[value="' + $('#location12').val() + '"]').data('id'); 
 
\t \t $('#city_id').val(city_id); 
 
\t \t 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<form method="POST" action="home.php"> 
 
<input list="options" type="name" class="form-control options" style="border-radius:0px;height: 36px;" name="location12" id="location12" placeholder="City" > 
 
\t <datalist id="options"> 
 
\t <option data-id="1" value="Bangalore"></option> 
 
\t <option data-id="2" value="Chennai"></option> 
 
\t <option data-id="3" value="Karur"></option> 
 
</datalist> 
 
<input type="hidden" name="city_id" id="city_id"> 
 
<input type="submit" value="submit"> 
 
</form>

Answer 2

をしたいです使用：

$_GET['city']; 

Answer 3

お試しください...

Javascriptを

$('.options').on('change', function() { 
     var city_id = $('#options option[value="' + $('#location12').val() + '"]').data('id'); 
      $("#form").attr('action','home.php?city_id='+city_id); 
      $("#submit").click(); 

    }); 

Htmlの

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<form method="POST" action="" id="form"> 
<input list="options" type="name" class="form-control options" style="border-radius:0px;height: 36px;" name="location12" id="location12" placeholder="City" > 
    <datalist id="options"> 
    <option data-id="1" value="1">Bangalore</option> 
    <option data-id="2" value="2">Chennai</option> 
    <option data-id="3" value="3">Karur</option> 
</datalist> 
<input type="submit" value="submit" id="submit"> 
</form>