Showing 2 text boxes when button click JS - javascript

I have implemented a coding to show a text-box when the user clicks a button. I need to modify that coding to view 2 text-boxes when user clicks that same button. I'll put the coding down below. Thanks!
<div class="form-group">
<div class="col-sm-9">
<div id="welcomeDiv" class="answer_list" style="display:none;"> <input type="text" /></div>
<input type="button" name="answer" value="Customize Size" onclick="showDiv()" />
</div>
function showDiv(){
$( "#welcomeDiv" ).show( "slow" );
}

Try this one .
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#input1").hide();
$("#input2").hide();
$("#hide").click(function(){
$("#input1").hide();
$("#input2").hide();
});
$("#show").click(function(){
$("#input1").show();
$("#input2").show();
});
});
</script>
</head>
<body>
<input type="text" id="input1"/>
<input type="text" id="input2"/>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
Hope this help :)

this is exactly same like your code check this out
this is fiddle link
and with code snippet also
<div class="form-group">
<div class="col-sm-9">
<div id="welcomeDiv" class="answer_list"> <input type="text" /></div>
<input type="button" name="answer" value="Customize Size" />
</div>
this is javascript little bit different but you will get it
$("input[type='button']").click(function(){
$("#welcomeDiv").show('slow');
});
i dont like to give style in elements so use css.css
#welcomeDiv{
display:none;
}
$("input[type='button']").click(function(){
$("#welcomeDiv").show('slow');
});
#welcomeDiv{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<div class="col-sm-9">
<div id="welcomeDiv" class="answer_list"> <input type="text" /></div>
<input type="button" name="answer" value="Customize Size" />
</div>

Related

How to get the nearest class of separate div in jquery?

