Javascript link builder within HTML - javascript

I'm trying to build a... link builder to ease some of my day-to-day tasks. I can't make it work though, and would really appreciate some help:
<form target="">
ID one:
<input type="text" name="IDone" id="ID1">
ID two:
<input type="text" name="IDtwo" id="ID2">
<button value="go" id="myButton">build</button>
<script type="text/javascript">
document.getElementById("myButton").onclick = function () {
location.href =
"https://first.part.com/" + document.getElementById("ID1").value +
"?act=setsecond_part=" + document.getElementById("ID2").value;
};
</script>
</form>
The idea is very simple:
first field (ID one) gets the data that's put in it;
second field (ID two) gets the data that's put in it;
the "build" button actually goes to link that's comprised of https://first.part.com/ + + <?act=setsecond_part=> + <"ID2">.
Thank you for your assistance!
JPM

Delete a form tag and everything will be work fine :)

Related

JavaScript only changes text of first iteration with thymeleaf

I hope you are all well.
I have a school assignment, and I want to dynamically be able to change the name of a 'project'. This assignment is about projects. The way I've done it right now works with the first 'project' from a list of 'projects' iterated through with thymeleaf. I'm aware that what I've done right now is absolutely bad code behavior, but we have had no teaching in JS yet. But I really wanted this feature.
I don't know how to make this work for each project preview, right now it works for the first preview, but for the rest it just erases the project name from database. (see picture)
<div class="projects" th:each="projectNames : ${listOfProjects}">
<form action="deleteProjectPost" method="post">
<input type="hidden" th:value="${projectNames.projectID}" name="deleteID">
<input type="image" src="delete.png" alt="Submit" align="right" class="deleteProject" onclick="return confirm('Are you sure that you want to delete this project?')">
</form>
<form action="/editProjName" method="post">
<input type="hidden" name="projectID" th:value="${projectNames.projectID}">
<input type="hidden" id="oldName" th:value="${projectNames.projectName}">
<input type="hidden" id="newName" name="projectName">
<input type="image" src="edit.png" alt="Submit" onclick="change_text()" align="right" class="editProject">
</form>
<form action="/projectPost" method="post">
<input class="projectInfo" name="projectID" type="text" th:value="'Project No.: ' + ${projectNames.projectID}" readonly="readonly">
<input class="projectInfo" type="text" th:value="'Project name: ' + ${projectNames.projectName}" readonly="readonly">
<input class="projectInfo" type="text" th:value="${projectNames.projectStartDate} + ' - ' + ${projectNames.projectEndDate}" readonly="readonly">
<input type="submit" value="OPEN" class="openProject">
</form>
</div>
<script>
function change_text() {
var changedText;
var projectName = prompt("Please enter name of project:");
var oldName = document.getElementById("oldName").value;
if (projectName === null || projectName === "") {
changedText = oldName;
} else {
changedText = projectName;
}
document.getElementById("newName").value = changedText;
}
</script>
First form in HTML is the red cross to delete an entire 'project'. Second form is what is intended to change the name displayed on the 'project preview', but only works on first preview and deletes project name from the rest. Last form is the actual preview. I couldn't find another way to have multiple forms and do different POSTS while working with Java Spring and Thymeleaf.
My wish is to make the change_text() function work for each 'project preview'
Best regards!
function change_text(imageInput) {
var changedText;
var projectName = prompt("Please enter name of project:");
var oldName = imageInput.parentNode.querySelector('.old-name').value;
if (projectName === null || projectName === "") {
changedText = oldName;
} else {
changedText = projectName;
}
imageInput.parentNode.querySelector('.new-name').value = changedText;
}
<form action="/editProjName" method="post">
<input type="hidden" name="projectID" th:value="${projectNames.projectID}">
<input type="hidden" class="old-name" id="oldName" th:value="${projectNames.projectName}">
<input type="hidden" class="new-name" id="newName" name="projectName">
<input type="image" src="edit.png" alt="Submit" onclick="change_text(this)" align="right" class="editProject">
</form>
Ok so I made a few changes. First, notice the inputs with oldName and newName now have classes on them. These can be repeated. If you are not using the ids for anything other than the script, you should remove them. Otherwise if you have styling rules for them you should consider changing those CSS rules to use the class instead so you can remove the invalid repeating ids.
Secondly, the onlick of the image now passes in this. What that does is it passes in the actual input that the user clicked, so you have some context into which form element the user is interacting with.
Then looking at the logic, the method now accepts in imageInput which is the this from the onclick.
Using imageInput.parentNode we go up the DOM Tree to the parent element of the input, which is the form in this case. We can then turn around and use querySelector to find the other element in the form we want to manipulate. And it will only find the element in our particular form because that is what we are selecting off of.

Is there a way to put attributes in innerHTML? or switch divs based on a dropdown without jquery?

