CODEWITHSUNDEEP
phpsqlsurvey
SamanthaAlexandria
SamanthaAlexandria

Reputation: 225

Sending the value of a DIV into an SQL table when clicked

I have some trouble retrieving the value assigned to my DIVs. The DIVs contains answers to a survey. (I can't use other inputs such as select, radio button)

Below is the form:

<form id='Form01' action=''>    
<div class="box" id='input01' onclick="submit_answer()" value='1'>YES</div>                                     
<div class="box" id='input02' onclick="submit_answer()" value='2'>NO</
</form>

Below is the function to retrieve the answers:

function submit_answers(e) {
    OPTION1: var answer = $(#input01).attr('value'); // RETURNS "1" 
    OPTION2: var answer= $(this).attr('value');  // **RETURNS "Undefined"**
    console.log(answer) ;   
    $.post('input_answers.php',{value:answer});
}

I'd like to insert '1' if the respondent clicks on "YES", '2' for "NO" but var value01 = $(this).attr('value'); returns 'UNDEFINED.

Thank you for your help.

Upvotes: 1

Views: 383

Answers (2)

Brian Barnes
Brian Barnes

Reputation: 1027

There are 2 things wrong with your code:

  • You are not accessing the HTML element that fired the click.
  • Value is an attribute on input elements (which a div is not).

To fix your JS correctly (and keep your use of jQuery) try the following:

function submit_answers(e) {
    var value01 = $(this).attr('value');
    $.post('input_answers.php',{value:value01});
}

Other issues I note with your code:

  • There are multiple HTML with the same HTML id. "id" should be a unique identifier (consider using the class attribute if you are using it for styling or attaching JavaScript events)
  • Another type of input would be better. Consider using radio buttons or select as this allows easier accessiblity
  • Using the onclick HTML attribute is frowned on by most web developers - consider attaching events by JavaScript (eg using jQuery's .on or vannila JS's element.addEventListner())

EDIT: after updated question As the JavaScript and HTML have changed substantially since my initial answer. Further issues are:

  • The function specified in the onclick attribute and the function written in the JS section do not match.
  • When defining answer in option 1, quotes are needed around #input01 (this is incorrect anyway as it is will always select the first div)
  • The selector might need to e.target.

Issues fixed in the (substantial) edit:

  • Duplicate id's
  • Value is not a JavaScript attribute on a non-input elements

Upvotes: 1

jasinth premkumar
jasinth premkumar

Reputation: 1413

try like this 

$("#input01,#input02").click(function(){
     var answer=  $(this).attr('value'); 

    console.log(answer) ;   
    $.post('input_answers.php',{value:answer});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id='Form01' action=''>    
<div class="box" id='input01'  value='1'>YES</div>                                     
<div class="box" id='input02' value='2'>NO</div>
</form>

Upvotes: 1

Related Questions