Currently, I am trying to learn js.
At this moment, I can make some simple functional scripts. But whenever I want user input, I still have to us a prompt, which can become quite annoying.
Therefore, I want to use HTML boxes for user input.
I put the box in HTML like this:
<FORM>
<INPUT type="button" value="Fill Me In" name="box1">
</FORM>
But how do I call the input in javascript then?
Thanks in advance.
You can do as follow :
<FORM>
<INPUT type="button" value="Fill Me In" name="box1" id="txt">
</FORM>
Javascript :
var txtval=document.getElementById("txt").value;
or :
you can create custom dialog and show it using javascript or jquery(best option)
For more about dialog refer This link
There are various methods to get input textbox value:
Method 1:
document.getElementById('textbox_id').value to get the value of desired box
Eg. document.getElementById("searchTxt").value;
*Note : Method 2,3,4 and 6 returns a collection of elements called NodeList, so use [whole_number] to get the desired occurence, for first element use [0] and for second one use 1 and so on...*
Method 2:
Use document.getElementsByClassName('class_name')[whole_number].value which returns a Live Nodelist
Eg. document.getElementsByClassName("searchField")[0].value;
if this is the first textbox in your page.
Method 3:
Use document.getElementsByTagName('tag_name')[whole_number].value which also returns a live nodelist
Eg. document.getElementsByTagName("input")[0].value; ,
if this is the first textbox in your page.
Method 4:
document.getElementsByName('name')[whole_number].value
Eg. document.getElementsByName("searchTxt")[0].value;
if this is the first textbox with name 'searchtext' in your page.
Method 5:
Use powerful document.querySelector('selector').value which uses CSS selector to select element
Eg. document.querySelector('#searchTxt').value; selected by id
document.querySelector('.searchField').value; selected by class
document.querySelector('input').value; selected by tagname
document.querySelector('[name="searchTxt"]').value; selected by name
Method 6:
document.querySelectorAll('selector')[whole_number].value which also uses CSS selector to select elements but it returns all elements with that selector as a static nodelist.
Eg. document.querySelectorAll('#searchTxt')[0].value; selected by id
document.querySelectorAll('.searchField')[0].value; selected by class
document.querySelectorAll('input')[0].value; selected by tagname
document.querySelectorAll('[name="searchTxt"]')[0].value; selected by name
You can use window.openDialog to open a window as a dialog:
var retValues = { box1: null };
var win = openDialog("your_form.html", "dlg", "modal", retVals);
alert(retValues.box1);
Then your dialog:
<FORM onsubmit="window.arguments[1].box1 = document.getElementById('txt').value; close();">
<INPUT type="button" value="Fill Me In" name="box1" id="txt">
</FORM>
Related
I try to click a button in IE that have same ID, same class but different onclick. My code work with 1st button but cannot click on 2nd button.
Onclick element will call function RaiseGdcP1(ItemLineNo).
I already try to use IHTMLElement to loop my code to search for Id btnGdcP1and click all that id but failed.
Here code that i use to click 1st button
Set HTMLDoc = IE.document
HTMLDoc.parentWindow.execScript "window.confirm = function(){return true;};"
HTMLDoc.getElementById("btnGdcP1").Click
Application.Wait Now + TimeValue("00:00:10")
Html is as below
<INPUT onclick=RaiseGdcP1(2) id=btnGdcP1 type=button value="GDC P1" name=btnGdcP1> "1st button
<INPUT onclick=RaiseGdcP1(3) id=btnGdcP1 type=button value="GDC P1" name=btnGdcP1> "2nd button
Even in my excel I have 2 line for each button.
My code above only able to click 1st button only.
I would like to click both of button.
Can you me help on this.
Thank you.
You can use attribute = value selectors to differentiate
ie.document.querySelector("[onclick='RaiseGdcP1(2)']").click
You may need to escape the () e.g.
ie.document.querySelector("[onclick='RaiseGdcP1\(2\)']").click
but I don't think so. I think escaping is for when unquoted e.g.
ie.document.querySelector("[onclick=RaiseGdcP1\(2\)]").click
For the other
ie.document.querySelector("[onclick='RaiseGdcP1(3)']").click
You can also use querySelectorAll() with # id selector
Dim buttons As Object
Set buttons = ie.document.querySelectorAll("#btnGdcP1")
buttons.item(0).click '< first
buttons.item(1).click '< second
You might also be able to call functions direct
ie.document.parentWindow.execScript "RaiseGdcP1(1)"
ie.document.parentWindow.execScript "RaiseGdcP1(3)"
It is an error to have two id's with the same value. It must be unique in order to work as expected:
https://www.w3schools.com/hTml/html_id.asp
Change the second id to a unique value (btnGdcP2) and use that in your code:
HTMLDoc.getElementById("btnGdcP1").Click
HTMLDoc.getElementById("btnGdcP2").Click
I have a table where if X has a value, display X, otherwise, add a link which when clicked will display a textbox where user can input the value. I dynamically assign IDs/classes to the link and textboxes but when I run the application, each click on any link only seems to trigger the first row. I put in alerts to show what row is being clicked and I always get the first row. Looking at the browser DOM explorer, I can see that each row has its own unique ID. How do I get each OnClick event to grab the correct corresponding ID?
C#/Razor code:
<td>
Unmapped
<input type ="submit" class="editAction hidden" value="#string.Format("tr{0}",i)" name="action:ChangeToEditSubAction" />
<input type="hidden" name="#Html.Raw("EntityMapping.EMREntityID")" value="#Html.Raw(Model.DisplayResults[i].EMREntityID)" />
<span class="#string.Format("tr{0}accountTxtBox",i) hidden">#Html.TextBoxFor(m => m.EntityMapping.AssignedHOAccountID)</span> </td>
Javascript Function
function UnmappedClick() {
//$(".accountTxtBox").removeClass("hidden");
//$(".unmapped").addClass("hidden");
//$("#btnSave").removeAttr('disabled');
//$(".editAction").click();
//$(".editAction").val(null);
alert($(".unmapped").attr('id'));
var txtBox = $(".editAction").val();
var actTextBox = "." + txtBox + "accountTxtBox";
$(actTextBox).removeClass("hidden");
alert(txtBox);
}
DOM Explorer Image
You can pass a parameter from your onclick event using the "this" keyword.
onclick="UnmappedClick(this.id)"
function UnmappedClick(id){
//now you have the specific ID
}
or if necessary pass the whole control over
onclick="UnmappedClick(this)"
you can try this
$(this).attr('id') // use this
instead of
$(".unmapped").attr('id')
This will give you the current elements id when you click
As you can see here, using $('.class') will return a list all the elements with that class. When you use $(".unmapped").attr('id') you'll always get the value of the first element in the list, that's why you always get the first row.
The same will happen with var txtBox = $(".editAction").val();. With $(actTextBox).removeClass("hidden"); you'll remove the class hidden from all the elements matched.
To get the id of an element you can use onclick="unmapped(this) or onclick="unmapped(this.id)" using the following code depending on the onclick attribute
function unmapped(element) {
var id = $(element).attr('id')
alert(id)
}
function unmapped(id) {
alert(id)
}
You can check this fiddle to see them in action.
I have this code:
<input type="radio" name="pay" id="payid" value="banktransfer"> Bank Transfer <br/>
<input type="radio" name="pay" id="payid" value="paypal"> PayPal <br/> <br/>
I try:
var sample = $('#payid').val()
alert(sample);
Why I have still banktransfer? (regardless of the selected input)?
The id must be unique. Radios need the same name for their on-off functionality to work, but each must have a unique id. You could, for instance, have "payid1" and "payid2"
The ID attribute must be unique across the page. In your case jQuery is just picking the first element with that ID and returning that value. This code will get you the selected value.
jQuery("input[name=pay]:checked").val();
Try
var sample = $("[name=pay]:checked").val()
You need to specify which one of the radio buttons you want, you can get the correct one (the checked one) by using the :checked selector. You also need to use the name attribute selector, because id needs to be unique and JQuery will only ever return the first match.
This should work for you:
var sample = $('[name="pay"]:checked').val();
alert(sample);
Here is a working example
I have created a multiple select box on a form object using zend framework 2:
$contacts = new Element\Select('contacts');
$contacts->setLabel('All Contacts')
->setAttribute('name', 'contacts')
->setAttribute('multiple', 'multiple')
->setAttribute('size', 10)
->setOptions(array('options' => $users));
I would like to execute some javascript when a button on the form is pressed:
$moveAllRight = new Element\Button('moveAllRight');
$moveAllRight->setLabel('Move All ->')
->setAttribute('value', 'Move All ->')
->setAttribute('onClick', 'moveAll(this.form.contacts,this.form.newContacts)');
Unfortunately, when the page is created the name of the multiple select element is appended with []:
<select name="contacts[]" multiple="multiple" size="10">
I have tried changing the names within the js function call:
->setAttribute('onClick', 'moveAll(this.form.contacts[],this.form.newContacts[])');
but I'm am still not having any luck getting it to work. If I remove the multiple option from the select box it works, but I would like to use the multiple select box if at all possible. Is there anyway to make this work?s
I realized that form elements can also be referred to by id as well. I set an id attribute with the same value as the name I was trying to use:
$contacts = new Element\Select('contacts');
$contacts->setLabel('All Contacts')
->setAttribute('id', 'contacts')
->setAttribute('multiple', 'multiple')
->setAttribute('size', 10)
->setOptions(array('options' => $users));
The element is created on the page:
<select name="contacts[]" id="contacts" multiple="multiple" size="10">
and I can now reference it like I originally wanted to:
->setAttribute('onClick', 'moveAll(this.form.contacts,this.form.newContacts)');
I have 2 radios:
<input id="a_15_0" type="radio" value="abc" name="a_15"/>
<input id="a_15_1" type="radio" value="xyz" name="a_15"/>
Both are unselected. I have only the name of the radio, i.e a_15, but not the IDs.
1) How can I get the value of the selected option of this radio? E.g if the user clicked 'xyz', how can I get it? Right now I'm using:
var val=$('[name="a_15"]').val();
Which always gives abc even when xyz is selected.
2) How can I get xyz to be selected through javascript, without knowing the ID of the radio which says xyz? Doing:
$('[name="a_15"]').val('xyz');
Changes the value of both radios to xyz rather than selecting the one whose value had been xyz.
Do I need to use document.myForm.a_15.value? Would that work consistently?
1)
try
var val = $('input[name=a_15]:checked').val();
jQuery docs on checked pseudo-class
2) the only solution I found is
$('input[name=a_15][value=xyz]').get(0).checked=true
Have you tried using the val() in conjunction with the :checked selector?
$('[name="a_15"]:checked').val();
As for setting the selection based on the value, you may have to perform a multiple attribute tests?
$('[name="a_15"][value="xyz"]').get(0).checked = true;
There are many ways of selectors in jQuery; id, class, etc..I believe this will do the job, not tested:
var val= $("input[name=a_15]:checked").val();
if you know the name of the form then this will definitely do it
var val= jQuery('#radio_form input:radio:checked').val();
you have the correct code here:
to run
to edit
the correct form is:
$("input[name='a_15']:checked").val();
as you can test using the links above