I am making a chrome extension/app creator and I have a drop down menu that lets you choose if the thing for chrome it makes will be a extension or app. based on that, it makes the inner html change. The only problem is that the innerHTML doesn't want to accept attributes, probably because of the quotations. I could make the drop down onchange clear the rest of the contend and create lots of elements and scripts, but is the scripts part possible? I guess I could make it show/hide the divs, but is there a way to do that with simple/no jQuery? I just wand it to look like this start and end image. This is the not working code I have
<!DOCTYPE html>
<html>
<body>
<h1>Google extension/app maker</h1>
<form>
Type:
<select id="type" onchange="selectType()">
<option value="1">Extension</option>
<option value="2">App</option>
</select>
<p id="inputs"></p>
</form>
<script>
function selectType() {
var typevalue = document.getElementById("type").value;
if (typevalue == 1) {
document.getElementById("inputs").innerHTML = "Extension name: <input id=" + name + "> Version: <input id=" + version + "> ";
} else {
document.getElementById("inputs").innerHTML = "bye";
}
}
</script>
</body>
</html>
All help appreciated!
You have to escape the double quotes of the attribute value.
document.getElementById("inputs").innerHTML = "Extension name: <input id=\"name\"> Version: <input id=\"version\"> ";

Editing and Deleting Dynamically Generated List Items in jQuery Todo List App

