HTML Input Button - html

I'm using this code here:
<input type="button" value="Latest Results" onClick="self.location='http://URL.COM/SEARCH STRING'+document.getElementById('code').value +'EXTRA BIT OF SEARCH URL'">
Which I'm using with an input box (sometime several input boxes) to take an input and quickly add it to a URL to search an internal system. It works great for what we need, but I'm trying to get it to open in a new window rather than the current one.
I've tried adding target="_blank" to the end and changing onClick="self.location= to window.open but no luck.

Try this:
<input type="button" value="Latest Results" onClick="window.open('http://www.google.com');">
Use window.open instead of self.location :)
jsBin.

Related

Puppeteer can't distinguish between two selectors with same ID

I have a puppeteer implementation I'm working on to fill out a form on a website that (sadly) doesn't offer an API.
Everything goes great until I use this code to click the second button on a list of buttons:
await page.click('#calculateCharge'); // open the set values dialog
Reason being, the #calculateCharge id is used multiple times on the page, like this:
<button id="calculateCharge" type="button" name="amount" class="btn btn--secondary btn--full-mobile btn--full "><span>$ 80.00</span></button>
<button id="calculateCharge" type="button" name="amount" class="btn btn--secondary btn--full-mobile btn--full "><span>$ 35.00</span></button>
<button id="calculateCharge" type="button" name="amount" class="btn btn--secondary btn--full-mobile btn--full "><span>$ 42.00</span></button>
Puppeteer clicks the first button every time because whoever wrote the HTML didn't id the buttons dynamically. The ids are all the same, so I don't know how to access the 2nd or third buttons. I also don't have access to the HTML source (not my page), so I can't fix it from the other side.
Any ideas?
I solved my issue by using xPaths instead of ids.
First, right click on the button in your browser and click inspect. In the inspector's HTML tree, right click on the highlighted HTML and copy the full xPath.
Second, set the element as a variable using the copied xPath. Note the x after the $.
let butt = await page.$x('xPath')
Last, click the button by referencing the first position of the variable's array.
await butt[0].click()
Copy/paste from my production file:
let butt = await page.$x('/html/body/div[1]/div/main/div[1]/div[2]/div[2]/div/div/div/form/div[1]/div[2]/table/tbody/tr[5]/td[2]/div/div/button');
await butt[0].click();

Using Font Awesome Unicode with Coldfusion

