Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

Form - Submit - Radio Button


  • Please log in to reply
18 replies to this topic

#1 patbox

patbox

  • Members
  • 456 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:04:26 AM

Posted 10 April 2009 - 01:13 PM

I have a from that sends a value to certain page, e.g. www.example1.com. The code is here:

<form method="get" action="http://www.example1.com" name="example"> 
<input type="text" name="q" size="56" maxlength="255" value="" />	  
<input type="submit" value="submit" />

This works well, but next I wanted to give a an option to to submit the value either to www.exampe1.com or to www.example2.com, so I put a radio buttons there:

<form method="get" action="http://www.example1.com" name="example"> 
<input type="text" name="abc" size="56" maxlength="255" value="" />	  
<input type="submit" value="submit" />	 

<br>

Example 1: <input type="radio" name="xyz" value="http://www.example1.com" checked="checked">
Example 2: <input type="radio" name="xyz" value="http://www.example2.com">

Of course this does not work. But I can not figure out, how to make it work in away, that if the users:

1) Checks the radio box for Example 1, the value vill be submitted to www.example1.com
2) Checks the radio box for Example 1, the value vill be submitted to www.example2.com

:thumbsup:

P.S. I hope I explained it well, but if not, just let me know, I will try to explain again what I wanted to do with this.
Message from Patbox: I AM LOOKING FOR A GIRLFRIEND (PM if interested) :-)

BC AdBot (Login to Remove)

 


#2 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:09:26 PM

Posted 10 April 2009 - 01:50 PM

The URL of where the form is to be sent is hard-coded into the html, and HTML does not have the ability to self modify. In other words, you can't do it using HTML alone. What you need to do is get rid of the form element completely. When the 'submit' button is clicked, you want it to call a javascript function. The javascript function then needs to see which radio button is checked. Once it knows which radio button is checked, then it needs to get the rest of the values, and send send an HTTP request to that URL.

I should point out though that an address like "http://www.example1.com" is not going to work unless there is a server sitting at that address listening for things like http requests. :thumbsup:

#3 patbox

patbox
  • Topic Starter

  • Members
  • 456 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:04:26 AM

Posted 10 April 2009 - 02:01 PM

Good answer. That is why I could not figure it out - because it is not possible. :-)

My next HTML option or idea is, that if the other radio button is clicked the an action to load a different html is triggered.

I.e. I woul have two html files 1.html and 2.html - when I click the Example 2 radio button, the 2.html will load automatically instead of 1.html. (And the other way around). Would that be possible?
Message from Patbox: I AM LOOKING FOR A GIRLFRIEND (PM if interested) :-)

#4 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:09:26 PM

Posted 10 April 2009 - 02:26 PM

No. HTML is a mark up language. It is used for displaying content. That is all that it can do. It can not add, subtract, loop, reason, or compare. It can not access itself to see what value an element holds, any more than an envelope can read the paper contained inside. You can have two buttons that will do it though, but you can't have them in the same form, or again, the buttons will always default to whatever URL you hardcoded into the form element. Anyway, it is not valid to have two submit buttons in a single form.

#5 patbox

patbox
  • Topic Starter

  • Members
  • 456 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:04:26 AM

Posted 10 April 2009 - 03:11 PM

:thumbsup:

And I cant even do a a separate from that will load a different html when I click the radio box? It needs to be a button? A radio box can not behave like a button?
Message from Patbox: I AM LOOKING FOR A GIRLFRIEND (PM if interested) :-)

#6 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:09:26 PM

Posted 10 April 2009 - 03:26 PM

If you attach an onclick or onchange javascript event handler, then you can have it load a web page using an HTTP request from the javascript. You do not need a form to load a web page; all you need is an anchor tag. A radio button is a button; you just want it to behave in a way that it was not designed, but you can fake it as I described above. A radio button is for making a single selection out of a group, and that is all it does.

<a href="www.google.com">Google</a>

If you are trying to send information back to a web page, then you need to use a form. If there are two different places the form information can be sent to, then you have a couple of choices, only one of which does not use javascript.

1) You can have the data in two different forms, with two different submit buttons.
2) You can do like I described at the beginning of this post.
3) You can do like I described in my first response.

There is no other way.

#7 patbox

patbox
  • Topic Starter

  • Members
  • 456 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:04:26 AM

Posted 10 April 2009 - 03:39 PM

Now I understand better. Thanks.

Option 1:
I could do that, but that means having two "input text forms" on the same page. It confuses the user and take space.

