Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Stuck on a tough situation!
I have a form for inputting different cities where user want to go.
I have a form box and a submit button.
Now I want my user to enter as many cities he likes, in order to do so he must click on a link Add 1 more city and one more form box should appear.
How can I perform such task in HTML
This is a nice way to do it:
<div id="inputBoxes">
<input />
</div>
<button type="button">Add more</button>
$('button').click(function() {
$('#inputBoxes').append('<input>');
});
Hope it will help,
Zorken17
$('button').click(function() {
$('#inputBoxes').append('<input>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div id="inputBoxes">
<input />
</div>
<button type="button">Add more</button>
Use jquery clone function.
$('select#options').clone().attr('id', 'newOptions').appendTo('.blah');
See this question
UPDATE
found good snippet for you. exactly what you need
put city box in a div and assign a id to that div and call a menthod of java script on the click of add 1 button then in method append other city box html in div through java script.
maybe thats a good starting point
<form id="myForm">
<div id="cities">
<input class="city" type="text" />
</div>
var $cityInputs;
function registerEvents() {
$cityInputs = $('input.city').not(':disabled');
$cityInputs.blur(function(event){
var $element = $(event.target);
if ($element.val().trim().length !== 0) {
appendNewInput.call($('#cities'));
$element.attr('disabled','disabled');
}
})
}
function appendNewInput() {
this.append('<input class="city" type="text">');
registerEvents();
}
registerEvents();
http://jsfiddle.net/9ckv5f23/3/
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I have one long page of content. If I want to create a search bar so that when the user searches something that exists somewhere on the single page, it redirects them to that part of the page (like it goes to the middle or the bottom of the page). Does this require any back-end like PHP or can I do this with just HTML?
You can make use of window.find() in JavaScript
Reference: https://developer.mozilla.org/en-US/docs/Web/API/Window/find
Demo:
function search(string){
window.find(string);
}
<input placeholder="type foo or bar" type="text" id="search">
<input type="button" value="Go" onclick="search(document.getElementById('search').value)">
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<p>foo</p>
<p>bar</p>
<p>hello world</p>
Easiest thing to do would be some javascript
<input id="searchText"><button onclick="search()">Search</button>
<script>
function search() {
var searchText = $("#searchBar").val();
$(".searchText:contains('" + searchText + "')").css("background","#FF0");
}
</script>
<div class=".searchText">Some kind of text would go here</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I am trying to pass my search term from my site into the string of another site's URL link. This will allow the search to find books on my site and if it can't be found there the user would click a button that would take the string from the search field and pass it to the URL of MnLink.org. I know my sites code is as follows.
Search For:
I can't figure out what I am missing because I am new to HTML and a novice in JavaScript. I thought I could put the value or id in as a var in a script but I could not get that to work. below is what I have started but got stuck on, any help would be great.
https://mnlink.on.worldcat.org/search?='"style="padding-left:10px;background:#ffffff; border: solid black;">Continue Search
You could simply use a form with method="get" and action="https://mnlink.on.worldcat.org/search".
EXAMPLE:
<form method="get" action="https://mnlink.on.worldcat.org/search">
<div>
<input type="text" name="queryString" value="" />
<button type="submit">
Submit
</button>
</div>
</form>
Working DEMO
EDIT
If you have to use an onClick event i suggest you to use Jquery: on click() you have to redirect your page with window.location.href = 'https://mnlink.on.worldcat.org/search?queryString=' but you must add the value at the end of that String with $("#INPUT_ID").val(). See the demo.
HTML:
<input title="Search For:" autofocus="false" accesskey="s" maxlength="256" tabindex="9" autocomplete="off" size="100" value="cats" id="q" name="q" type="text">
<button id="submit">
Search
</button>
JS:
$(document).ready(function(){
$("#submit").click(function() {
window.location.href = 'https://mnlink.on.worldcat.org/search?queryString=' + $("#q").val();
});
});
Working DEMO.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have a form that is used to update a record, at the bottom I have a submit button. I want it to display a messaging saying "Update Record:" and a Yes and No box.
Every way I've found is just for the confirmation popup, but I don't want a popup I want it to be buttons. So currently I have the below which gives me a confirmation popup
<form class=\"searchForm\" action=\"cd_update.php\" method=\"post\" onsubmit=\"return confirm('Are you sure you want to submit?');\">
<button type="submit" id="editButton">Update</button>
Is this possible to do? I'd need it to cd_update.php on the "Yes" and stay on page for the "No"
Thanks
I believe this code is what you are looking for. Remove the onsubmit handler if you wish, and swap out the onClick event on the no button to do something else. This will allow those buttons to handle your form without a confirm popup.
<form class="searchForm" method="post" onsubmit="alert('Record Updated');">
Update?
<button type="submit" id="yesButton">Yes</button>
<button id="noButton" onClick="alert('Not Updated')">No</button>
</form>
You would have to use a modal in order to customize it how you'd like. This can be as simple as doing it yourself (see below) or using a jQuery modal (which is also simple, but may be overkill.
http://jsfiddle.net/m7w0fcmf/1/
Styles
#confirm {
display:none;
}
HTML
<form id="form" class="searchForm" action="cd_update.php" method="post">
<div id="confirm">
Update Record:
<button id="yes">Yes</button>
<button id="no">No</button>
</div>
<button type="submit" id="editButton">Update</button>
</form>
JavaScript
document.getElementById('editButton').addEventListener('click', showConfirm);
document.getElementById('no').addEventListener('click', clickNo);
function showConfirm(e) {
e.preventDefault();
document.getElementById('confirm').style.display = 'block';
}
function clickNo(e) {
e.preventDefault();
document.getElementById('confirm').style.display = 'none';
}
Working fiddle.
You can create new div for confirmation message that will contain the two buttons you want Yes and No, after that add the js code that will show this confirmation div after the user click on Update button.
HTML :
<form class="searchForm" action="cd_update.php" method="post">
<div id="confirmation-msg" style="display:none">
Update Record?
<button type="submit" id="yesButton">Yes</button>
<button type="button" onClick="$('#confirmation-msg').hide()">No</button>
</div>
<button type="button" id="editButton">Update</button>
</form>
JS :
$('#editButton').click(function(){
$('#confirmation-msg').show();
});
Hope this helps.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I'm just wondering if anyone can point me in the right direction on how to create a dynamic list on a webpage based on user entry without refreshing the page each time.
For instance, a user would:
type a word into a textbox
click a button
the word would show up somewhere else on the page
the word would be erased from the textbox
Any new word typed would automatically be written underneath any previously entered words.
<div id="target"><div>
<input type="text" id="newInput" />
<input type="button" id="saveInput" />
<script>
// when button is pressed:
$('#saveInput').on('click', function(){
// check if something is there
if( $('#newInput').val().length !==0){
$('#target').append('<div>'+ $('#newInput').val()+'</div>'); //append to a target
$('#newInput').val(''); // empty input
$('#newInput').focus() // for bonuspoint, place cursor back in input
}
});
</script>
If you want each new entry as first listitem, use prepend() instead of append()
Here's an working example:
Html:
<input type="text" id="txtWord"/>
<input type="button" id="btnAddWord" value="Add new word" />
<ul id="words">
</ul>
Script:
$(document).ready(function(){
$('#btnAddWord').bind('click', function(){
if( $('#txtWord').val() !== ""){
$('#words').append('<li>'+ $('#txtWord').val()+'</li>');
$('#txtWord').val('');
}
});
});
Example
http://jsfiddle.net/AfNgH/
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
Is there a way to add a link to an image using an input box, let say you have an image uploaded and you have an input,
Image Link: <input type="text" id="image_link"/>
in this box a user types in www.google.com
and you want the link to append to the image.
Is there a way to do this?
Did you mean something like this:
http://jsfiddle.net/2QRBm/ ?
HTML:
<input/>
<button>set link</button>
<img src="http://media.heavy.com/post_assets/2010/03/0417/1267743226_stoned-party-dog-original.jpg" width="300"/>
Javascript:
$('img').wrap($('<a/>',{href:'',target:'_blank'}));
$('button').click(function(){
var val=$('input').val();
$('img').closest('a').attr('href',val.replace(/^([^(http://)].*)/,'http://$1'));
});
Lets say your image have this id: #img
Then you can use jQuery wrap to wrap the image into a a element:
$('input').change(function(){
$('#img').wrap('')
})
DOCS: http://api.jquery.com/wrap/
Something like this: live demo
HTML:
<input type="text" id="test"/> <input type="button" id="go" value="go"/>
JavaScript:
$("#go").click(function(){
var value = $("#test").val();
window.location = "http://"+value+"";
});