Requesting specific values from an html input via Javascript

Question

I'm trying to find a way to be able to do the following. I want to be able to get certain things from a form. In this case, I only want the "value" field and NOT the "name" field.

<div class="searchbox_team" style="margin: 0 0 10px 0; z-index: 50;">
 <script type="text/javascript">

    function customSearch()
    {
         var x = document.customSearch;
         x.replace("customSearch=", "");
         return x;
    }
</script>

    <form name="leSearch" action="/search/node/" onsubmit="return customSearch()" id="search-block-form" class="search-form">
        <input type="text" name="customSearch" value="" id="edit-search-block-form-1" class="searchbox_input" title="Enter the terms you wish to search for." />
        <input type="submit"/>
    </form>
    </div>

I have tried using the following in my function. var x = document.customSearch.value;" but that is not working.

Can anyone shed some light on this?

I have attached the following link to see the HTML file that I'm using to locally test this: [link]piratepad.net/NqpVDSCpm3 — Hectron
– Hectron, Commented Nov 3, 2011 at 19:33
There seems to be some highlighting going on within the function -- particularly if I use document.getElementById('foo').value; Within Notepad++, the "value" is colored differently making me be a bit weary of it's identity. — Hectron
– Hectron, Commented Nov 3, 2011 at 19:56

JaredPar · Accepted Answer · 2011-11-03 19:26:02Z

1

It sounds like you want the value of the input for customSearch. If so then just use the following

var value = document.getElementById('edit-search-block-form-1').value;

Your input tag already has an id value hence the most efficient and simplest way to search for it is using getElementById.

answered Nov 3, 2011 at 19:26

JaredPar

759k152 gold badges1.3k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Hectron Over a year ago

I just gave that a shot and ended up getting search/node/?customSearch=foo

JaredPar Over a year ago

@ProfessorElm interesting so it's appending the form action to the value?

Hectron Over a year ago

Exactly! I'm trying to edit that so that it only displays the value and not the name.

JaredPar Over a year ago

@ProfessorElm i'm not seeing that. Can you take a look at the following and tell me what I'm doing differently than you? jsfiddle.net/vEkDt

Hectron Over a year ago

What is the name of the function within the script? I'm wondering if maybe that's what's causing my mistake...

|

sdo · Accepted Answer · 2011-11-03 20:56:56Z

0

hmm, so to get things from the form, you'll want to specifiy like so:

document.forms.leSearch.elements["customSearch"].value;

EDIT:

try adding a hidden field that stores the value onclick and then get that from the post or get array in your action file.. I think onsubmit call is to blame

<form name="leSearch" action="/search/node/" onclick="document.getElementById('myhiddenfield').value = customSearch()" id="search-block-form" class="search-form" method="post"> <input type="text" name="customSearch" value="" id="edit-search-block-form-1" class="searchbox_input" title="Enter the terms you wish to search for." /> <input type="hidden" value="" id="myhiddenfield" /> <input type="submit"/> </form>

EDIT 2:

I think I figured it out.. the url was appending the field names because it was defaulting to "get" method mode.. set the action=/node/search/" and method="post"

<form method="post" action="/search/node/" onsubmit="this.action = '/search/node/' + document.getElementById('edit-search-block-form-1').value;">

edited Nov 3, 2011 at 20:56

answered Nov 3, 2011 at 19:28

sdo

6623 silver badges13 bronze badges

7 Comments

Hectron Over a year ago

Same issue as earlier. It's still giving me both the name and the value together.

sdo Over a year ago

try adding a hidden field that stores the value onclick and then get that from the post or get array in your action file.. I think the onsubmit call is to blame.. see above

Hectron Over a year ago

While it would be easier to do this, I am literally stitching this to a comment field within a drupal content entry. The only thing that I had wanted to do is simply append the inputted text to the action so that the new action would be /search/node/input

sdo Over a year ago

@ProfessorElm Oh you want the action to be concatenated to the input.. in that case dynamically update the action onclick.. <form onsubmit="this.action = '/search/node/' + document.getElementById('edit-search-block-form-1').value;">

Hectron Over a year ago

As much as I like this solution, the customSearch= is still being appended. Furthermore, the url isn't changing anymore/directing to the /search/node/ location In other words, what I want to do is to for the user to enter some terms. These terms will be appended to the url redirect | "site action".

|

Collectives™ on Stack Overflow

Requesting specific values from an html input via Javascript

2 Answers 2

6 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related