i have a website with 3 pages. each page has a form with two input fields. i am trying to make a popup number-keypad that will populate what ever input field called it. below is that base code i keep coming back to.
<html>
<head><title>test</title></head>
<body>
<script> function num(id) { return document.getElementById(id); } </script>
<form action="/unitPage" method="POST" style=" text-align:center;">
Prefix: <input id="num" name"prefix" type="text" onfocus="num('keypad').style.display='inline-block';"/>
Number: <input id="num" name"number" type="text" pattern="[0-9]{6}" onfocus="num('keypad').style.display='inline-block';"/>
</form>
<div id="keypad" style="display:none; background:#AAA; vertical-align:top;">
<input type="button" value="7" onclick="num('num').value+=7;"/>
<input type="button" value="8" onclick="num('num').value+=8;"/>
<input type="button" value="9" onclick="num('num').value+=9;"/><br/>
<input type="button" value="4" onclick="num('num').value+=4;"/>
<input type="button" value="5" onclick="num('num').value+=5;"/>
<input type="button" value="6" onclick="num('num').value+=6;"/><br/>
<input type="button" value="1" onclick="num('num').value+=1;"/>
<input type="button" value="2" onclick="num('num').value+=2;"/>
<input type="button" value="3" onclick="num('num').value+=3;"/><br/>
<input type="button" value="X" onclick="num('keypad').style.display='none'"/>
<input type="button" value="0" onclick="num('num').value+=0;"/>
<input type="button" value="←" onclick="num('num').value=num('num').value.substr(0,num('num').value.length-1);"/>
</div>
</body>
</html>
is there a way of making one number key pad that i call from any page or do i need to make the above for each input?
thanks
One possible solution would be for you to add a javacript call into your header (by where you are currently calling the document.getElementById(id) call) that manipulates the DOM of that HTML, and simply inserts your div into it.
I'd recommend a shell div on each page for that element, then the javascript would just have to grab that div by the id ("keypad") and insert inner HTML.
Edit: as long as you share the javascript file between your 3 pages, you only have to implement the javascript once.
Related
I have a table which consist of user added data. All the 's added are added with a equal button. Like this:
<td>
<form action="newBet.jsp" method="get">
<fieldset>
<input class="button betButton1" id="Won" type="submit" name="W" value="✔"/>
<div class="closeEarlyForm" style="display:none;">
<input class="form-control" name="update1" type="number"/>
<input class="button betButton1" type="submit" name="update" value="Close early"/>
</div>
<input class="closeEarlyLink" type="button" value="✎ Close early?"/>
</fieldset>
</form>
</td>
This wokrs fine. Now, I want to add some jquery which toggle the hidden div element. This is where I run into troubles. I can't seem show the div element only on the clicked element. Instead it shows the hidden div element on all the td's.
$(document).ready(function(){
$(".closeEarlyLink").click(function(e){
e.preventDefault();
$(".closeEarlyForm").fadeToggle();
});
});
I know that my problem is that I select all the elements with the class, but I cant figure out how to only toggle/select the hidden element on the specific td.
You can try using this keyword with parent() and find():
$(this).parent().find(".closeEarlyForm").fadeToggle();
Demo:
$(document).ready(function(){
$(".closeEarlyLink").click(function(e){
e.preventDefault();
$(this).parent().find(".closeEarlyForm").fadeToggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td>
<form action="newBet.jsp" method="get">
<fieldset>
<input class="button betButton1" id="Won" type="submit" name="W" value="✔"/>
<div class="closeEarlyForm" style="display:none;">
<input class="form-control" name="update1" type="number"/>
<input class="button betButton1" type="submit" name="update" value="Close early"/>
</div>
<input class="closeEarlyLink" type="button" value="✎ Close early?"/>
</fieldset>
</form>
</td>
I have two forms on my page, one for submitting a comment and another for voting in a poll. These two functions are just a couple dozen lines apart but only the one for #comment-form actually prevents the default. The #poll-form submit button refreshes the page which is not what I want it to do.
$("#comment-form").submit(function(event){
event.preventDefault();
addComment();
});
//ajax stuff for adding the comment, addComment() etc.
$("#poll-form").submit(function(event){
event.preventDefault();
castVote();
});
HTML looks like:
<div class="add-comment">
<form id="comment-form">
<textarea id="comment-content" name="comment" placeholder="Leave a comment"></textarea>
<br>
<button type="submit">Submit</button>
</form>
</div>
<div class="poll">
<h1 class="title">Poll</h1>
<h3>Poll Question</h3>
<form id="poll-form">
<input type="radio" name="vote" value="0">
Choice 1
<br>
<input type="radio" name="vote" value="1">
Choice 2
<br>
<input type="radio" name="vote" value="2">
Choice 3
<br>
<input type="radio" name="vote" value="3">
Choice 4
<br>
<button type="submit">Submit</button>
</form>
</div>
I can't see the difference or figure out why the #poll-form submit won't prevent default.
You can try this also for stop form submit,
$("#poll-form").submit(function(e){
e.preventDefault();
alert('it works!');
return false;
});
Actually I have two divs available on my page with buttons and I am passing the hidden field attached with that button to the jquery function But when I click on the second div it pass the value of the first div. Below is the html code
<div id="polls-42-ans"class="wp-polls-ans">
<input type="button" name="vote" value="Vote" class="Buttons" id="vote-btn">
<input type="hidden" value="42" id="poll-id">
</div>
<div id="polls-11-ans"class="wp-polls-ans">
<input type="button" name="vote" value="Vote" class="Buttons" id="vote-btn">
<input type="hidden" value="11" id="poll-id">
</div>
And I am using this jquery :
$(document).on('click','#vote-btn', function() {
console.log( $("#poll-id").val());
});
NOTE: The Div ids are not same all the time
The id attribute should be unique in the same document, it will be better if you're using global classes instead :
<div id="polls-42-ans"class="wp-polls-ans">
<input type="button" name="vote" value="Vote" class="Buttons vote-btn">
<input type="hidden" value="42" class="poll-id">
</div>
<div id="polls-11-ans"class="wp-polls-ans">
<input type="button" name="vote" value="Vote" class="Buttons vote-btn">
<input type="hidden" value="11" class="poll-id">
</div>
Then use siblings to target the related field :
$(this).siblings(".poll-id").val();
Hope this helps.
$(document).on('click','.vote-btn', function() {
console.log( $(this).siblings(".poll-id").val() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="polls-42-ans"class="wp-polls-ans">
<input type="button" name="vote" value="Vote" class="Buttons vote-btn">
<input type="hidden" value="42" class="poll-id">
</div>
<div id="polls-11-ans"class="wp-polls-ans">
<input type="button" name="vote" value="Vote" class="Buttons vote-btn">
<input type="hidden" value="11" class="poll-id">
</div>
You can select the DIVs with the class "wp-polls-ans" and then the buttons inside
$(".wp-polls-ans #vote-btn").click(function(){
var val = $(this).parent().find( "#poll-id").val();
alert(val);
})
This is the fiddle
Here is the working javascript code:
$(document).on('click','#vote-btn', function() {
console.log( $(this).siblings("#poll-id").val() );
});
I'm struggling a bit getting a webpage to smoothly take out buttons and replace them with different buttons. This is the code:
function expandDateSearch() {
$("#button-search-by-date").toggle("drop");
$("#search-tab-label").css("display","none");
$("#button-search-by-keyword").toggle("drop");
// Wait a half second before executing this
setTimeout(function() {
$( "#search-input-date" ).show( "fold", 100 );
$("#date-search-button").show("fold",100);
$("#button-search-reset").show("fold",100);
$("#search-header").text("Search by Date");
},400);
}
And the corresponding HTML:
<!-- Search content goes here -->
<div>
<h4 id="accordion-search-text" class="accordion-header" style="display:none">Keyword:</h4>
<input type="text" id="accordion-search-input" style="display:none">
<h4 id="search-header">Search By: </h4>
<input type="button" value="Keyword" id="button-search-by-keyword" style="margin-top:5px;margin-left:25px;float:left;"></input>
<h4 id="search-tab-label" style="float:left; margin-top:10px;margin-left:10px;"> Or by </h4>
<input type="button" value="Date" id="button-search-by-date" style="margin-top:5px;margin-left:15px;float:left;"></input>
<input type="text" value="Enter Date" id="search-input-date" style="display:none">
<input type="button" id="date-search-button" value="Search Date" style="display:none"></input>
<input type="button" value="Search" id="button-search" style="display:none;"/>
<input type="text" value="Enter Keyword" id="search-keyword-value" style="display:none;"></input>
<input type="button" value="Search Keyword" id="button-search-by-keyword-value" style="display:none;"></input>
<input type="button" id="button-search-reset" value="Restart Search" style="display:none;"></input>
<br>
</div>
As you can see this is very simple. The function expandDateSearch() takes three HTML elements and replaces them with four elements. I used the setTimeout because it looks even worse when it all executes at once. I feel it would be better if there was a function that you fed a list of HTML elements to remove with animation as the first argument and a list of things to show as the second argument but I'm not seeing that in Jquery UI documentation.
The answer was to encapsulate each of the HTML elements in its own div then float:left.
I have a form which changes the inputfields depending on a radio-button.
for text there appears a textbox
for textarea there appear additional 2 fields for cols And rows
for select, checkbox and radio there appear additional fields with appendchild
have a look here:
http://joomla.byethost16.com/php.php
Now what i want is to let the user add more params, param2, param3, etc.
Unfortunately i made the js functions that trigger the fields according to the radio-button like this
function textarea(){
if (document.getElementById('option2').checked = true){
document.getElementById('feld').style.display = '';
document.getElementById('feld2').style.display = '';
document.getElementById('feld4').style.display = 'none';
}}
So that means i have no dynamics in my form since the id in this function is not yet dynamic and onclick will trigger anything or only always the first param1.
all params should be like this but somehow increasing numbers and the Js-function for the radio should take them too
<td>Param_1</td>
<td><p>
<input type="radio" onclick='text()' name="option0" id="option0" value="text" checked="yes">text
<input type="radio" onclick='spacer()' name="option0" id="option1" value="spacer">spacer
<input type="radio" onclick='textarea()' name="option0" id="option2" value="textarea">textarea
<input type="radio" onclick='selecta()' name="option0" id="option3" value="select">select
<input type="radio" onclick='radio()' name="option0" id="option4" value="radio">radio
<input type="radio" onclick='checkbox()' name="option0" id="option5" value="checkbox">checkbox</br>
<input type="hidden" name="fields" value="1" id="fields" />
<div id="feld">
Name <input type="text" name="param1" id="param1" size="40" maxlength="40">
Default<input type="text" name="paramdef1" id="paramdef1" size="40" maxlength="40">
<div id="feld4" style="display:none;">
<input type="text" name="param11" size="40" value="value1" style="display: inline">
<a href=# onclick='add(1)'>add</a> <a href=# onclick='reset()'>reset</a></div>
</div>
<div id="feld2" style="display:none;">
Columns<input type="text" name="cols1" size="20" maxlength="40">Rows<input type="text" name="rows1" size="20" maxlength="40"></div>
</td>
</tr>
How do i do that my form gets dynamically (like i did the "add/reset" at checkboxes) and people can add more params?
For the complete code please go here and view source:
http://joomla.byethost16.com/php.php
thx so much for help on this
i solved it by using $(this) with a "click" bind to each class which sits on the buttons.
another solution would be to use a plugin, for example http://www.mdelrosso.com/sheepit/index.php?lng=en_GB which is very good but relys on a certain structure (you have to define an index at the form, which has to be resorted in processing under most cases since some index_vars can be skipped userwise.)