On clicking the button I want to get the closest <input name="something/> value.
I tried $(this).closest(".input").val() but didn't work.
$(document).on("click", ".button", function() {
div = `<div class="second-div"><input name="something/></div>
<div class="third-div"></div>`
// get nearest <input name="something/> value
// get nearest <input class="a-input" /> value
$(".main-div").append(div);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-div">
<div class="second-div">
<input name="something" class="input" />
</div>
<div class="third-div">
<input name="another input" class="a-input" />
</div>
<div class="fourth-div">
<button type="button" class="button">Click Me</button>
</div>
</div>
I would traverse up to the containing div first, then back down to the desired control.
$(this).closest(".main-div").find(".input");
EDIT
I just read your comment saying you want to get the last instance of a class.
$(this).closest(".main-div").find(".input").last();
EXAMPLE
$(document).on("click", ".button", function() {
div = `<div class="second-div"><input name="something" class="input"/></div>
<div class="third-div"></div>`
$(".input").removeClass("highlight");
$(this).closest(".main-div").find(".input").last().addClass("highlight");
// get nearest <input name="something/> value
// get nearest <input class="a-input" /> value
$(".main-div").append(div);
});
.highlight{
background:#b00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-div">
<div class="second-div">
<input name="something" class="input" />
</div>
<div class="third-div">
<input name="another input" class="a-input" />
</div>
<div class="fourth-div">
<button type="button" class="button">Click Me</button>
</div>
</div>

.show() doesn't work immediately - jQuery

I have a button click function like this :
$("#submitButton").click(function (e) {
e.preventDefault();
console.log("let's show my div");
$('#mydiv').show();
//and then doing a lot of front end operations and some ajax calls
})
When I click the submit button, I get the console.log message immediately. But .show() method works like 7-8 seconds after that. Can you tell me how I can make .show() work immediately? Thanks.
EDIT :
My HTML code looks like this :
<div class="main">
<form id="myform" enctype="multipart/form-data" class="contact-forms">
<div class="first-line">
<div class="span3 main-row">
<div class="input">
<input type="text" id="id" name="id" placeholder="insert your ID" maxlength="7" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />
</div>
</div>
</div>
<div class="first-line">
<div class="span8 main-row">
<div class="input">
<input type="text" id="name" name="name" placeholder="Your name" />
</div>
</div>
</div>
<div id="mydiv" style="display:none">
<label>
Processing, please wait.
</label>
</div>
</form>
</div>
This is example of showing the div , you should hide your div with display none not hidden class , if you use hidden class just remove class to show your div
function ShowDiv(){
$("#mydiv").show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv" style='display:none;'>Hello</div>
<button onclick="ShowDiv()"> ShowMe</button>

copy value with select() and copy

I'm trying select a input and then copy the text into input, but has trouble identifying the children.
$(".input-group .copyLink").click(function() {
$(this).parent().find('.htmlLink').select();
document.execCommand("copy");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
<input type="text" class="htmlLink" value="http://google.cl">
<button class="copyLink">Copy</button>
</div>
<div class="input-group">
<input type="text" class="htmlLink" value="http://microsoft.com">
<button class="copyLink">Copy</button>
</div>
<div class="input-group">
<input type="text" class="htmlLink" value="http://apple.com">
<button class="copyLink">Copy</button>
</div>
Any suggestion?
Thanks!
You can shorten the code little bit since you have a div wrapper and only one sibling:
$(".input-group .copyLink").click(function() {
$(this).siblings().select();
document.execCommand("copy");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
<input type="text" class="htmlLink" value="http://google.cl">
<button class="copyLink">Copy</button>
</div>
<div class="input-group">
<input type="text" class="htmlLink" value="http://microsoft.com">
<button class="copyLink">Copy</button>
</div>
<div class="input-group">
<input type="text" class="htmlLink" value="http://apple.com">
<button class="copyLink">Copy</button>
</div>
You need to bind event with your button, based on button event response, you need to find your input box using jquery DOM selector function like "prev". After this, execute your other task with input object.
Reference for jquery DOM Selector: jQuery: find input field closest to button
Your answer jsfiddle: https://jsfiddle.net/JackRyu/udk6za34/1/
You answer code
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<html>
<body>
<div class="input-group">
<input type="text" class="htmlLink" value="http://google.cl">
<button class="copyLink">Copy</button>
</div>
<div class="input-group">
<input type="text" class="htmlLink" value="http://microsoft.com">
<button class="copyLink">Copy</button>
</div>
<div class="input-group">
<input type="text" class="htmlLink" value="http://apple.com">
<button class="copyLink">Copy</button>
</div>
<body>
<script>
$('.input-group button').on('click',function(){
console.log('active');
var input=$(this).prev('input');
$(input).select();
document.execCommand('copy');
});
</script>
</html>

How to stop triggering an event after button click JS

I've written a function for displaying 2 text-boxes when user clicks a button. But the issue is when click these 2 buttons an event for another button in the form is fired. So I wrote a mouse click event for that Hide and Show functions. But still it's not working. When the show button clicks 2 text-boxes are showing and when hide clicks they disappear. I'll put my coding down below.
<div class="form-group">
<div class="col-sm-9">
<input type="text" id="height"/>
<input type="text" id="width"/>
<button id="hide">Hide</button>
<button id="show">Show</button>
</div>
</div>
$("show").click(function(){ #Mouse Click event for show button
$(document).ready(function(){
$("#input1").hide();
$("#input2").hide();
$("#hide").click(function(){
$("#input1").hide();
$("#input2").hide();
});
$("#show").click(function(){
$("#input1").show();
$("#input2").show();
});
});
});
Try this
$(document).ready(function() {
$("#height, #width").hide();
$("#hide").click(function() {
$("#height, #width").hide();
});
$("#show").click(function() {
$("#height, #width").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<div class="col-sm-9">
<input type="text" id="height" />
<input type="text" id="width" />
<button type="button" id="hide">Hide</button>
<button type="button" id="show">Show</button>
</div>
</div>
Just call click function inside document.ready. Also trigger events on proper element using appropriate selectors
$(document).ready(function() {
$("#hide").click(function() {
$("#height ,#width").hide();
});
$("#show").click(function() {
$("#height ,#width").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<div class="col-sm-9">
<input type="text" id="height" />
<input type="text" id="width" />
<button id="hide">Hide</button>
<button id="show">Show</button>
</div>
</div>

Jquery function for retrieving input values of the active checkbox when the page loads. JFIDDLE

I need to display the values of the selected checkbox when the page loads. Currently, the values are displayed when I click on a checkbox, but I need the values from the default checkbox when page loads.
Here if the link to my code: JFIDDLE
Here is a link to my page: My Website
Here is my code copy & paste:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>TEST LIST</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="simpleCart.js"></script>
</head>
<body>
<fieldset id="" class="" style="margin-top: 0px;font-variant: small-caps;letter-spacing: 2px;" data-role="controlgroup">
<input class="weight1" type="hidden" value="2.0" >
<input class="price1" type="radio" name="radio-choice-v-2" id="radio-choice-v-2a" value="20.00" checked="checked">
<label class="price_weight_lable1" style="display: flex;" for="radio-choice-v-2a">
<div style="flex:2;">2.0 grams</div>
<div style="flex:1;text-align: center;">$22.00</div>
</label>
<input class="weight2" type="hidden" value="3.5" >
<input class="price2" type="radio" name="radio-choice-v-2" id="radio-choice-v-2b" value="45.00">
<label class="price_weight_lable2" style="display: flex;" for="radio-choice-v-2b">
<div style="flex:2;">3.5 grams</div>
<div style="flex:1;text-align: center;">$45.00</div>
</label>
<input class="weight3" type="hidden" value="7.0" >
<input class="price3" type="radio" name="radio-choice-v-2" id="radio-choice-v-2c" value="90.00">
<label class="price_weight_lable3" style="display: flex;" for="radio-choice-v-2c">
<div style="flex:2;">7.0 grams</div>
<div style="flex:1;text-align: center;">$90.00</div>
</label>
</fieldset>
<script>
$('input[type=radio]').on( 'change', function(el){
$( '.weight_results' ).text( $(this).parent().prev().val() );
$( '.price_results' ).text( $(this).val() );
});
</script>
<div class="simpleCart_shelfItem">
<div class="item_price"> <!-- simplecart div -->
<div class="price_results"></div> <!-- price function result? -->
</div>
<div class="item_weight"> <!-- simplecart div -->
<div class="weight_results"></div> <!-- weight function result? -->
</div>
</div>
</body>
</html>
Like in my above comment here is an example. Just put this in your and then run the desired JS.
$( document ).ready(function() {
alert($("#myInput").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input id="myInput" type="text" value="SOME TEXT HERE">
Simply Add .change() at the last of your code to make the change event run on page load
$(document).ready(function(){
$('input[type=radio]').on( 'change', function(el){
$( '.weight_results' ).text( $(this).parent().prev().val() );
$( '.price_results' ).text( $(this).val() );
}).change(); // add .change to run the code on load
});
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<fieldset id="" class="" style="margin-top: 0px;font-variant: small-caps;letter-spacing: 2px;" data-role="controlgroup">
<input class="weight1" type="hidden" value="2.0" >
<input class="price1" type="radio" name="radio-choice-v-2" id="radio-choice-v-2a" value="20.00" checked="checked">
<label class="price_weight_lable1" style="display: flex;" for="radio-choice-v-2a">
<div style="flex:2;">2.0 grams</div>
<div style="flex:1;text-align: center;">$20.00</div>
</label>
<input class="weight2" type="hidden" value="3.5" >
<input class="price2" type="radio" name="radio-choice-v-2" id="radio-choice-v-2b" value="45.00">
<label class="price_weight_lable2" style="display: flex;" for="radio-choice-v-2b">
<div style="flex:2;">3.5 grams</div>
<div style="flex:1;text-align: center;">$45.00</div>
</label>
<input class="weight3" type="hidden" value="7.0" >
<input class="price3" type="radio" name="radio-choice-v-2" id="radio-choice-v-2c" value="90.00">
<label class="price_weight_lable3" style="display: flex;" for="radio-choice-v-2c">
<div style="flex:2;">7.0 grams</div>
<div style="flex:1;text-align: center;">$90.00</div>
</label>
</fieldset>
<div class="item_price"> <!-- simplecart div -->
<div class="price_results"></div> <!-- price function result? -->
</div>
<div class="item_weight"> <!-- simplecart div -->
<div class="weight_results"></div> <!-- weight function result? -->
</div>
Note: wrap code on $(document).ready() as
Icewine said

Categories