I'm attempting to create a todo list app in HTML, CSS, and jQuery, and I'd like to be able to add, edit, and delete tasks. I'm able to add new tasks to the list, but I'm unable to edit or delete them when I click the "Edit" and "Delete" buttons, and I'm not sure why it isn't working.
I've uploaded a copy of my code to jsfiddle (https://jsfiddle.net/LearningToCode/nndd1byt/6/) and included a copy below.
Any help you can offer would be greatly appreciated. Thanks!
Expected Behavior:
Clicking the "Delete" button next to a task should allow a user to delete that task.
Clicking the "Edit" button next to a task should allow a user to edit the text of that task.
Actual Behavior:
Clicking the "Delete" button does nothing.
Clicking the "Edit" button does nothing.
Code Examples:
HTML
<h1>Todo List</h1>
<input type="text" id="enter_task" placeholder="Enter Task">
<input type="submit" id="add" value="Add Task">
<p>
<ul id="todo_list">
</ul>
</p>
JavaScript
function enter_task () {
var text = $('#enter_task').val();
$('#todo_list').append('<li>'+ text + ' <input type="submit" id="edit" value="Edit">' + '<input type="submit" class="done" id="delete" value="Delete">' +'</li>');
};
$('#edit').click(function(){
$('li').attr('contenteditable','true');
});
$('#delete').click(function(){
$('li').remove();
});
$(function() {
$('#add').on('click', enter_task);
});
The problem is that your delete buttons are dynamically created. During page load, $('#delete') returns an empty set because there's no one there yet. When you finally have list items, their delete buttons are not bound to anything.
What you can do is delegate the event handler to an ancestor that exists during page load. Events "bubble" to its ancestors, making ancestors aware that you clicked a descendant. In this case, you can attach the handler to <ul>, and have it listen for clicks on .delete.
In addition, IDs are supposed to be unique. You can only have one of them on the page. Having more than one might lead to unpredictable behavior. Use classes instead.
Also, $('li') will select all <li> on the page. You might want to scope down your selection. You can remove the <li> containing your button using $(this).closest('li').remove()
The code you need should be this, plus add delete as the button class. Apply the same concept for the edit.
$('#todo_list').on('click', '.delete', function(){
$(this).closest('li').remove()
});
I've created a working example - https://jsfiddle.net/nndd1byt/7/
function enter_task () {
var text = $('#enter_task').val();
$('#todo_list').append('<li>'+ text + ' <input type="submit" class="edit" value="Edit">' + '<input type="submit" class="done delete" value="Delete">' +'</li>');
};
$('#todo_list').on('click', '.edit', function(){
$(this).parent().attr('contenteditable','true');
});
$('#todo_list').on('click', '.delete',function(){
$(this).parent().remove();
});
$(function() {
$('#add').on('click', enter_task);
});
Try adding the jquery function initializers into the enter_task function, this way they are refreshed with each new line.
var counter = 1;
function enter_task () {
var text = $('#enter_task').val();
$('#todo_list').append('<li><span>'+ text + ' </span><input type="submit" id="edit' + counter + '" value="Edit">' + '<input type="submit" class="done" id="delete' + counter + '" value="Delete">' +'</li>');
$('#edit' + counter).click(function(){
$(this).prev().attr('contenteditable','true');
$(this).prev().focus();
});
$('#delete' + counter).click(function(){
$(this).parent().remove();
});
counter++;
};
$(function() {
$('#add').on('click', enter_task);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Todo List</h1>
<input type="text" id="enter_task" placeholder="Enter Task">
<input type="submit" id="add" value="Add Task">
<p>
<ul id="todo_list">
</ul>
</p>

jQuery autocomplete for innerHTML generated textbox

I realize similar questions have been asked thousands times and yet it doesn't seem to work for me. I have a textbox called "movieTitle", it is generated via Javascript by clicking a button. And I'm calling jQueryUI autocomplete on that textbox just like in the official example http://jqueryui.com/autocomplete/#remote.
It works well if I hardcode "movieTitle" in the original page; however it just fails when I create "movieTitle" by changing the innerHTML of the div "formsArea". searchMovies.php is the same with search.php from the example. I had tried many answers from internet and from here. I learned that I would have to use .on() to bind the dynamic element "movieTitle". Still it doesn't seem to work. Even the alert("hahaha") works. Thanks for your time. :) Here's my script:
$(function()
{
$(document).on('focus', '#movieTitle', function(){
//alert("hahaha");
$("#movieTitle").autocomplete({
source: "../searchMovies.php",
minLength: 2
});
}
);
window.onload = main;
function main()
{
document.getElementById("movieQuery").onclick = function(){showForms(this.value);};
document.getElementById("oscarQuery").onclick = function(){showForms(this.value);};
// displays query forms based on user choice of radio buttons
function showForms(str)
{
var heredoc = "";
if (str === "movie")
{
heredoc = '\
<h1>Movie Query</h1>\
<form action="processQuery.php" method="get">\
<div class="ui-widget">\
<label for="movieTitle"><strong>Name: </strong></label>\
<input type="text" id="movieTitle" name="movieTitle" />\
<input type="submit" name="submitMovie" value="Submit" />\
</div>\
</form>';
//document.getElementById("formsArea").innerHTML = heredoc;
//$("#formsArea").append(heredoc);
$("#formsArea").html(heredoc);
}
else if (str === "oscar")
{
heredoc = '\
<h1>Oscar Query</h1>\
<form action="processQuery.php" method="get">\
<strong>Name: </strong>\
<input type="text" name="oscarTitle" />\
<input type="submit" name="submitOscar" value="Submit"/>\
</form>';
document.getElementById("formsArea").innerHTML = heredoc;
}
}
}
});
The HTML is:
<form action=$scriptName method="get">
<label for="movieQuery"><input type="radio" name="query" id="movieQuery" value="movie" />Movie Query</label>
<label for="oscarQuery"><input type="radio" name="query" id="oscarQuery" value="oscar" />Oscar Query</label>
</form>
<div id="formsArea">
<b>Please choose a query.</b>
</div>
You should check for the URL you're sending an AJAX request to. The paths in script files are relative to the page they're being displayed in. So albeit your script is in /web/scripts/javascripts/js.js, when this file is included in /web/scripts/page.php, the path to /web/scripts/searchMovies.php should be searchMovies.php instead of ../searchMovies.php because your script is being used in /web/scripts/.
Good ways to avoid such confusion is to
a. use absolute URL
b. the URL that're relative to root of your domain (that start with a /),
c. or define your domain's path in a variable, var domain_path = 'http://www.mysite.com/' and use it in your scripts.
I hope it clarifies things :)
Relative Paths in Javascript in an external file

Put javascript data into a form

I have the following javascript code:
game.bind('gameover', function(seconds) {
setTimeout(function() {
var rank = game.getRank(seconds);
scorecard.find('.time').text(seconds + ' sec');
scorecard.find('.rank').text(rank[0]);
scorecard.find('.byline').text(rank[1]);
...more code
In the following div this data is displayed (so the js script is working):
<div class="inner">
<h3>Nice job! Your time:</h3>
<h1 class="wobble time"><!-- 15 seconds --></h1>
<h2 class="rank"><!-- Friendly Mallard --></h2>
<h3 class="byline"><!-- (That's pretty good) --></h3>
</div>
Now I want to put the results also in a form so I can post it to the a database (mysql). So I've added a form and put it in the same div:
<form id="form" action="updatescore.php" method="post">
<input type="text" id="time" name="time" value="" />
<input type="text" id="rank" name="rank" value="" />
<input type="text" id="byline" name="byline" value="" />
</form>
Now in the JS I've copied the lines (e.g. scorecard.find('.time').text(seconds + ' sec');) and changed it to look for the id, so . becomes # and passed it in the js like:
scorecard.find('.time').text(seconds + ' sec');
scorecard.find('#time').text(seconds + ' sec');
etc
So this should work I think, but the form inputs stay empty. What am I doing wrong?
Kind regards,
Maurice
If you are just looking to move js variables into your database via updatescore.php you don't need to use a form at all! You can do it with AJAX.
var scoreData = {
time : time,
rank : rank[0],
byline : rank[1]
};
$.post('updatescore.php', scoreData); //done!
Use val() instead of text() for setting the values

Categories