jQuery selector for h1 contains and a button - javascript

I'm trying to construct a jQuery selector to select both a h1 that contains a certain word and then find the button that's accompanied by the h1.
This is the HTML structure that I can't change.
<div class="item1">
<h1>Title</h1>
<div id="cctrl">
<form>
<input>
<input>
<fieldset>
<input class="button" type="submit" value="submit">
</fieldset>
</form>
</div>
I'm trying to select the submit button on basis of the h1 title. So for example:
If h1 title is John, I want to find the button that has that exact h1 title near it and click it.
To do this I tried to use an .each() method.
$("h1:contains('John')>.button[value='submit']").each(function(){
$(this).click();
});
If more buttons with the h1 title John exist, I want to each method to click all of them. But my jQuery isn't working how I want it to and I'm stuck right now. Does anyone know how to fix this?

You need to use .next() to get to the DIV after the H1, then use find() to search inside that.
$(".button").click(function(e) {
e.preventDefault();
console.log(this.id);
});
$("h1:contains(John)").next().find(".button[value=submit]").click();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Title</h1>
<div class="cctrl">
<form>
<input type="text" value="Bla bla">
<input type="text" value="Bla bla">
<fieldset>
<input id="button1" class="button" type="submit" value="submit">
</fieldset>
</form>
</div>
<h1>John Smith</h1>
<div class="cctrl">
<form>
<input type="text" value="Bla bla">
<input type="text" value="Bla bla">
<fieldset>
<input id="button2" class="button" type="submit" value="submit">
</fieldset>
</form>
</div>
<h1>Title</h1>
<div class="cctrl">
<form>
<input type="text" value="Bla bla">
<input type="text" value="Bla bla">
<fieldset>
<input id="button3" class="button" type="submit" value="submit">
</fieldset>
</form>
</div>
<h1>Papa John</h1>
<div class="cctrl">
<form>
<input type="text" value="Bla bla">
<input type="text" value="Bla bla">
<fieldset>
<input id="button4" class="button" type="submit" value="submit">
</fieldset>
</form>
</div>

