2017-05-05 33 views
0

私のフォームにタグの値を取得しようとしましたが、できません。これはjquery http://aehlke.github.io/tag-it/です。jQueryでタグから値を取得できません

のindex.php

<form> 
    <p> Normally this input field will be hidden &mdash; we leave it visible here so you can see how it is manipulated by the widget: 
     <input name="tags" id="mySingleField" value="Apple, Orange" disabled="true"> 
    </p> 
    <ul id="singleFieldTags"></ul> 
    <input type="submit" value="Submit"> 
</form> 
<?php echo $_POST["tags"]; ?> 

Javascriptを

$(function(){ 
var sampleTags = ['c++', 'java', 'php', 'coldfusion', 'javascript', 'asp', 'ruby', 'python', 'c', 'scala', 'groovy', 'haskell', 'perl', 'erlang', 'apl', 'cobol', 'go', 'lua']; 

//------------------------------- 
// Minimal 
//------------------------------- 
$('#myTags').tagit(); 

//------------------------------- 
// Single field 
//------------------------------- 
$('#singleFieldTags').tagit({ 
    availableTags: sampleTags, 
    // This will make Tag-it submit a single form value, as a comma-delimited field. 
    singleField: true, 
    singleFieldNode: $('#mySingleField') 
}); 

// singleFieldTags2 is an INPUT element, rather than a UL as in the other 
// examples, so it automatically defaults to singleField. 
$('#singleFieldTags2').tagit({ 
    availableTags: sampleTags 
}); 

//------------------------------- 
// Preloading data in markup 
//------------------------------- 
$('#myULTags').tagit({ 
    availableTags: sampleTags, // this param is of course optional. it's for autocomplete. 
    // configure the name of the input field (will be submitted with form), default: item[tags] 
    itemName: 'item', 
    fieldName: 'tags' 
}); 

//------------------------------- 
// Tag events 
//------------------------------- 
var eventTags = $('#eventTags'); 

var addEvent = function(text) { 
    $('#events_container').append(text + '<br>'); 
}; 

eventTags.tagit({ 
    availableTags: sampleTags, 
    beforeTagAdded: function(evt, ui) { 
     if (!ui.duringInitialization) { 
      addEvent('beforeTagAdded: ' + eventTags.tagit('tagLabel', ui.tag)); 
     } 
    }, 
    afterTagAdded: function(evt, ui) { 
     if (!ui.duringInitialization) { 
      addEvent('afterTagAdded: ' + eventTags.tagit('tagLabel', ui.tag)); 
     } 
    }, 
    beforeTagRemoved: function(evt, ui) { 
     addEvent('beforeTagRemoved: ' + eventTags.tagit('tagLabel', ui.tag)); 
    }, 
    afterTagRemoved: function(evt, ui) { 
     addEvent('afterTagRemoved: ' + eventTags.tagit('tagLabel', ui.tag)); 
    }, 
    onTagClicked: function(evt, ui) { 
     addEvent('onTagClicked: ' + eventTags.tagit('tagLabel', ui.tag)); 
    }, 
    onTagExists: function(evt, ui) { 
     addEvent('onTagExists: ' + eventTags.tagit('tagLabel', ui.existingTag)); 
    } 
}); 

//------------------------------- 
// Read-only 
//------------------------------- 
$('#readOnlyTags').tagit({ 
    readOnly: true 
}); 

//------------------------------- 
// Tag-it methods 
//------------------------------- 
$('#methodTags').tagit({ 
    availableTags: sampleTags 
}); 

//------------------------------- 
// Allow spaces without quotes. 
//------------------------------- 
$('#allowSpacesTags').tagit({ 
    availableTags: sampleTags, 
    allowSpaces: true 
}); 

//------------------------------- 
// Remove confirmation 
//------------------------------- 
$('#removeConfirmationTags').tagit({ 
    availableTags: sampleTags, 
    removeConfirmation: true 
}); 

}); 
+0

