I have the following script used in html.twig page:
<script type="text/javascript" src="{{asset('/jquery-ui-1.11.2/external/jquery/jquery.js')}}"></script>
<script type="text/javascript" src="{{asset('/jquery-ui-1.11.2/jquery-ui.min.js')}}"></script>
<script type="text/javascript" src="{{asset('/js/jeoquery.js')}}"></script>
<script type="text/html" id="my_prototype">
<div class="form-horizontal">
<div class="form-group">
// my first textarea
</div>
<div class="form-group">
// my second textarea
</div>
<div class="form-group">
// my first input
<label for="my_date">Date</label>
<input type="text" id="my_date" name="my_datename" maxlength="10" class="form-control" />
</div>
</div>
</script>
My question is: How can I select "my_date" in jquery ? I wrote this, but it doesn't work:
$('#my_date').datepicker();
Thanks for your help,
Can you do the same with a jQuery object rather than a prototype?
e.g.: (I removed the id attributes so you can have more than one)
var $proto = $('<div class="form-horizontal">
<div class="form-group">
// my first textarea
</div>
<div class="form-group">
// my second textarea
</div>
<div class="form-group">
// my first input
<label>Date</label>
<input type="text" class="date_field" name="my_datename" maxlength="10" class="form-control" />
</div>
</div>");
This gives you a DOM structure you can insert where you need to.
Plus you can use
$proto.find('.date_field').datepicker();
...or you may have to insert it first and then call the datepicker extension.
I'm guessing you've put these tags between script tags because you're using it as a template.
Applying jquery-ui datepicker works on actual dom elements.
So you need to first apply your template and generate the "real" elements, then apply the datepicker.
Edit: and watch what happens with the id, when you generate multiple forms, you shouldn't have the same id multiple times. If it's transformed in something like "my_date_1", "my_date_2", maybe you're better off using a dedicated class for identifying the datepicker inputs instead of the id.
Related
I wanted to know how to display a value entered inside a textbox into a label by using the onkeyup method.
I am able to display it inside a textbox.
This is what i have done so far:
<script>
function multiply(value){
var x;
x= 2*value;
document.getElementById('out2x').value=x;
}
</script>
<body>
<div style="margin:auto; width:300px; background-color:lightblue; padding:5px;">
<label for="">Input</label>
<input type="text" name="" onkeyup="multiply(this.value);">
<br>
<label for="">Result(x2):</label>
<input type="text" id="out2x" name="" readonly>
</div>
</body>
I tried to set the id 'out2x' to label but it doesn't work.
Where do you actually have the script in the document? It should be just before the CLOSING body tag so that by the time it's reached, all the HTML will have been parsed. If the script runs before the HTML is parsed, your document.getElementById() statement won't find a matching element.
Also, the value of the input is always a string. You must convert that to a number in order to do math with it. There are several ways to do this and you need to be prepared for situations where the input incorrectly has a non-numeric value in it, but below, I've converted the value by prepending a + to it.
A couple of other things....
You are not using the label element properly. The for attribute must have a value that matches the id attribute value of the form element the label is "for" or you can nest the form element within the label so that it knows what element it relates to.
Don't use inline JavaScript - separate it into the JavaScript code.
<body>
<div style="margin:auto; width:300px; background-color:lightblue; padding:5px;">
<label>Input
<input type="text">
</label>
<br>
<!-- Not always best to use an input for output. -->
<span>Result(x2):
<span id="out2x"></span>
</span>
</div>
<!-- Place your script just before the closing body tag
so that by the time it's reached, all the HTML elements
will have been parsed. -->
<script>
// Do your event handling in JavaScript, not with inline JavaScript
document.querySelector("input").addEventListener("keyup", function(event){
// You must convert the input string to a number
document.getElementById('out2x').textContent = 2* +this.value;
});
</script>
</body>
In Your Case, I have a simple Keyup with jQuery like this
$('#value').keyup(function (){
$('#copy-value').val($(this).val());
});
So This Snippet for Example:
$('#value').keyup(function (){
$('#copy-value').val($(this).val());
});
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="margin:auto; width:300px; background-color:lightblue; padding:5px;">
<label for="">Input</label>
<input id="value" type="text" name="">
<br>
<label for="">Result(x2):</label>
<input id="copy-value" type="text" name="" readonly>
</div>
</body>
Looking for something to take data from a form like this one:
<form id="rendered-form" name="rendered-form">
<div class="rendered-form">
<div class="fb-text form-group field-text-1534368808722">
<label class="fb-text-label" for="text-1534368808722">Name</label><input class="form-control" id="text-1534368808722" name="text-1534368808722" type="text">
</div>
<div class="fb-text form-group field-text-1534368811041">
<label class="fb-text-label" for="text-1534368811041">Email</label><input class="form-control" id="text-1534368811041" name="text-1534368811041" type="text">
</div>
<div class="fb-text form-group field-text-1534368811041">
<label class="fb-text-label" for="text-1534368811041">Link</label><input class="form-control" id="text-1534368811041" name="text-1534368811042" type="text">
</div>
</div>
</form>
And insert the data into a HTML template. For example:
<div class="name">FORM TEXT HERE</div>
<div class="email">FORM TEXT HERE</div>
link
I would love to use Vue.js for this if at all possible, I've been playing around with it and this seems like something it would be capable of.
I'm trying to use this to quickly make AMP pages (I know I could do it programmatically, but due to restrictions I cannot at this time). I don't want to have a database, it doesn't need to store this. I just want to be able to insert my data, press a button, and have it spit out HTML or an HTML file based on the template and provided data and be done.
If you already handled the form submit, you can change the content of your divs with js selectors, like this:
document.getElementsByClassName("name")[0].innerHTML = nameFromFormInput;
Say I have this div block:
<div id="some_id" style="display: none;">
<form action="someAction" method="post">
<input type="hidden" name="some-name" value="some-value">
</form>
</div>
I need to the select the form inside this div. I am able to select the div by $('#some_id') but when I try to select the form by $('#some_id').find('form') (or get or $('#some_id:form')) I get this error:
Uncaught TypeError: $(...).find is not a function
Any possible solution?
There is nothing wrong with what you attempted, provided that jQuery is properly included in your page and you are properly referencing it with $ or jQuery if it is in noConflict mode.
console.log(
$('#some_id').find('form').get()
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="some_id" style="display: none;">
<form action="someAction" method="post">
<input type="hidden" name="some-name" value="some-value">
</form>
</div>
You don't want a : to select the child you want >
Your selector should look like this:
$('#some_id > form')
Also make sure you are including jQuery, it looks like your code cannot find it.
How to clone following html without persisting the field values?
<form method=POST action="/url">
<div class="form-group" data-answer>
<div class="pull-left"><label><input type="checkbox" name="answer[1][is_correct]" value="true"> Correct Answer</label></div>
<div class="pull-right">
</span>
</div>
<input type="text" class="form-control" name="answer[1][body]" placeholder="Possible answer">
</div>
<div class="form-group" data-answer>
<div class="pull-left"><label><input type="checkbox" name="answer[2][is_correct]" value="true"> Correct Answer</label></div>
<div class="pull-right">
</span>
</div>
<input type="text" class="form-control" name="answer[2][body]" placeholder="Possible answer">
</div>
. . .
<button type="submit">Submit</button>
</form>
I can see only 3 possible choices here. However, all of them come with major flaws:
.clone() the .form-field normally and reset the field values.
Problem: resetting all the values one by one is cumbersome and is not a future-proof solution. For example, if more fields are added into the .form-group, their values will need to be cleared separately.
Include a hidden .form-group as a template on the page.
Problem: as you see, the input fields contain enumerated names like: answer[1][body]. It is convenient to clone the last .form-group and just increment the value by 1. Cloning the templated .form-group will be lacking this flexibility.
Read the fields as raw html and transform them into JQuery object
Problem: this seems to be a clear solution to me, however I couldn't get it working. The code $.parseHTML($('.form-group').html()) does not return a valid JQuery object, which I need to use .find() and other methods on.
What will be an effective and elegant solution to this problem?
Try this code:
$("button").click(function(){
var t = $("form").clone().appendTo("#clonedForm");
$(t).find("input[type=checkbox],input[type=text], textarea").removeAttr("checked").val('');
});
I would like to create a form field which has an icon in it, let's say a plus-sign. When this icon is clicked, a new identical form field appears, but with a minus-sign in it. And as you guessed, the minus-sign removes the form field again.
I would like to do this using Bootstrap (3.2.0) and jQuery.
What is the best way to do this? I would like to put a limit on the number of fields (let's say 3) and also not have duplicate id fields. Also, I would like the icon to be inside the input.
HTML file:
<div class='container'>
<div class='row marketing'>
<div class='col-lg-15'>
<form class='form-horizontal'>
<div class="form-group has-feedback">
<label id="keywordLabel" for="keyword" class="col-sm-2 control-label">Keywords:</label>
<div id="keywordList" class="col-sm-10">
<input id="keyword" type="text" name="keyword" class="form-control"></input>
<span id="addKeyword" class="glyphicon glyphicon-plus form-control-feedback"></span>
</div>
</div>
</form>
</div>
</div>
</div>
JavaScript file:
$(document).ready( function() {
$('#addKeyword').on('click', function() {
$('#keywordList').append(
"<input id='keyword' class='form-control' type='text' name='keyword'><span id='removeKeyword' class='glyphicon glyphicon-minus form-control-feedback'></span>"
);
});
});
For my code in JSFiddle, click here.
Edit:
I'm still messing around, if I remove the "form-control-feedback"-class in the javascript, it works better.
For now I have:
<div class='container'>
<div class='row marketing'>
<div class='col-lg-15'>
<form class='form-horizontal'>
<div class="form-group has-feedback">
<label id="keywordLabel" for="keyword" class="col-sm-2 control-label">Keywords:</label>
<div id="keywordList" class="col-sm-10">
<div class="form-control">
<input id="keyword" type="text" name="keyword" class=""></input>
<span id="addKeyword" aria-hidden="true" class="glyphicon glyphicon-plus form-control-feedback"></span></div>
</div>
</div>
</form>
</div>
</div>
And JS:
$(document).ready(function () {
$('#addKeyword').on('click', function () {
$('#keywordList').append("<div class='form-control'><input id='x' class='form-control' type='text' name='keyword'></input><span id='removeKeyword' aria-hidden='true' class='glyphicon glyphicon-minus'></span></div>");
});
});
Still not perfect, but closer already.
Original text:
First of all, your jsfiddle doesn't show the icon, because you didn't activate bootstrap on it. if I activate the bootstrap extension, I can see the "+"
I'm not sure what you're asking us, as there is no real question in your post, but if I click the "+", it adds a field. The problem is that the "-" goes in front of the "+" and so you can't see it.
You're also adding duplicate ID's by doing, which is never a good thing.
If you can edit your post, and add the question, I can look to answer what you want to know. :-)
You need to load the appropriate external resources in Jsfiddle
bootstrap.min.js and bootstrap.min.css
see: http://jsfiddle.net/u4e64quc/4/
Alternatively, check bootstrap in the Jsfiddle options and no need to load external resources --this also fixes the issue with the icon outside of the form field pointed out in the comment