8 Replies - 310 Views - Last Post: 29 July 2015 - 06:10 PM

#1 scariest  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 17
  • Joined: 11-July 15

JavaScript Alert

Posted 27 July 2015 - 03:38 PM

I have a questionnaire application, The questions and answers all come from the database, they questions are splitted and only one question is displayed per page. I have tried setting up alert so as to let the user pick an answer before it allows the user to see the next question. I have successfully created the alert but it only works for the first question, after that, javascript assumes the first question answer for the rest of the questions, hence not validating the rest of the questions, which makes the user to click on next without selecting any answer. php code:-

<?php foreach ($results['questions'] as $result) {
							 if ( $i == 0) {
								 echo "<div class='cont' id='question_splitter_$j'>";
								 echo "<div class='pert' id='progress_bar_$percentage'>";
							 }
							 ?>
							<div id='question<?php echo $k;?>'>
							
							<p style="font-size: 18px;" class='questions' id="qname<?php echo $j;?>"> <?php echo $k?>. <b> <?php echo $result['question_name'];?>&nbsp;<i class="fa fa-fw fa-question-circle" data-toggle="tooltip" data-placement="top" title="<?php echo $result['question_name'];?>"></i></b></p> 
							
							<ul class="quest">	
								<li>
								<input type="radio" value="1" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><font size="3"><?php echo $result['answer1'];?></font>	
								</li>
								
								<li>
								<input type="radio" value="2" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><font size="3"><?php echo $result['answer2'];?></font>
								</li>
								
							</ul>
							
							</div>
				<?php} ?>



javascript code that i tried:-