問題は/問題ですか? - > [良い質問をするにはどうすればいいですか](https://stackoverflow.com/help/how-to-ask/) – Andreas

答えて

0

は再びinputフォーム要素&チェックからそのdisabled="true"を削除します。

&チェックの代わりに以下のピースコードを使用してください。

<form action="" method="post"> 
    <p> Normally this input field will be hidden &mdash; we leave it visible here so you can see how it is manipulated by the widget: 
     <input name="tags" id="mySingleField" value="Apple, Orange"> 
    </p> 
    <ul id="singleFieldTags"></ul> 
    <input type="submit" value="Submit"> 
</form> 
<?php echo $_POST["tags"]; ?> 

OK、ここに私の完全なコードです。これをチェックして。

<?php 
error_reporting(E_ALL); 
ini_set('display_errors', '1'); 
?> 

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript" charset="utf-8"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script> 
<script src="tagit/js/tag-it.js" type="text/javascript" charset="utf-8"></script> 

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css"> 
<link href="tagit/css/jquery.tagit.css" rel="stylesheet" type="text/css"> 

<script type="text/javascript"> 

$(function(){ 
    var sampleTags = ['c++', 'java', 'php', 'coldfusion', 'javascript', 'asp', 'ruby', 'python', 'c', 'scala', 'groovy', 'haskell', 'perl', 'erlang', 'apl', 'cobol', 'go', 'lua']; 

    //------------------------------- 
    // Minimal 
    //------------------------------- 
    $('#myTags').tagit(); 

    //------------------------------- 
    // Single field 
    //------------------------------- 
    $('#singleFieldTags').tagit({ 
     availableTags: sampleTags, 
     // This will make Tag-it submit a single form value, as a comma-delimited field. 
     singleField: true, 
     singleFieldNode: $('#mySingleField') 
    }); 

    // singleFieldTags2 is an INPUT element, rather than a UL as in the other 
    // examples, so it automatically defaults to singleField. 
    $('#singleFieldTags2').tagit({ 
     availableTags: sampleTags 
    }); 

    //------------------------------- 
    // Preloading data in markup 
    //------------------------------- 
    $('#myULTags').tagit({ 
     availableTags: sampleTags, // this param is of course optional. it's for autocomplete. 
     // configure the name of the input field (will be submitted with form), default: item[tags] 
     itemName: 'item', 
     fieldName: 'tags' 
    }); 

    //------------------------------- 
    // Tag events 
    //------------------------------- 
    var eventTags = $('#eventTags'); 

    var addEvent = function(text) { 
     $('#events_container').append(text + '<br>'); 
    }; 

    eventTags.tagit({ 
     availableTags: sampleTags, 
     beforeTagAdded: function(evt, ui) { 
      if (!ui.duringInitialization) { 
       addEvent('beforeTagAdded: ' + eventTags.tagit('tagLabel', ui.tag)); 
      } 
     }, 
     afterTagAdded: function(evt, ui) { 
      if (!ui.duringInitialization) { 
       addEvent('afterTagAdded: ' + eventTags.tagit('tagLabel', ui.tag)); 
      } 
     }, 
     beforeTagRemoved: function(evt, ui) { 
      addEvent('beforeTagRemoved: ' + eventTags.tagit('tagLabel', ui.tag)); 
     }, 
     afterTagRemoved: function(evt, ui) { 
      addEvent('afterTagRemoved: ' + eventTags.tagit('tagLabel', ui.tag)); 
     }, 
     onTagClicked: function(evt, ui) { 
      addEvent('onTagClicked: ' + eventTags.tagit('tagLabel', ui.tag)); 
     }, 
     onTagExists: function(evt, ui) { 
      addEvent('onTagExists: ' + eventTags.tagit('tagLabel', ui.existingTag)); 
     } 
    }); 

    //------------------------------- 
    // Read-only 
    //------------------------------- 
    $('#readOnlyTags').tagit({ 
     readOnly: true 
    }); 

    //------------------------------- 
    // Tag-it methods 
    //------------------------------- 
    $('#methodTags').tagit({ 
     availableTags: sampleTags 
    }); 

    //------------------------------- 
    // Allow spaces without quotes. 
    //------------------------------- 
    $('#allowSpacesTags').tagit({ 
     availableTags: sampleTags, 
     allowSpaces: true 
    }); 

    //------------------------------- 
    // Remove confirmation 
    //------------------------------- 
    $('#removeConfirmationTags').tagit({ 
     availableTags: sampleTags, 
     removeConfirmation: true 
    }); 

}); 
</script> 
</head> 
<body> 

    <form action="" method="post"> 
     <p> Normally this input field will be hidden &mdash; we leave it visible here so you can see how it is manipulated by the widget: 
      <input name="tags" id="mySingleField" value="Apple, Orange"> 
     </p> 
     <ul id="singleFieldTags"></ul> 
     <input type="submit" value="Submit"> 
    </form> 
    <?php echo $_POST["tags"]; ?> 


</body> 
</html> 
+0

...は動作しません。 –

+0

私の場合、 "" '' ealier oneで&submitボタンをクリックすると、私のPOST要求のそれらのタグ。 – mi6crazyheart

+0

同じコードをコピーして古いコードを置き換えましたが、結果は表示されません。 –

関連する問題