How can make toggle be affected on to existing radio button onClick toggle after certain db query?
Question
May be I'm not clear with my title, looks messy, so here is my code. Making a plugin in WordPress.
<script type="text/javascript">
$(document).ready(function() {
$("input[name$='radio_btn']").click(function() {
var test = $(this).val();
$("div.togglediv").hide();
$("#togglediv" + test).show();
});
});
</script>
I have two radio buttons in a form to input data:
<label><input type="radio" name="radio_btn" checked="checked" value="2"><strong>Paste a Code</strong></input></label>
, or
<label><input type="radio" name="radio_btn" value="3"><strong>Put an Image</strong></input></label>
And here are my two divs:
<div id="togglediv2" class="togglediv">div 1</div>
<div id="togglediv3" class="togglediv" style="display: none;">div 2</div>
Scenario: I'm using the same form for Inserting Data and Editing data as well. When inserting, I can toggle between the two divs, where the first one is checked by default. If I click on the other, then the divs are toggling nicely, I can use any one of them at a single time. So the inserting thing is fine.
Now, when I'm going to edit my data, I'm getting the data using $_GET[] and db query, and passing them to their fields accordingly and they are doing well too. But just the matter of toggling here, when data for <div id="togglediv2"> is isset showing, data for <div id="togglediv3"> is isset is also showing, but if not toggled by click the field is not visible you know. :(
I tried in a basic way swapping the HTML checked="checked" from one to another, I failed, because the jQuery isn't matching them.
So, I need to change the jQuery in a way so that, the toggling works when I'm inputting, as well as when editing my data. What are the changes I can do to change my jQuery to achieve this into my desired way?
3 answers
solution1
0 2014-01-09 07:47:28
You have 2 options:
1) Show/hide divs in your php
2) Pass value of "test" to javascript and add
$("#togglediv" + test).click();
In fact there is a 3th option, which I prefere. Create a .hidden css class and add in your php (to a togglediv which is hidden obvieusly) when you render the page. Then instead of hide()/show() use addClass('hidden') and removeClass('hidden'). I'm not sure if this will be slower/faster but I think it makes it more readable.
CSS
.hidden { display: none; }
JS
<script type="text/javascript">
$(document).ready(function() {
$("input[name$='radio_btn']").bind('change', function() {
var test = $(this).val();
$("div.togglediv").removeClass('hidden');
$("#togglediv" + test).addClass('hidden');
});
});
</script>
solution2
0 2014-01-09 08:12:43
Give this a try (it worked for me).
It does not show the DIVs when initially loaded, they will show when a radio button is selected.
I added the jQuery library link I used, just in case.
<!DOCTYPE html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div.togglediv").addClass('hidden');
$("input[name$='radio_btn']").click(function() {
var test = $(this).val();
$("div.togglediv").hide();
$("#togglediv" + test).show();
});
});
</script>
<style>
.hidden { display: none; }
</style>
</head>
<body>
<label><input type="radio" name="radio_btn" value="2"><strong>Paste a Code</strong></input></label>
, or
<label><input type="radio" name="radio_btn" value="3"><strong>Put an Image</strong></input></label>
<div id="togglediv2" class="togglediv">div 1</div>
<div id="togglediv3" class="togglediv">div 2</div>
</body>
</html>
solution3
0 2014-01-09 10:33:20
I would use two hidden inputs that I would toggle the same ways as the divs to know which form is being submited, hiding the div in which the data is entered will still set the variables inside the div for php.
So I would have
$("input[name$='radio_btn']").click(function() {
var test = $(this).val();
$("div.togglediv").hide();
$("input.togglevalue").attr('disabled', 'disabled');
$("input#toggleinput" + test).removeAttr('disabled');
$("#togglediv" + test).show();
});
Then in php I would have these two inputs in each of the divs
<div id="togglediv2">
// The current div content
<input type="hidden" name="togglediv2" value="1" class="togglevalue" id="toggleinput2" />
</div>
and
<div id="togglediv3">
// The current div content
<input type="hidden" name="togglediv3" value="1" class="togglevalue" id="toggleinput3" />
</div>
Then in php I would check for these inputs if they are set so you have:
<?php
if (isset($_GET['togglediv2'])){
// Do actions for Paste a Code
} elseif (isset($_GET['togglediv3'])){
// Do actions for Put an Image
}
?>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.