Develop Reference

How do i show only one form at a time when i reload the page and didn't check one of the radio button in Laravel 6.0

I have two forms in one view, if you checked one of the radiobutton shows you only the one you want it, the problem is when you reload the page and you didnt check any of the radiobutton's shows you both forms, i tried putting check to one of the radio's but didnt work to, still shows me both forms, how can i solve the problem
Below i will let the code of my radiobutton and the script in jQuery that shows you the form you want it when you select one
Code of the radiobutton
<input type="radio" id="admin" value="administrador" name="tipo" >
<label for="admin">Admin</label>
<input type="radio" id="cliente" value="cliente" name="tipo">
<label for="natural">Cliente</label>
Code of the script in jQuery
<script type="text/javascript">
$(document).ready(function(){
$('input:radio[id=admin]').attr('checked',true);
$("#admin").on( "click", function() {
$('#email_1').show(); //muestro mediante id
$('#password_1').show();
$('#email_2').hide();
$('#password_2').hide();
});
$("#cliente").on( "click", function() {
$('#email_1').hide(); //oculto mediante id
$('#password_1').hide();
$('#email_2').show();
$('#password_2').show();
});
});
</script>

Instead of waiting for someone to click a button to hide the second form, make sure its hidden by default and also when the radio is clicked.
<script type="text/javascript">
$(document).ready(function(){
$('input:radio[id=admin]').attr('checked',true);
$('#email_2').hide(); // Add this
$('#password_2').hide(); // and this
$("#admin").on( "click", function() {
$('#email_1').show(); //muestro mediante id
$('#password_1').show();
$('#email_2').hide();
$('#password_2').hide();
});
$("#cliente").on( "click", function() {
$('#email_1').hide(); //oculto mediante id
$('#password_1').hide();
$('#email_2').show();
$('#password_2').show();
});
});
</script>

Write tag and remove with jQuery Toggle

Good morning all,
I want to create a little bit js code for phpbb forum, I want to create a button, when it's clicking create code [media][/media] the problem is, i can't do Toggle, when button clicking must be create [media][/media] after when again click delete [media][/media] My code:
var textForMedia = "Input your media link";
$('a').click(function() //this will apply to all anchor tags
{
$( ".inner" ).wrapInner( "[media]" + textForMedia + "[/media]");
});
a {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<form action="">
Input video
<textarea style="width:300px;height:200px" placeholder="Media" class="inner"></textarea>
</form>
P.S. and how do array textForMedia disappearing $(textForMedia).fadeToggle('slow', 'linear'); like this?
P.S.S. sorry for my english )

You could do one of many things as follows.
On click of a you add filled class to textarea. On click again check for the filled class and do toggle behavior.
var textForMedia = "Input your media link";
$('a').click(function() //this will apply to all anchor tags
{
if( $(".inner").hasClass("filled"))
{
$(".inner").empty();
$(".inner").removeClass("filled");
}
else{
$(".inner").text("[media]" + textForMedia + "[/media]");
$(".inner").addClass("filled");
}
});
a {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
Input video
<textarea style="width:300px;height:200px" placeholder="Media" class="inner"></textarea>
</form>

How to Show/hide a <div> based on radio checked, not clicked

I am trying to show a <div> when a certain radio button is selected by the user.
I found some nice code form http://www.tutorialrepublic.com/faq/show-hide-divs-based-on-radio-button-selection-in-jquery.php and I adapted it for myself like this:
With the CSS & script:
<style type="text/css">
.box{padding: 2px;display: none;margin-top: 2px;border: 0px solid #000;}
.red{ }
.green{ }
.blue{ }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('input[type="radio"]').click(function(){
if($(this).attr("value")=="Tax representation"){
$(".box").not(".red").hide();
$(".red").show();
}
if($(this).attr("value")=="VAT recovery"){
$(".box").not(".green").hide();
$(".green").show();
}
if($(this).attr("value")=="Other"){
$(".box").not(".blue").hide();
$(".blue").show();
}
});
});
</script>
Then I got this to remember the selection:
if (!empty($_REQUEST['object'])) { $object = $_REQUEST['object']; }
Add the radio selection in the form that remembers the selection if the form needs to be reloaded:
<input tabindex="1" type="radio" name="object" <?php if (isset($object) && $object=="Tax representation") echo "checked";?> value="Tax representation">Tax representation
<input tabindex="2" type="radio" name="object" <?php if (isset($object) && $object=="VAT recovery") echo "checked";?> value="VAT recovery">VAT recovery
<input tabindex="3" type="radio" name="object" <?php if (isset($object) && $object=="Other") echo "checked";?> value="Other">Other
Followed with the <div> to be shown or hidden:
<div class="red box">text 1</div>
<div class="green box">text 2</div>
<div class="blue box">text 3</div>
Now my problem is that when the form is reloaded, the radio selection is memorized, but the corresponding <div> does not show.
I believe there may be a way to change the script from "click" to "selected" or something like that. Would you help?

