I' ve this problem only with firefox. I' ve a function called by click event on a button tag but this is called also when I pick an option from my select tag. Anyone knows how handle?
jQuery
$("#search").click(function () {
var color = $("#selectedColor").html();
console.log("color to be sended -> " + color);
var input = $("<input type='hidden' id='color' name='color' value='" + color + "'/>" );
$("#form").append(input);
$("#form").submit();
});
Html
<label>Selected Area:
<span>
<p id="selectedPart">Area</p>
<p id="selectedColor">Color</p>
<button id="search">Search</button>
</br>
<form action="show" id="form" method="get"></form>
<select id="selectNii" form="form" multiple="yes"></select>
</span>
</label>
Related
I am trying to change the value of a placeholder attribute tag based on a value entered by a user in a user input field.
I have tried embedding script tags in the html string I am serving/loading to the page in order to use an eventListener to target the id and store the new value in a variable that is declared outside of the tags in my html string.
Here is the code I am experimenting with:
// Endpoint Resource
"<strong>Endpoint Resource</strong>" +
"<script>" +
"document.getElementById(\"inputTokenRequestorID\").addEventListener(\"change\", function(event){" +
"tokenRequestorID = event.target.value;" +
"});" +
"uri = \"/vtis/tokenRequestors/\" + tokenRequestorID;" +
"</script>" +
"<div class=\"form-group\">" +
"<label for=\"eventID\">Resource</label>" +
"<input class=\"form-control mx-sm-3 resource\" type=\"text\" placeholder=" + uri + " readonly>" +
"<small id=\"InlineHelp\" class=\"text-muted\">" +
//"GUID Type used for tracking." +
"</small>" +
"</div>"
How do I capture the value of an input field after a user enters the data into the field, store it in a variable declared outside of the script tag, and then put its value as another input fields placeholder value?
Thanks.
The basic idea is this:
<script>
function change() {
var input = document.getElementById('userInput').value;
document.getElementById('myInput').placeholder = input;
}
</script>
<input type="text" id="userInput" placeholder="Enter something here.">
<p>
Replaced Placeholder:
</p>
<input type="text" id="myInput" placeholder="Watch me change">
<p>
<button onclick="change()">Change Placeholder</button>
</p>
https://jsfiddle.net/gugui3z24/ceomk9xb/
Or if you want something more dynamic:
<input type="text" id="userInput" placeholder="Enter something here.">
<p>
Replaced Placeholder:
</p>
<input type="text" id="myInput" placeholder="Watch me change">
<script>
document.getElementById('userInput').addEventListener('input', function() {
var input = document.getElementById('userInput').value;
document.getElementById('myInput').placeholder = input;
});
</script>
https://jsfiddle.net/gugui3z24/ceomk9xb/1/
I am trying to write the following source code for displaying the manually entered(From Keyboard) text in text boxes using the submit button:
HTML + JavaScript Source:
<html>
<head>
<title>Insert Values</title>
</head>
<body>
<form id="form1">
Title: <input type="text" id="title1" size="25"><br /><br />
Description: <input type="text" id="desc1" size="55"><br /><br />
<input type="button" value="Submit" onclick="doit();">
</form>
<script type="text/javascript">
function doit(){
var title = document.getElementById("title1").value;
var desc = document.getElementById("desc1").value;
document.write("<h3>Title : </h3>" + title + <br />);
document.write("<h3>Description : </h3>" + desc);
}
</script>
</body>
When I use the debugger to trace errors, it gives the message "unfound syntax error" using the browser's debugger. When the webpage is loaded in the browser, it displays the text boxes & the submit button, though after entering text & clicking on the submit button, nothing happens!
Here you are:
function doit() {
var title = document.getElementById("title1").value;
var desc = document.getElementById("desc1").value;
document.write("<h3>Title : </h3>" + title + "< br / >"); // HERE
document.write("<h3>Description : </h3>" + desc);
}
Hope this help.
You just forgot to wrap <br /> by quotes in 15th line:
document.write("<h3>Title : </h3>" + title + "<br />");
also close your html tag
</html>
function doit(){
var myValue=document.getElementById('myTextBox').value;
if(myValue==0){
alert('Pleae Enter Real Value');
}
var myTitle=document.getElementById('title');
myTitle.innerHTML=myValue;
}
<h1 id="title">Title</h1>
<input type="text" id="myTextBox">
<input type="submit" value="Click me!!" onClick="doit()">
I have a form where user can add files to be uploaded. Change event on that input adds new input the same type and so on. But the new inputs have to have "X" character with click event attached to it to be able to remove the input field and the X chracter.
The form:
<form id="upload_form">
<div class="p_file">
<p class="icon">X</p>
<input type="file" name="userfile1" size="40" class="required" />
</div>
</form>
and the JavaScript:
$('#upload_form input[type="file"]').change(function(){
addUploadField($(this));
});
function addUploadField($field)
{
$current_count = $('#upload_form input[type="file"]').length
$next_count = $current_count + 1;
$field.parent('p').after('
<div class="p_file" >
<p class="icon">X</p>
<input type="file" name="userfile'+$next_count+'" size="40" />
</div>
');
$field.unbind('change');
$nextField = $('#upload_form input[type="file"]').last();
$nextField.bind('change',function(){
addUploadField($(this));
});
$("#upload_form .icon").on('click',function(){
removeUploadField($field);
});
}
function removeUploadField($field)
{
$field.parent('p').remove();
}
The code above remove all the fields after the clicked 'X' character. What I want to do is to remove only the next input field.
I tried to prepare this example in jsFiddle, but I can't make this work. Anyhow maybe this would help.
Putting "div" tag inside "p" tag is the main problem
Remove is corrected in this code
Note: In your html code "div" is is added inside "p" tag, this is invalid practice
HTML:
<form id="upload_form">
<div class="p_file">
<div class="icon">X</div>
<input type="file" name="userfile1" size="40" class="required" />
</div>
</form>
Script:
$('body')
.delegate('#upload_form input[type="file"]', 'change', inputChanged)
.delegate('#upload_form .icon', 'click', removeField);
function inputChanged() {
$current_count = $('#upload_form input[type="file"]').length;
$next_count = $current_count + 1;
$(this).closest('.p_file').after(
'<div class="p_file" ><div class="icon">X</div>' +
'<input type="file" name="userfile'
+ $next_count + '" size="40" /></div>');
}
function removeField(){
$(this).closest('.p_file').remove();
return false;
}
Link: http://jsfiddle.net/cBrQX/2/
I'm creating a quiz website for a class, and I am having trouble formatting the page where the user creates questions. I would like to have additional information pertaining a specific question type pop up when the user clicks a radio button. I would then like to have even more additional information pop up if the user clicks a button created in the initial additional information.
So it'd start off looking like this
then it'd look like this
then once the user clicked the Add Option button a few times, it'd look like this
To achieve this I am trying to use jquery to add the new content. However, I can't seem to get that content to display. Here's the current code
In jsp
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="QuestionsCreate.js"></script>
<meta charset="UTF-8">
<title>Quiz Creation</title>
</head>
<body>
<h1>Create Your Quiz</h1>
<form action="QuestionsCreateServlet" method="post">
<h2>Question Type</h2>
<input type="radio" name="type" class="type" id="multipleChoice"
value="multipleChoice" />
<label for="multipleChoice">Multiple Choice</label><br/>
<input type="radio" name="type" class="type" id="fillBlank"
value="fillBlank" />
<label for="fillBlank">Fill-in-the-Blank</label><br/>
<input type="radio" name="type" class="type" id="pictureResponse"
value="pictureResponse" />
<label for="pictureRsponse">Picture Response</label><br/>
<input type="radio" name="type" class="type" id="textResponse"
value="textResponse" />
<label for="textResponse">Text Response</label><hr/>
<div class="jspf"></div>
<input type="submit" name="button" id="button" value="Finish" />
</form>
</body>
</html>
In javascript
$(document).ready(function() {
$(".type").click(function(){
$(".jspf").html("<jsp:include page='WEB-INF/" +
$(".type").attr("value") + ".jspf' />");
$("#button").attr("value", "Add");
});
var nOptions = 1;
$("#add-option").click(function(){
++nOptions;
$(".options").append("<input type='checkbox' name='option" +
nOptions + "' value='" + nOptions + "' /> " +
"<input name='name" + nOptions + "' /><br />");
});
var nBlanks = 1;
$("#add-answer").click(function() {
++nBlanks;
$(".fill-blank-answer").append("<input name='answer" + nBlanks +
"' /><br/>");
});
});
Sample jspf
<h3>Question</h3>
<input name="prompt" />
<h3>Options</h3>
Check the options that denote the correct answer<br/>
<div class="options">
<input type='checkbox' name='option1' value='1' />
<input name='name1' /><br />
</div>
<input type="button" value="Add Option" id="add-option" /><hr/>
I've also tried to move the jspf code into the javascript, but that didn't work either.
Is there a way I can add content dynamically to my webpage based off of dynamically added content? Thanks in advanced!
The issue you're having is you're trying to inject server-side JSP tags into a client's browser. Take this line for example:
$(".jspf").html("<jsp:include page='WEB-INF/" +
$(".type").attr("value") + ".jspf' />");
Once that line of javascript has executed, the CLIENT's brower now has the markup:
<div class="jspf"><jsp:include page="wEB-INF/pictureResponse.jspf" /></div>
Broswers don't know what to do with <jsp:include> tags, so they just silently ignore them.
What you need to do is map the jspf you're trying to include to a url and use something like:
$(".jspf").load("/fragments/pictureResponse.jspf");
$.load sends an AJAX request to from the client browser back to the server, retrieves a bit of HTML from the server, then inserts that in to the elements that match the CSS selector ".jspf".
You also have an issue with your initial click handler.
$(".type").attr("value")
$.attr always returns the attribute value of the first matched element, so no matter what the user clicked, that line is going to evaluate to "multipleChoice". What you probably want to do is:
$(this).attr("value")
In the context of a click handler, "this" is going to refer to what the user just clicked.
UPDATE
Here's how I would add the "add option" click handler once the secondary content has been loaded:
$('jspf').load('/fragments/pictureResponse.jspf', function() {
$('#add-option').click(function() {
nOptions++;
$('.options').append('<input type="checkbox" name="option' + nOptions +
'" value="' + nOptions + '" /> <input name="name' + nOptions + '" /><br />");
});
});
$.get("${ctx}/store/terminalApply/applyTemplate?terminalType=${terminalType}&index="+num, function(data){
$("#contentDiv").append(data);
});
data was a page content
I'm working on a tagging system and I want users to be able to add and remove tags on the page. for each one thats added I am displaying a small div with the tag and an x to remove the tag. I have the adding functionality working, but I'm not sure how to go about making it so I can remove them. I also have a hidden input which should hold all the values so that when the information is submitted I can use it.
Heres my attempt that doesn't work:
function tagsremove(tag) {
$('#hiddentags').val().replace('/'+tag+'\,\s/', '');
$("#tagdiv-"+tag.replace(" ","_")).fadeOut('normal', function(){
$(this).remove();
});
}
$(document).ready(function(){
$('#tagbutton').click(function(){
var tags = $('#tagsbox').val().split(", ");
for (var i in tags) {
$('#hiddentags').val($('#hiddentags').val() + tags[i] +", ");
$('#curtags').append("<div class='tag'>" + tags[i] + " <a href='#' id='#tagdiv-"+tags[i].replace(" ", "_")+"' onclick='tagsremove(\""+tags[i]+"\");' >x</a></div>");
}
$('#tagsbox').val('');
});
});
heres the html to go with it:
<div class='statbox'>
<form method='post' action='post.php' id='writeform'>
<p class='subtitle'>Title</p>
<input type='text' name='title' id='titlebox' /><br />
<p class='subtitle'>Body</p>
<textarea id='postbox' name='body' rows='10'></textarea><br />
<p class='subtitle'>Tags</p>
<input type='text' id='tagsbox' /><input type='button' id='tagbutton' value='Add' />
<p class='subsubtitle'>Seperate by commas (eg. "programming, work, job")</p>
<div class='subsubtitle' id='curtags'>Current Tags:</div>
<input type='hidden' value='' name='tags' id='hiddentags' />
</form>
</div>
Make each of your tag divs have a relevant ID. For, say, the "play pen balls" tag, your ID could be "tagdiv-play_pen_balls". Now you can just do
function removeTag(tag) {
$("#tagdiv-"+tag.replace(" ","_")).remove();
}
to remove the visible div.
(I'm not sure if that's what you were asking for, though...)
Instead of using .val('') you should be using .html('');
http://docs.jquery.com/Manipulation