I'm trying to create a simple webpage using Flask, I'm trying to capture the text written in a textfield in a javascript variable and then display it on console, when the user presses a button.
Here is the code
HTML
<script type="text/javascript" language="javascript" src="{{url_for('static',filename='js/main.js')}}"></script>
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<input type="text" id="txtWord" name="search" placeholder="Search..." >
</div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<input type="text" name="search" placeholder="# Result..." id="inputNumResults">
</div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4 text-center">
<br>
<button class="btn btn-success" type="button" id="buttonSearch" onclick="getText()">Search for words</button>
</div>
<div class="col-md-4"></div>
</div>
Javascript
function getText() {
var txt = document.getElementById('txtWord').innerHTML;
console.log(txt);
}
Here is working solution
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<input type="text" id="txtWord" name="search" placeholder="Search..." >
</div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<input type="text" name="search" placeholder="# Result..." id="inputNumResults">
</div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4 text-center">
<br>
<button class="btn btn-success" type="button" id="buttonSearch" onclick="gt()">Search for words</button>
</div>
<div class="col-md-4"></div>
</div>
<script>
function gt() {
var txt = document.getElementById("txtWord").value;
alert(txt);
}
</script>
https://jsfiddle.net/ovtkmnmn/3/
I believe in Your case the problem is about order of loading this js file.
Always check what console displays, when I used "On load" load type it clearly returned an error that the function is not defined
You should simply clear your browser's cache. A full browser's cache can cause such a problem.
(function () {
function getText() {
var txt = document.getElementById('txtWord').value;
console.log(txt);
}
document.getElementById('buttonSearch').addEventListener('click', getText, true);
})();
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<input type="text" id="txtWord" name="search" placeholder="Search..." >
</div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<input type="text" name="search" placeholder="# Result..." id="inputNumResults">
</div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4 text-center">
<button class="btn btn-success" type="button" id="buttonSearch">Search for words</button>
</div>
<div class="col-md-4"></div>
</div>
</div>
I was having the same problem using jQuery until I figure out that I declared the function inside the $(document).ready() method :
$(document).ready(function () {
function name(){} // not working
}
Related
I want to be able to check if the input is checked and if it is checked then grab the data associated with that input and display it into another div. here is my code.
var levels = $('input:checked + label').map(function() {
return $(this).text();
}).get();
//alert(levels);
document.getElementById('listprice').innerHTML = levels;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row sln-service sln-service--3181">
<div class="col-md-12">
<div class="row sln-steps-info sln-service-info">
<div class="col-xs-2 col-sm-1 sln-checkbox sln-steps-check sln-service-check">
<div class="sln-checkbox">
<input type="checkbox" name="sln[services][3181]" id="sln_services_3181" value="1" data-price="175" data-duration="180">
<label for="sln_services_3181"></label>
</div>
</div>
<div class="col-xs-10 col-sm-8">
<label for="sln_services_3181">
<h3 class="sln-steps-name sln-service-name">Service Title</h3> <!-- collect this -->
</label>
</div>
<div class="col-xs-2 visible-xs-block"></div>
<h3 class="col-xs-10 col-sm-3 sln-steps-price sln-service-price">$175</h3> <!-- collect this -->
</div>
<div class="row sln-steps-description sln-service-description">
<div class="col-md-12"><hr></div>
<div class="col-sm-1 hidden-xs"> </div>
<div class="col-sm-10 col-md-9">
<label for="sln_services_3181">
<p></p>
<span class="sln-steps-duration sln-service-duration"><small>Duration:</small> 03:00</span> <!-- collect this -->
</label>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-11">
<span class="errors-area" data-class="sln-alert sln-alert-medium sln-alert--problem">
<div class="sln-alert sln-alert-medium sln-alert--problem" style="display: none" id="availabilityerror">
Not enough time for this service
</div>
</span>
</div>
</div>
</div>
<div class="demo">
You are booking a
<div id="listprice">
<!-- display collected here -->
</div>
</div>
I would like to collect the data and show it back in a div somewhere else on the page. Any jquery to help achieve this would be great.
$(document).ready(function(){
var checkedItems = $('input[type=checkbox]:checked');
checkedItems.each(function(){
var serviceName = $(this).parents('.sln-service-info').find('.sln-service-name').html();
var servicePrice = $(this).parents('.sln-service-info').find('.sln-service-price').html();
$('#listprice').append('<div>Title - '+serviceName +' Price - ' +servicePrice +'</div>');
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row sln-service sln-service--3181">
<div class="col-md-12">
<div class="row sln-steps-info sln-service-info">
<div class="col-xs-2 col-sm-1 sln-checkbox sln-steps-check sln-service-check">
<div class="sln-checkbox">
<input type="checkbox" checked name="sln[services][3181]" id="sln_services_3181" value="1" data-price="175" data-duration="180">
<label for="sln_services_3181"></label>
</div>
</div>
<div class="col-xs-10 col-sm-8">
<label for="sln_services_3181">
<h3 class="sln-steps-name sln-service-name">Service Title</h3> <!-- collect this-->
</label>
</div>
<div class="col-xs-2 visible-xs-block"></div>
<h3 class="col-xs-10 col-sm-3 sln-steps-price sln-service-price">$175</h3> <!-- collect this -->
</div>
<div class="row sln-steps-description sln-service-description">
<div class="col-md-12"><hr></div>
<div class="col-sm-1 hidden-xs"> </div>
<div class="col-sm-10 col-md-9">
<label for="sln_services_3181">
<p></p>
<span class="sln-steps-duration sln-service-duration"><small>Duration:</small> 03:00</span> <!-- collect this -->
</label>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="demo">
You are booking a
<div id="listprice">
<!-- display collected here -->
</div>
</div>
I want to save what the user types in the input as a variable when the user clicks the button. Than, I want to console.log the new variable with the users information. What am I doing wrong?
<html>
<div class="container bg-light">
<div class="row">
<div class="col-md-3 bg-danger">
</div>
<div class="col-md-6">
<div class="form-group text-center">
<h1>Saving User Data as a Variable with Javascript</h1>
<div class="form-group">
<input id="userdata" class="form-control">
</div>
<div class="form-group mx-auto text-center">
<button type="button" onclick="saveUserData()" class="btn btn-danger btn-lg mx-auto w-50 text-center">Check console</button>
</div>
</div>
</div>
<div class="col-md-3 bg-danger">
</div>
</div>
</div>
<script>
function saveUserData()
{
// store the tag with id="sign" in var userdata
var userdata = document.getElementById("userdata");
}
// confirm the element exists and what value the user submits
console.log(userdata);
console.log("users value is: " + userdata.value);
</script>
</html>
function saveUserData() {
var name = document.getElementById('userdata').value;
console.log("users value is: " + name);
}
<div class="container bg-light">
<div class="row">
<div class="col-md-3 bg-danger">
</div>
<div class="col-md-6">
<div class="form-group text-center">
<h1>Saving User Data as a Variable with Javascript</h1>
<div class="form-group">
<input id="userdata" class="form-control">
</div>
<div class="form-group mx-auto text-center">
<button type="button" onclick="saveUserData()" class="btn btn-danger btn-lg mx-auto w-50 text-center">Check console</button>
</div>
</div>
</div>
<div class="col-md-3 bg-danger">
</div>
</div>
</div>
try this
function saveUserData() {
var userdata = document.getElementById('userdata').value;
console.log("users value is: " + userdata);
}
I'm using jQuery dialog to gather the informations from users then append to my desired div. This function works very well, but when comes to edit/update my contents, I have no ideas how to do.
Front-Ends HTML
<li class="description_panel">
<a id="editPanel" href="#"></a>
<a id="closeBtn" href="#" class="closeButton"></a>
<div class="panel_title">
<h2>**Subscribe Here!**</h2>
</div>
<div class="panel_img">
<img width="320px" src="link_to_img_url"/>
</div>
<div class="panel_description">
<p>My paragraph 1</p>
<p>My paragraph 2</p>
</div>
</li>
Edit Panel
<div id="edit-dialog-form" title="Edit Panel">
<form id="formUpdatePanel">
<div class="form-group">
<div class="rows">
<div class="col-md-12">
<div class="col-lg-12">
<h5>Panel title::</h5>
<input style="margin-bottom:20px;" id="updatePanelTitle" class="form-control input-lg" name="title" placeholder="Panel Title" type="text"></input>
</div>
</div>
</div>
<div class="rows">
<div class="col-md-12">
<div class="col-lg-12">
<h5>URL to image: </h5>
<input style="margin-bottom:20px;" id="updatePanelImageURL" class="form-control input-lg" name="imageURL" placeholder="Link to Image URL" type="text"></input>
</div>
</div>
</div>
<div class="rows">
<div class="col-md-12">
<div class="col-lg-12">
<h5>Panel description:</h5>
<textarea id="updatePanelDescription" rows="5" cols="50" style="width:312px"></textarea>
</div>
</div>
</div>
</div>
</form>
</div>
JQuery
$('#editPanel').click(function(){
editDialog.dialog("open");
});
var editDialog = {...};
function updateDialog {
}
How to retrieve all the inputs values and textarea value and display in the dialog input box and update/overwrite the contents again.
I'm not exactly sure what it is that i need, so the following explanation may not be clear - please let me know if not.
I want to slideToggle a specific clicked div, the code i currently have of course slideToggle's all instances of the div with a class of .open-statement, but i want to only toggle the one instance of this class that appears inside the parent div .agenda-content. There will be numerous instances of .open-statement on the page eventually, but only one of them should toggle (the one that's inside the current clicked div).
HTML
<div class="agenda-content">
<div class="row stance-row">
<div class="col-xs-3 no_padding">
1
</div>
<div class="col-xs-2">
Obamacare
<button class="btn btn-orange">Remove Stance</button>
</div>
<div class="col-xs-2">
Add jQuery UI here
</div>
<div class="col-xs-2">
34
</div>
<div class="col-xs-2 no_padding">
Wayne Rooney
</div>
</div>
<div class="row no-row-style">
<div class="open-statement">
<div class="col-xs-4 col-xs-offset-1">
<div class="your-statement">
<textarea placeholder="Please write your statement"></textarea>
<button class="btn btn-orange">Edit</button>
</div>
</div>
<div class="col-xs-7 no_padding">
<div class="statement-actions">
<button class="btn btn-alert">Deactivate</button>
<button class="btn btn-lt-secondary">View Debates</button>
<button class="btn btn-orange">Unsupport</button>
</div>
</div>
</div>
</div>
<div class="row stance-row">
<div class="col-xs-3 no_padding">
2
</div>
<div class="col-xs-2">
Raise Minimum Wage
<button class="btn btn-orange">Take a Stance</button>
</div>
<div class="col-xs-2">
Add jQuery UI here
</div>
<div class="col-xs-2">
34
</div>
<div class="col-xs-2 no_padding">
Stephen King
</div>
</div>
<div class="row no-row-style">
<div class="open-statement">
<div class="col-xs-4 col-xs-offset-1">
<div class="your-statement">
<textarea placeholder="Please write your statement"></textarea>
<button class="btn btn-orange">Edit</button>
</div>
</div>
<div class="col-xs-7 no_padding">
<div class="statement-actions">
<button class="btn btn-alert">Deactivate</button>
<button class="btn btn-lt-secondary">View Debates</button>
<button class="btn btn-orange">Unsupport</button>
</div>
</div>
</div>
</div>
</div>
jQuery
$(document).ready(function () {
$(".stance-row").click(function () {
$(".agenda-content").find(".open-statement").slideToggle();
});
});
.agenda-content is the parent of all .open-statement. You need to be more specific. Use .next and .find() :
$(document).ready(function () {
$(".stance-row").click(function () {
$(this).next().find(".open-statement").slideToggle();
});
});
You are almost there, you just need to change your code to get respective next item.
$(document).ready(function () {
$(".stance-row").click(function () {
$(this).next("div.row").find(".open-statement").slideToggle();
});
});
DEMO : http://jsfiddle.net/6GMj7/
Cheers,
Ashok
Use this:
$(this).closest(".agenda-content").find(".open-statement").slideToggle();
I`m use front-end framework Foundation. How i can in this menu enable Log in button only if Login and Password input filled text.
<form data-abide="ajax">
<div class="row">
<div class="large-12 columns">
<input type="text" placeholder="Login" />
</div>
</div>
<div class="row">
<div class="large-12 columns">
<input type="text" placeholder="Password" />
</div>
</div>
<div class="row">
<div class="large-12 columns text-center">
Log in
</div>
</div>
<div class="row">
<div class="large-12 columns text-center">
<br />Register
</div>
</div>
<div class="row">
<div class="large-12 columns text-center">
<br />Forgot password?
</div>
</div>
</form>
You could add a function to watch the onkeypress listener for the input box. Here is a working fiddle of how to do it on the username and you could do something similar for the password input as well.
http://jsfiddle.net/fFLq4/
Add a couple element id's to your elements:
<form data-abide="ajax">
<div class="row">
<div class="large-12 columns">
<input type="text" id="loginTxtBox" placeholder="Login" />
</div>
</div>
<div class="row">
<div class="large-12 columns">
<input type="text" placeholder="Password" />
</div>
</div>
<div class="row">
<div class="large-12 columns text-center">
Log in
</div>
</div>
<div class="row">
<div class="large-12 columns text-center">
<br />Register
</div>
</div>
<div class="row">
<div class="large-12 columns text-center">
<br />Forgot password?
</div>
</div>
</form>
And add the javascript function to listen for the keypress:
var textBox = document.getElementById("loginTxtBox");
textBox.onkeypress=function(textBox){
if(this.value.length >= 5)
{
document.getElementById("loginButton").className = "button tiny";
}
else
{
document.getElementById("loginButton").className = "button tiny disabled";
}
};
This will only activate your login button once you have at least 5 characters in it. Apply this to your password input as well.
If I understand this correctly, you would like to show the login form only if the user clicks on the Login Link.
To achieve this, I would suggest moving the links outside the and use any of these (toggle/show/slide) in jQuery to show it on click.
Here is the modified HTML:
<form id="loginForm" data-abide="ajax">
<div class="row">
<div class="large-12 columns">
<input type="text" placeholder="Login" />
</div>
</div>
<div class="row">
<div class="large-12 columns">
<input type="text" placeholder="Password" />
</div>
</div>
</form>
<div class="row">
<div class="large-12 columns text-center">
<a id="login" href="#" class="button tiny disabled">Log in</a>
</div>
</div>
<div class="row">
<div class="large-12 columns text-center">
<br />Register
</div>
</div>
<div class="row">
<div class="large-12 columns text-center">
<br />Forgot password?
</div>
</div>
And here is a working fiddle of how to show/hide the login form:
http://jsfiddle.net/9C4s7/
The commented line in the js toggles the slide (clicking the link will show the form, clicking it again will hide it). The active line will only make it slide down once clicked. So, you go ahead and choose whichever works best for you!