Your input is not a child of h1 so use + next Selector instead of > to select the div wich contains the input and then use find() method inside each. Remember change id of cctrl to class so you can use div.cctrl, or if you wont use only +div:
$("h1:contains('John') + div.cctrl").each(function(){
$(this).find(".button[value='submit']").click();
});
Or even more simple you dont need each function:
$("h1:contains('John') + div.cctrl").find(".button[value='submit']").addClass("blue");
$("h1:contains('John') + div.cctrl").find(".button[value='submit']").addClass("blue");
.blue{
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Title</h1>
<div class="cctrl">
<form>
<input type="text" value="Bla bla">
<input type="text" value="Bla bla">
<fieldset>
<input class="button" type="submit" value="submit">
</fieldset>
</form>
</div>
<h1>John</h1>
<div class="cctrl">
<form>
<input type="text" value="Bla bla">
<input type="text" value="Bla bla">
<fieldset>
<input class="button" type="submit" value="submit">
</fieldset>
</form>
</div>
<h1>Title</h1>
<div class="cctrl">
<form>
<input type="text" value="Bla bla">
<input type="text" value="Bla bla">
<fieldset>
<input class="button" type="submit" value="submit">
</fieldset>
</form>
</div>
<h1>John</h1>
<div class="cctrl">
<form>
<input type="text" value="Bla bla">
<input type="text" value="Bla bla">
<fieldset>
<input class="button" type="submit" value="submit">
</fieldset>
</form>
</div>

Related

reset two forms by one click JavaScript

I have two forms .. each form has a reser button with the id called "formReset"
no all the form are showing in the same time, one shows after the other one
I used the below code but it only works on the first form, I can o it by doing two click buttons with different id's but is there a way to do it with one click only?
document.getElementById("formReset").addEventListener("click",resetForm);
function resetForm(){
document.getElementById("login").reset();
document.getElementById("cal").reset();
}
<form id="login">
<label>Enter your name : <span id="nameMsg"></span></label><br>
<input type="text" id="name"><br>
<input type="submit" id="submit" value="submit" >
<input type="button" id="formReset" value="reset" ><br>
</form>
<form id="cal">
<input type="number" id="answer" ><br><br>
<input type="button" id="submit2" value="submit2" >
<input type="button" id="formReset" value="reset" >
</form>
try this
document.querySelectorAll(".formReset").forEach(btn=>{
btn.addEventListener("click",resetForm)
});
function resetForm(e){
e.target.parentElement.reset()
}
<form id="login">
<label>Enter your name : <span id="nameMsg"></span></label><br>
<input type="text" id="name"><br>
<input type="submit" id="submit" value="submit" >
<input type="button" class="formReset" value="reset" ><br>
</form>
<form id="cal">
<input type="number" id="answer" ><br><br>
<input type="button" id="submit2" value="submit2" >
<input type="button" class="formReset" value="reset" >
</form>
Attribute id should be unique in a document, use class instead with querySelectorAll() and forEach() like the following way:
document.querySelectorAll(".formReset").forEach(function(reset){
reset.addEventListener("click",resetForm);
});
function resetForm(){
document.getElementById("login").reset();
document.getElementById("cal").reset();
}
<form id="login">
<label>Enter your name : <span id="nameMsg"></span></label><br>
<input type="text" id="name"><br>
<input type="submit" id="submit" value="submit" >
<input type="button" class="formReset" value="reset" ><br>
</form>
<form id="cal">
<input type="number" id="answer" ><br><br>
<input type="button" id="submit2" value="submit2" >
<input type="button" class="formReset" value="reset" >
</form>
easy way using closest.
document.querySelectorAll(".formReset").forEach(btn=>{
btn.addEventListener("click",resetForm)
});
function resetForm(e){
e.target.closest('form').reset()
}
<form id="login">
<label>Enter your name : <span id="nameMsg"></span></label><br>
<input type="text" id="name"><br>
<input type="submit" id="submit" value="submit" >
<input type="button" class="formReset" value="reset" ><br>
</form>
<form id="cal">
<input type="number" id="answer" ><br><br>
<input type="button" id="submit2" value="submit2" >
<input type="button" class="formReset" value="reset" >
</form>
You should add click listeners for each reset button, then reset parent by click
.html
<form id="login">
<label>Enter your name : <span id="nameMsg"></span></label><br>
<input type="text" id="name"><br>
<input type="submit" id="submit" value="submit">
<input type="button" class="formReset" value="reset"><br>
</form>
<form id="cal">
<input type="number" id="answer"><br><br>
<input type="button" id="submit2" value="submit2">
<input type="button" class="formReset" value="reset">
</form>
.js
document.querySelectorAll(".formReset").forEach((e) => {
e.addEventListener("click", () => {
document.querySelectorAll("form").forEach((f) => {
f.reset();
})
});
});

JavaScript function is only working for the first element with a class name, not all elements with that class

I have multiple forms on one page with same structure.
They all have a file input field that has 'onchange' event, which removes the 'disabled' attribute from my submit button when a file is chosen.
The problem is, my function only works for the first element with that class name. How can I make it work for every item with that class?
index.php:
<form class="form">
<input type="file" name="image" onchange="unlock();">
<input type="text" name="title" placeholder="Image title"/>
<input type="submit" value="Add image" class="submit" disabled/>
</form>
<form class="form">
<input type="file" name="image" onchange="unlock();">
<input type="text" name="title" placeholder="Image title"/>
<input type="submit" value="Add image" class="submit" disabled/>
</form>
scripts.js:
function unlock() {
document.querySelector('.submit').removeAttribute("disabled");
}
Any help is appreciated!
Use eventListener
address relatively using selectors
make it a habit to never call anything submit in a form
document.querySelectorAll("[name=image]").forEach(
ele => ele.addEventListener("change",
(e) => e.target.closest(".form").querySelector(".sub").disabled = false
)
);
<form class="form">
<input type="file" name="image">
<input type="text" name="title" placeholder="Image title" />
<input type="submit" value="Add image" class="sub" disabled/>
</form>
<form class="form">
<input type="file" name="image">
<input type="text" name="title" placeholder="Image title" />
<input type="submit" value="Add image" class="sub" disabled/>
</form>
More compatible version
[...document.querySelectorAll("[name=image]")].forEach(function(ele) {
ele.addEventListener("change",
function(e) {
e.target.parentNode.querySelector(".sub").disabled = false;
})
});
<form class="form">
<input type="file" name="image">
<input type="text" name="title" placeholder="Image title" />
<input type="submit" value="Add image" class="sub" disabled/>
</form>
<form class="form">
<input type="file" name="image">
<input type="text" name="title" placeholder="Image title" />
<input type="submit" value="Add image" class="sub" disabled/>
</form>
Give ID's to all submit buttons and pass the respective ID's in unlock() function.
This removes the disabled from the submit
function unlock(form_id) {
document.getElementById(form_id).removeAttribute("disabled");
}
<form class="form">
<input type="file" name="image" onchange="unlock('form1');">
<input type="text" name="title" placeholder="Image title" />
<input type="submit" id="form1" value="Add image" class="submit" disabled/>
</form>
<form class="form">
<input type="file" name="image" onchange="unlock('form2');">
<input type="text" name="title" placeholder="Image title" />
<input type="submit" id="form2" value="Add image" class="submit" disabled/>
</form>

How do I align a search bar and search button in HTML?

I would like to align search button next to search bar but I don't know how to do it.
HTML :
<div id="tmsearch">
<span class="btn-toogle active"></span>
<form id="tmsearchbox" method="get">
<input type="hidden" name="controller" value="search"/>
<input type="hidden" name="orderby" value="position"/>
<input type="hidden" name="orderway" value="desc"/>
<input class="tm_search_query form-control" type="text" id="tm_search_query" name="search_query" placeholder="What are you shopping for today ?"/>
</form>
<button>Search</button>
</div>
JSFIDDLE ==> https://jsfiddle.net/bpr6qmjt/3/
Thanks
Use CSS style "display:inline"
<div id="tmsearch">
<span class="btn-toogle active"></span>
<form id="tmsearchbox" method="get" style="display:inline">
<input type="hidden" name="controller" value="search"/>
<input type="hidden" name="orderby" value="position"/>
<input type="hidden" name="orderway" value="desc"/>
<input class="tm_search_query form-control" type="text" id="tm_search_query" name="search_query" placeholder="What are you shopping for today ?"/>
</form>
<button style="display:inline">Search</button>
</div>
You can easy add style display:inline-block to the form element.
like this
<form id="tmsearchbox" method="get" style="display:inline-block">
or you can add it by id
form#tmsearchbox { display :inline-block }
You could set the style of the form in CSS:
#tmsearchbox {display:inline;}
Or embedded the style in the form tag:
<form id="tmsearchbox" method="get" style="display:inline;">
<form id="tmsearchbox" method="get">
<input type="hidden" name="controller" value="search">
<input type="hidden" name="orderby" value="position">
<input type="hidden" name="orderway" value="desc">
<input class="tm_search_query form-control" id="myinput" type="text" name="search_query" placeholder="What are you shopping for today ?" style="
float: left;
">
</form>

Form does not shows on clicking using JS

I have made form and it is hidden using CSS display property. I have button. I want to show the form when I click that button. I have done everything from my end but still form does not show up.
<input type="button" value="Popup" onclick="showLoginForm();"/>
<form id="loginForm" action="" method="post" style="display:none;">
<p><strong>ID:</strong> </p>
<strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
<strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
<strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
<input type="submit" id = "submit" name="submit" value="Submit">
</form>
Below is my JS function which is not trigerring.
$("button").click(function(e) {
$("#loginForm").show();
e.preventDefault();
});
The function showLoginForm() is not defined. Your jquery was listening for a button click, when your button is of type input.
$("input[type=button]").click(function(e) {
$("#loginForm").show();
e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="button" value="Popup" />
<form id="loginForm" action="" method="post" style="display:none;">
<p><strong>ID:</strong> </p>
<strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
<strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
<strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
<input type="submit" id = "submit" name="submit" value="Submit">
</form>
Or with the function defined:
function showLoginForm(){
$("#loginForm").show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="button" value="Popup" onclick="showLoginForm();"/>
<form id="loginForm" action="" method="post" style="display:none;">
<p><strong>ID:</strong> </p>
<strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
<strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
<strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
<input type="submit" id = "submit" name="submit" value="Submit">
</form>
Your issue is that your input is type button, not a button element itself.
so either changing your input to a button or changing your jquery binding to $('input[type=button]') ought to work
http://jsfiddle.net/4Lz5rsq3/

text message displays when you click on a button

I have code that creates a form and when you click on submit it should output the text on the screen. However my code doesn't display the message on the screen, although it quickly shows the text and then hide it.
<div id="form-wrap">
<form>
<fieldset>
<h4>Contact Form:</h4>
<label class="labelone" for="name">Name: </label>
<input name="name"/>
<label for="email">Email: </label>
<input name="email" />
<label for="comments">Comments: </label>
<textarea name="comments"></textarea>
</fieldset>
<fieldset>
<input class= "btn" type="submit" value="Send Email" onclick="myFunction()"/>
<input class="btn" type="reset" value="Reset Form"/>
</fieldset>
</form>
<p id="jomin">This is a message</p>
</div>
STYLE
<style type="text/css">
#jomin { visibility:hidden;
}
</style>
JAVASCRIPT
<script type="text/javascript">
function myFunction() {
document.getElementById("jomin").style.visibility="visible";
}
</script>
You're not seeing the change because the form is being submitting and the page is reloading.
Change:
<input class= "btn" type="submit" value="Send Email" onclick="myFunction()"/>
to
<input class= "btn" type="submit" value="Send Email" onclick="return myFunction()"/>
And also change
function myFunction() {
document.getElementById("jomin").style.visibility="visible";
}
to
function myFunction() {
document.getElementById("jomin").style.visibility="visible";
return false;
}
jsFiddle example

Categories

Resources