This is similar to previous answers, extracting the behavior into a function so that you can run it on page load and in an event:
function showBoxes(value) {
if(value=="Tax representation"){
$(".box").not(".red").hide();
$(".red").show();
}
if(value=="VAT recovery"){
$(".box").not(".green").hide();
$(".green").show();
}
if(value=="Other"){
$(".box").not(".blue").hide();
$(".blue").show();
}
}
$(document).ready(function(){
showBoxes($("input[type='radio']:checked").attr("value"));
$('input[type="radio"]').click(function(){
showBoxes($(this).attr("value"));
});
});
jsFiddle

Use change instead of click
$('input[type="radio"]').change(function(){
Then, move your function to a variable and call it when the page loads.
The final code should look something like this.
$(document).ready(function(){
var updateDivs = function(){
if($(this).attr("value")=="Tax representation"){
$(".box").not(".red").hide();
$(".red").show();
}
if($(this).attr("value")=="VAT recovery"){
$(".box").not(".green").hide();
$(".green").show();
}
if($(this).attr("value")=="Other"){
$(".box").not(".blue").hide();
$(".blue").show();
}
}
$('input[type="radio"]').click(updateCheckbox);
$.proxy(updateDivs, $('input[type="radio"]'))
});

Add this line after your $('input[type="radio"]').click(function(){ code and inside the document.ready block
$('input[type="radio"]:checked').trigger('click');
Your current logic will work only when the radio buttons are clicked. So let's trigger the click event of the checked radio button when the page reloads. Which inturn will run your logic and toggle the divs accordingly.

How to update select options before showing them in Jquery?

Look at this example code:
<html>
<head>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("body").on('click', "#teste",function(){
$('#teste').append('<option id="pera">pera</option>')
$('#teste').show();
});
});
</script>
</head>
<body>
<select id="teste">
<option value="banana">banana</option>
<option value="laranja">laranja</option>
</select>
</body>
My problem here is that the click event show the select box and only after it updates it with the new value ("pera"). What I need to do is first update the select with the new value and only after show it. Is there anyway to do that using jQuery? Thanks in advance, guys!
EDIT:
Ok, let me try to explain a little bit clear: Whenever you click in a select to show the options it show it automatically (it's obvious!). My problem is that I need to intercept the click event, update the select and only after it show the select. But it's showing the select (it's the default behaviour) before updating. Here is what happening:
1) Select with initial values: banana, laranja
2) User click it. What I want: Show banana, laranja and pera as options. What happens: It shows banana, laranja in the list, show it and only after update the select (If I inspect the html code with fiebug, the pera option is there!). If I click again inthe select, the pera options appears normally and as the code above says, it appends another pera option in the select that only appears in the next click and so on.

I'm a little bit confused.. do you just want to update the select when the page loads? If so you can do:
CSS:
#teste {
display: none;
}
JS:
$(function(){
$('#teste').append('<option id="pera">pera</option>').val("pera").show();
});

I think this might be what you are searching for:
Using the value:
$('[name=options]').val( 3 );//To select Blue
To reset it use:
$('[name=options]').val( '' );
Using the text:
$('[name=options] option').filter(function() {
return ($(this).text() == 'Blue'); //To select Blue
}).prop('selected', true);
Link: http://forum.jquery.com/topic/how-to-dynamically-select-option-in-dropdown-menu

i think you want to prevent showing multiple times the teste option.
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<style>
#teste{
display: none;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(document).click(
function(){
if(!$('#teste').is(':visible')){
$('<option/>',{
'id' : 'pera',
'html' : 'pera',
'selected' : 'selected'
}).appendTo('#teste');
$('#teste').show('slow');
}
})
});
</script>
</head>
<body>
<select id="teste">
<option value="banana">banana</option>
<option value="laranja">laranja</option>
</select>
</body>

