empty post

[dgnzcn]

hi, i have one text box and one drop down menu controlled two radio buttons.

this value="hariciLink" is posting values, but this value="dahiliLink" is posting values is empty. Why, where is my wrong?

<script type="text/javascript">
$(document).ready(function(){
$('input[type="radio"]').click(function(){
if($(this).attr("value")=="hariciLink"){
$(".box").not(".hariciLink").hide();
$(".hariciLink").fadeIn(300);
}
if($(this).attr("value")=="dahiliLink"){
$(".box").not(".dahiliLink").hide();
$(".dahiliLink").fadeIn(300);
}
});
});
</script>


<div class="form-group">
<label for="ikon" class="col-lg-2 control-label">Bağlantı</label>
<div class="col-lg-10">
<div class="radio">
<label><input type="radio" name="link" value="hariciLink" required> Harici Link</label>
</div>
<div class="radio">
<label><input type="radio" name="link" value="dahiliLink" required> Dahili Link</label>
</div>
</div>
</div>
<div class="box form-group dahiliLink">
<label for="link" class="col-lg-2 control-label">Seçiniz</label>
<div class="col-lg-10 selectContainer">
<select name="link" value="" class="form-control" required>
<option value="black">Black</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="orange">Orange</option>
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="white">White</option>
</select>
</div>
</div>

<div class="box form-group hariciLink">
<label for="link" class="col-lg-2 control-label">Link</label>
<div class="col-lg-10">
<input type="text" name="link" placeholder="Örnek: http://www.websayfam.com" class="form-control" required/>
</div>
</div>

Edited June 10, 2016 by dgnzcn

[requinix]

A form field will be sent even if it is not visible to the user. Because you have the inputs named "link" you will always receive something like

link=hariciLink&link=black&link=

or

link=dahiliLink&link=black&link=Örnek:%20http://www.websayfam.com

The hariciLink value overwrites the dahiliLink value because it is later in the form.

 

Easy solution: don't name everything "link". Very easy. Also a good idea.

 

Otherwise you have to worry about enabling and disabling inputs so that only the right ones get submitted with the form.

<script type="text/javascript">
$(document).ready(function(){
$('input[type="radio"]').click(function(){
if($(this).attr("value")=="hariciLink"){
$(".box").not(".hariciLink").hide();
$(".hariciLink").fadeIn(300);
}
if($(this).attr("value")=="dahiliLink"){
$(".box").not(".dahiliLink").hide();
$(".dahiliLink").fadeIn(300);
}
});
});
</script>

That code is what you use to show and hide the different link inputs. To make it enable/disable you can

<script type="text/javascript">
$(document).ready(function(){
	$('input[type="radio"]').click(function(){
		if($(this).attr("value")=="hariciLink"){
			$(".box").not(".hariciLink").hide();
			$(".box").not(".hariciLink").find(":input").prop("disabled", true);
			$(".hariciLink :input").prop("disabled", false);
			$(".hariciLink").fadeIn(300);
		}
		if($(this).attr("value")=="dahiliLink"){
			$(".box").not(".dahiliLink").hide();
			$(".box").not(".dahiliLink").find(":input").prop("disabled", true);
			$(".dahiliLink :input").prop("disabled", false);
			$(".dahiliLink").fadeIn(300);
		}
	});
});
</script>

or simply

<script type="text/javascript">
$(document).ready(function(){
	$('input[type="radio"]').click(function(){
		$(".box").not("." + this.value)
			.hide()
			.find(":input").prop("disabled", true)
		;
		$("." + this.value + " :input").prop("disabled", false)
		$("." + this.value).fadeIn(300);
	});
});
</script>

Keep in mind that enabling/disabling the inputs comes with a visual change (stuff turns gray) so you should enable inputs before showing them and disable inputs after hiding them; .hide() is instant but if you changed to .fadeOut() then you'd have to disable after the fade out animation finished.

[dgnzcn]

hi, thanks for the great answers. both codes works fine but i choice last short codes,.

really thanks.

 

i think my false,  i am not using these: .find(":input").prop("disabled", true) and this $("." + this.value + " :input").prop("disabled", false)

Edited June 11, 2016 by dgnzcn