Board index   FAQ   Search  
Register  Login
Board index PHP PHP Scripts
Print view

button and selectbox

Links for php scripts

Moderators: macek, egami, gesf

Post a reply

button and selectbox

Postby tweety » Sun Mar 10, 2013 9:44 pm

Hi,
Please tell me, i've to do 2 select boxes for font name, size and a button for font.I am also having more than a textarea. I f i'm entering a text like hi welcome. I've to select the value from the select box.After selecting the values, i'll select the entered text like welcome and i've to click the font button. By clicking the font button my selected text will be seen like <font size=3 name=times new roman>welcome<font>.
I dont know how to do this. Please help me.


Simply, i need to move the event handler from the select element to a button, and have it call a function to get all of the values from the various dropdowns and build the markup text to wrap the selected text with.
How to do this please tell me.
tweety
New php-forum User
New php-forum User
 
Posts: 3
Joined: Sun Mar 10, 2013 9:21 pm
Top

Re: button and selectbox

Postby seandisanti » Tue Mar 12, 2013 8:30 am

Jquery can do what you're looking for relatively easily. here's a little example of using a button to modify a paragraph. I'll leave using a select box to specify allowable style options as an exercise for you, but http://www.w3schools.com/jquery/ has all of the tutorials you need
Code: Select all

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").css("color","red");
    $("p").css("font-weight","bold");
    $("p").css("font-size","2em");
  });
});
</script>
</head>

<body>
<button>Click to make text larger and red</button>
<br><br>
</body>
</html>

seandisanti
php-forum Fan User
php-forum Fan User
 
Posts: 679
Joined: Mon Oct 01, 2012 12:32 pm
Top

Re: button and selectbox

Postby tweety » Tue Mar 12, 2013 8:14 pm

Thanks seandisanti.I made the selectbox and button.Now what i am trying to do is for example, take our forum's reply text area. The fields seen are bold,italic,underline,quote etc and finally font color. I want to do like that in my form. By clicking the font color button various colors are seen. I want to do like that.please help me how to do that.
tweety
New php-forum User
New php-forum User
 
Posts: 3
Joined: Sun Mar 10, 2013 9:21 pm
Top

Re: button and selectbox

Postby seandisanti » Wed Mar 13, 2013 7:58 am

Show the code that you've already got
seandisanti
php-forum Fan User
php-forum Fan User
 
Posts: 679
Joined: Mon Oct 01, 2012 12:32 pm
Top

Re: button and selectbox

Postby tweety » Wed Mar 13, 2013 8:57 pm

Code: Select all
]
<script type="text/javascript">
function changeSize(size){
document.getElementById("ss").value;
}
function updateh1family(name) {
document.getElementById("aa").value;
}
 
function font(elems,tag,size,name){
var i=0, el, selectedText, newText;
while(el=elems[i++]){
selectedText=document.selection?document.selection.createRange().text:el.value.substring(el.selectionStart,el.selectionEnd);// IE:Moz
if(selectedText!=''){
   newText='<'+tag+' size='+size+' face='+name+'>'+selectedText+'</'+tag+'>';
      if(document.selection){//IE
      document.selection.createRange().text=newText;
      return;//prevents the double replacement
      }
      else{//Moz
      el.value=el.value.substring(0,el.selectionStart)+newText+el.value.substring(el.selectionEnd,el.value.length);
      }
   }
}
}
</script>
<form accept-charset="utf-8" action="a.php" method="post" name="fillup" enctype="multipart/form-data" onSubmit="return validate();">
<table align="center" border="1" width="850" height="500" bgcolor="FFF5EE" >
<tr><td>
   <table align="center" bgcolor="">
      <tr><td align="center" colspan="10"><img src="img/laugh.gif" alt="Smiley" /></td></tr>
      <tr><td align="center" style="color:#FF0000; text-decoration:blink;" colspan="10" ><b><?php echo $qtype1;?></b></td></tr>
      <tr><td colspan="10">&nbsp;</td></tr>
      <tr><td align="center" colspan="10"><img src="img/subst.png" title="substring" onclick="formatText ([ques1,ques2,opt1,opt2,opt3,opt4],'sub');">
      <img src="img/supst.png" title="superstring" onclick="formatText1 ([ques1,ques2,opt1,opt2,opt3,opt4],'sup');">
      <img src="img/mover.png" title="mover,mout" onclick="mover ([ques1,ques2,opt1,opt2,opt3,opt4],'mover','mout');"></td></tr>

Font size:
<select name="sizeselect" id="ss" onchange="changeSize(this.value)">
 <option value="10">10</option>
 <option value="13">13</option>
 <option value="15">15</option>
 </select>