I want to disable link button after clicking of it and other enable. toggle enable/ disable between both link buttons using javascript

I want to disable link button after clicking of it & other enable. toggle enable/ disable between both link buttons using javascript
<a id="a1" href="page1.aspx">One</a><a id="a2" href="page2.aspx">Two</a>

Simple, just add listeners to the onclick events on both links, that disable the link in question and enable the other one.
Something like
document.getElementById('a1').onclick = function() {
document.getElementById('a1').disabled = true;
document.getElementById('a2').disabled = false;
};
document.getElementById('a2').onclick = function() {
document.getElementById('a2').disabled = true;
document.getElementById('a1').disabled = false;
};
Of course if you're going to be extending this to multiple buttons then you could easily abstract the above out to registration methods, looping over arrays of buttons etc. (possibly those that implement a particular class rather than explicitly specifying the array).

The simplest way is to hide the link rather than to make it disabled.
You can use this code to hide the link after click on it.
Its tested code & it worked perfect for me. :-)
<script type="text/javascript">
onclick = function() {
var chk= document.getElementById('myElementId');
chk.style.display="none";
};
</script>

To disable a LINK rather than a BUTTON, the only thing you can do apart from hiding it is to set it not to go anywhere.
onclick="this.href='javascript: void(0)';"

Your question can have any one of the following 3 possible scenario. Choose whichever suites your problem.
Case1) A catch in your question is that since they are links pointing to page1.aspx and page2.aspx respectively once you click on a link a new page loads in the browser. So the effect you want to achieve doesn't really matter.
Case 2) If, you have both the links 'One' and 'Two' on each of aspx pages then you can as well hardcode the disabling of the link pointing to itself. (Or as well not have the link at all).
Case 3) If you have a frame to display the links 'One', 'Two' and you have a another frame to load content of both links then your question has a meaning disabling the other link. Here is the code for the same.
<html>
<a id="a1" href="javascript:void(0)" onclick="toggle(objA1,objA2,'page1.aspx')">One</a>
<a id="a2" href="javascript:void(0)" onclick="toggle(objA2,objA1,'page2.aspx')">Two</a>
<br><iframe id="ifrm" src=""></iframe>
<script>
var objA1 = document.getElementById('a1');
var objA2 = document.getElementById('a2');
// d=element to disable, e=element to enable
function toggle(d,e,link)
{
//if already disabled do nothing(don't follow url)
if(d.disabled) return;
//enable/disable
d.disabled = true;
d.style.cursor = 'default';
e.disabled = false;
e.style.cursor = 'hand';
//follow link
ifrm.src = link;
}
</script>
</html>

You can access and set the "disabled" attribute like this:
if(somebutton.disabled == true){
somebutton.disabled = false;
}
I recommend using a JavaScript framework like jQuery.

<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
.submit{
padding:8px;
border:1px solid blue;
}
</style>
</head>
<body>
<h1>Disabled submit form button after clicked with jQuery</h1>
<form action="#">
<p>
I'm a form ~
</p>
<input type="submit" value="Submit"></input>
<button>Enable Submit Button</button>
</form>
<script type="text/javascript">
$('input:submit').click(function(){
$('p').text("Form submiting.....").addClass('submit');
$('input:submit').attr("disabled", true);
});
$('button').click(function(){
$('p').text("I'm a form ~").removeClass('submit');
$('input:submit').attr("disabled", false);
});
</script>
</body>
</html>

<script type="text/javascript">
function validateForm(formObj) {
if (formObj.username.value=='') {
alert('Please enter a username');
return false;
}
formObj.submitButton.disabled = true;
formObj.submitButton.value = 'Please Wait...';
return true;
}
</script>
<form name="frmTest" action="" method="post" onsubmit="return validateForm(this);">
Username: <input type="text" name="username" value="" /><br />
<input type="submit" name="submitButton" value="Submit" />
</form> ​​​​​​