<script>
	window.onload = function(){
		
		$(document).on('click','.next',function(){
			
			last=parseInt($(this).attr('id')); 

			var radioButtons = document.getElementsByTagName("input");
			alert(radioButtons.length);
			for(var i = 0; i < radioButtons.length; i++) {
			if(radioButtons[i].checked == true) {
			   param = radioButtons[i].value;
			   if(param == "1" | param == "2"){
				   nex=last+1;
					$('#question_splitter_'+last).addClass('hide');
					$('#question_splitter_'+nex).removeClass('hide');
			   }else {
				   alert("error");
			   }
				}
			 }
			
</script>	
				




Thanks

Is This A Good Question/Topic? 0
  • +

Replies To: JavaScript Alert

#2 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 919
  • View blog
  • Posts: 3,315
  • Joined: 15-January 14

Re: JavaScript Alert

Posted 27 July 2015 - 03:49 PM

That's what your Javascript code does, it loops through all radio buttons on the page until it finds one that is checked with a value of 1 or 2. Maybe you need to get each radio button's ID and compare with the ID you got from the next button, so that you only look at the radio buttons associated with that question. There would be other ways to do that also, you could put the ID in as part of the class, for example, and then just get all elements with that class which will only return the radio buttons for that question instead of every one on the page.

It looks like your radio buttons have duplicate IDs also, you should correct that. It would also make things easier to use a data attribute to hold the question ID so that you don't need to parse it out of another ID.
Was This Post Helpful? 0
  • +
  • -

#3 scariest  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 17
  • Joined: 11-July 15

Re: JavaScript Alert

Posted 28 July 2015 - 03:55 PM

Thanks, I tried using the id, but javascript keeps returning only the id of the last question, I tried this code, the if part works, but the else didn't execute.

var id = <?php echo $result['id'] ?>;
			var texts = "radio1_";
			var ids = texts+""+id
			//alert(ids);
			var Yes = document.getElementById(ids).checked;
			var No = document.getElementById(ids).checked;
			
			if(Yes == false && No == false){
				alert("please select one");
				return false;
			}else{
				nex=last+1;
				$('#question_splitter_'+last).addClass('hide');
				$('#question_splitter_'+nex).removeClass('hide');
				return true;
			}



Also, the ID of the questions are different. I have attached a screenshot of the source code (from browser) after the questions are done displaying in the browser. As you can see from the image, the ID of each questions and answers are different from each other.

Attached image(s)

  • Attached Image

Was This Post Helpful? 0
  • +
  • -

#4 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 919
  • View blog
  • Posts: 3,315
  • Joined: 15-January 14

Re: JavaScript Alert

Posted 28 July 2015 - 04:05 PM

Yeah you can't hard-code the ID like that. You're telling PHP to print a specific ID in that Javascript code. You need to get the ID dynamically, when they click on something you need to figure out which ID they're clicking on instead of have the code always use the same one. The other problems I see are that you have the same ID on your radio buttons, which is a problem, and older browsers won't react well if you use a number as an ID.

Like I said, you can put your question ID in a data attribute, e.g. <button class="next" data-qid="1" ... then with jQuery I believe you can use something like $(this).data('qid') to get that value. You can get that question ID in your click handler and use it to look up everything else like the radio buttons and container elements.
Was This Post Helpful? 0
  • +
  • -

#5 scariest  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 17
  • Joined: 11-July 15

Re: JavaScript Alert

Posted 29 July 2015 - 04:59 AM

Thank you, I have assigned the name of the radio button to the next button, I was able to retrieve it, but when I tried getting the value selected, it is returning blank, It's returning an empty string.

             var dat = ($(this).data('qid'));
		alert(dat);
				
	     var radioValue = $("input:radio[name=dat]");	
		var val = $(this).val();
		console.log(val);
		alert(val);


Was This Post Helpful? 0
  • +
  • -

#6 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 919
  • View blog
  • Posts: 3,315
  • Joined: 15-January 14

Re: JavaScript Alert

Posted 29 July 2015 - 09:50 AM

this is the button they clicked on, you're trying to get the value of the button they clicked on. That's why it's blank. You need to get the radio buttons that correspond with the question ID.
Was This Post Helpful? 0
  • +
  • -

#7 scariest  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 17
  • Joined: 11-July 15

Re: JavaScript Alert

Posted 29 July 2015 - 04:30 PM

oh, yes, that's true, thanks. Made changes to it now, but getting undefined.

         var dat = ($(this).data('qid'));
	 console.log(dat);
	 var radioValue = $("input[name='dat]:checked").val();
	 console.log(radioValue);



returning undefined. I also tried this

           var dat = ($(this).data('qid'));
	   var selection = document.form.dat;
	   for (i = 0; i < selection.length; i++) {
		  if (selection[i].checked == true){
			 alert(selection[i].value + '.');
	    }
		}



showing console error of :- Cannot read property 'length' of undefined.

Also, I noticed that when I console log the radio button ID, i.e qid, the radio button of the first question shows undefined, but the rest of the questions radio button ID displays their correct ID, except the first question.

Thank you
Was This Post Helpful? 0
  • +
  • -

#8 andrewsw  Icon User is offline

  • I'm not here to twist your niblets
  • member icon

Reputation: 4708
  • View blog
  • Posts: 17,482
  • Joined: 12-December 12

Re: JavaScript Alert

Posted 29 July 2015 - 04:44 PM

"input[name='dat]:checked" You are missing the closing apostrophe.
var dat = ($(this).data('qid'));
var selection = document.form.dat;


Is qid the id of the element? Assuming it is then just use getElementById.

Quote

Also, I noticed that when I console log the radio button ID, i.e qid, the radio button of the first question shows undefined

Check the browser source again to check that it is rendered as you expect.

Note that the font tag has been obsolete for a very long time, use CSS.

This post has been edited by andrewsw: 29 July 2015 - 04:46 PM

Was This Post Helpful? 1
  • +
  • -

#9 scariest  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 17
  • Joined: 11-July 15

Re: JavaScript Alert

Posted 29 July 2015 - 06:10 PM

I don't know how I can thank you, THANK YOU sooo much :clap: :D. I really appreciate you taking your time and helping me out. It is working now. Thanks :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1