I have the following html:
<html>
<body>
<div title="test" class="test">hello</div>
<input onclick="" type="confusepuppet" value="google" class="button">
<form action="http://yahoo.com">
<input onclick="" type="submit" value="yahoo" class="button">
</form>
<form action="http://google.com">
<input onclick="" type="submit" value="google" class="button">
</form>
</body>
</html>
and suppose I want to click the button to redirect to google.com, I can't use value="google" or type="submit", I have to use both value="google" AND type="submit" to avoid clicking the wrong button.
How do I accomplish this in puppeteer?
This doesn't work:
await page.click('input[value="google",type="submit"]')
Multiple value selector:
await page.click('input[value="google"][type="submit"]');
You can use attribute selector
const element = await page.$('[value="google"]');
await element.click();
Related
I have this html like
<form method="POST" action="?do=vote&page=vote-page">
<button type="submit" name="vote_id" value="1" class="btn btn-primary" role="button">Vote Now</button>
</form>
<form method="POST" action="?do=vote&page=vote-page">
<button type="submit" name="vote_id" value="2" class="btn btn-primary" role="button">Vote Now</button>
</form>
My question is, I want to click the button based on name and value with jquery or javascript, How to do this?
If I understand correctly, you mean, that you want to execute click if name and value attributes are matching on any button. You can try the following. You should have some event attached to that button, so you can see the effect.
I have attached onclick there and put correct names.
function clickButtons(name,value){
var elements=document.getElementsByTagName("button");
for(var i=elements.length-1;i>=0;--i)
{
var e=elements.item(i);
if(name==e.name&&value==e.value)e.click();
}
}
clickButtons("name_1",2);
<html>
<head>
</head>
<body>
<form method="POST" action="?do=vote&page=vote-page">
<button type="submit" name="name_3" value="3" class="btn btn-primary" role="button" onclick="alert(this.name+', '+this.value)">Vote Now</button>
</form>
<form method="POST" action="?do=vote&page=vote-page">
<button type="submit" name="name_1" value="2" class="btn btn-primary" role="button" onclick="alert(this.name+', '+this.value)">Vote Now</button>
</form>
</body>
</html>
You should of course put correct names and value, I have also changed that.
const button = document.getElementById('#1');
button.addEventListener('click', e=>{
e.preventDefault()
document.getElementByName('field).innerText = 1;
})
<div class="header">
<input type="text" name="field" id="field">
</div>
<div class="btn"><input type="button" id="1" class="button" value="1"></div>
<div class="btn"><input type="button" id="2" class="button" value="2"></div>
<div class="btn"><input type="button" id="3" class="button" value="3"></div>
when I click on the button nothing be occur and how can I manage that.
A few things to learn here. getElementById takes a string with no # as an argument. You also had a typo in your getElementByName('field) (missing single quote). Additionally, there isn't a getElementByName - it would be getElementsByName (plural). Finally, you want to apply the same listener to all buttons of a certain class, so you can gather them up (I used document.querySelectorAll('.button') but getElementsByName("button") would work as well). Once you have that collection, iterate through it to set the event listener.
Lastly when you want to change the text in an input tag, you do it through the value, not the innterText. innerText is used for non-form HTML elements
const buttons = document.querySelectorAll('.button');
const field = document.querySelector('[name=field]');
buttons.forEach(button => button.addEventListener('click', e => {
e.preventDefault()
let f = field.value.trim()? field.value.trim().split(",") : [];
f.push(e.target.value);
field.value = f.join(",")
}))
<div class="header">
<input type="text" name="field" id="field">
</div>
<div class="btn"><input type="button" id="1" class="button" value="1"></div>
<div class="btn"><input type="button" id="2" class="button" value="2"></div>
<div class="btn"><input type="button" id="3" class="button" value="3"></div>
When you are trying to get the value of a DOM element, you need to get the element reference and then use the value property. For example:
const buttonValue = document.getElementById('submit').value;
When using getElementById you don't need to use #1, just 1 would be enough. Also, getElementByName doesn't seem to be a proper DOM manipulation function, the alternative is getElementsByName (gets list of all elements with specified name).
Keeping this in mind, see code below:
const button = document.getElementById('1');
button.addEventListener('click', e=>{
e.preventDefault();
document.getElementById('field').value = e.target.value;
});
<div class="header">
<input type="text" name="field" id="field">
</div>
<div class="btn">
<input type="button" id="1" class="button" value="1">
</div>
<div class="btn"><input type="button" id="2" class="button" value="2"></div>
<div class="btn"><input type="button" id="3" class="button" value="3"></div>
I have made a html form to take inputs from user. My sample code is given below:
<form class="form-main" action="../php/additem.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="what" value="faculty" />
<div class="form-item">
<div class="form-left">
<label><big>Name:</big></label>
</div>
<div class="form-right">
<input class="txtbox" type="text" name="facname" id="fac_name" size="20" required >
</div>
</div>
<div class="form-item">
<div class="form-left">
<label><big>Education:</big></label>
</div>
<div class="form-right">
<input class="txtbox" type="text" name="educn" id="fac_edu" size="20" required >
</div>
</div>
<div id="buttons">
<button class="greenbtn" type="submit" name="btn-upload" value="Add Now" id="add_fac" >Submit</button>
<input class="orangebtn" type="reset" value="Clear" id="clear_fac" />
</div>
</form>
I want to add a feature that, after the submit button being clicked it will be disappeared so that user can't double click on that. Is it possible? How will I do this?
Two easiest ways would either be with javascript and have
<form class="form-main" action="../php/additem.php" method="post" enctype="multipart/form-data" onsubmit="hideSubmit()">
<script>
function hideSubmit(){
document.getElementById("buttons").style.display = "none";
}
</script>
or jquery
<script>
$(function(){
$('.form-main').on('submit', function(){
$('#buttons').hide();
});
});
</script>
after the submit button being clicked it will be disappeared so that user can't double click on that.
You've literally described how to do it.
document.getElementById('test-button').addEventListener('click', function () {
this.remove()
})
<button id="test-button">Click me!</button>
I suggest reading about setting up events.
I was just wondering how to go about getting a href to press a button.I want to get btn btn primary when pressed to: press the submit button.
<BODY>
<a class="btn btn-primary" href="#Home"><span class="fui-time"></span></a>
<a class="btn btn-primary" href="#School"><span class="fui-time"></span></a>
<form>
<input type="submit" name="options" id="Home" value="1" />Home
<input type="submit" name="options" id="School" value="2" />School
<input type="submit" name="options" id="Work" value="3" />Work
</form>
</BODY>
Thank-you.Also if you could also provide a in-depth explanation that would be great as I sort of new to javascript.
PS: Is there any way to do it without using the function onClick()
With jQuery:
$('.btn.btn-primary').click(function (ev) {
$(this.href).click();
ev.preventDefault();
});
Although I would say your markup and structure are quite strange, you want to have submit buttons and then links that cause those buttons to be clicked??
try this
<BODY>
<a class="btn btn-primary" href="#Home" onClick="formSubmit()"><span class="fui-time"></span></a> <a class="btn btn-primary" href="#School" onClick="formSubmit()"><span class="fui-time"></span></a>
<form id="myform">
<input type="submit" name="options" id="Home" value="1" />
Home
<input type="submit" name="options" id="School" value="2" />
School
<input type="submit" name="options" id="Work" value="3" />
Work
</form>
</BODY>
<script type="text/javascript">
function formSubmit(){
$("#myform").submit();
}
</script>
You can execute javascript in a link like this <a href="javascript:alert('javascript go')">
Edit: as susheel pointed out this is not a good idea, its much better to just bind or use onClick to trigger the button click.
It would be better to do something like this:
<div onclick="document.myform.submit()"></div> (if you are submitting a form). There is no way to replace a button with another element with raw html. You will need to use javascript one way or another.
check the below fiddle:
http://jsfiddle.net/6Q4Va/3/
$('.btn.btn-primary').on('click',function () {
$(this.href).click();
});
How can I get the input elements form a certain div inside a form , not from all divs?
I want to use JAVASCRIPT not JQUERY.
I tried to use like this discountForm.oldDivIdName.elements[i].value.length, but its not working.
UPDATE:
I have a form like this,
<form action="action.php" method="post">
<div id='div1'>
<input type="text" id="id[]" />
</div>
<div id='div2'>
<input type="text" id="id[]" />
</div>
<input type="submit" name="submit" />
</form>
Both text fields id are named the same and I want to get the value of the text field of div named div1 and not from div2, how can I do that.
Any help?
If the input elements have id's, you can do something like
var value = document.getElementById('div1').children[0].value;
where you have
<form action="action.php" method="post">
<div id="div1">
<input type="text" id="id" />
<input type="submit" name="submit" />
</div>
</form>