I have the following HTML in my website
<form id="storyPanel" method="POST" action="<?= BASE_URL ?>/news/update/process/" style="display: none;">
<h5>Story options</h5>
<input type="text" id="title">
<input type="" id="id" >
<button type="submit" name="submit" value="edit">Edit story title</button>
<button type="submit" name="submit" value="delete">Delete story</button>
</form>
<iframe id = "storyPanel2" src="http://localhost/P4/edit/news/<?= $story->id ?>" style="display: none;"></iframe>
And I have this snippet of javascript that gives me the value that is in the input
if (Number.isInteger(+d.sortBy)) {
//editSoldierName(d.id, d.item_id);
console.log('clicked a story');
$('#storyPanel').fadeIn();
$('#storyPanel2').fadeIn();
$('#title').val(d.id);
$('#id').val(d.sortBy);
}
I am still learning how this all works but right now I know that the input has the id of the story I am trying to view.
I want to be able to store its value in a variable and then append it to the end of my url for example:
P4/edit/news/57
Right now I have some re used php that usually gets my story id, but I know its wrong because I can't create a story object outside the iframe and then pass in the id that way. I wanted to know if there was any way to pass in the "id" from javascript into something I can append to the end of the URL. Sorry if this sounds dumb
Is this what you are aiming for?
const $input = $("#story-id"), $frame = $("#story-panel-2");
$input.change(e => {
const value = $input.val();
$frame.attr('src', `https://placehold.it/${innerWidth}x${value}`);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>ID: <input id="story-id"></label>
<iframe id="story-panel-2"></iframe>
Related
Note: I'm a total novice at any coding. I'm just a dumb amature graphic designer. I've only ever created a page that lets me copy the
the most common phrases I had to leave in notes all day. I struggled
with it.
I'm trying to create this page that lets input something into a text field, and it applies it to defined URLS attached to buttons, that will bring me to those pages. Since I struggle to describe it, please see this visual: https://i.stack.imgur.com/ZplRK.jpg
I've tried co-opting some scripts for similar problems, but with no luck. (See below for examples before I edited them ). I included them to see if I was on the right track whatsoever. I know I'm gonna have an issue with multiple functions, probably?
<script type="javascript">
function goToPage(var url = '')
{
var initial = "http://example.com";
var extension = "html";
window.location(initial+url+extension);
}
</script>
<form name="something" action="#">
Label <input type="text" name="url" value="" onchange="goToPage(this.value)">
</form>
<SCRIPT type="javascript">
function goToPage(var url = '')
{
var initial = "https://cms.example.com/client/viewcasedetails";
var extension = "";
window.location(initial+url+extension);
}
</SCRIPT>
<TITLE>Redirect 1</TITLE>
<BASE HREF="https://cms.example.com/client/viewcasedetails">
</HEAD>
<BODY>
<P>
<FORM name="jump" action="#">
CMS ID:
<INPUT type="text" name="url" value="" onSubmit="goToPage(this.value)">
<INPUT type="submit" value="GO">
That's where I at. I'm just tired of typing the same long URLs all day at work, and messing up more than half the time. I have no clue what the solution is - Javascript? HTML? CSS? Just trying to seek the DIY answer before looking on how to hire someone to make it. Which I have no clue how to do either but that's another question for later.
Thanks for helping / apologies for possibly super dumb questions.
You could do something like the following:
// grab the input element
const input = document.getElementById("cmsId");
// grab all links that need to be updated accordingly
// when value inside input element changes
const links = document.querySelectorAll("a");
// create a handler that listens for changes when
// you type some text into the input element
input.addEventListener("input", (event) => {
// grab value inside input elemenet
const value = event.target.value;
// iterate through all links and update
// the inner text + href attribute accordingly
// NOTE: `baseUrl` for each link is stored in a
// `data-*` attribute
links.forEach((link) => {
const baseUrl = link.dataset.url;
const url = baseUrl + value;
link.innerText = url;
link.href = url;
});
});
<!-- Use a simple input element here, no need for a form -->
<div>CMS ID: <input id="cmsId" type="text" /></div>
<div>
<!-- No need to create buttons, simple anchor elements will work just fine -->
<a
id="main"
href="#"
target="_blank"
data-url="https://cmss.company.com/client/viewclientdetails/"
>
https://cmss.company.com/client/viewclientdetails/
</a>
</div>
<div>
<a
id="notes"
href="#"
target="_blank"
data-url="https://cmss.company.com/client/viewnotes/"
>
https://cmss.company.com/client/viewnotes/
</a>
</div>
<div>
<a
id="docs"
href="#"
target="_blank"
data-url="https://cmss.company.com/client/documentsall/"
>
https://cmss.company.com/client/documentsall/
</a>
</div>
<div>
<a
id="activity"
href="#"
target="_blank"
data-url="https://cmss.company.com/client/viewactivityledger/"
>
https://cmss.company.com/client/viewactivityledger/
</a>
</div>
In your code you are working with only the "main" button as I can see (as it goes to viewclientdetails). You are missing a "/" sign after var initial. So, assuming that you can implement the same functionality of the main button to the other buttons, here's what you can do:
<script type="text/javascript">
function goToPage(var url = '')
{
var initial = "https://cms.example.com/client/viewcasedetails/"; //I added the slash
var extension = "";
window.location(initial+url+extension);
}
</script>
<TITLE>Redirect 1</TITLE>
<BASE HREF="https://cms.example.com/client/viewcasedetails">
</HEAD>
<BODY>
<P>
<FORM name="jump" action="#">
CMS ID:
<INPUT type="text" name="url" value="" onSubmit="goToPage(this.value)">
<INPUT type="submit" value="GO"> //you need 4 buttons here
You cannot have an input type="submit" here, since you will need four buttons. Submit works like a form submission. Add four buttons, then for each button's onClick property add the desired redirect url. You will need to get the value for the input field using an ID tag.
An example of what I am trying to say is given below:
<script type="text/javascript">
function onMainButtonClicked()
{
var cmsid= document.getElementById("cmsID").value;
var initial = "https://cms.example.com/client/viewcasedetails/"; //I added the slash
var extension = "";
window.location(initial+cmsid+extension);
}
function onNotesButtonClicked()
{
...
}
function onDocsButtonClicked()
{
...
}
function onActivityButtonClicked()
{
...
}
</script>
<TITLE>Redirect 1</TITLE>
<BASE HREF="https://cms.example.com/client/viewcasedetails">
</HEAD>
<BODY>
<P>
<FORM name="jump" action="#">
CMS ID:
<INPUT type="text" id="cmsID" name="url" value="">
<button onclick="onMainButtonClicked()">Main</button>
<button onclick="onNotesButtonClicked()">Notes</button>
<button onclick="onDocsButtonClicked()">Docs</button>
<button onclick="onActivityButtonClicked()">Activity</button>
There are much better ways to implement this, but this is a very simple implementation.
Thanks for reading. I'm a novice with Javscript, and have done a lot of searches to try and figure this out... (to no avail)
I'm trying to create a situation where the user inputs a single word on a form. And then when they click a submit button, the website takes the word from the input, appends it on the end of an incomplete URL, and sends them to that completed URL.
It's easy probably easy to see why this doesn't work to some of you. And also, embarassingly, I imagine a completely different approach would be best.
Your advice is appreciated.
<form action="https://vrnaut.neocities.org/" method="get">
<label for="MyForm">Enter One Word:</label>
<input type="text" id= "OneWord" name="OneWord" required>
</form>
<button onclick="myFunction()">Submit</button>
<script>
function myFunction(form) {
var GoHere = form.OneWord.value;
location.replace("https://vrnaut.neocities.org/" + GoHere);
}
</script>
Place the button inside you form
Never listen for buttons click - rather use the FORM's "submit" Event:
const EL_form = document.querySelector("#myForm");
const EL_word = document.querySelector("#OneWord");
EL_form.addEventListener("submit", (ev) => {
ev.preventDefault();
location.replace(EL_form.action + EL_word.value);
});
<form id="myForm" action="https://vrnaut.neocities.org/" method="get">
<label for="MyForm">Enter One Word:</label>
<input type="text" id="OneWord" name="OneWord" required>
<button type="submit">Submit</button>
</form>
Your approach is perfectly fine. All that's needed is a little tweaking.
<form action="https://vrnaut.neocities.org/" method="get">
<label for="MyForm">Enter One Word:</label>
<input type="text" id= "OneWord" name="OneWord" required>
<button onclick="myFunction(this.parentElement)">Submit</button>
</form>
<script>
function myFunction(form) {
var GoHere = form.getElementsByTagName("input")[0];
location.replace("https://vrnaut.neocities.org/" + GoHere.value);
}
</script>
I'm trying to make a table in Javascript that does not use a table element, and I'm using pure vanilla nodeJS. I can get a new row to show up very briefly, but it disappears when I hit the button that made it show up in the first place. My code is:
<!DOCTYPE html>
<html>
<body>
<h1> Title Tests </h1>
<div id="Experiments">
<form id="Exp">
<input type="text" name="url box" placeholder="publisher URL"><br>
<div class="Title">
<input type="text" name="title box" placeholder="Test Title"><br>
</div>
<button id="addButton" onclick="newRow()">+</button><br>
<input type=submit value="Submit">
</form>
</div>
<script>
function newRow(){
var number = 2;
var newTitleRow = document.createElement('div');
newTitleRow.setAttribute('id',`Title${number}`);
var newBT = document.createElement('input');
newBT.setAttribute('type','text');
newBT.setAttribute('name',`title box ${number}`);
newBT.setAttribute('placeholder','Test Title');
newTitleRow.appendChild(newBT)
var button = document.querySelector("#addButton");
button.before(newTitleRow);
number++;
}
</script>
</body>
</html>
The problem is that you're using a html <button> inside a <form> element. This means it will automatically act as a submit button unless you declare it to be something different. So as soon as you push the + button it will try to submit the form to an undefined URL.
To work around you need to define that + button to be of type "button" like:
<button type="button" id="addButton" onclick="newRow()">+</button><br>
Hey everyone i am trying to solve the following question
Using form, make a page in HTML where the user can enter a keyword and click on the “Search” button and then that keyword is searched on google.
But till now have no luck in figuring out how to redirect with the i/p from my textbox in form
here is the code
<html>
<head>
<title>What is PHP</title>
</head>
<body>
<script type="text/javascript">
function showDetails()
{
var a = document.getElementById('sea');
window.location = 'https://www.google.com/search?q='+ a;
}
</script>
<img src="https://www.google.com/url?sa=i&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwjN2I-drPLfAhVBrY8KHUBlCwMQjRx6BAgBEAQ&url=https%3A%2F%2Fwww.froala.com%2Fwysiwyg-editor%2Fdocs%2Fserver%2Fphp%2Fimage-upload&psig=AOvVaw2Rv-5CgPx3gJo5_dzi6XFo&ust=1547729604931087" width="25%" height="25%">
</img>
<p>Php is amazing<br>Php is not cool</p>
<button onmouseover="alert('I Love HTML too!')">I Love HTML</button>
<br>
<br>
<form method="POST">
Search: <input type="text" name="fname" id="sea">
<input type="button" name="btn" onclick="showDetails()">
</form>
</body>
</html>
By selecting getElementById() method you select the element as a whole. You can get the value of an input-element with the value attribute.
var a = document.getElementById('sea').value;
I'm trying to find a way to be able to do the following. I want to be able to get certain things from a form. In this case, I only want the "value" field and NOT the "name" field.
<div class="searchbox_team" style="margin: 0 0 10px 0; z-index: 50;">
<script type="text/javascript">
function customSearch()
{
var x = document.customSearch;
x.replace("customSearch=", "");
return x;
}
</script>
<form name="leSearch" action="/search/node/" onsubmit="return customSearch()" id="search-block-form" class="search-form">
<input type="text" name="customSearch" value="" id="edit-search-block-form-1" class="searchbox_input" title="Enter the terms you wish to search for." />
<input type="submit"/>
</form>
</div>
I have tried using the following in my function.
var x = document.customSearch.value;" but that is not working.
Can anyone shed some light on this?
It sounds like you want the value of the input for customSearch. If so then just use the following
var value = document.getElementById('edit-search-block-form-1').value;
Your input tag already has an id value hence the most efficient and simplest way to search for it is using getElementById.
hmm, so to get things from the form, you'll want to specifiy like so:
document.forms.leSearch.elements["customSearch"].value;
EDIT:
try adding a hidden field that stores the value onclick and then get that from the post or get array in your action file.. I think onsubmit call is to blame
<form name="leSearch" action="/search/node/" onclick="document.getElementById('myhiddenfield').value = customSearch()" id="search-block-form" class="search-form" method="post">
<input type="text" name="customSearch" value="" id="edit-search-block-form-1" class="searchbox_input" title="Enter the terms you wish to search for." />
<input type="hidden" value="" id="myhiddenfield" />
<input type="submit"/>
</form>
EDIT 2:
I think I figured it out.. the url was appending the field names because it was defaulting to "get" method mode.. set the action=/node/search/" and method="post"
<form method="post" action="/search/node/" onsubmit="this.action = '/search/node/' + document.getElementById('edit-search-block-form-1').value;">