I have a question text field. When I click on it display:none for h3 appears and for input tag dissappears. Then I can clear field and enter new name.
<td style="width:92%;">
<h3 id="question_text_1846" onclick="return onClickQuestion(1846,'text');">test name</h3>
<input type="text" id="question_text_input_1846" onkeypress="return OnKeyPress(event, 1846,'text');" name="question_text_input_1846" onblur="return onBlurQuestion(1846,'text');" placeholder="Question Text" value="test" class="form-control myInput" style="display:none;" />
<script type="text/javascript">
$("#question_text_1846").html(unescape($("#question_text_1846").html()));
</script>
</td>
The question is how to set new name(clear field and sendkeys) through selenium and may be javascript manipulations. I tried to use several methods , but it doesn't work.
element = driver.findElement(By.xpath("//h3[#id='question_text_"+ExtractQuestionTextInputID()+"']"));
actions = new Actions(driver);
actions.moveToElement(element);
actions.perform();
element.click();
element = driver.findElement(By.xpath("//input[#id='question_text_input_"+ExtractQuestionTextInputID()+"']"));
element.clear();
element.sendKeys("test_question_one");
And also with js
String qtid = "question_text_" + ExtractQuestionTextInputID();
String qtiid = "question_text_input_" + ExtractQuestionTextInputID();
js.executeScript("document.getElementById("+qtid+").setAttribute('style', 'display: none;')");
js.executeScript("document.getElementById("+qtiid+").setAttribute('style', '')");
This is the method for extracting id from tag attribute
public String ExtractQuestionTextInputID(){
String question_text_input_id = driver.findElement(By.xpath("//input[#value='New Question']")).getAttribute("id");
Pattern p = Pattern.compile("\\d+");
Matcher m = p.matcher(question_text_input_id);
String mid = new String();
while(m.find()) {
//System.out.println(m.group());
mid = m.group();
}
return mid;
}
I'm not sure if I understand it correctly but did you try setting attribute 'value' of the input to an empty string?
Related
item1:<input type="text" name="item1">
I want to add the text "item1" before the input element in JavaScript.How can I do that?
I have created an input tag in JavaScript using
var i1 =document.createElement("input");
You can use insertAdjacentHTML.
document.querySelector('input').insertAdjacentHTML('beforeBegin', "item1: ");
<input type="text" name="item1">
If you are creating the element dynamically, first append it to an element like the body, and then use insertAdjacentHTML.
var i1 = document.createElement("input");
document.body.appendChild(i1)
i1.insertAdjacentHTML('beforebegin', "Item: ");
Use input.insertAdjacentHTML('beforeBegin', 'HTML'). This code inserts HTML before the start of the input element.
const input = document.querySelector('input')
input.insertAdjacentHTML('beforeBegin', 'item1: ')
<input type="text" name="item1">
MDN Reference: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
This code finds all the input in the document with name attributes and prepends the name text in front of the input:
document.querySelectorAll("input[name]").forEach((input) => {
input.insertAdjacentHTML('beforeBegin', `${input.name}: `);
});
<input type="text" name="item1"><br>
<input type="text" name="item2"><br>
<input type="text" name="item3">
You can create an element, like this
let input = document.querySelector("input")
let element = document.createElement("YOUR DESIRED ELEMENT GOES HERE")
element.insertBefore(input)
I have an html input list, with an associated datalist, defined as follows:
<input list="mylist" id="my-input" name="friend-name"
placeholder="Begin typing friend's name here..."
required class="form-control">
The list itself (and the associated datalist) is working fine. However, each of my entries are of the form: "String [numeric_id]"
What I am wondering is if there is any way that I can somehow hide
the [numeric_id] part before the form is submitted.
I have looked at the pattern attribute, but that seems to limit the
actual data allowed in the input, which isn't what I want - I just
want the part between square brackets [] to be hidden, but still
submitted to the form.
It would be ok to move it to another input of type=hidden as well.
Is there any possible way to do that?
#isherwood, here is my form tag:
<form action="/chat_forwarding/modal_edit_msg.php" id="fwd-form" method="POST" class="form-inline" style="display: block;">
If you're not using any framework that support binding, you should listen to input events and update a hidden input based on that.
This is a function that may give you the idea:
let realInput = document.getElementById('real-input');
let userInput = document.getElementById('user-input');
userInput.addEventListener('input', function(value) {
const inputValue = value.target.value;
realInput.value = inputValue; // update the hidden input
const userInputResult = inputValue.match(/\[[^\[]*\]/); // the regex for [numberic_id]
if (userInputResult) {
userInput.value = inputValue.substring(0, [userInputResult.index - 1]); // -1 is to remove the space between the 'string' and the '[numeric_id]'
}
});
I should have mentioned that my input is also using Awesomplete (and jQuery). For this reason, binding normal events like keyup did not work (the event would fire whenever a user typed a key). I was able to achieve the functionality I wanted with the awesomplete-selectcomplete event as follows (this will add a hidden input element with value of the id from a string of the form "String [id]"):
$("#my-input").on('awesomplete-selectcomplete',function(){
var fullStr = this.value;
//alert(fullStr);
var regex = /\[[0-9]+\]/g;
var match = regex.exec(fullStr);
//alert(match[0]);
if (match != null) // match found for [id]
{
var fullName = fullStr.substr(0,fullStr.lastIndexOf("[")-1);
var x = match[0];
var id = x.substr(1, x.lastIndexOf("]")-1);
//alert(id);
$('#fwd-form').prepend('<input type="hidden" name="h_uid" value="' + id + '">');
$('#my-input').val(fullName);
}
});
I have simple javascript. I just need to get a date from a textbox and pass to label for other purpose. But here is the problems. I able to alert the that get from textbox but when i try to load it into label. It show empty.
function get_WlcData() {
if ($('#DropDownList1').val() == 'Required') {
document.getElementById("wlcboard").style.display = '';
} else {
document.getElementById("wlcboard").style.display = 'none';
}
var x = document.getElementById("reservation").value;
alert(x);
document.getElementById("lblreserve").innerHTML = "testing";
document.getElementById("lblreserve1").innerHTML = "testasdad";
}
Here is the HTML
<input type="text" name="reservation" id="lblreserve" class="form-control col-md-7 col-xs-12" />
<asp:Label ID="lblreserve1" runat="server" CssClass="labelForm" Visible="False"></asp:Label>
The only thing that comes to mind is that your referencing an ID that doesn't exist
var x = document.getElementById("reservation").value;
In this code you're looking for the value of something with id="reservation" but that element does not exist in the HTML you have provided. Would that not be getElementById("lblreserve") - as this is the ID of the input element?
It also may not be showing because your label is set to Visible="False", meaning the value might be setting but it doesn't appear because it's hidden from view.
first you have to show the hidden label and then write text to that label
document.getElementById("lblreserve").style.display= "inline";
document.getElementById("lblreserve").innerHTML = "testing";
writing to textbox value using
document.getElementById('lblreserve').value='new value';
I am writing a script with pure JS and need to select a text input from a page that has a random name each time:
<input type="text" name="N8PkpWeLsNRQBjvwcwKULB57utJx5L2u0Ko" class="form-control" value="">
Normally i would select it using ID like:
var textinput = document.getElementById("myInput1");
There is no ID however, how can i select this element?
As far as i can see it appears to be the only text input on the page.
I planned on setting some text like this:
HTMLInputElement.prototype.setText = function(text) {
this.value = text;
};
var el = document.querySelectorAll('input[type=text]')[0];
el.setText("Hi");
But this does not work for some reason?
You can use document.querySelector(selectors) it returns the first matching element within the document.
document.querySelector('input.form-control[type=text]')
HTMLInputElement.prototype.setText = function(text) {
this.value = text;
};
var textinput = document.querySelector('input.form-control[type=text]');
textinput.setText("Hi, You can no use setText method.");
<input type="text" name="N8PkpWeLsNRQBjvwcwKULB57utJx5L2u0Ko" class="form-control" value="">
To get the first text field use the following.
var txtField=document.querySelectorAll('input[type=text]')[0];
To set the text you could simply do.
txtField.value="your Value";
This way you can select any HTML tag , since you only have 1 input, this should work for you
var input = document.getElementByName('input');
Try this
var x = document.getElementsbyClassname("form-control").getAttribute("value");
Short question
QUESTION
How can I access the string value "2013-10-20" from the input in HTML to show it in JavaScript?
HTML
<input name="DateStart" class="inputPanel" type="text" size="20" maxlength="20" value="2013-10-20">
JAVASCRIPT
<script javascript="javascript" type="text/javascript">
alert("Value: " + ???)
</script>
Thanks!
Assuming you have one input with the name DateStart(use id's):
alert("Value: " + document.getElementsByName('DateStart')[0].value);
If the input is in a form, and there is only one form in the document, you can access it like:
alert(document.forms[0].DateStart.value);
If the form has a name you can use:
alert(document.forms['formName'].DateStart.value);
or if you like being long–winded:
alert(document.forms['formName'].elements['DateStart'].value);
or if the name is also a valid identifier (i.e. a name you could also use as a variable name)
alert(document.forms.formName.DateStart.value);
or even:
alert(document.formName.DateStart.value);
Or an ID:
alert(document.getElementById('formId').DateStart.value);
Or using the querySelector interface:
alert(document.querySelector('input[name="DateStart"]').value);
Lots of ways to skin that cat.
From the current code you can use getElementsByName
var dateStart = document.getElementsByName('DateStart')[0];
alert("Value: " + dateStart.value);
But it's advisable and a best practice to add Id attribute on DOM element and using getElementById in JavaScript to retrieve DOM element. (take a look at name vs id)
HTML
<input id="DateStart" name="DateStart" class="inputPanel" type="text" size="20" maxlength="20" value="2013-10-20">
JavaScript
var dateStart = document.getElementById('DateStart');
alert("Value: " + dateStart.value);
You can say like bellow
alert(document.getElementsByClassName('inputPanel')[0].value);
if this is first element which has class inputPanel.