jQuery .prop() method

naremkim · March 1, 2018

Hi ! I’m new to this forum.

First of all thanks for the w3schools site. I made a forwarding one of my domains, http://www.excellentcoders.com, to the w3schools.com site in appreciation of its contribution to the online world to be going on. The online world will be no longer to be kept going if it harms the society. The w3schools’ effort contributes for the online world to be able to be stayed beneficial to the society while many malicious/harmful users harm the online world, i.e. other users.

Well however I’m currently developing a web site, ehyeh.com, which is a hub site to many domains / web sites of mine, and encountering some problems.

1. There is a web search section on the site on the top in developing. Please confer the following snippets

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- The Main Issue Code -->
<script>
$(document).ready(function(){
    $("form").onload(function(){
        $( "#searchform" ).prop( "disabled", false );
        $( "#searchform1" ).prop( "disabled", true );
    });
	$("option.first").click(function(){
        $( "#searchform" ).prop( "disabled", true );
		$( "#searchform1" ).prop( "disabled", false );
	$("option.second").click(function(){
        $( "#searchform" ).prop( "disabled", false );
		$( "#searchform1" ).prop( "disabled", true );
});
</script>
<!-- The Main Issue Code end -->


<!-- Multi Search Engine -->
<script type="text/javascript">
function dosearch() {
var sf=document.searchform;
var submitto = sf.sengines.options[sf.sengines.selectedIndex].value + escape(sf.searchterms.value);
win=window.open(submitto,"newwindow1","width=780, height=520,toolbar=yes,location=yes,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,top=15,left=15"); 
return false;
}
</script>
<!-- Multi Search Engine end -->

<!-- For Toggle Menu -->
<script>
function myFunction() {
    var x = document.getElementById("powermenu1");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
</script>

<!-- For Toggle Menu end -->


<BODY onload="myFunction()>  <!-- myFunction() is for a toggle function, which I got from w3schools, for another section -->
<TABLE width=973px height=90px background="gradient2.png" align="center" style="border-top:1px solid #999;border-left:1px solid #999;border-right:1px solid #999;border-bottom:2px solid #000;">
    <TR><TD rowspan=6 width=220px align=left valign=top>&nbsp;&nbsp;<img src="ehyehlogo3.png"></TD>
        <TD rowspan=6 width=533px align=center valign=center>
	    
            <form id="searchform" action="search.php" method="GET">
            <font face="Arial" size="3">
	    <select name="sengines" id="MySelect" size="1">
            <option value="" selected>Ehyeh</option>
            <option class="first" value="http://www.google.com/search?q=">Google</option>
            <option class="first" value="http://search.yahoo.com/search?p=">Yahoo!</option>
            <option class="first" value="http://www.bing.com/search?q=">Bing</option>
            </select>
            <input style="display: none;" disabled="disabled" size="1" type="text">
            <input type="text" size="30" name="search" value="Under construction" onfocus="clearForm(this)"  onblur="rewForm(this)"> 
            <input type="submit" name="submit" value="Search">
            </font>
            </form>
	    
	    <form name="searchform1" onSubmit="return dosearch();"> 
            <select name="sengines" id="MySelect" size="1">
            <option class="second" value="">Ehyeh</option>
            <option value="http://www.google.com/search?q=">Google</option>
            <option value="http://search.yahoo.com/search?p=">Yahoo!</option>
            <option value="http://www.bing.com/search?q=">Bing</option>
            </select>

            <input type="text" size="30" name="searchterms" value="Under construction" onfocus="clearForm(this)"  onblur="rewForm(this)">
            <input type="submit" name="submit" value="Search">
		</TD>
        <TD width=220px align=center valign=center>
            <font size=3 align=left><strong>Better society to live</strong></font><br/>
            <font size=1.5>Don't hurt/harm others.<br/>
             Those who hurt/harm others are garbages.<br/>
             Love/enjoy life.<br/>
            Try to do the things rightly.<br/>
          [ Do your best and be successful. ]</font><br/>
        </TD>
    </TR>
</TABLE>

and the page at http://ehyeh.com/ehyehindex-BackGround-Trial-4-0-0-0.html.

I’m trying to make the form id’ed ‘searchform’, which should be activated on the page when the page is loaded, to be switched with the form id’ed ‘searchform1’ when the option class’ed ‘first’ under form ‘searchform’ clicked, and the form id’ed ‘searchform1’, which should be activated after the clicking, to be switched with the form id’ed ‘searchform’ when the option class’ed ‘second’ under form ‘searchform1’ clicked and of course the form should be appeared one at a time in switching at the exact one location. But the above mentioned code doesn’t work properly. Why I’m trying to do this is that I want the search function, which I have developed so far and can be found at http://www.ehyeh.com, to be kept stay on the page while the addition on the options/select to be worked in switching. You can check up how far the search function was developed, putting some search term in the field.

2. There is the second block to be showed on the page but it is automatically hided after once showed up for about a second in time when the page is loading. You can find the second block at http://ehyeh.com/ehyehindex-BackGround-Trial-4-0-1.html. The block heading is “It has been on the World War III which is nuclear war since 9.11.”

3. There is a clickable button, which trigger to execute the function “myFunction()”, to be showed a drop down menu on a picture back ground in the mid of the page. When it was clicked the happening of the above paragraph 2 newly occurred and in the address field

Quote

http://ehyeh.com/ehyehindex-BackGround-Trial-4-0-0-0.html?sengines=&searchterms=Under+construction

URI showed somewhat frustratingly. And the drop down menu should not be showed up on loaded page but it showed up on loaded page. It should be shown up only on the button clicked likewise the page http://ehyeh.com/ehyehindex-BackGround-Trial-4-0-1.html mentioned in paragraph 2 above.

Could you get me a resolution ?

Edited March 1, 2018 by naremkim

justsomeguy · March 1, 2018

I'm confused about the search forms, why do you have 2 of them? Why do you need more than 1 of the same form?

For the issue with the button, it sounds like that button is submitting the form. You have some errors in the code above, I would start by validating your site and fixing any errors that it identifies.

naremkim · March 2, 2018

Thanks for your replying, justsomeguy.

As you can check, http://www.ehyeh.com has its own web search system though it has not yet been completed. Putting some search term in the field and press the search button then you will get 'No results found.' output on its search result page. I would like to keep this search result page showing in this manner other than this page shown in a popup window like when the search term put in the search field in the page http://ehyeh.com/ehyehindex-BackGround-Trial-4-0-1.html. The latter page show 'You didn't submit a keyword.' output. It means the search system doesn't work properly on the latter page search field. It is the reasons why I'm trying to two forms system, but make clarifying, the form should be showing just one form on the page but can be switched to another form on the page when the proper 'option' clicked. The two forms shown on the page http://ehyeh.com/ehyehindex-BackGround-Trial-4-0-0-0.html are unexpected appearance. I was expected the upper form shown on the load and then the lower form shown in replace of the upper form after one of the options in the 'select' in the upper form clicked.

Please don't hesitate if you have any question or need more information.

Best,

naremkim

P.S. The first form is

Quote


<form id="searchform" action="search.php" method="GET">

and the second form is

<form name="searchform" onSubmit="return dosearch();">

I think it can't be integrated to one.

Edited March 2, 2018 by naremkim

justsomeguy · March 2, 2018

It is the reasons why I'm trying to two forms system, but make clarifying, the form should be showing just one form on the page but can be switched to another form on the page when the proper 'option' clicked.

That's what I don't understand. I don't understand why you're showing a different form with the same fields. I don't see a reason for more than one form in the same place on the same page. You can use Javascript to change a form's action, method, submit handler, etc. You don't need multiple forms.

naremkim · March 2, 2018

Hi! Justsomeguy,

Because I thought the two forms can't be integrated to one as I mentioned in P.S. Could you get me the solution for Javascript or the original way, i.e. two forms system? I prefer the Javascript solution if you are willing to.

Thanks for your reply.

naremkim

justsomeguy · March 2, 2018

I honestly don't understand what you're trying to achieve. Both forms have a select element, with the same options with the same values, and a text field for search terms. What is different about the forms? How are they different? You have the same elements, is the only difference the name of the text field? If you want to have options for searching your site or using other search engines, again you can do all of that with a single form and some Javascript to figure out what to do when they submit the form. Is that all you're trying to do? Because I'm distracted by this switching between two forms. If all you're trying to do is set it up to either submit to your own search page, or open a window to a search engine, you don't need more than one form for that. You should use Javascript to figure out what to do when they submit the one form, not switch the entire form with a different form if they click something.

naremkim · March 3, 2018

Quote

If you want to have options for searching your site or using other search engines, again you can do all of that with a single form and some Javascript to figure out what to do when they submit the form. Is that all you're trying to do?

Yes, it is. Options for searching at 'Ehyeh' which search result appears in the manner as on http://www.ehyeh.com and for searching at the other three search engines which search result appears on the pop up window in the manner as on http://ehyeh.com/ehyehindex-BackGround-Trial-4-0-1.html when one of the other three search engine option was selected. So I wrote

Quote

I prefer the Javascript solution if you are willing to.

in my previous post.

Please don't hesitate to ask further question or more information.

Thanks

justsomeguy · March 5, 2018

The basic steps are to have a function that runs when the form submits, and it should get the values from the form. So figure out which item in the select list is selected, and what the search text is. If the selected option is one of the external search engines then you can open a new window and set the URL for that search engine, and cancel the form submit. If they picked your site then you can do whatever else you want to do, maybe submit the form normally to your PHP script, or send an ajax request with the search string, or whatever you want to do.

naremkim · March 5, 2018

I was expecting some code help but not verbal thing. Verbal thing can make the resolution to get more complicated. If you don't provide code help then please let me get this thread erased from this forum. Can you let me get how to erase this thread ?

justsomeguy · March 6, 2018

You can't delete a thread, but this forum is a place where we are here to help people learn, not do free work for people.

naremkim · March 6, 2018

I'm going to mutually beneficial way. I thought w3schools is operated by W3C (World Wide Web Consortium) but it is not. I found w3schools' satement at https://www.w3schools.com/about/default.asp.

Quote

The site derives its name from the World Wide Web (W3), but is not affiliated with the W3C.

It is a tricky forum. I think you can delete harmful threads to you. Then why you can't erase my thread? If you pursue to get paid then you can make paid help requested section. Again I'd like you to erase this thread of mine. It is injustice you ignore the thread opener's erase request. I'll try to contact the operator of this forum through its 'Contact Us' page. This thread can raise some disadvantage to my site(s). I posted this tread putting up with some disadvantage to my site(s) due to the code problem which I have encountered is somewhat crucial thing. I thought it can be mutually beneficial to both party if I can get the resolution of code.

P.S. I'm going to cancel the forwarding of one of my domains, excellentcoders.com, to w3schools.com site.

Edited March 6, 2018 by naremkim

justsomeguy · March 6, 2018

We have a policy of not deleting threads, it's as simple as that. If there is information that you don't want people to know about your site, then don't post it. I don't see anything in this thread which would constitute any sort of threat against your site, there is no information that any attacker could use. It's not a big deal. Let's move on.

If you pursue to get paid then you can make paid help requested section.

Right, we could, but we haven't because we are an all-volunteer forum just trying to help people learn, the family who runs the main w3schools site doesn't even post here regularly. Occasionally someone comes here who just wants people to do things for them who isn't interested in learning, but those people don't stick around. There are a ton of places where you can go to post freelancer jobs if that's what you want. This is not one of those places, we are here to help people in their own path to learn how to do this stuff. If that's not for you, then just move on.

jQuery .prop() method

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites