Ask your WordPress questions! Pay money and get answers fast! (more info)

Form help WordPress

  • SOLVED

Hi, although not wordpress specific, I hope someone can help.

I have a form on my site (please see attached screenshot):


<form method="get" action="http://www.mywebsite.com/jobs/">
<input type="text" name="job_keyword" value="Keyword" onblur="if (this.value == '') {this.value = 'Keyword';}"
onfocus="if (this.value == 'Keyword') {this.value = '';}" />
<select name="job_industry">
<option>All</option>
<option>Accountancy</option>
<option>Banking</option>
<option>Financial Services</option>
</select>
<div class="searchbutton"><button>Search jobs</button></div>
</form>


What i'm finding is that people will hit 'search' without entering any details, this shows no results as its creating the following search query:

http://www.mywebsite.com/jobs/?job_keyword=Keyword&job_industry=All

What I would like to do is to make the 'Keyword' option return a 'null' value and for the 'All' option return a 'null' value. This is the query that I would like to show when people hit search without entering any details in the input:

http://www.mywebsite.com/jobs/?job_keyword=null&job_industry=null

This query then shows all the jobs available.

Answers (5)

2014-01-23

Arnav Joy answers:

try this

<form method="get" action="http://www.mywebsite.com/jobs/" onsubmit="if(document.getElementById('key_word').value == 'Keyword' ) document.getElementById('key_word').value = 'null';if(document.getElementById('job_industry').value == 'All' ) document.getElementById('job_industry').value = 'null'; ">

<input type="text" name="job_keyword" id="key_word" value="Keyword" onblur="if (this.value == '') {this.value = 'Keyword';}"

onfocus="if (this.value == 'Keyword') {this.value = '';}" />

<select id="job_industry" name="job_industry">

<option>All</option>

<option>Accountancy</option>

<option>Banking</option>

<option>Financial Services</option>

</select>

<div class="searchbutton"><button>Search jobs</button></div>

</form>

2014-01-23

Agus Setiawan answers:

let me help you,

thanks.

2014-01-23

Hariprasad Vijayan answers:

Hello,

Try this method,

Call a function on button click. Like,
<button onclick="set_null();">Search jobs</button>
Then add the following JavaScript to your js

<script type="text/javascript">
function set_null()
{
var job_keyword = document.getElementsByName("job_keyword");
var job_industry = document.getElementsByName("job_industry");
if(job_keyword.value == 'Keyword')
{
job_keyword.value = 'null';
}
if(job_industry.value == 'All')
{
job_industry.value = 'null';
}
}
</script>

You can update the code if you have already have a button click function.

Hope this will help.

2014-01-23

Firoja_Imtosupport answers:

Hi,

Please update your code with below code and check once whether it works as expected.

<form method="get" action="http://www.mywebsite.com/jobs/">

<input type="text" name="job_keyword" id="job_keyword" value="Keyword" onblur="if (this.value == '') {this.value = 'Keyword';}"

onfocus="if (this.value == 'Keyword') {this.value = '';}" />

<select name="job_industry" id="job_industry">

<option>All</option>

<option>Accountancy</option>

<option>Banking</option>

<option>Financial Services</option>

</select>

<div class="searchbutton"><button onclick="fnredirect();">Search jobs</button></div>

</form>
<script>
function fnredirect()
{
var keyword=document.getElementById('job_keyword').value;
var jobindustry=document.getElementById('job_industry').value;
if(keyword=="Keyword")
location.href="http://www.mywebsite.com/jobs/?job_keyword=null&job_industry="+jobindustry;
else
location.href="http://www.mywebsite.com/jobs/?job_keyword="+keyword+"&job_industry="+jobindustry;
}
</script>

2014-01-23

Bob answers:

If javascript is disabled in browser then javascript related code will not give expected behavior.

However you can use it if you wish or you can try changing php coding.

put condition something like

<?php

if($_GET['job_keyword'] == "Keyword" && $_GET['job_industry'] == "All" ){
/* your query for getting all data from database */
}

if you wish javascript is good for you then here is modified script of Hariprasad

--> Notice value "null" of first option named "All"


<form method="get" action="" onsubmit="">
<input type="text" name="job_keyword" value="Keyword" onblur="if (this.value == '') {this.value = 'Keyword';}"
onfocus="if (this.value == 'Keyword') {this.value = '';}" id="job_keyword" />
<select name="job_industry" id="job_industry" >
<option value="null">All</option>
<option>Accountancy</option>
<option>Banking</option>
<option>Financial Services</option>
</select>
<button onclick="set_null();">Search jobs</button>
</form>

<script type="text/javascript">
function set_null()
{
var job_keyword = document.getElementById("job_keyword");

if(job_keyword.value == 'Keyword')
{
job_keyword.value = 'null';
}
}

</script>





Bob comments:

Oh I have made action attribute of form blank. Here is full form code.

<form method="get" action="http://www.mywebsite.com/jobs/">
<input type="text" name="job_keyword" value="Keyword" onblur="if (this.value == '') {this.value = 'Keyword';}"
onfocus="if (this.value == 'Keyword') {this.value = '';}" id="job_keyword" />
<select name="job_industry" id="job_industry" >
<option value="null">All</option>
<option>Accountancy</option>
<option>Banking</option>
<option>Financial Services</option>
</select>
<button onclick="set_null();">Search jobs</button>
</form>

<script type="text/javascript">
function set_null()
{
var job_keyword = document.getElementById("job_keyword");

if(job_keyword.value == 'Keyword')
{
job_keyword.value = 'null';
}
}
</script>

I have tested above code and its working.