HTML data parsing from DIV container - javascript

As I am pretty new to Web Development this might be an easy question.
In my HTML file I use the form method GET to parse data with the URL (it must be done this way, cannot be changed).
In this html there is a Text Field.
<div class="form-group {*if $ERROR_BEMERKUNG*has-error*/if*}">
<label for="text-comment">Bemerkung</label>
<textarea name="text-comment" id="text-comment" class="form-control" rows="3" placeholder="{$TRANSLATE.USERDATA.BEMERKUNG|default:'USERDATA.BEMERKUNG'}">{$COMMENT}</textarea>
</div>
How can I get the inside of this textfield, whatever is written in it afterwards, into my GET method? Hardcoded it works that way, but I don't know how I can get the value out of the div.
<input type="hidden" id="bemerkungen" name="bemerkungen" value= "TEST" />
EDIT: I didn't have to do anything for the textarea, it got parsed correctly.
But I have another div with a number field.
<div class="width115 left form-group has-feedback">
<span id="personen"> Anzahl Personen </span>
<input class="btn-input-wrapper" id="personen" type="number" min="1" value="1"/>
</div>
The value out of there is never parsed.

If by textfield you mean textarea, here's your answer:
All details you have in w3schools:
https://www.w3schools.com/tags/att_textarea_form.asp
Example:
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_textarea_form
When you send example, it will show you generated GET link with textarea value.
You missing form="usrform" part tho, but it should work if you keep everything between <form> tags.

Related

Selenium how to get hidden value inside html which is not showing in the html element

I working on one site where I found an input field value like
Here value Hotel rupdia is coming automatically from Database. But when I inspect the element I have found not set any value. And I am not sure how can read this text from here using selenium. As value not stored in any attribute or value
Here is the Html
<fieldset class="form-group position-relative outline-none" id="__BVID__458"><div tabindex="-1" role="group" class="bv-no-focus-ring"><input name="name" type="text" placeholder="Property name" autocomplete="new-password" class="form-control is-valid" inputmode="text" id="__BVID__459"><!----><!----><!----><!----><!----><!----><!----><!----><div class="invalid-tooltip"> </div><!----><!----><!----></div></fieldset>
Can anyone face this type of issue? And help me to find out the solution?
Instead .getText(). try applying .getAttribute("value") on that web element
Use this xpath
//div[#class='bv-no-focus-ring']//input[#name='name']
as
String val = driver.findElement(By.xpath("//div[#class='bv-no-focus-ring']//input[#name='name']")).getAttribute("value");
and print this val, Also remember to put some sleep before using this code.

HTML required fields are not showing a message when it's not filled out

I have a big form for a website, with multiple required fields, and all of them are working perfectly, when i click submit on the form, the web page scroll to the field's location with an error message, except on two parts, the "Number of travelers" and the "Date of the trip".
This is the HTML for both of them:
<div class="sect-txt" style="margin-top:100px;" id="op">
<h1> Date of the trip </h1>
<div class="al">
<h1 style="font-family:Montserrat;font-size:14px;color:#161616;margin-bottom:5px;"> Check In </h1>
<input type="date" class="hide-replaced" data-date-size="1" placeholder="Check-in" name="checkin" required />
</div>
<div class="al">
<h1 style="font-family:Montserrat;font-size:14px;color:#161616;margin-bottom:5px;"> Check Out </h1>
<input type="date" class="hide-replaced" data-date-size="1" placeholder="Check-out" name="checkout" required />
</div>
<a href="#four">
<div class="btn-nxt" style="position:relative;top:137px;">
NEXT
</div>
</a>
</div>
<div class="sect-txt">
<h1> Number of travelers </h1>
<input type="number" class="f-2" placeholder="Adults" name="adults" required/>
<input type="number" class="f-3" placeholder="Children" name="childrens" required/>
<a href="#fif">
<div class="btn-nxt-b">
NEXT
</div>
</a>
</div>
And this is a link to the page in action: http://www.eliteware.co/92/form/
Your button is not focusable because you are trying to hide it when it has to receive focus again. Check the following link for more information about why this happens. Basically, you are hiding the object that is supposed to receive focus when validation is needed. If you don't want this to happen, you can probably do validation before hiding, or unhide the object if validation fails.
https://stackoverflow.com/a/28340579/616813
Also, do remember, if an error log exists, that is the first point to check if you receive an error. That is the whole point of error log, to give you a starting point to debug.
Or as Andreas said, "Fix the damn errors in the console... :)".
Edit:
Because it was killing me, I tried to reverse engineer your application. All it took was comparing the textbox that was working, and the one that was failing to find the problem. Really, that easy.
aria-required="true"
Your "Adults" and "Children" input fields have this property. You need required="true" instead.
Check your css and update that. And no, I have no idea why "aria=required" and "required" property behave differently. It is something new to learn for sure.

Getting input value with javascript when it's not part of the form?

I am dealing with two versions of a page. The first one has a search input field as part of a form, and I can get that value no problem with
document.getElementsByClassName('search-input')[0].value
i.e. this will update as it's being typed. On the other version of the page (which I have no control over) the input field is not part of a form, and now the above code doesn't work (the class of the input field is still "search input").
Here is the html where it's working fine:
<form action="search-landing.aspx" method="GET">
<input class="search-input" autofocus="autofocus" placeholder="City, State or Zip" name="location" required="">
<button id="searchButton" tabindex="0" class="search-btn" type="submit">Search</button>
</form>
And here is the code where it's not
<div class="search-box">
<input type="text" class="search-input" placeholder="City, State or Zip">
</div>
Does anyone know why I'm having this issue? Is there a way around it (i.e. to grab a value from an input field that is NOT part of a form)?
Thanks
Rooster correctly pointed out that I may have more than 1 input field of class "search-input". There were two identical fields, one hidden so document.getElementsByClassName('search-input')[1].value was the answer in this case

Can't assign a new value to my autocomplete box

I've created a search page that can be toggled between french and english. So when the user searches a record and toggles to french it displays the same record they were viewing on the english page.
What I want to do is display the record name in the search box when the page is toggled.I assumed it was as simple as doing a $('#inputID').val(record); but it doesn't seem to be working. I've alerted the record name and it works fine, so I'm stumped. All the scripts are linked correctly as well so that's not the problem.
Autocomplete Box Code
<div id="ui-widgit">
<label for="searchParams">
<h1>Search All Programs (By Screen Number or By Error Code):</h1>
</label>
<input type="text" id="inputID" name="inputID" value="" class="ipt_Design" style="width:255px;" />
<input type="button" value="Search" name="searchBtn" class="btn_Design" onclick="showSearch(inputID.value)"/>
</div>
Try to change the value of inputID with this
$('#inputID').val(recordToggle);
also have tried this:
$('#inputID input').val(recordToggle);
It is hard to tell with your presented markup but I am assuming you are trying to change the value of $('#inputID') after the page refreshed. It is important where you put this code. If it is placed before <input type="text" id="inputID" name="inputID" value="" class="ipt_Design" style="width:255px;" /> you will not return anything with $('#inputID') so you will change the value of nothing to your text. It will give no error. To fix this you can use:
$( document ).ready(function(){
$('#inputID').val(recordToggle);
});
Be sure to read about jQuery's ready function because load may be the better choice.
If this doesn't fix your problem let me know. I will update my answer.

HTML: text input is not being submitted

I have an HTML form with many fields, including a text field, that is,
<input name="my_field" type="text"></input>
Now, this text field is being changed by tons of JavaScript, jQuery and CSS code. The result of all this interaction is that when the form is submitted, this particular text field simply gets ignored (it is like that field was not there). I am not saying it get submitted with empy text, it simply doesn't appear in the list of fields submitted...
Because there are tons of code affecting this particular text field, I don't know what is causing this weird behavior. So I was wondering if someone could tell me what kind of HTML attribute (or JavaScript code, or jQuery code, or ...) could result in a text field being ignored.
At the end of all this interaction, I get the following HTML code (retrieved using the "Inspect Element" from Chrome):
<input id="id_my_field" maxlength="200" name="my_field" type="text" class="tt-query" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top; background-color: transparent;" data-original-title="" title=""></input>
You should add a name attribute to the input:
<input type="text" name="myinput" />
Add the name attribute, like this:
<input name="myField" type="text"></input>

Categories