提交输入显示第二个输入,但两个字段都发送到处理程序

时间:2017-07-16 22:44:44

标签: jquery html css forms

我有一个包含两个字段的简单表单。我希望首先隐藏第二个字段,然后在第一个字段上单击按钮时显示,但是表单处理程序将两个字段的内容发送给我。

我得到的HTML就是:

 <ContentPage.Content>
        <StackLayout Padding="20">

            <StackLayout Orientation="Horizontal" Spacing="2" HorizontalOptions="Center">
                <Label Text="Connect !" FontSize="25"/>
            </StackLayout>

            <Label Text="Name" FontSize="25"/>
            <Entry x:Name="MyName" Placeholder="Your Name please" ></Entry>

            <Label Text="Adress Mail" FontSize="25"/>
            <Entry x:Name="Mymail" Placeholder="Your Adress mail please"></Entry>

            <Label Text="Profession" FontSize="25"/>
            <Entry x:Name="MyProfession" Placeholder="Your Profession please" ></Entry>

            <Label Text="Your Password" FontSize="25"/>
            <Entry IsPassword="true" x:Name="MyPassword" Placeholder="your password please" FontSize="Medium"></Entry>    

            <StackLayout Orientation="Horizontal">
                <Button Text="OK" BackgroundColor="Gray" TextColor="White"   FontSize="25"/>
            </StackLayout>
        </StackLayout>
    </ContentPage.Content>

我喜欢第二个字段,要隐藏的电子邮件字段&#34;背后&#34; URL字段,当填写并单击URL字段时,电子邮件字段将替换它,并且在提交电子邮件字段时,将提交表单并发送两个字段。我对jQuery不太满意;这是可以做到的吗?

1 个答案:

答案 0 :(得分:1)

// css
 .hidden{
  display: none;
}
// html
<form method="post" name="contact_form" action="submit.php">
            <input class="url" name="URL" type="text" placeholder="Website URL (www.yoursite.com)">
            <input class='url' type="submit" value="Submit!">
            <input class='hidden' name="email" type="text" placeholder="Your Email Address">
            <input type="submit" class="hidden" value="Send!">
</form>


//js

    function stopSubm(){
      $('form').one("submit", function(e){
        e.preventDefault();
        var count= 0;
        if (count > 0 ){
          $(this).submit();
        }
        $('.url').hide();
        $('.hidden').removeClass('hidden');
        count++;


    });

  };
  stopSubm();