I have an HTML input button in my ColdFusion application that is submitting a form. I am trying to include a Font Awesome icon along with the text of the button. The only way I can specify the Unicode without throwing an error is to double out the hash character.
<input class="stylized_btn" tabindex="0" type="submit" name="save2"
id="save2" value=" &##xf0c7; Save This Ticket"
onclick="disableSaveButtonClick(event);" />
However, instead of showing the icon, it just shows a square.
This seems like it's a quirk with ColdFusion not recognizing my Unicode character because of the double hashtag, but that's just a guess. I have other button elements on my page that are properly displaying the Font Awesome icons correctly, so I know it is not an issue with my font definition. I am unsure where exactly I am going wrong here. Can anyone help shed some light?
Updated code using button tag instead.
HTML button
<button id="saveOnlyButton" name="save" class="stylized_btn">
<i class="fas fa-save"> </i> Update Ticket
</button>
JavaScript
window.onload=function(){
var SaveButton = document.getElementById("saveOnlyButton");
SaveButton.addEventListener("click", disableSaveButton);
}
//Save Button Logic
function disableSaveButton() {
console.log("Save button clicked");
document.getElementById("submitType").value = "save";
document.getElementById("saveOnlyButton").innerHTML = "Please Wait...";
document.getElementById("saveOnlyButton").disabled = true;
document.getElementById("autoSumForm").submit();
}
Have you tried using a BUTTON tag? (We stopped using input:submit buttons.)
We usually use <button type =“submit”><i class=“fa fa-lg fa-my-icon”></i > Label Text</button>, but you should be able to use the HTML entity.
Instead of using an input element, use a button. The default behavior of a button is to submit a form.
<button class="stylized_btn btn-default" tabindex="0" id="save2" onclick="disableSaveButtonClick(event);"><i class="fa fa-save"></i> Save This Ticket</button>
(I added btn-default in case you're using bootstrap)
It's not a quirk in ColdFusion as you suggest. ColdFusion is behaving exactly as intended. The reason why you need a double hash ## is because whenever you are in a <cfoutput> tag, ColdFusion sees the single hash # as the start of a variable or evaluable expression. When it doesn't find the closing hash, it throws an error.
Now there are times when your intent is to use the hash for display purposes and not to evaluate a variable or expression, as it is in your case. So the solution is to use the double hash ## an an escape character to let CF know you want to just display it as a single hash on the rendered page.
If you use your browser's developer tools and inspect element, it shold appear to correctly display as a single hash. The other fix to your issue is to make sure you remove the section of code with the input button from being inside a <cfoutput> block.
Most importantly, you shouldn't be debugging by looking at the CF source code, you should debug this looking at the rendered page by using your browser's developer tools or the browser's "view source" option. If you can, please update your original question by providing a screenshot of the "inspect element" of your submit button.

button will not onclick correctly and I cannot figure out why

So the idea is just to have this switch pages to "explore.html" when it clicked but I've been trying to get it to work for hours and it won't. I've tried changing it to a "href=()" and it didn't work either. Do I just write it as an instead of a ?click here to see the code I'm having trouble with...
You are doing it wrong, As on click function you are giving a link directly which is not the correct syntax for on click, you need to apply the window location for it where you want to redirect, here is the code for the button to redirect, and if you want to use href then you need to use anchor tag and need to apply a css to same to make it like button
<button onclick="window.location.href='/linktoredirect'">Continue</button>
href using anchor tag
Continue
Or you can use like following
<form method="get" action="/linktoredirect">
<button type="submit">click</button>
</form>
Hope this will work for you
Just replace your onclick as follow
From :
onclick="explore.html"
to
onclick="window.location = 'explore.html'"
onclick is an event. If you want to redirect other page then use "href".
example:
link text

How to add buttons and inputs in a wordpress.com site

I added a custom html block on my wordpress.com site and wrote a simple bit of code to act as a search widget.
I've tried many things. I tried making button run a script function, I tried making the function listen for the button, I tried using a a href link (maybe woud work if I tried harder).
<input type="text" id="input" value="Search...">
<br>
<button onclick="window.location.href = 'https://vinelings.home.blog/?s=' + document.getElementById('input').value">🔎 Search</button>
I want it to make the button grab the input text then redirect the tab the search for that term.
Not sure if this is a wordpress.com problem, if it is can i get around it in any way?
Code: https://imgur.com/iRvb29V.jpg
Result: https://imgur.com/GUcwIg9.jpg
EDIT:
I am using the Custom HTML block.
My theme is ALtoFocus.
You need to put your html markup into custom html block

HTML Submit-button: Different value / button-text?

I'd like to create an HTML form submit button with the value 'add tag', however, the web page is in Swedish, so I'd like to have a different button text.
That is, I want to have a button like
but I want to have my code like
if (request.getParameter(cmd).equals("add tag"))
tags.addTag( /*...*/ );
Is this possible? If so, how?
It's possible using the button element.
<button name="name" value="value" type="submit">Sök</button>
From the W3C page on button:
Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content.
Following the #greg0ire suggestion in comments:
<input type="submit" name="add_tag" value="Lägg till tag" />
In your server side, you'll do something like:
if (request.getParameter("add_tag") != null)
tags.addTag( /*...*/ );
(Since I don't know that language (java?), there may be syntax errors.)
I would prefer the <button> solution, but it doesn't work as expected on IE < 9.
There are plenty of answers here explaining what you could do (I use the different field name one) but the simple (and as-yet unstated) answer to your question is 'no' - you can't have a different text and value using just HTML.
I don't know if I got you right, but, as I understand, you could use an additional hidden field with the value "add tag" and let the button have the desired text.
If you handle "adding tag" via JScript:
<form ...>
<button onclick="...">any text you want</button>
</form>
Or above if handle via page reload