Here is a javascript for searching a certain database. The script generates a Search button to submit the query, is there a way to adjust the font/size of the text in this button?
<script src="http://www.bccls.org/js/jquery-1.7.2.min.js" type="text/javascript" ></script>
<script src="http://www.bccls.org/js/searchPolaris.js?v=2" type="text/javascript" ></script>
<form name="search" id="search" action="javascript:searchPolaris()">
<input name="query" type="text" id="query" style="width: 220px">
<input type="hidden" NAME="whichlibrary" id="whichLibrarySelected" value="119">
<br />
<input type="submit" value="Search" target="_blank">
<input type="hidden" name="newWindowCheck" id="newWindowCheck" value="newWindow">
</form>
You can with css:
input[type="submit"] {
font-size: 3rem; /* or whatever...*/
}
<script type="text/javascript" src="http://www.bccls.org/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://www.bccls.org/js/searchPolaris.js?v=2"></script>
<FORM name="search" id="search"
action="javascript:searchPolaris()">
<input name="query" type="text" id="query" style="width: 220px"><input type="hidden" NAME="whichlibrary" id="whichLibrarySelected" value="119">
<br />
<input type="submit" value="Search" target="_blank"><input type="hidden" name="newWindowCheck" id="newWindowCheck" value="newWindow">
</form>
Related
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>
Myself I am beginner and at learning stage. I would like to pass input details from one page (test1.html) to next page textarea (test2.html). attaching both html files.
test1.html(first page)
<html>
<body>
<form method="post" action="test2.html">
<label><b>Customer Name</b></label>
<input type="text" placeholder="Enter Customer Name" name="cname" id="cname" required>
<script>
function () {
localStorage.setItem('mySharedData1', document.getElementById('cname').value);
}
</script>
<button type="submit" name='submit' id='submit'>Submit</button>
<input type="checkbox" checked="checked"> Remember me
</body>
</html>
test2.html(second page)
<html>
<body>
<form method="get" action="test1.html">
<fieldset class="fieldset-auto-width">
<legend><b><font color="#0000FF">Your Bookings Are..!</font color></b></legend>
<textarea cols="35" rows="19" id="Requirement1" ></textarea>
<script type="text/javascript">
var mySharedData = localStorage.getItem('mySharedData1');
function(){
Requirement1.value =Requirement1.value+document.getElementById('mySharedData1').innerHTML+this.value+", ";
}
</script>
</fieldset>
</form>
</body>
</html>
function(){
Requirement1.value =Requirement1.value+document.getElementById('mySharedData1').innerHTML+this.value+", ";
}
This should be:
function getValue() {
var value = localStorage.getItem('mySharedData1');
document.getElementById('Requirement1').innerHTML = value;
}
You have to give a name to the function in both html pages, and actually use the onclick attribute of your button Submit. I wrote on one page only
<html>
<body>
<form method="post" action="test2.html">
<label><b>Customer Name</b></label>
<input type="text" placeholder="Enter Customer Name" name="cname" id="cname" required>
<script>
function giveMeOneName() {
localStorage.setItem('mySharedData1', document.getElementById('cname').value);
}
</script>
<button type="submit" name='submit' id='submit' onclick="giveMeOneName()">
Submit
</button>
<input type="checkbox" checked="checked"> Remember me
</body>
</html>
You need to create a function and invoke that function on click submit.
<form>
<label>
<b>Customer Name</b>
</label>
<input type="text" placeholder="Enter Customer Name" name="cname" id="cname" required>
<script>
function setValue() {
localStorage.setItem('mySharedData1', document.getElementById('cname').value);
}
</script>
<button type="submit" name='submit' id='submit' onClick="setValue()">Submit</button>
<input type="checkbox" checked="checked"> Remember me
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>
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/
i am new in php.I am trying to send a html registration page in php and want it,s response in another handler.php.But when i lick submit button it is not moving or refreshing
**Registration.html**
<html >
<form action="handler.php" method="post" >
<label>First Name</label>
<input type="text" name="firstname" id="firstname" value="" /> <br/><br/>
<label >Last Name</label>
<input type="text" name="lastname" id="lastname" value=""/> <br/><br/>
<input name="Submit" type="button" value="Submit Details" />
</form>
</html>
**handler.php**
<?php
$FirstName=$_REQUEST['firstname'];
$LastName=$_REQUEST['lastname'];
echo 'welcome'.$FirstName;
?>
Change this line
<input name="Submit" type="button" value="Submit Details" />
To
<input name="Submit" type="submit" value="Submit Details" />
Adding Javascript function
<input name="Submit" type="button" value="Submit Details" onclick="submitfunction();"/>
<script type="text/javascript">
function submitfunction()
{
document.getElementById("YOURFORMID").submit();
}
</script>