Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

json value get in input box

Posted on 2016-10-12
6
Medium Priority
?
113 Views
Last Modified: 2016-10-15
https://www.experts-exchange.com/questions/28972605/Json-result-print-in-html.html
solution of this question append div. i want a hidden input box store value.
 i try but i don't get right solution.
actually  i want to send this value in other page by get or post.
0
Comment
Question by:Amita Singh
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
6 Comments
 
LVL 59

Expert Comment

by:Julian Hansen
ID: 41839836
If I understand you correctly - you want the hidden input to store the selections the user makes from the typeahead?
So if they have PHP, JavaScript, Jquery in the selection you want to be able to send these to another post?

Is that correct?
0
 
LVL 2

Author Comment

by:Amita Singh
ID: 41839878
yes
0
 
LVL 59

Accepted Solution

by:
Julian Hansen earned 2000 total points
ID: 41840126
I am confused in the sample I posted in the referred question is already adding the value to an input that can then be sent back.

Consider this sample
HTML
  <form action="reflect.php" method="post">
    <div class="form-group">
      <input type="text" id="skills" name="skills" class="col-md-12" value="" readonly style="width:100%; background-color:#ccc;padding:1px 3px; margin-left:3px; cursor:pointer; float:right; margin-left:5px;">
      <span style="float:right; margin-top:-25px; font-weight:bold;font-size:15px; cursor:pointer; position: relative;" id="clear_skills" title="Clear Skills">&nbsp;X&nbsp;</span>
      <br/><br/>
      <div class="skills-container"></div>
      <input type="text" name="typeahead" value="" class="typeahead tt-query form-control col-md-12" autocomplete="off" placeholder="Add More Skills" style="width:200px;"/>
    </div>  
    <div class="alert alert-danger" id="error" style="display: none">You have already selected this skill.</div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>

Open in new window

<script>
var counter = 0;
$(function() {
  $('input.typeahead').typeahead([{  
      name: 'typeahead',
      valueKey: 'skill',
      remote: {
        url: 't1638.php?key=%QUERY',
        filter: function (parsedResponse) {
          $('#error').hide();
            
            return parsedResponse;
        }
      },                                            
  }]);

  $(".typeahead").focusin(function(){
    if(this.value!='') {
      var skills = $("#skills").val();
      var ifSkillAlreadyExist = skills.indexOf(this.value);   // ifSkillAlreadyExist ending till , comma
      //console.log((checkString.match(/,/g) || []).length);       // Check Occurance count of , (comma)
      if(ifSkillAlreadyExist == '-1') {
        $('.skills-container').append(
        $('<div/>', {
          class: 'skill-item',
          html: this.value
          }).append(
            $('<a/>', {
              class: 'skill-remove glyphicon glyphicon-remove'
            })
          )
        );
        
        if (skills.length > 0) skills += ', ';
        $("#skills").val(skills + this.value);
      } 
      else { 
        // Don't do this - rather add an error to the page
        //alert('You have already selected this skill.');
        $('#error').show();
      }
    }
    this.value = "";
  }); 
  
  $('body').on('click', '.skill-remove', function() {
    var val = $(this).parent().text();
    $(this).parent().remove();
    var inp = $('#skills').val().split(',');
    var res = [];

    while(inp.length > 0) {
      var top = inp.pop().trim();
      if (top != val) {
        res.push(top);
      }
    }

    $('#skills').val(res.join(', '));
  });
});
</script>

Open in new window

Working sample here
0
RHCE - Red Hat OpenStack Prep Course

This course will provide in-depth training so that students who currently hold the EX200 & EX210 certifications can sit for the EX310 exam. Students will learn how to deploy & manage a full Red Hat environment with Ceph block storage, & integrate Ceph into other OpenStack service

 
LVL 111

Expert Comment

by:Ray Paseur
ID: 41840158
i want to send this value in other page by get or post
A simple jQuery example showing just the moving parts of the AJAX communication is profiled in this article.
https://www.experts-exchange.com/articles/10712/The-Hello-World-Exercise-with-jQuery-and-PHP.html
0
 
LVL 2

Author Closing Comment

by:Amita Singh
ID: 41844647
Thank you.
0
 
LVL 59

Expert Comment

by:Julian Hansen
ID: 41844726
You are welcome.
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
The well known Cerber ransomware continues to spread this summer through spear phishing email campaigns targeting enterprises. Learn how it easily bypasses traditional defenses - and what you can do to protect your data.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

715 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question