How do I add an AND operator for different elements to this jQuery selector?
$("h1:contains('Elements') && p:contains('Black')").nextAll().find(".button[name='commit']").each(function(i, that){
$('[name=size] option').filter(function() {
return ($(this).text() == 'Small');
}).prop('selected', true);
setTimeout(function(){
$(that).click();
}, 200*i);
});
This function is triggered by a button. I want this function to check if the h1 in the div contains the text Elements and if the p alongside the h1 contains Black. I know how to do an OR operator which is just a single comma, but I'm trying to implement an AND operator.
I could also change this into an if statement, but I have no idea how to make that.
"If the 1st selector and 2nd selector returns true, find the button[name='commit'], execute the filter function and then click."
<div class="item1">
<h1>Abstract</h1>
<p>White</p>
<div id="form">
<form>
<input>
<fieldset>
<select name="size">
</select>
</fieldset>
<fieldset>
<input class="button" name="commit">
</fieldset>
</form>
</div>
</div>
<div class="item2">
<h1>Elements</h1>
<p>Black</p>
<div id="form">
<form>
<input>
<fieldset>
<select name="size">
</select>
</fieldset>
<fieldset>
<input class="button" name="commit">
</fieldset>
</form>
</div>
</div>
From your comment (which might get cleaned up):
I want this function to check if the h1 in the div contains the text Elements and if the p alongside the h1 contains Black.
Combining that with your first JavaScript block, what you're looking for is:
$("h1:contains('Elements') + p:contains('Black')").nextAll("div").find(".button[name='commit']")...
Breakdown:
$("h1:contains('Elements') + p:contains('Black')") uses an adjacent sibling combinator (+) to only match an h1 that contains Elements if it's immediately followed by a p containing Black.
.nextAll("div") finds all following sibling div elements
.find(".button[name='commit']") finds any elements within those divs that have the class button and the name commit.
Live Example (turning the relevant buttons blue after half a second; I added type="button" and value="commit" to them for the snippet):
setTimeout(function() {
$("h1:contains('Elements') + p:contains('Black')").nextAll("div").find(".button[name='commit']").css({
color: "blue",
fontWeight: "bold"
});
}, 500);
<div class="item1">
<h1>Abstract</h1>
<p>White</p>
<div id="form">
<form>
<input>
<fieldset>
<select name="size">
</select>
</fieldset>
<fieldset>
<input class="button" type="button" name="commit" value="commit">
</fieldset>
</form>
</div>
</div>
<div class="item2">
<h1>Elements</h1>
<p>Black</p>
<div id="form">
<form>
<input>
<fieldset>
<select name="size">
</select>
</fieldset>
<fieldset>
<input class="button" type="button" name="commit" value="commit">
</fieldset>
</form>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Side note: Your quoted HTML has two elements with id="form" in them. id values must be unique in a document.
Related
I need to add a single JavaScript statement in the function clickHandler() to make sure the input from the text boxes form a border around the first paragraph. I know that the getElementById only accepts one element not multiple however this approach is also not working. Would very much appreciate any help. This is all the code involved.
<head>
<script>
function clickHandler(){
document.getElementById('para1').style.border =
document.querySelectorAll('#size, #style, #colour).value;
}
</script>
</head>
<body>
<h1>Introduction to JavaScript</h1>
<p id="para1">JavaScript is also known as ECMAScript.</p>
<p>Size:
<input type="text" id="size">
</p>
<p>Style:
<input type="text" id="style">
</p>
<p>Colour:
<input type="text" id="colour">
</p>
<button type="button" onclick="clickHandler()" value="Change style">Change style</button>
You might use Array.from to transform a NodeList of each input into an array of each input's values, then join by spaces:
function clickHandler() {
document.getElementById('para1').style.border = Array.from(
document.querySelectorAll('input'),
input => input.value
).join(' ');
}
<p id="para1">JavaScript is also known as ECMAScript.</p>
<p>Size:
<input type="text" id="size" placeholder='5px'>
</p>
<p>Style:
<input type="text" id="style" placeholder='solid'>
</p>
<p>Colour:
<input type="text" id="colour" placeholder='green'>
</p>
<button type="button" onclick="clickHandler()" value="Change style">Change style</button>
I am using material-design in my project. I a loading my html file inside the iframe. My html file is
<form action="#" method="post" name="sign up for beta form">
<div class="header">
<p id="sampleTitle" contenteditable="true">Sign Up For Beta</p>
</div>
<div class="description">
<p contenteditable="true">Milkshake is almost ready. If you're interested in testing it out, then sign up below
to get exclusive access.</p>
</div>
<div class="input">
<input type="text" class="button" id="email" name="email" placeholder="NAME#EXAMPLE.COM">
<input type="submit" class="button" id="submit" value="SIGN UP">
</div>
</form>
I have to change the background color of the button based on user choice. For that i am using "jquery.minicolors.js" and wrote my script as...
<script type="text/javascript">
// background button color
$(document.body).on('change', '#hue-demo-btn-bg', function () {
var val = $(this).val();
console.log($(document).find('#submit'));
$(document).find('#submit').attr('style', 'background-color: ' + val + ' !important');
});
</script>
Its not changing the background color of the button also printing the empty object as
Object[ ]
As such your form is loaded with iframe you have to use jQuery('#PLACE_IFRAME_ID').contents() selector to get iframe content.
And to make change in the background color of submit button please use below code.
jQuery('#PLACE_IFRAME_ID').contents().find('#submit').attr('style', 'background-color: ' + val + ' !important');
Note : In place of #PLACE_IFRAME_ID place your iframe's id in the selector.
Please go through the working demo :
// background button color
$(document.body).on('change', '#hue-demo-btn-bg', function () {
var val = $(this).val();
jQuery('#IframeID').contents().find('#submit').attr('style', 'background-color: ' + val + ' !important');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ifrmae id="IframeID">
<form action="#" method="post" name="sign up for beta form">
<div class="header">
<p id="sampleTitle" contenteditable="true">Sign Up For Beta</p>
</div>
<div class="description">
<p contenteditable="true">Milkshake is almost ready. If you're interested in testing it out, then sign up below
to get exclusive access.</p>
</div>
<div class="input">
<input type="text" class="button" id="email" name="email" placeholder="NAME#EXAMPLE.COM">
<input type="submit" class="button" id="submit" value="SIGN UP">
</div>
</form>
</iframe>
<select id="hue-demo-btn-bg">
<option value="">select</option>
<option value="red">red</option>
<option value="orange">Orange</option>
<option value="blue">Blue</option>
</select>
Say I have the following structure representing inputs for soccer matches:
<form>
<div class="match">
<div class="scores">
<input type="text">
<input type="text">
</div>
</div>
<div class="match">
<div class="scores">
<input type="text">
<input type="text">
</div>
</div>
<div class="match">
<div class="scores">
<input type="text">
<input type="text">
</div>
</div>
</form>
And I want to randomly populate each input, but each pair must be different.
So this is what I tried to do:
$('form .match .scores').each(function () {
var inputs = $(this).find('input[type=text]');
// generate scores...
inputs[0].val(score1);
inputs[1].val(score2);
});
I don't know what I am missing because when trying to populate the first input the console reports the following error:
Uncaught TypeError: inputs[0].val is not a function
What am I doing wrong?
Wrap your input in a jquery selector like $(inputs[0]) or you can use input[0].value since input[0] is a dom element.
$(function(){
$('form .match .scores').each(function () {
var inputs = $(this).find('input[type=text]');
console.log(inputs);
$(inputs[0]).val(score1);
$(inputs[1]).val(score2);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="match">
<div class="scores">
<input type="text">
<input type="text">
</div>
</div>
<div class="match">
<div class="scores">
<input type="text">
<input type="text">
</div>
</div>
<div class="match">
<div class="scores">
<input type="text">
<input type="text">
</div>
</div>
</form>
I actually answered a very similar question today:
jQuery .each() function accessing other selector via indexes
When calling a jquery array object using brackets (like inputs[0]) you're getting back an HTML node element, not a jQuery object.
try using inputs.eq(0) which will return the jQuery object in position i, then you can use jQuery's val()
for more on eq, see jQuery documentation: https://api.jquery.com/eq/
Given a jQuery object that represents a set of DOM elements, the .eq() method constructs a new jQuery object from one element within that set. The supplied index identifies the position of this element in the set.
I have a form with radio buttons each of which representing a different font. When the user selects one and hits create the font should appear in the display div.
Here is part of HTML and one of the buttons on the form:
<div id="form">
<form id="nameForm" method="get" action="nowhere.php">
<div class="formbox">
<div id="radioTitle">
Pick a font:
</div>
<label for="normal" class="normal">Normal</label>
<input type="radio" name="fonts" id="normal" />
</form>
</div>
<div id="display">
</div>
I'm not sure how to grab the font and get the specific one to display in the div using javascript.
function fonts(){
if(wholeForm.normal.checked == true){
}
}
Check out this example:
http://jsfiddle.net/ug6Lu/3/
Note that you need any selected font to either be installed on the user's computer or loaded using css/javascript.
HTML:
<div id="form">
<form id="nameForm" method="get" action="nowhere.php">
<div class="formbox">
<div id="radioTitle">
Pick a font:
</div>
<label for="normal" class="normal">Normal</label>
<input type="radio" name="fonts" id="normal" />
</form>
</div>
<div id="display">
Example Text
</div>
JS:
var checkRadio = document.getElementById('normal');
checkRadio.addEventListener("click", modifyFont, false);
function modifyFont(e){
if(e.target.checked == true) {
document.getElementById('display').style.fontFamily = "monospace";
}
}
CSS:
.new-font {
font-family: ...;
}
JS:
wholeForm.className = wholeForm.className + " otherclass";
So I'm working on a form that when you click it it brings up another form, then another, etc etc.
For the example, this is what I have so far:
<head>
<script langauge="javascript">
function showGeneral(){
document.getElementById('general').style.display="block";
document.getElementById('colors').style.display="none";
document.getElementById('domain').style.display="none";
document.getElementById('details').style.display="none";
}
function showColors(){
document.getElementById('general').style.display="none";
document.getElementById('colors').style.display="block";
document.getElementById('domain').style.display="none";
document.getElementById('details').style.display="none";
}
function showDomain(){
document.getElementById('general').style.display="none";
document.getElementById('colors').style.display="none";
document.getElementById('domain').style.display="block";
document.getElementById('details').style.display="none";
}
function showDetails(){
document.getElementById('general').style.display="none";
document.getElementById('colors').style.display="none";
document.getElementById('domain').style.display="none";
document.getElementById('details').style.display="block";
}
</script>
</head>
<body>
<div id="general" name="general">
<h1> General </h1>
<form id="general" name="general">
Name <input type="text" id="frm1txt1" name="frm1txt1"/> <br>
Email <input type="text" id="frm1txt2" name="frm1txt2"/> <br>
<input type="button" id="frm1btn1" name="frm1btn1" value="Continue" onclick="showColors();"/> <br>
</form>
</div>
<div id="colors" name="colors" style="display:none">
<h1> Colors </h1>
<form id="frm2" name="frm2">
Green? <input type="text" id="frm2txt1" name="frm2txt1"/> <br>
Red? <input type="text" id="frm2txt2" name="frm2txt2"/> <br>
<input type="button" id="frm2btn1" name="frm2btn1" value="Continue" onclick="showDomain();"/> <br>
</form>
</div>
<div id="domain" name="domain">
<h1> Domain Name? </h1>
<form id="frm1" name="frm1">
Yes <input type="text" id="frm1txt1" name="frm1txt1"/> <br>
No <input type="text" id="frm1txt2" name="frm1txt2"/> <br>
<input type="button" id="frm1btn1" name="frm1btn1" value="Continue" onclick="showDetails();"/> <br>
</form>
</div>
<div id="details" name="details">
<h1> Describe Your Order </h1>
<form id="frm1" name="frm1">
Img <input type="text" id="frm1txt1" name="frm1txt1"/> <br>
kk <input type="text" id="frm1txt2" name="frm1txt2"/> <br>
<input type="button" id="frm1btn1" name="frm1btn1" value="Finish" onclick="showGeneral();"/> <br>
</form>
</div>
</body>
The functions work fine - but the problem is it displays all the forms at on page refresh/load. How do I make it so just the first one displays when you load that page?
Cheers!
When the page loads there is no call to any of the JS functions so none of them are being processed and all your forms are displayed. You need to add an explicit call to one of the functions. So to display the first form only you'd need to add
showGeneral();
In your script block (after the showDetails() function for example).
You need to tie up each of your JS functions with an event, so that the function is called when the event is triggered.
From what I understood of your question, you need to have an onclick event handler associated with some element of your form - so that when the first one is clicked, it calls the appropriate function for the second form and so on. Also, initially just set the first form to be visible (through your CSS).