你如何将JavaScript表单隐藏在按钮内?

huangapple go评论68阅读模式
英文:

How can I hide a javascript form inside a button?

问题

我将为您翻译您提供的代码部分:

我尝试创建一个按钮,供我的用户用于确认选择。

到目前为止,我已经有了按钮和一个表单。该表单是必要的部分,因为它将包含工具提供程序需要连接用户选择与他们提供的答案的信息。

我需要帮助隐藏选择框并预先选择“TRUE”,因此一旦用户点击按钮,脚本将运行并获得所需的结果。理想情况下,“TRUE”应该是唯一的选项,因为我将每个按钮只有一个选项。

这是我的代码:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->
    
function onbeforesubmit()
{
return true;
}

    var error;
var form_lanuage = 'en';

function CheckInputs()
{
    var check_ok = true;
    error = "Wrong input!\n";
    if(check_ok == false)
        alert(error);
    return check_ok;
}

function SubmitIt(){
    if(CheckInputs() == true){
        if(window.onbeforesubmit)
        onbeforesubmit();
        document.ProfileForm.submit();
    }
}

function MailIt(){
    if(CheckInputs()){
        if((document.ProfileForm.subject.value=='') || (document.ProfileForm.msg.value==''))
        alert('Bitte füllen Sie die Nachrichtenfelder aus!');
        else
        document.ProfileForm.submit();
    }
}

function FieldWithName(frm, fieldname, numofield)
{
    if(!numofield)
        numofield = 0;
    field_count = 0;
    for(i = 0; i < frm.elements.length; ++i)
    {
        if(frm.elements[i].name == fieldname)
        {
            if(field_count == numofield)
                return frm.elements[i];
            else
                field_count++;
        }
    }
}
function NumChecked(frm, fieldname)
{
    var count = 0;
    for(i = 0; i < frm.elements.length; ++i)
    {
        if(frm.elements[i].name == fieldname && frm.elements[i].checked == true) ++count;
    }
    return count;
}
function NumSel(field)
{
    var count = 0;
    for(i = 0; i < field.length; ++i)
        if(field[i].selected == true) ++count;
    return count;
}

var multiFields = new Array();
var dateFields = new Array();
multiFields["interest[]"] = "interest"
multiFields["optin"] = "optin";
var arr_interest = new Array();

<!-- language: lang-css -->

