trying to get the html content

[jimfog]

I am trying to get the html content of a radio button using the .html jQuery method...actually I am trying to get the html content when the user selected a different radio button(change event). Here is the html:

<input type="radio" class="formBuzType" name="buztype" value="1" checked>hair salon<br></td>					  <td> <input type="radio" class="formBuzType" name="buztype" value="3"> car shop <br></td>

I am just trying to get the strings hair salon and car shop every time the user makes the corresponding selection and I am trying to achieve this with the following js code:

  $(function()   {$('.formBuzType').change(function()    { var html=$(this).html()    alert(html);	  });	 });

I am using alert for testing purposes to see if the code will work...the result is that alert box is empty...meaning the code does not do what is supposed to be doing.Normally, whenever the user select a radio button the alert box should have in it "hair salon" or "car shop"-depending on what the user selected. What could be wrong?

[justsomeguy]

Radio buttons do not have HTML content. You need to get the next sibling of the radio button. Semantically, it would make the most sense to use a label element to wrap the text inside. You can match up the label with the radio button via ID, or you can just get the next sibling of the radio which should be the label.

[Spunky]

I've never seen it possible to get the text of the radio button, only the text of like a drop down box, but instead get an ID or value from a radio box. But I know JQuery does some awesome things. Or whatever library you are using. Would something like this work?

function run(){buzTypeLength = document.getElementsByName('buztype').length;buzType = document.getElementsByName('buztype');for (var count=0;count<buzTypeLength;count+=1) {  if(buzType[count].checked){  alert(buzType[count].value);  }}}

This would alert the value of the radio button, whichever one is checked. You could also instead assign an ID and alert that. If the value has another use and needs to be the number you gave it, you could use an if statement to assign the number to hair salon or car shop. Or the if statement could be directly connected to the count. There are lots of options of how to utilize the code once you know which radio button is selected. I know this branches away from the direction you were going but I'm not familiar with JQuery other than finding what I need and bending it to my uses. If it works for your purpose though it should be good.

[dsonesuk]

$(".formBuzType").each(function(){var index = $(".formBuzType").index(this); //get index of group of inputs with class name (0 to whatever)$(this).attr('id', $(this).attr('name')+index).next('label').attr('for',  $(this).attr('name')+index); // add id ref ('buztype' + index number) to input and to 'for' attribute of label it is assiociated with});$('.formBuzType').change(function()    {    var html=$('label[for="'+$(this).attr('id')+'"]').html(); //retrieve label html by using the generated id ref of selected input    alert(html);		  });

I used the name attribute as id ref, as you can only use one name value, whereas you can have multiple class names.

  <input type="radio" class="formBuzType" name="buztype" value="5"><label> salon spa</label> <br>  <input type="radio" class="formBuzType" name="buztype" value="4"><label> car </label><br>

[jimfog]

My question is why did you use js to produce these id values...why not just use HTML for this job?

[dsonesuk]

1) id ref for these inputs are not used for design as a ref.2) as this will only used for when JavaScript is enable, why not let JavaScript/JQuery do all the work in applying a id ref and 'for' attribute instead of doing it manually, less chance of mistakes in duplication etc.

[jimfog]

I am going to need a slight variation of the code-no need to open a separate topic for it.SO far we were getting the label upon the change event(meaning the user selects a different button)...but what if wanted to get the label of the currently selected radio button. I do not think the code will be much different...but I am stuck in what do exactly I have to add.

[dsonesuk]

