Hide content DIV and show it after pressing the search button - javascript

I want to do a page search like Google. This page would contain the following:
a text box
a search button
After I enter a value in the text box and press the button, the result should be put in a DIV but this won't be visible before pressing the search button. The content is to be shown only after pressing the search button. How can achieve this by using jQuery.

Basically, you hide the div using CSS and when hit to search button it appears as follows.
CSS code
#content_div {
display: none;
}
jQuery
$(".search_button").click(function() {
$("#content_div").show();
}

Use jQuery's ajax() function for acheving this.
Check this link: http://www.codeforest.net/simple-search-with-php-jquery-and-mysql

seems like you might want to use something like this:
$('#search_results').load('perform_search.php', {query: $('#search_query_input').val()});
explanation:
#search_results is div where you will put your results
load() is jquery's function to update container via ajax
perform_search.php is the page which will return you results to be displayed in #search_results
query is the name of the parameter which would be passed to perform_search (like 5. $_REQUEST['query'])
#search_query_input is the id of your "text box"
Cheers, hope it will help

Related

Interacting and Submitting HTML form with JavaScript in Swift

Trying to submit an HTML form / clicking a button from this web page: https://www.vegvesen.no/kjoretoy/Eie+og+vedlikeholde/skilt/personlig-bilskilt/sok-om-personlig-bilskilt
I've tried to use both .submit() and .click() with no success
webView.evaluateJavaScript("document.getElementById('personlig-kjennemerke').click();", completionHandler: nil)
So what I try to do is to fill in the text field with "REGNR" I then try to click the orange button to submit the form and access the information I am looking for.
I am able to fill in the textfield by using:
webView.evaluateJavaScript("document.getElementById('tegnkombinasjon').val ue='\(plateNumber)'") { (value, error) in
}
Picture of the button I want to press and the text field I try to fill in
But since I'm not able to click the button programmatically I've tried to actually click it in a subview. The page then tells me I have to fill in the text field first even though I have programmatically.
So not only am I unable to click the button, but I'm also wondering how I can make the web page understand that the text field actually already contains text.
Try this:
webView.evaluateJavaScript("document.getElementsByName(\"sjekkreg\")[0].elements[2].click()")
Why by name? Because that form doesn't have an id.
Also I see your form has custom function to send that form:
pkCtrl.submit(mineFelt,sjekkreg)

Displaying div, javascript function

I wanted to display a hidden div in function after it will do some things but it doesn't work. Could you please help me with it? Here is what i tried to do:
#Edit
Ok, it's the code in short. After i click link calc there is a form, and after i click on input submit, there is and alert, and then it should display a div, but that's not working.
http://pastebin.com/XU58GhFv
Try to put the id directly in JQuery.
`$("#evolves-calculator").css('display', 'block');`

Use javascript to search page for link text

I have the following javascript
$(document).ready(function() {
$('a[href*="profile"]:contains("David")')
.closest('td').find('.fightMobster').click();
});
This searches the page content for the word 'David' and clicks the link.
I'm wanting to progress this. Instead of searching the page contents, I want to search for the LINK text.
For example, the link to 'David' might be http://www.example.com/164522
So I'd like to search the page for 164522 instead.
Also, I'd like to implement a form where you can specify the text you are searching for. Sort of a text box where you can type 164522 and a button which starts and stops to search process.
In your case you should use
$('a:contains(David)')

Submit HTML form with Javascript link as well as confirm box

I am trying to submit form data, but instead of using the standard "Submit" button I want to use a regular HTML link. However, when I click this link I want to have a confirmation box asking the user to continue or cancel. I have both parts of the puzzle, but when I put them together they don't play nice. This is what I currently have for Javascript code:
function confirmSubmit()
{
var agree=confirm("Are you sure you wish to delete this file?");
if (agree)
return true ;
else
return false ;
}
function submitform() {
document.forms["delete14"].submit();
}
And for the HTML I have:
link text
The confirmation box does pop up as intended and the form does submit properly. But currently the form submits even if the user clicks "no" on the confirmation box.
Try this:-
function confirmSubmit()
{
var agree=confirm("Are you sure you wish to delete this file?");
if (agree)
document.forms["delete14"].submit();
else
return false ;
}
Firstly, don't use a link if you don't want one, use a styled span (or a button, which says to the user "click me and something will happen" rather than a link, which says "click me and I'll take you to another page").
Also, don't use "javascript:" in an attribute that expects a value that is script, it will be seen as a useless label.
Anyhow, your issue is that you have two listeners on the link:
link text
The one in the href will submit the form unconditionally. So use a span and get rid of the href:
<span style="cursor: pointer; text-decoration: underline"
onclick="confirmSubmit()">link text</span>

How do I clear a dropdown and input field with query

I have a form that is setup with twitter bootstrap and it's using tabs.
http://jsfiddle.net/mwoods98/DJeqm/4/
If you can see from the exmaple we have:
Edit existing assignments and create new assignments.
If you see on the tab under edit existing assignments, there is a drop down. What will happen is when the user selects an option from the drop down, I submit an ajax request that will go out and grab some information depending on which dropdown the user selected:
function loadQuery() {
var assign = $("#existingAssignment").val(); // Get the value of the select box so we can build the next page
$.get('Pagetoload.cfm?tour_id=' + assign ,{},function(data){
$("#centercontent").html(data)
})
return false
}
$(document).ready(function() {
$("#NewAssignment").attr('val', '');
$("#NewPosTitle").attr('val', '');
$("#NewgetPosOff").attr('val', '');
$("#loadLink").click(loadQuery)
});
The jQuery that reloads the new page is working fine and it sends the information to the center div of that tab. It effectively replaces the div with the information that was returned. So now the edit existing assignment now has new values filled in.
On the other tab "Create New Assignment" There is a form that should have all of it's values set to blank.
I am trying to reset those values right before I call the loadQuery function but when I go back to the page, the values are still there.
Is there another function that I should call or do something different to set those values to " "?
TIA
Use jQuery's built in val() method!
$("#NewAssignment").val('');
you could use .val() or .text() of JQuery. You may want to refer here for more info about JQuery functions http://api.jquery.com/
Try this -
$("#NewAssignment").val('');
$("#NewPosTitle").val('');
$("#NewgetPosOff").val('');
http://api.jquery.com/val/

Categories