input[type=text] {
    padding:5px; 
    border:2px solid #ccc; 
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

input[type=text]:focus {
    border-color:#333;
}

input[type=button] {
    padding:15px 100px; 
    background:#000000; 
    border:0 none;
    cursor:pointer;
    -webkit-border-radius: 4px;
    border-radius: 4px; 
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    font-family: 'trade-gothic-next', Helvetica, Arial, sans-serif;
}

input[type=button]:hover {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 1px;
}

<!-- language: lang-html -->

<body onload="preFill()">
<form name="ProfileForm" onsubmit="return CheckInputs();" action="https://test.com/u/register.php" method=get>
<input type=hidden name="CID" value="1234567890"><input type=hidden name="SID" value=""><input type=hidden name="UID" value="{{contact.uid}}"><input type=hidden name="f" value="444"><input type=hidden name="p" value="2"><input type=hidden name="a" value="r"><input type=hidden name="el" value=""><input type=hidden name="llid" value=""><input type=hidden name="c" value=""><input type=hidden name="counted" value=""><input type=hidden name="RID" value=""><input type=hidden name="mailnow" value="">repermission_optin:<select name="inp_7449" size=1><option value=""> </option><option value="1">TRUE</option><option value="2">FALSE</option></select><br>
<input aria-label='Register' tabindex='993' type=button onclick="javascript:SubmitIt()" name="submit1" value="Register"></form>

<!-- end snippet -->

希望这可以帮助您理解代码。如果您有其他问题或需要进一步的翻译,请随时提问。

英文:

I'm trying to build a button which my users can use to confirm a choice.

So far, I have the button and a form. The form is a necessary part of this, since it will have information that the tool provider needs to connect the user's choice with the answer they give..

I need help hiding the selection box and having "TRUE" pre-selected, so once the user clicks on the button, the script will run and have the desired outcome. Ideally, "TRUE" should be the only option, since I'll have one option per button.

Here is my code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function onbeforesubmit()
{
return true;
}
var error;
var form_lanuage = &#39;en&#39;;
function CheckInputs()
{
var check_ok = true;
error = &quot;Wrong input!\n&quot;;
if(check_ok == false)
alert(error);
return check_ok;
}
function SubmitIt(){
if(CheckInputs() == true){
if(window.onbeforesubmit)
onbeforesubmit();
document.ProfileForm.submit();
}
}
function MailIt(){
if(CheckInputs()){
if((document.ProfileForm.subject.value==&#39;&#39;) || (document.ProfileForm.msg.value==&#39;&#39;))
alert(&#39;Bitte f\u00fcr Sie die Nachrichtenfelder aus!&#39;);
else
document.ProfileForm.submit();
}
}
function FieldWithName(frm, fieldname, numofield)
{
if(!numofield)
numofield = 0;
field_count = 0;
for(i = 0; i &lt; frm.elements.length; ++i)
{
if(frm.elements[i].name == fieldname)
{
if(field_count == numofield)
return frm.elements[i];
else
field_count++;
}
}
}
function NumChecked(frm, fieldname)
{
var count = 0;
for(i = 0; i &lt; frm.elements.length; ++i)
{
if(frm.elements[i].name == fieldname &amp;&amp; frm.elements[i].checked == true) ++count;
}
return count;
}
function NumSel(field)
{
var count = 0;
for(i = 0; i &lt; field.length; ++i)
if(field[i].selected == true) ++count;
return count;
}
var multiFields = new Array();
var dateFields = new Array();
multiFields[&quot;interest[]&quot;] = &quot;interest&quot;
multiFields[&quot;optin&quot;] = &quot;optin&quot;
var arr_interest = new Array();

<!-- language: lang-css -->

input[type=text] {
padding:5px; 
border:2px solid #ccc; 
-webkit-border-radius: 5px;
border-radius: 5px;
}
input[type=text]:focus {
border-color:#333;
}
input[type=button] {
padding:15px 100px; 
background:#000000; 
border:0 none;
cursor:pointer;
-webkit-border-radius: 4px;
border-radius: 4px; 
color: #ffffff;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
font-family: &#39;trade-gothic-next&#39;, Helvetica, Arial, sans-serif;
}
input[type=button]:hover {
border-radius: 4px;
background-color: rgba(0, 0, 0, 0.5);
box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 1px;
}

<!-- language: lang-html -->

&lt;body onload=&quot;preFill()&quot;&gt;
&lt;form name=&quot;ProfileForm&quot; onsubmit=&quot;return CheckInputs();&quot; action=&quot;https://test.com/u/register.php&quot; method=get&gt;
&lt;input type=hidden name=&quot;CID&quot; value=&quot;1234567890&quot;&gt;&lt;input type=hidden name=&quot;SID&quot; value=&quot;&quot;&gt;&lt;input type=hidden name=&quot;UID&quot; value=&quot;{{contact.uid}}&quot;&gt;&lt;input type=hidden name=&quot;f&quot; value=&quot;444&quot;&gt;&lt;input type=hidden name=&quot;p&quot; value=&quot;2&quot;&gt;&lt;input type=hidden name=&quot;a&quot; value=&quot;r&quot;&gt;&lt;input type=hidden name=&quot;el&quot; value=&quot;&quot;&gt;&lt;input type=hidden name=&quot;llid&quot; value=&quot;&quot;&gt;&lt;input type=hidden name=&quot;c&quot; value=&quot;&quot;&gt;&lt;input type=hidden name=&quot;counted&quot; value=&quot;&quot;&gt;&lt;input type=hidden name=&quot;RID&quot; value=&quot;&quot;&gt;&lt;input type=hidden name=&quot;mailnow&quot; value=&quot;&quot;&gt;repermission_optin:&lt;select name=&quot;inp_7449&quot; size=1&gt;&lt;option value=&quot;&quot;&gt; &lt;/option&gt;&lt;option value=&quot;1&quot;&gt;TRUE&lt;/option&gt;&lt;option value=&quot;2&quot;&gt;FALSE&lt;/option&gt;&lt;/select&gt;&lt;br&gt;
&lt;input aria-label=&#39;Register&#39; tabindex=&#39;993&#39; type=button onclick=&quot;javascript:SubmitIt()&quot; name=&quot;submit1&quot; value=&quot;Register&quot;&gt;&lt;/form&gt;

<!-- end snippet -->

答案1

得分: 0

删除第一个选项: 用以下内容替换

<select name="inp_7449" size="1"><option value=""></option><option value="1">TRUE</option><option value="2">FALSE</option></select>

替换为

<select name="inp_7449" size="1"><option value="1">TRUE</option><option value="2">FALSE</option></select>
英文:

remove the first option: replace

&lt;select name=&quot;inp_7449&quot; size=&quot;1&quot;&gt;&lt;option value=&quot;&quot;&gt; &lt;/option&gt;&lt;option value=&quot;1&quot;&gt;TRUE&lt;/option&gt;&lt;option value=&quot;2&quot;&gt;FALSE&lt;/option&gt;&lt;/select&gt;

with

&lt;select name=&quot;inp_7449&quot; size=&quot;1&quot;&gt;&lt;option value=&quot;1&quot;&gt;TRUE&lt;/option&gt;&lt;option value=&quot;2&quot;&gt;FALSE&lt;/option&gt;&lt;/select&gt;

huangapple
  • 本文由 发表于 2023年5月25日 21:16:59
  • 转载请务必保留本文链接:https://go.coder-hub.com/76332732.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定