1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

two box form one radio button onclick javascript

Discussion in 'JavaScript' started by xbat, Oct 26, 2014.

  1. #1
    what I am trying to do is have someone insert something into one box and then insert something else into another box and then it loads it the address bar.. for example right now it will load mysite.com/page.php?id=thing

    What I want to accomplish is where on the one radio button it will take the values of both boxes to equals mysite.com/page.php?id=thing&id2=otherthing

    Heres what i have tried..

    <script type="text/javascript">
    function dosearch() {
    var sf=document.searchform;
    for (i=sf.sengines.length-1; i > -1; i--) {
    if (sf.sengines[i].checked) {
    var submitto = sf.sengines[i].value + escape(sf.searchterms.value);
    // i added this \/
    var submitto = sf.sengines.value + sf.sengines2.value escape(sf.searchterms.value);
    }
    }
    window.location.href = submitto;
    return false;
    }
    </script>
    
    
    <form name="searchform" onSubmit="return dosearch();">
      Search By  <input type="text" name="searchterms"autocomplete='off' placeholder="thing">
    id<input name="sengines" type="radio" value="mysite.com/page.php?id="  onclick="dosearch()" >
    something else<input name="sengines" type="radio" value="mysite.com/page.php?jack=" onclick="dosearch()">
    
    <input type="text" name="somethingelse3"autocomplete='off' > something else 3 <input name="sengines" type="radio" value="mysite.com/page.php?jill="dosearch()"> 
    
    <input type="text" name="otherthing" autocomplete='off' placeholder="otherthing"> other thing<input name="sengines2" type="radio" value="mysite.com/page.php?id=thing&id2=otherthing=" onclick="dosearch()">
    
    </form>
    Code (markup):
     
    xbat, Oct 26, 2014 IP
  2. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #2
    That's really confusing code, I get it's just for a demo but it reads really messily

    This bit of code was missing the onclick statement:
    <input name="sengines" type="radio" value="mysite.com/page.php?jill="dosearch()">
    Code (markup):
    becomes
    <input name="sengines" type="radio" value="mysite.com/page.php?jill=" onclick="dosearch();">
    Code (markup):
    can you set up a fiddle at jsfiddle.net so we can see what you are doing. I tried but the layout made it look really odd. Maybe throw some <br> in there?
     
    sarahk, Oct 26, 2014 IP
    Brandon Sheley likes this.
  3. xbat

    xbat Well-Known Member

    Messages:
    326
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    105
    #3
    I ended up finding a better way to go about it.


    <script>
      function submitvalues(){
          var item1 = document.getElementById('search1');
          var sch1ear= document.getElementById('search2');
        //  alert(user.value+pass.value);
        window.location.href = 'http://mysite.com/listing/somepage.php?search1=' + searchvalue.value+'&search2='+searchvalue2.value;
      }
    </script>
    
    
    
      Search By  <input type="text" name="searchvalue1" id="searchvalue1" autocomplete='off' placeholder="item">
    
    item2 #<input name="radio" type="radio" value=""  onClick="submitvalues();" >
    
    
    
    item 2 <input name="radio" type="radio" value="" onclick="submitvalue2();">
    
    
    Code (markup):

    This is a rough draft but this is a idea of what I used... It may be a bit off.
     
    xbat, Nov 29, 2014 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #4
    This is another STUNNING example of "JS for nothing"... there is NO reason to be using radio buttons or scripting on something so simple other than a complete and utter ignorance of how forms work, how HTML works, or even the proper markup for a form. (see your lack of labels and fieldsets)

    <form action="/page.php" id="multiSearch" method="get">
    	<fieldset>
    		<label for="multiSearch_terms">Search For:</label>
    		<input type="text" name="searchterms" id="multiSearch_terms" />
    	</fieldset>
    	<fieldset class="submits">
    		<legend>Search By:</legend>
    		<input type="submit" name="searchBy" value="id" />
    		<input type="submit" name="searchBy" value="Something Else" />
    		<input type="submit" name="searchBy" value="Something Else 3" />
    		<input type="submit" name="searchBy" value="Other Thing" />
    	</fieldset>
    </form>
    Code (markup):
    Try taking a look at what clicking on those different submit sharing the same name spits out for a URI... There's a reason 90%+ of the time someone says "Use JavaScript!" you probably shouldn't. Remember the unwritten rule of javascript -- if you can't make it work without scripting FIRST, you likely have no business adding scripting to it! This is quadruply important for things like FORMS since there are users who don't trust scripting and browse with it disabled and/or blocked ON PURPOSE. You shouldn't alienate those users with scripttardery that you don't need!

    JS for nothing and your scripts for free, that ain't working, that's NOT how you do it.
     
    Last edited: Nov 30, 2014
    deathshadow, Nov 30, 2014 IP
  5. xbat

    xbat Well-Known Member

    Messages:
    326
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    105
    #5
    Sorry I'm not sure what your getting at. Also forgot a second text input box.
     
    xbat, Nov 30, 2014 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #6
    My point was that if you want the form to submit when a radio button is clicked, DON'T USE RADIO BUTTONS -- you want a submit, USE A SUBMIT.

    IF you entered "test" in the input[text] clicked on the first submit in my example, it would submit the form to:
    /page.php?searchTerms=text&searchBy=id

    If you clicked on the second submit:
    /page.php?searchTerms=text&searchBy=Something%20Else

    You don't need javascript just to do what you are asking for... Likewise I saw no reason to have those separate text inputs since you're not using them the same time as the others.

    You are using JavaScript for no legitimate reason other than pissing on your accessibility!
     
    deathshadow, Nov 30, 2014 IP
  7. xbat

    xbat Well-Known Member

    Messages:
    326
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    105
    #7
    Thank you for explaining. I understand what you are saying with the submit button. I guess the best way to put it is the person who wanted the item designed was looking to save a few extra seconds out of the day then a few extra minutes out the month and a few more minutes out of the year. Thats why we went with the onlcick radio button.
     
    xbat, Nov 30, 2014 IP
  8. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #8
    @xbat - did you load up a page with @deathshadow's code?

    I did

    upload_2014-12-1_14-21-41.png

    I put some line breaks in yours just to try and get a feel for what you are trying to do. 4 radio buttons but only 3 inputs confused me.

    From what I can see the user will put some text in a box and click to search. Rather than doing a universal search of all fields the user needs to specify what type of search it is.

    It makes sense to have a single text box that serves multiple purposes since the user can only enter one text string at a time anyway. Then clicking the right submit button will send the request to the server which would need to know which radio button was clicked so it might as well as which submit button was clicked. No slower and hopefully lots easier for your users.
     
    sarahk, Nov 30, 2014 IP
  9. xbat

    xbat Well-Known Member

    Messages:
    326
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    105
    #9
    Sorry that was my mistake. You can use one text field or you can use two text fields at once. You have two inputs. One for just colors for example, then the other is for shapes. So you would have one radio button to search for colors. Or you could use both text inputs for colors and shapes, etc. Yea I guess I could use buttons instead of radio buttons.. My biggest thing from the beginning was just combining the too.
     
    xbat, Nov 30, 2014 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #10
    If you are submitting for multiple textareas, how are you using more than one radio button at a time? Doesn't make any sense.
     
    deathshadow, Nov 30, 2014 IP
  11. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #11
    why not just let people enter in the one box and then explode the text and search globally on both?

    so if I type in "red blue" then it searches for red and blue and returns items that are both red and blue or that are either red or blue - that will depend on the data you have and we don't know how it's setup
    if I type in red square then it searches for red and square
     
    sarahk, Nov 30, 2014 IP
  12. xbat

    xbat Well-Known Member

    Messages:
    326
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    105
    #12
    Sorry for my english. I am using one radio button. I give them the option to use more than text box input.
     
    xbat, Nov 30, 2014 IP
  13. xbat

    xbat Well-Known Member

    Messages:
    326
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    105
    #13
    Any suggestions on how to explode? I can't do anything on the amount of characters because they may change
     
    xbat, Nov 30, 2014 IP
  14. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #14
    this would be my longhand way of doing it
    //getCleanVarFromPost is whatever you are doing to ensure the value entered isn't a sql injection etc
    $searchterms = getCleanVarFromPost('searchterms');
    
    // just an example. If you put words like and in the array make sure there are spaces either side or words like sand will get messed up
    $strip = array(',','-','.','_',' and ');
    $searchterms = str_replace($strip, ' ', $searchterms);
    
    $bits = explode(' ',$searchterms);
    var_dump($bits);
    PHP:
     
    sarahk, Nov 30, 2014 IP
  15. xbat

    xbat Well-Known Member

    Messages:
    326
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    105
    #15
    Thank you. I really do appreciate the effort. However some things do have more than one space. With the way how it was originally built and they setup the data that would not bring up the correct results.
     
    xbat, Nov 30, 2014 IP
  16. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #16
    you mean the things people can type in?
    can you give us some sample data?
    if it's really restrictive are you better having selects with the options rather than freeform text entry boxes?
     
    sarahk, Nov 30, 2014 IP
  17. xbat

    xbat Well-Known Member

    Messages:
    326
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    105
    #17

    Its really not that big of a problem.. It was built weeks ago I just finally decided to reply. But if you are interested..

    First box ( blue white ) <- color combinations , and yes there are made up colors For example Blue-eddie
    Second box ( triangle) or (triangle square) Or made up shapes..

    The only way I honesty can see around this is if they matched off of a database that was already saved..
     
    xbat, Nov 30, 2014 IP
  18. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #18
    So why not query the database to find the colours and shapes and have those as selects?

    You can even have the choice from one impacting on the choices available for the next (more scriptardery :))
     
    sarahk, Nov 30, 2014 IP