Option 2:
I like it. It seems simple. Could you post some sample code how to do it?

Option 3:
This is the best, but requires more of java script programming.

:-)
Message from Patbox: I AM LOOKING FOR A GIRLFRIEND (PM if interested) :-)

#8 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:09:26 PM

Posted 10 April 2009 - 04:19 PM

Options 2 and 3 use the same javascript, they just use different event handlers, and right now, I am trying to write some Minix code to do signal handling and blocking, so I really don't have time to write code to help you.

Start with this: First example
How to load a web page
Which radio buttons are checked
Get elements from a form

#9 patbox

patbox
  • Topic Starter

  • Members
  • 456 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:04:26 AM

Posted 11 April 2009 - 07:53 PM

So what I did is the second option, when the radio button is clicked the following function is called, and the html is replaced by another html with different form:

<script type="text/javascript">
function zmena()
{
location.href="http://www.mywebpage/index2.html"
}
</script>

It looks as if you would be using the radio buttions, because the html loads quickly.

The only problem is that if you fill something in the form, after clicking the radio button another html is loaded and the text disappears. Not such a big deal, but not yet option 3, which would require some more javascript knowledge.
Message from Patbox: I AM LOOKING FOR A GIRLFRIEND (PM if interested) :-)

#10 patbox

patbox
  • Topic Starter

  • Members
  • 456 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:04:26 AM

Posted 13 April 2009 - 02:32 PM

I was thinking to set up a second html on my page that will listen to a form from previous page:

File1.html

form 1 action="File2.html"
input text=""
input radio bution=""
/form

File2.html

if radio button="1" execute HTML 1 using input text from from 1
if radio button="2" execute HTML 2 using input text from form 1
if radio button="3" execute HTML 3 using input text from form 1

---

The only problem is that I have no idea what to do or where to start with coding the File2.html. I am sure there must be a simple way to do this.
Message from Patbox: I AM LOOKING FOR A GIRLFRIEND (PM if interested) :-)

#11 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:09:26 PM

Posted 13 April 2009 - 02:41 PM

HTML is stateless. It does not keep track of information between pages. Doing it with javascript is possible. This post explains one way to do what you want.

If you want to use javascript, then you will need to put all of your page content in an iframe. When the button is clicked, the javascript pulls the values from teh form, then the next page is loaded inside the iframe. Once the page is loaded, then the javascript needs to repopulate the HTML. Otherwise when you load a new page, the javascript is gone, along with all of the information that it was saving.

#12 patbox

patbox
  • Topic Starter

  • Members
  • 456 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:04:26 AM

Posted 13 April 2009 - 10:46 PM

What I mean is that I submit a form to the next page:

File1.html -> submit "hello" and "1" to File2.html

outcome: http://www.example.com/file2.html?text=hello&radio=1

Next I need to access the values somehow in file2.html and javascript must take over:

if radio=1 ... submit text=hello to page www.page1.com ...(outcome: www.page1.com/value?text=hello)

if radio=2 ... submit text=hello to page www.page2.com ... (outcome: www.page2.com/value?text=hello)

:thumbsup:

(Else I would need to create the whole form in javascript in file1, sending it directly www.page1.com or www.page2.com, but I dont know how to do javascript forms).

Edited by patbox, 13 April 2009 - 10:47 PM.

Message from Patbox: I AM LOOKING FOR A GIRLFRIEND (PM if interested) :-)

#13 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:09:26 PM

Posted 13 April 2009 - 11:24 PM

I understand what you want to do; I am just not explaining well why it will not work the way that you want. When you fill out a form and hit the submit button, the data in the form is encapsulated and sent to the server. There has to be some type of program on the server to get that information and process it. It can be anything, Perl, asp, php, jsp, or any other of a number of server side technologies. Javascript only runs on your machine, the client side. Javascript is not a server side language. When the data gets to the server, the application there puts the information into the web page, and it delivers the web page back to you with the information that you want filled in. You can not submit form information directly to a page containing only HTML becasue HTML does not know what to do with it. HTML only knows how to display content. It does not know how to process data, it does not know how to communicate with other web pages, and it does nothing while it is on the server. It only does its thing when it hits your browser.

That is why I suggested using javascript and Iframes. Using IFrames, you can have a header for your page, and a footer, and the content in between is an iframe. I'll try some crappy ascii art and see how this goes.

----------------
| HEADER |
----------------
| |
| IFRAMEA |
----------------
| FOOTER |
----------------