<input type="button" value="Font" onclick="font ([ques1,ques2,opt1,opt2,opt3,opt4],'font',document.getElementById('ss').value,document.getElementById('aa').value,document.getElementById('colorPalDemo').style.fontColor);">
<select name="selectFontFamily" id="aa" onchange="updateh1family(this.value)">
    <option value="Serif">Serif</option>
    <option value="Arial">Arial</option>
    <option value="Sans-Serif">Sans-Serif</option>
     <option value="Times New Roman">Times New Roman</option>                   
  </select>

      
      <tr>
         <td>
         Statement1<font color="#0000FF">*</font>
         </td>
         <td>
         :
         </td>
         
         <td><textarea name="ques1" id="ques1" cols="25" rows="5" style="width: 220px; height: 100px;"></textarea>
         </td>
         <td>
            <table>
            <tr>
            <td width="10">
            <div style="background-image:url(img/mic1_30.jpg); width:30px; height:25px;" >
            <input type="file" id="quest_wav1" name="quest_wav1"  style="opacity:0;-moz-opacity:0 ;filter:alpha(opacity: 0);" size="1"  />
            </div>
            </td>
            </tr>
            <tr>
            <td width="10">
            <div style="background-image:url(img/img1.jpeg); width:30px; height:30px;" >
            <input type="file" id="quest_img1" name="quest_img1"  style="opacity:0;-moz-opacity:0 ;filter:alpha(opacity: 0);" size="1"   />
            </div>
            </td>
            </tr>
            </table>
         </td>
         <td>&nbsp;</td>
         <td>
         Statement2<font color="#0000FF">*</font>
         </td>
         <td>
         :
         </td>
         <td><textarea name="ques2" id="ques2" cols="25" rows="5" style="width: 220px; height: 100px;"></textarea>
         </td>
         <td>&nbsp;</td>
         <td>
            <table>
            <tr>
            <td width="10">
            <div style="background-image:url(img/mic1_30.jpg); width:30px; height:25px;" >
            <input type="file" id="quest_wav2" name="quest_wav2"  style="opacity:0;-moz-opacity:0 ;filter:alpha(opacity: 0);" size="1"  />
            </div>
            </td>
            </tr>
            <tr>
            <td width="10">
            <div style="background-image:url(img/img1.jpeg); width:30px; height:30px;" >
            <input type="file" id="quest_img2" name="quest_img2"  style="opacity:0;-moz-opacity:0 ;filter:alpha(opacity: 0); " size="1"   />
            </div>
            </td>
            </tr>
            </table>
         </td>
         
      </tr>
      <tr>
         <td>
         Option1<font color="red">*</font>
         </td>
         <td>
         :
         </td>
         
         <td>
         <textarea name="opt1" id="opt1" cols="25" rows="3" style="width: 220px; height: 100px;"></textarea>
         </td>
         <td>
            <table>
            <tr>
            <td width="10">
            <div style="background-image:url(img/mic1_30.jpg); width:30px; height:25px;" >
            <input type="file" id="opt_wav1" name="opt_wav1"  style="opacity:0;-moz-opacity:0 ;filter:alpha(opacity: 0);" size="1"  />
            </div>
            </td>
            </tr>
            <tr>
            <td width="10">
            <div style="background-image:url(img/img1.jpeg); width:30px; height:30px;" >
            <input type="file" id="opt_img1" name="opt_img1"  style="opacity:0;-moz-opacity:0 ;filter:alpha(opacity: 0);" size="1"   />
            </div>
            </td>
            </tr>
            </table>
         </td>
         
      <tr><td colspan="10">&nbsp;&nbsp;</td></tr>
      <tr>
        <td><font color="#FF0000"><b>Note :</b></font></td><td  colspan="4" align="center"><font color="#0000FF"> *</font> Mandatory Fields (Either one)</td>
        <td colspan="5" align="center"><font color="#FF0000">*</font> Mandatory Fields</td></tr>
        <td colspan="3" align="left"><img src="img/mic1_30.jpg" alt="Upload Wave" />Upload WAVE</td>
        <td colspan="4" align="left"><img src="img/img1.jpeg" alt="Upload Image" />Upload IMAGE</td>
      <tr>
      <tr><td colspan="10">&nbsp;&nbsp;</td></tr>
         <td colspan="10" align="center">
         <input type="submit" name="add" value="Add" style="background-color:#FFFF00; font:Arial, Helvetica, sans-serif; color:#FF0000"/>&nbsp;&nbsp;&nbsp;&nbsp;
         <input type="reset" name="clear" value="Clear" style="background-color:#FFFF00; font:Arial, Helvetica, sans-serif; color:#FF0000"  />
         </td>
      </tr>
      
   </table>

</td></tr>
</table>
</form>



The above is my code.
tweety
New php-forum User
New php-forum User
 
Posts: 3
Joined: Sun Mar 10, 2013 9:21 pm
Top
Post a reply

Return to PHP Scripts

Who is online

Users browsing this forum: Google Feedfetcher and 1 guest

Sponsored by Sitebuilder Web hosting and Traduzioni Italiano Rumeno and antispam for cPanel.

Powered by phpBB® Forum Software © phpBB Group
© Supernova Style by Boardtalk.net Originally by Christian Bullock