I don't understand, when you select a radio button it IS the currently selected. Unless you mean once it is changed and is now current and you click current again without changing it then

  $('.formBuzType').mousedown(function() // input clicking	{	if($(this).is(':checked')){	var html=$('label[for="'+$(this).attr('id')+'"]').html(); //retrieve label html by using the generated id ref of selected input	alert('click '+html); 	}				  });				  		$('.formBuzType + label').mousedown(function() // label clicking	{	if($(this).prev().is(':checked')){	var html=$('label[for="'+$(this).prev().attr('id')+'"]').html(); //retrieve label html by using the generated id ref of selected input	alert('click label '+html); 	}				  });   

should do it

Edited June 6, 2013 by dsonesuk

[jimfog]

No...the code you wrote assumes a mousedown event. What I want is get the label of the checked radio button without an event triggered first.You just have the HTML there but not any events involved. I hope I am clear now.

[dsonesuk]

You have to have some sort event to loop/search for label that relates to checked input.

[jimfog]

look...this form has 3 fields,:name, lastname and businesstype.There is a case where the user will NOT select a new radio button and leave it as it is...from the previous time(remember this is an edit profile page). This is the case where he chooses to update ONLY the name and the last name.In such a case I must get the value(and the label) of the radio button as it currently is and send it with AJAX. The user does not select another radio button in the above case and as such there is no change event. Did you got it now?

[dsonesuk]

LIKE I said an event is required, either when the update of name and lastname is carried out and the user and leaves (onblur) these inputs, then a function is triggered to look through these required inputs for ajax and retrieve there values, OR when a submit button is clicked, the the function would be triggered then.

[justsomeguy]

Javascript is event-driven programming. Maybe your event is "the form gets submitted", but some event has to occur in order for your Javascript to run. Even if you have a timer looping, that timer can still be considered a sort of event (action/reaction, cause/effect). Some sort of event is needed, or else when does the function run? Virtually everything done in Javascript is event-based. If the only time the form values matter is when you submit the form, then the only event you need to worry about is submitting the form, there doesn't need to be any onchange or anything else at all. If it's just a form they fill out and submit with ajax, and nothing in the form depends on anything else in the form, then the only time you need to gather the values is when you're submitting everything to the server. Another way to consider it is that if they don't update a particular element in the form, then there's no reason to send that to the server, the data didn't change. That's another way to approach the update process. You can design it however you want it to work though.

[jimfog]

... Another way to consider it is that if they don't update a particular element in the form, then there's no reason to send that to the server, the data didn't change. That's another way to approach the update process...

Your explanation of the event-driven nature of js is very good but I am going to focus on the above sentence as it is the source of the problemHere is the jquery function that performs the update:

$.ajax({	  type: "POST",	  url: "testajax.php",	  data: {"name":name,"lastname":lastname,"btype":btype}	 });

If the user does not update btype(which is part of the form where he selects the business category where he belongs in) btype is empty/undefined.If that is the case and the user updates only name-lastname, these last 2 will not be updated because if btype is undefined it somehow spoils the update process of name/lastname. That is why I wanted to UPDATE anyway btype(by re sending the same value to the server) EVEN if is not updated by the user. I hope you understand now the problem.

Edited June 10, 2013 by jimfog

[justsomeguy]

I understand the problem, I don't think you understand the solution though. It sounds like your code doesn't handle those values correctly. If you're going to submit a value of undefined, then your PHP code should be checking for undefined and skipping it if it was submitted. Or, you could change your Javascript to not send a value of undefined, or if you want to get the original value then you can do that too. All of those are options. One of them is PHP validation, one of them involves building the data to submit via ajax in a conditional way so that it only sends the data that was changed, and the other option is to directly get the values of all form elements when you submit the data instead of relying on onchange events to set global variables. There are several possible solutions depending on how you want your code to work. I don't think that using onchange events to set global variables is a very intuitive way to do that, it's overly complex. I would just get all current values when they submit the form, that sounds a lot simpler.

[jimfog]

Your answer is exactly what I wanted to get started talking about solutions...I am not experienced in js/ajax and that is why I am having difficulty in finding a proper coding solution.Nonetheless, I found it, I will delete the onchange(not necessary as you mention) code and just send all the values either way, as you propose in one your solutions-THANKS.On submit-this code:

var btype=$( "input:checked" ).val();  

And it does the job-at least so far..Any comments are welcome.