The header consists of whatever the title of your web page is; On BC, it is the logo and the tabs at the top. Those never change, no matter which page you are on. The Footer is the info at the bottom such as the copyright information. That never changes either. So the steps would be like this:
1) Your user hits the submit button
2) A javascript function is called that gets the content of the form that is displayed inside the Iframe.
3) The same function loads new content into the IFrame (page2.html).
4) Once the page is loaded into the IFrame, the javascript then takes the data and populates the new form. You do not lose the data because you are only reloading part of the page.

*********************

Using javascript to get data from a form is trivial.

function loadPage(){
   var name = Document.getElementById("name");
   var phone = Document.getElementById("phone");
}

Once the IFrame is loaded (again, with a javascript call that you can find in about 5 seconds on Google), then you populate the html by using the values that you have stored in the javascript. I don't know how you want to display the data in the new page, so I am not going to give an example, but it is trivial also.

That's it. That is the only way that you are going to get data from a form in one HTML page to another without using server side scripting.

In your example: www.page2.com/value?text=hello, you are missing a part of the code. You can't just pas a value to the server. You have to pass it to a program running on the server, so it would be something like www.page2.com/getvalue.php?text=hello

Those are your options. I hope I was more clear about it this time.

#14 burn1337

burn1337

  • Banned
  • 311 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:07:26 PM

Posted 14 April 2009 - 02:02 PM

Here is a way that could work....
<script>
function Radio1() {
   document.write('</td></tr><tr><td><input type=text name=one>');
}

function Radio2() {
   document.write('</td></tr><tr><td><input type=text name=two>');
}

function Radio3() {
   document.write('</td></tr><tr><td><input type=text name=three>');
}
</script>
<table><form method=post action=action.html><tr><td>
<input type=radio name=what value=is onclick="Radio1();">
<input type=radio name=what value=not onclick="Radio2();">
<input type=radio name=what value=who onclick="Radio3();">
</td></tr></form></table>

This isn't the exact example of what my professor wrote up on the white board, but I do know it is very similar... I did this to help explain my previous posts...
After looking at this and thinking back about it, I don't think she used but one single row and column and just added a br...

Also as for using the post data to switch between which pages you want it to submit to... You can do it with Php, and Javascript... I do recall there being a way you can use the values with html, but I do not believe you can do a program type of structure without one of the previous mentioned two... You can do a switch on the value of the radio button and have it determine where to send the data, or what to use to process the data... Though as for sending the data to another page entirely, without using something like the php function "header();", I think you would have to reset and resend the post data and then have the form set to that in particular page...
Though I personally suggest just use one page for the processing of the form, and then send what ever page you want to send from there...

Groovicus, I guess if you feel that this is not an applicable way of going about it, then just delete it...

#15 patbox

patbox
  • Topic Starter

  • Members
  • 456 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:04:26 AM

Posted 14 April 2009 - 04:02 PM

@burn1337

I think your script goes the right way, but it would still need some improvement. The way I want it to look like for the user is this:

<form method=post action="http:www.a.com/action.php">
<input type="text" name="text" size="56" maxlength="255" value="" />
<input type="submit" value="Submit" /><br>
Submit to www.a.com: <input type="radio" name="what" value="a" checked="checked"><br>
Submit to www.b.com: <input type="radio" name="what" value="b"><br>
Submit to www.c.com: <input type="radio" name="what" value="c"><br>
</form>

The user should enter the "text", and then check the radio button where he wants to submit the values, and press enter or submit.

Your script is good, but it requires the user to first click the radio button. I have something similar in place now, when I basically load a new page on radio button click. (ie. index2.html has the desired form for radio button2).

<script type="text/javascript">
function radio2(){location.href="index2.html"}
function radio3(){location.href="index3.html"}
</script>

This works well if the users click the radio button first, and writes the text second. But if the user writes the text first and click the radio button second, index2.html or index3.html loads and the form is again empty.

The result is usable, but not perfect. Look at http://www.google.fr/ ... this is exactly the functionality of text and radio button boxes that I want to achieve.

@groovicus

Thank you for the good explanation of iframes. I learned a lot from it. With iframes there are two issues: 1) even with iframes I need to do some smart javascript code to handle this. 2) External websites, usually do not like to get framed, there were several copyright inflammations cases due to framing other sites. so I am trying to avoid framing other web-site content.
Message from Patbox: I AM LOOKING FOR A GIRLFRIEND (PM if interested) :-)




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users